PDA

View Full Version : How to load Tree Panel from a list store?



EXTDEV007
11 Feb 2014, 6:23 PM
Is there a way to load the tree panel with a regular list store?

For example, on load i have the listener to capture the data list from a function used to load the grid. Can i use the same store and build a treestore for the tree panel. Is there any example for this?

mdnaveed42
11 Feb 2014, 10:39 PM
Hi,

Yes, it is possible.. you need to tweak your data in the format of Treestore.

From the available data create treeStore data, following is an example:


data = [{
id: 1,
name: "detention"
}, {
id: 2,
name: "homework"
}, {
id: 3,
name: "buy lottery tickets"
}];


var oData = {},
treeStore = [];


Ext.each(data, function(eachItem) {
treeStore.push({
text: eachItem.name,
leaf: true, // no children
data: eachItem
});
});
oData = {
root: {
expanded: true,
children: treeStore
}
};


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: oData,
rootVisible: true,
renderTo: Ext.getBody()
});


Thanks,
Md Naveed

EXTDEV007
12 Feb 2014, 11:01 AM
Thanks for the quick response. It worked fine if it is a static list.

But in my solution, i'm getting a list dynamically to load the grid onload( Like in the loadApplications listener below). So i tried your code and was able to build the treeStore, but i think it is not loading to the Tree Panel.

Any suggestions?

onLaunch: function() {
this.loadApplications(false);
}
loadApplications: function(partnersOnly) {
var me = this;
me.maskContainer('Loading resources ...');


dataController.getApplications(partnersOnly === true, function(result, event) {
if (event.status === true) {
//This code loads the store to the grid
me.getApplicationList().getStore().loadData(result);
//After this Can we build the dynamic list for Tree Panel with result above
//I built the treeStore using your code, but how do i load the TreePanel now, because the load for it is already //done before it.


} else {
Ext.Msg.alert("Error", "An unexpected error occurred. Message: " + event.message);
}


me.maskContainer(false);
}, {escape:false});
},

mdnaveed42
12 Feb 2014, 9:54 PM
Hi,

Yes you can do this in the following procedure...sample code


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: null,
itemId: 'sampleTree'
rootVisible: true,
renderTo: Ext.getBody()
});

// Your loading grid after conditions goes in here
// Build tree store here
// Add store to tree
Ext.ComponentQuery.query('#sampleTree')[0].bindStore(treeStore); // treeStore contains the new store you have build

Hope this works for you,
Thanks,
Md Naveed
\m/

EXTDEV007
13 Feb 2014, 6:29 PM
Thanks for the reply. I was able to do it based on your first reply.
It works.

However i have a quick question,
There is already a listener for itemdblclick on the gridstore, which opens form in the side panel. I need to accomplish the same for tree as well.
So i built a listener for the tree and since both have the same data (not same stores though), Can i do a find of child node by name in the grid store and automatically do the itemdblclick of that node from here?

Thanks,