[]
• new Designer(host
, config?
, spread?
, spreadOptions?
)
Represent a Designer with the specified hosted DOM element, custom config and an existing spread.
example
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var customConfig = {
ribbon: [
{
id: "home",
text: "HOME",
buttonGroups: [
{
label: "Undo",
thumbnailClass: "ribbon-thumbnail-undoRedo",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"undo",
"redo"
]
}
]
}
}
]
}
],
contextMenu: [
"contextMenuCut",
"contextMenuCopy",
],
fileMenu: "fileMenuButton",
sidePanels: [
{
position: "top",
allowResize: true,
command: "formulaBarPanel",
uiTemplate: "formulaBarTemplate"
},
]
};
var customDesigner = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv2"), customConfig);
Name | Type | Description |
---|---|---|
host |
string | HTMLDivElement |
This is the HTML area that the Designer Component mounts. |
config? |
IDesignerConfig |
The designer config object. |
spread? |
Object |
The workbook instance. |
spreadOptions? |
Object |
The workbook initialization options. |
▸ activeRibbonTab(ribbonTabId?
): string
Get or set the designer active ribbon tab Id, the ribbon tab id is in DefaultConfig.
example
// This example will set the designer active ribbon tab after designer initializing.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), undefined, spread);
let currentActiveRibbonTab = designer.activeRibbonTab(); // get the active ribbon tab id.
if (currentActiveRibbonTab !== "insert") {
designer.activeRibbonTab("insert"); // will set the INSERT ribbon tab active.
}
Name | Type | Description |
---|---|---|
ribbonTabId? |
string |
The new active ribbon tab id. |
string
▸ bind(type
, fn?
): void
Binds an event to the designer.
example
//This example binds events.
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
let spreadJsonData = message.data;
if(spreadJsonData.sheetCount >= 3) {
message.cancel = true;
}
};
});
Name | Type | Description |
---|---|---|
type |
string |
The event type. |
fn? |
any |
Specifies the function to run when the event occurs. |
void
▸ destroy(): void
destroy the designer and unbind all events.
example
// This example will destroy the designer after creating a new designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.destroy();
void
▸ getData(key
): any
Get the state or value, there are two types of data, one is local data using only in one component and the other is global data using in the whole designer environment, designer.getData(key) can get the global data storing in the designer by key in where having designer instance.
example
// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
title: "Login",
text: "Login",
iconClass: "ribbon-button-login",
bigButton: true,
commandName: "login",
execute: (context, propertyName) => {
alert('Log in new designer.');
context.setData("isLogIn", true); // setData()
}
};
var getGiftCommand = {
title: "Get gift",
text: "Get gift",
iconClass: "ribbon-button-get-gift",
bigButton: 'true',
commandName: "getGift",
execute: (context, propertyName) => {
let isLogIn = context.getData("isLogIn"); // getData()
if (isLogIn) {
alert("Get gift");
}
else {
alert("Please log in");
}
}
};
config.commandMap = {
login: logInCommand,
getGift: getGiftCommand,
};
var logInCommandGroup = {
label: "Login",
thumbnailClass: "Login",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"Login"
]
}
]
}
};
var getGiftCommandGroup = {
label: "Gift",
thumbnailClass: "Gift",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"getGift"
]
}
]
}
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
}
var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
Name | Type | Description |
---|---|---|
key |
string |
The data name, uniquely identifies one state data. |
any
▸ getWorkbook(): Object
Get the workbook of the existing designer.
example
// This example will get the workbook of an existing designer.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
Object
The workbook of the existing designer.
▸ refresh(): void
Refresh the designer layout and ribbon area.
example
// This example will refresh the designer and ribbon after change size of designer content HTMLElement.
var designerContent = document.getElementById("gc-designer-container");
designerContent.style.width =width + "px";
designerContent.style.height = height + "px";
designer.refresh();
void
▸ setConfig(config
): void
Represents a new designer using the custom config.
example
// This example will set a custom config to an existing designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var config = {
ribbon: [
{
id: "home",
text: "HOME",
buttonGroups: [
{
label: "Undo",
thumbnailClass: "ribbon-thumbnail-undoRedo",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"undo",
"redo"
]
}
]
}
}
]
}
],
contextMenu: [
"contextMenuCut",
"contextMenuCopy",
],
fileMenu: "fileMenuButton",
sidePanels: [
{
position: "top",
allowResize: true,
command: "formulaBarPanel",
uiTemplate: "formulaBarTemplate"
},
]
};
designer.setConfig(config);
Name | Type | Description |
---|---|---|
config |
IDesignerConfig |
The designer config object. |
void
▸ setData(key
, value
): void
Set the state or value, there are two types of data, one is local data using only in one component and the other is global data using in the whole designer environment, designer.setData(key, value) can set the global data storing in the designer by key-value in where having designer instance.
example
// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
title: "Login",
text: "Login",
iconClass: "ribbon-button-login",
bigButton: true,
commandName: "login",
execute: (context, propertyName) => {
alert('Log in new designer.');
context.setData("isLogIn", true); // setData()
}
};
var getGiftCommand = {
title: "Get gift",
text: "Get gift",
iconClass: "ribbon-button-get-gift",
bigButton: 'true',
commandName: "getGift",
execute: (context, propertyName) => {
let isLogIn = context.getData("isLogIn"); // getData()
if (isLogIn) {
alert("Get gift");
}
else {
alert("Please log in");
}
}
};
config.commandMap = {
login: logInCommand,
getGift: getGiftCommand,
};
var logInCommandGroup = {
label: "Login",
thumbnailClass: "Login",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"Login"
]
}
]
}
};
var getGiftCommandGroup = {
label: "Gift",
thumbnailClass: "Gift",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"getGift"
]
}
]
}
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
}
var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
Name | Type | Description |
---|---|---|
key |
string |
The data name, uniquely identifies one state data, if you set same key many times using different value, will only store the latest value. |
value |
any |
The value or state of this data name, could be Object, string or other type. |
void
▸ setWorkbook(spread
): void
Set the spread of designer using an existing spread.
example
// This example will set an existing spread to designer.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.setWorkbook(spread);
Name | Type | Description |
---|---|---|
spread |
Object |
an existing spread using to replace the old spread of designer. |
void
▸ unbind(type
, fn?
): void
Removes the binding of an event to the designer.
example
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
console.log("file has loaded")
});
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);
Name | Type | Description |
---|---|---|
type |
string |
The event type. |
fn? |
any |
Specifies the function for which to remove the binding. |
void
▸ unbindAll(): void
Removes the binding of all events to the designer.
example
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
console.log("file has loaded")
});
designer.unbindAll();
void
▸ Static
RegisterComponent(name
, constructor
): boolean
register custom component
Name | Type | Description |
---|---|---|
name |
string |
component name, you can use it with this name |
constructor |
any |
component class |
boolean
whether register is successfully