PDA

View Full Version : Not able to any component(menu, button) in toolbar dynamically



dewangan
28 May 2012, 5:56 AM
Hi,

I am using extjs 4. I have one panel containing toolbar, i am not able to add any component (menu, button) into toolbar dynamically.
I am getting "dom.classList is undefined" error. Please suggest to resolve the issue.

Thanks,
Ashish

vadimv
28 May 2012, 11:33 PM
without any code posted nobody can help you or suggest sth.

dewangan
29 May 2012, 12:50 AM
The below code is working fine for the first time loading the toolbar into center panel., but if i click in any other link into tree panel and then come back for the toolbar page then its not working and i am getting "dom.classlist is undefined" error.



Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');


Ext.require([
'Ext.panel.Panel',
'Ext.tree.TreePanel',
'Ext.data.TreeStore',
'Ext.data.Model',
'Ext.menu.Menu',
'Ext.toolbar.Toolbar'
]);


Ext.define( 'Menu', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'int' },
{ name : 'text', type : 'string' },
{ name : 'url', type : 'string'}
]
});


var GRID_ID;
var TOOL_BAR;




var store = Ext.create( 'Ext.data.TreeStore', {
model : 'Menu',
root : {
expanded : true,
children : [
{ text : "detention", leaf : true, url:'admin.action?method=getSubMenu' },
{ text : "homework", expanded : true, children: [
{ text : "book report", leaf : true, url :'report.action' },
{ text : "algebra", leaf : true, url :'algebra.action'}
] },
{ text : "buy lottery tickets", leaf : true, url :'lottery.action' }
]
}
});




Ext.onReady( function() {

var myMask = new Ext.LoadMask( Ext.getBody(), { msg : "Please wait, Loading menu....."} );
Ext.Ajax.on( 'beforerequest', myMask.show, myMask);
Ext.Ajax.on( 'requestcomplete', myMask.hide, myMask);
Ext.Ajax.on( 'requestexception', myMask.hide, myMask);

var myview = Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [
Ext.create('Ext.panel.Panel',{
bodyStyle : 'background-color:#363368;font-size:25px;color:white',
layout : 'column',
region : 'north',
frame : false,
height : 50,
monitorResize : true,
border : false,
iconCls : 'add',
items : [
{
xtype : 'label',
text : 'Testing screen',
style : 'margin:10px 10px'
} ]
}),
Ext.create('Ext.tree.TreePanel', {
title : 'Simple Tree',
region : 'west',
width : 150,
store : store,
rootVisible : false,
scroll : true,
useArrows : true,
listeners :{
itemclick : function(treePanel, store){
if(store.data.url == '') {
var Enode=treePanel.getTreeStore().getNodeById(store.internalId);

if (Enode.isExpanded()) {
Enode.collapse();
} else{
Enode.expand();
};
} else {
var temp = store.data.url;
if(temp.indexOf("SubMenu") != -1) {
populateSubMenu(temp);
} else {
Ext.get('contentPanel').load({
url : store.data.url,
method : 'POST',
params : {
loadPage : 'ReferenceKey',
id : store.data.id
},
scripts : true,
autoLoad : true
});
}
}
}
}
}) ,
Ext.create('Ext.panel.Panel',{
region : 'center',
id : 'contentPanel',
layout : 'fit',
border : 'false'
})
]
});


});


function populateSubMenu(temp) {

var tb = Ext.create('Ext.toolbar.Toolbar');

Ext.getCmp('contentPanel').removeDocked(tb);

var menu = Ext.create('Ext.menu.Menu', {
items: [
{
text: 'High'
}, '-', {
text: 'Low',
menu: {
items : [ {
text : 'Low001',
url : 'engine.action'
}]
}
}
]
});



tb.add({
text:'Button w/ Menu',
menu: menu
});


Ext.getCmp('contentPanel').addDocked(tb);
Ext.getCmp('contentPanel').doLayout();

}