View Full Version : Create Treepanel using tree or treestore

3 Mar 2014, 10:43 PM
I want to create treepanel like :
How can i create this treepanel, i want to take two fields data from table in treestore and show one field as group and another as a subgroup, my model is like :

Ext.define('LIB.data.model.dinerware.SystemNavigation', {
extend: 'LIB.data.model.DinerwarePreference',
fields: [
{ name: 'Group', type: 'string' },
{ name: 'Subgroup', type: 'string' },

pls help me out :((:((:((:((

Thanks & Regards,

3 Mar 2014, 11:55 PM
I am not sure if tree panel can display data formatted like this. take a look at the example code here:


the data is arranged in nodes and children config is used to tell the tree that this is a subgroup.

3 Mar 2014, 11:57 PM
if you dont find a better solution, then one workaround could be that you go through all data of your store and create the tree structure in JS (data formatted for tree). then you can use setRootNode method of treepanel. In this case you dont need a store for the tree panel itself.

4 Mar 2014, 12:09 AM
I think you are really looking for a normal store with groups, showing a grouped grid as in the example http://docs-origin.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid .

To use a tree store (and a tree grid) you should model data as trees: {text: 'group1', children: [{text: 'leaf1', leaf:true},{text:'leaf2', leaf:true}]}

4 Mar 2014, 12:49 AM
Hi Farish,
Design changes i can do through css just i need to create in this pattern but get data from single table and show it in this way that's my major problem.

4 Mar 2014, 12:57 AM
as I said, what you can do is that you can load your data in that store (for which you have posted the code) and then on the load event of that store, loop through all records and create data structure for your treepanel (using children). then use setRootNode() to set that as your tree's data.

4 Mar 2014, 1:08 AM
okay, got it , thanks for detail explanation it will help me a lot :D

4 Mar 2014, 1:10 AM
Thanks f.baron, i have already check that example but not work for me (:|