View Full Version : Controller loading Treestore but Treepanel is empty

31 Jan 2012, 11:46 AM

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.

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,

expanded: true

initComponent: function() {
Ext.apply(this, {

var poop = this.store;

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() {
'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();
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');
//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');
var container = content.add(Ext.create('Nile.view.layout.'+ dashboardLinks[index]));

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.

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.