View Full Version : TreeGrid not displaying data

16 May 2012, 5:42 AM
I am using Ext JS 4.1. I have a TreeGrid which I want to lazily load only after a user has selected which data they want loaded. To prevent the TreeGrid's store from loading automatically I have set the following on my store:

autoLoad: false,
root: { expanded: false )

In my controller after the user has selected which data they want to load I call load on the store:

scope: this,
callback: this.planTreeGridLoaded

I see the data returned in Firebug and it looks correct. The callback gets called and success is true and the records are properly populated. However, my TreeGrid remains empty (only shows headers). My understanding is that the TreeGrid should automatically be updated when the store is successfully loaded but this is not happening. Note - If I set root: { expanded: true ) on my store the grid is populated (however, I need to lazily load the grid per user selection so this won't work for me). Any ideas on what I am missing? Thanks!

16 May 2012, 6:06 AM
What is your JSON look like? I suggest you are using "children" but you shoudn't. Try using "data:[]" instead "children:[]"

16 May 2012, 6:09 AM
Thanks. The JSON returned is identical if my store config is root: { expanded: false } or root: { expanded: true }. However, in the later case my grid is populated. To me this indicates it is not an issue with the JSON.

16 May 2012, 6:15 AM
To me it seems like the grid is unaware of the store changing. As I said I am doing this in a controller which references the store:

stores: ['CurrentPlan'],

In my Grid panel config I have:

store : 'CurrentPlan',

In my controller, in the callback from the Firebug console the following returns true:

this.getMainPanel().query('#planTreePanel')[0].getStore === this.getCurrentPlanStore()

So the Controller and the Grid have the same store reference. No others errors or warning in the Firebug console or Chrome.

16 May 2012, 7:07 AM
I figured it out, before I load the store I had to call:
planTreeGridStore.setRootNode({ expanded: true });