Hello,
I have been trying to create a new object (a base ui elememnt) that is composed of several of your components (for example
dhtmlxgrid, dhtmlxtoolbar, dhtmlxmenu,…) i.e my code looks something like:
function UIElement(newgrid,newtoolbar,newcontextmenu){
this.grid = newgrid;
this.toolbar = newtoolbar;
this.contextMenu = newcontextmenu;
}
and a BUNCH of setters(prototype functions) that accesses the public properties(this.grid, this.toolbar, this.contextMeny).
one example of these function is:
BaseUI.prototype.setContextMenuItemsHandler = function(){
this.contextMenu.setContextMenuHandler(function (menuitemId,grid_Id){
var data=grid_Id.split("_"); //rowInd_colInd
var rId = data[0];
var cInd = data[1];
switch(menuitemId){
case “add”:
this.grid.addRow(new Date().valueOf(),["","","","","","","",""],this.grid.getRowIndex(data[0]));
break;
case “delete”:
window.setTimeout(“this.grid.deleteRow(”+rId+");",2000);
break;
}
});
};
The problem is that whenever i use this.grid to add a new row or undo an edit from a toolbar or contextmenu (function shown above), i get errors saying “this.grid is not defined”
BUT all the objects are properly displayed, i.e i can see my grid with loaded data, my toolbar and my contextmenu. Even events i attached to the (this.grid) object is working fine!!!
------------------------------------------------------------------------------
I then did a simple test too:
I used firebug to output each dhtmlx object (.constructor) i.e
console.log(“Grid:%s, Toolbar:%s, Menu:%s, Dataprocessor:%s”,this.grid.constructor,this.toolbar.constructor,this.contextMenu.constructor);
and the output was:
Grid:function Object() { [native code] },
Toolbar:function dhtmlXProtobarObject() { return this; },
Menu:function dhtmlXContextMenuObject(width, height, gfxPath, httpsdummy) { this.menu = new dhtmlXMenuBarObject(document.body, width, height, “”, 1, gfxPath, httpsdummy); this.menu.setMenuMode(“popup”); this.menu.hideBar(); this.menu.contextMenu = this; this.menu.enableWindowOpenMode(false); this.menu.setOnClickHandler(this._innerOnClick); this.aframes = new Array; this.registerFrame(window); return this; }
-----------------------------------------------------------------------------------------------
1) How come i am getting this.grid is undefined errors when the grid is actually being displayed using the same (this.grid) public property?
2) why is .constructor returning a type Object instead of dhtmlXGridObject?
Please help me out on this…is it a problem with the JS i wrote? or something else i am missing…
Thank you,
>>1) How come i am getting this.grid is undefined errors
The problem cause by used scoopes, the code of context menu handler will be called from the name of context menu object, so “this” will point to context menu object, not to the global object.
The code can be changed as
BaseUI.prototype.setContextMenuItemsHandler = function(){
var that = this; //reference to global object
this.contextMenu.setContextMenuHandler(function (menuitemId,grid_Id){
var data=grid_Id.split("_"); //rowInd_colInd
var rId = data[0];
var cInd = data[1];
switch(menuitemId){
case “add”:
that.grid.addRow(new Date().valueOf(),["","","","","","","",""],that.grid.getRowIndex(data[0]));
>>2) why is .constructor
It is expected result, it caused by JavaScript nature. The “constructor” property can’t be used to detect the type of object.