Simulating function data type in JSON - Is there a better way?
var myTreeData = [
{ "text" : "System", "id":"1","leaf" : false, "cls" : "folder", "expanded": true,'children':
[
{"text" : "Path Name Table", "id":"2", "leaf" : true, "cls" : "file", "makePanel": "createPathNameTable('pnt',500,'Path Name Table',2)"}
]},
{ "text" : "Repository Account", "id":"3","leaf" : false, "cls" : "folder", 'children': [
{"text" : "Status Tables", "id":"4", "leaf" : true, "cls" : "file", "makePanel": "createStatusGrid(2, 300)"}
]}
]
Each of the leaf node define a method 'makePanel' as a string type in the JSON array.
The myTreeData is loaded in a TreePanel. When the leaf node is clicked a click handler uses the javascript eval() function to create the tab panel.
var treePanelOnClick = function(node,e){
if(node.isLeaf()){
var p = Ext.getCmp(node.text);
var mkPanelFn = node.attributes.makePanel;
if (p) {
tabPanel.setActiveTab(p);
} else {
p = eval(mkPanelFn); // Dynamically bind the mkPanelFn
p.closable = true;
tabPanel.add(p);
tabPanel.setActiveTab(p);
tabPanel.ownerCt.doLayout();
}
}
}
tree.on('click', treePanelOnClick, this, true);
return tree;
The mkPanelFn function name is eval'd to return the panel to be associated with the menu item specified by the leaf node in the tree.
It appears to work fine for a prototype. Wondering how the scheme would hold with large number of menus.
Are there alternative approaches that work? I couldn't find anything while searching these forums. I am sure this is not an uncommon need - ability to dynamically create panels based on what is clicked in the menu. The examples typically load HTML files in panels using autoLoad mechanism but that won't work for me as I need to add the dynamically created panels to the Ext managed container.
The mkPanel function is really a poor man's abstract method that is re-implemented by all leaf nodes. Wished JSON supported richer data types in the meanwhile I am using this to simulate passing functions.
Regards
That won't work as I need to instantiate different kind of Panels - Grid, Form, FieldSet, Tree
etc based on which leaf node is selected. Passing config around would have worked if I was always creating say grid Panels which only differed in the config but not the type of panel being created.
{
id: '1',
text: 'Node 1',
creationCfg:
{
url: 'http://extjs.com',
title: 'ExtJS'
}
}
Then in your accessor method:
function myCreationFunction(config)
{
//create panel here
}
if (!node.isLeaf())
{
myCreateFunction(node.attributes.creationCfg);
}
#If you have any other info about this subject , Please add it free.# |