PDA

View Full Version : Adding a tree panel dynamically



Zorrocaesar
27 Mar 2012, 11:03 PM
I have the following code:



var usersStore = Ext.create('Ext.data.TreeStore', {
autoLoad: false,
proxy: {
type: 'ajax',
url: 'get-users.php',
reader: {
type: 'json'
}
},
root: {
text: 'Root',
id: 'usersRoot'
}
});


var usersTree = Ext.create('Ext.panel.Panel', {
hideHeaders: true,
rootVisible: true,
collapsible: true,
title: 'Navigation',
region:'west',
margins: '5 5 5 0',
cmargins: '5 5 5 0',
width: 175,
minSize: 100,
maxSize: 250
});


Ext.Loader.setConfig({
enabled: true
});


Ext.Loader.setPath('Ext.ux', '/static/js/ux');
Ext.require([
'Ext.ux.statusbar.StatusBar'
]);


Ext.application({
name: 'Test_App',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout:'border',
items: [{
id: 'mainPanel',
title: 'Test_App',
region:'center',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
layout: 'border',
defaults: {
collapsible: true,
split: false
},
tbar: Ext.create('Ext.toolbar.Toolbar', {
items: [
{
text: 'Users',
handler: function() {
var mainPanel = Ext.getCmp('mainPanel');
mainPanel.add(usersTree);
mainPanel.doLayout();
}
},
{
text: 'Logs'
},
{
text: 'Other'
}
]
}),
items: [
{
collapsible: false,
region:'center',
margins: '5 0 5 0'
}
],
bbar: Ext.create('Ext.ux.StatusBar', {
id: 'basic-statusbar',
text: 'Ready',
iconCls: 'x-status-valid'
})
}]
});
}
});


What I want to achieve with it is to have a container panel which has a toolbar, acenter region and a status bar. When one of the toolbar buttons is clicked I want to add tree panel as a "west" region to my container panel. However, when I click the button, nothing happanes. Any ideas why?

Zorrocaesar
28 Mar 2012, 3:49 AM
Still no ideas on this? I know it should be simple, but I just have the feeling I'm missing something.

Zorrocaesar
9 Apr 2012, 11:00 AM
I'm still stuck with this.