PDA

View Full Version : Controller loading Treestore but Treepanel is empty



dwb
31 Jan 2012, 11:46 AM
Howdy,

I could use help with making a treepanel, whom's data/store/children are loaded via a controller. The controller loads the treestore. I know this because I can see it and it's children when the store is sent to the browser console.

But, the problem is, the treepanel is empty; what's up with that? I've included my code below.

Note: Very sorry about the apparent lack of "formating" in the following code; it looks great in my editor and in Sencha's forum editor, but, when posted all the formatting disapears.


Ext.define('Nile.store.DashboardMenuStore',
{
extend: 'Ext.data.TreeStore',
storeId: 'menustore',
root: {
text: 'root node'
},
rootVisible: false,

// dummy proxy to avoid autoLoad on tree store construction
proxy: {
type: 'localstorage',
},

children: [{
id: 'myTest0',
iconCls: 'tree-cog-Icon',
leaf: true,
text: 'Dashboard'
},{
id: 'myTest1',
iconCls: 'tree-paging-Icon',
leaf: true,
text: 'Paging Grid Array'
},{
id: 'myTest2',
iconCls: 'tree-table-Icon',
leaf: true,
text: 'Table Panel'
},{
id: 'myTest3',
iconCls: 'tree-col-Icon',
leaf: true,
text: 'Panel Column Rows'
},{
id: 'myTest4',
iconCls: 'tree-error-Icon',
leaf: true,
text: 'Errors & Alerts'
},{
id: 'myTest5',
iconCls: 'tree-wizard-Icon',
leaf: true,
text: 'Step by Step Wizard'
},{
id: 'myTest6',
iconCls: 'tree-tab-Icon',
leaf: true,
text: 'Tab Panel'
},{
id: 'myTest7',
iconCls: 'tree-development',
leaf: true,
text: 'Current Development'
}]
});

Ext.define('Nile.view.layout.MenuDashboard0', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
id: 'MenuDashboard0',
cls: 'MenuDashboard0',
useArrows: true,
lines: false,
animate: true,
autoScroll: true,
bodyStyle: 'background-color: transparent !Important;',
border: false,

store: 'DashboardMenuStore', //no errors; children created (seen in console) but treepanel is empty
//store: Ext.data.StoreManager.lookup('DashboardMenuStore'), ////no errors; children created (seen in console) but treepanel is empty
//store: 'menustore', //Uncaught TypeError: Cannot call method 'getRootNode' of undefined
//store: 'Nile.store.DashboardMenuStore', //no worky
rootVisible: false,

root:{
expanded: true
},

initComponent: function() {
Ext.apply(this, {
});
this.callParent(arguments);

//debug
var poop = this.store;
console.log(poop);
}
});


Ext.define('Nile.controller.MenuDashboard0-controller', {
extend: 'Ext.app.Controller',
alias: 'widget.MenuDashboard0-controller',

stores: 'DashboardMenuStore',
views: 'layout.MenuDashboard0',

refs: [
{ref: 'MenuDashboard0', selector: 'menutree'}, //note: doen't have to be, but, Ive made 'menutree' is also the alias for MenuDashboard0
{ref: 'DashboardMenuStore', selector: 'menustore'},
],


init: function() {
this.control({
'menutree': { //reference for MenuDashboard0, IDs don't work here
itemclick: this.menuTreeClick, //when menutree is clicked on, menuTreeClick() is called
}
});
},

//load data from store
onLaunch: function() {
var dashboardMenuStore = this.getDashboardMenuStoreStore(); //automatically generated getter to get the store
//var dashboardMenuStore = this.getmenustoreStore();
dashboardMenuStore.load({
callback: this.setMenuItemActive, //set 1st menu item active
scope: this
});
},

//hilight first item in menu treepanel
setMenuItemActive: function(view,rec,item,index,eventObj){
//ext.get() is old school - sencha says don't use anymore
/*var myTest = Ext.getCmp('MenuDashboard0');
myTest.getView().select(0);*/
//select( Ext.data.Model[]/Number records, [Boolean keepExisting], [Boolean suppressEvent] )
console.log('setMenuItemActive() called');

},

//navigation for treepanel
menuTreeClick: function(view,rec,item,index,eventObj){
//view links in this menu
var dashboardLinks = new Array(
'MainDashboard', 'Pagination','TablePanel', 'PanelColRows', 'Messages', 'Wizard', 'TabPanel', 'TestCurrent'
 );
var content = Ext.getCmp('mainWrapper');
content.removeAll(true);
var container = content.add(Ext.create('Nile.view.layout.'+ dashboardLinks[index]));
container.doLayout();
container.show();
}
});

mitchellsimoens
31 Jan 2012, 12:16 PM
If you set store to a string it will look it up in the StoreManager which is based on the storeId. So the store config needs to match the storeId config.

dwb
31 Jan 2012, 12:51 PM
Hey mitchell,
Thanks for the tip... I've replaced store: 'DashboardMenuStore' with store: 'menustore', which matches the id of the store - storeId: 'menustore'. Unfortunately, this generates a Uncaught TypeError: Cannot call method 'getRootNode' of undefined. Bummer... Anymore hints?

Thanks again.