[]
Sheets.ContextMenu.MenuView
• new MenuView()
Represents MenuView
▸ createMenuItemElement(menuItemData
): HTMLElement
create menuitem view
example
window.addEventListener('load', function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
activeSheet.setValue(0,0,'please right click');
activeSheet.setValue(1,0,'you will find there is a new context menu item "Change BackColor"');
activeSheet.setValue(2,0,'click it');
var selectWithABackgroundColor = {
text: "Change BackColor",
name: "changeColorWithBg",
workArea: "viewport",
subMenu: [
{
name: "selectColorPicker",
command: "changeBackColor"
}
]
};
spread.contextMenu.menuData.push(selectWithABackgroundColor);
var changeBackgroundColorCommand = {
canUndo: false,
execute: function(spread, options) {
spread.suspendPaint();
spread.options.backColor = options.commandOptions;
spread.resumePaint();
}
};
var commandManager = spread.commandManager();
commandManager.register("changeBackColor", changeBackgroundColorCommand, null, false, false, false, false);
function CustomMenuView() {
}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.createMenuItemElement = function(menuItemData) {
var self = this;
if (menuItemData.name === "selectColorPicker") {
var containers = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
var supMenuItemContainer = containers[0];
while (supMenuItemContainer.firstChild) {
supMenuItemContainer.removeChild(supMenuItemContainer.firstChild);
}
var colorPicker = createColorpicker();
supMenuItemContainer.appendChild(colorPicker);
return supMenuItemContainer;
} else {
var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
return menuItemView;
}
};
CustomMenuView.prototype.getCommandOptions = function(menuItemData, host, event) {
if (menuItemData && menuItemData.name === "selectColorPicker") {
var ele = event.target || event.srcElement;
return ele.style.backgroundColor;
}
};
CustomMenuView.prototype.getCommandOptions = function(menuItemData, host, event) {
if (menuItemData && menuItemData.name === "selectColorPicker") {
var ele = event.target || event.srcElement;
return ele.style.backgroundColor;
}
};
var colors = ['rgb(255,255,255)', 'rgb(0,255,255)', 'rgb(255,0,255)', 'rgb(255,255,0)', 'rgb(255,0,0)',
'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(0,0,0)'];
function createColorpicker() {
var colorPicker = document.createElement('div');
colorPicker.className = 'colorPickerContent';
for (var j = 0; j < 8; j++) {
var colorDom = document.createElement("div");
colorDom.className = 'colorDom';
colorDom.style.width = 14 + 'px';
colorDom.style.height = 14 + 'px';
colorDom.style.margin = "0 0 0 6px";
colorDom.style.display = 'inline-block';
colorDom.style['backgroundColor'] = colors[j];
colorPicker.appendChild(colorDom);
}
return colorPicker;
}
spread.contextMenu.menuView = new CustomMenuView();
});
Name | Type | Description |
---|---|---|
menuItemData |
IMenuItemData |
the data of the menu item which needs to be shown |
HTMLElement
menuitem view
▸ getCommandOptions(menuItemData
, host
, event
): any
get command options of specified menu item
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
function CustomMenuView() {
}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.getCommandOptions = function (menuItemData, host, event) {
if (menuItemData && menuItemData.name === "markWithABg") {
var ele = event.target || event.srcElement;
if (ele.className.indexOf("colorpicker-div-inner-colorcell") !== -1) {
ele = ele.parentElement;
}
return ele.style.background;
}
};
Name | Type | Description |
---|---|---|
menuItemData |
IMenuItemData |
the data of the menu item which be clicked |
host |
Object |
the container of the menu item which be clicked |
event |
Object |
the mouse click event |
any
command options of specified menu item
▸ maxHeight(value?
): number
| void
description
get or set context menu's max height
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.contextMenu.menuView.maxHeight(400);
Name | Type |
---|---|
value? |
number |
number
| void
represent the number of context menu's max height
▸ scrollable(value?
): boolean
| void
description
get or set context menu scrollable
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.contextMenu.menuView.scrollable(false);
Name | Type |
---|---|
value? |
boolean |
boolean
| void
represent whether the context menu can scroll