PDA

View Full Version : Recommended method to build and display tree from dynamic store



neilios
11 Dec 2011, 6:16 PM
I'm using Ext4 (still a newbie)...

I have a store that I want to display as a tree and allow editing in a grid.

I currently have the grid being displayed after loading the store from my server.

I have written code to build the tree hash after the store has loaded but have not found the right way to get it to display. I have been following the MVC structure/guide and it's clear what would be needed if the tree "root" structure was NOT dependent on another component - but in my case the store needs to load first.

I've tried to define the view after the tree structure was created, but I get missing dependency issues and I'd like to be able to define the Viewport/layout statically if possible - I tried this in my Controller:



onPagesLoad: function() {
Ext.define('MVRZ.view.PagesTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.pagestree',
title: 'Pages Tree',
stateful: true,
stateId: 'pagesTree',

initComponent: function() {
this.root = MVRZ.Dataset.getTreeRoot(DATASET_WZ_PAGES);
this.callParent();
}

});
},


... so, can I define the view and defer the initialization until I've added the "root" structure? How should I do that? What is the initialization call/sequence that I need to make?

Thanks

mitchellsimoens
12 Dec 2011, 12:13 PM
You should never use Ext.define within your application code. They should be their own files and loaded with Ext.Loader.

I'm guessing MVRZ.Dataset.getTreeRoot returns the entire tree structure?

neilios
12 Dec 2011, 1:25 PM
You should never use Ext.define within your application code. They should be their own files and loaded with Ext.Loader.

Yes, I'd rather not do that anyway but was experimenting.



I'm guessing MVRZ.Dataset.getTreeRoot returns the entire tree structure?
Yes, it builds and returns the tree structure based upon the store contents.

If I define the view in the way it should be, can I add/replace the tree root with a different one and have it re-draw it:

Initialize:



Ext.define('MVRZ.view.PagesTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.pagestree',
title: 'Pages Tree',
stateful: true,
stateId: 'pagesTree',
initComponent: function() {
//this.root = MVRZ.Dataset.getTreeRoot(DATASET_WZ_PAGES); // Do this later
this.callParent(); // Should I do this here?
}
});



Then update with:



MVRZ.view.PagesTree.root = MVRZ.Dataset.getTreeRoot(DATASET_WZ_PAGES);
// How do I update/init/redraw this?


Thanks.

neilios
14 Dec 2011, 9:50 PM
So am I trying to do something odd with Ext then? Do I need to load the store and tree separately at startup and manage any changes that affect them both myself by forcing a reload from the server?

I'd imagine that there is a way to do this from the same store but it's not explained in any place that I've found yet.

Thanks

neilios
21 Dec 2011, 11:47 AM
No comments? Is this a stupid question?