1

I have rest api which gives me data in this form

<plans>
    <plan id="0" title="Title 1" planGroup="group1"/>
    <plan id="1" title="Title 2" planGroup="group1"/>
    <plan id="2" title="Title 3" planGroup="group2"/>
    <plan id="3" title="Title 4" planGroup="group3"/>
</plans>

The model for my data:

Ext.define('myPlan', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', mapping: 'id'},
        {name: 'title', mapping: 'title'},
        {name: 'planGroup', mapping: 'planGroup'},
    ]
});

I need to display these data in tree structure like this

├── group1
│   └── Title1
│   └── Title2
└── group2
│   └── Title3
├── group3
│   └── Title4

Basically I need to create TreeStore with data like this

root: {
        expanded: true,
        text: 'root',
        children: [
            { name: 'group1', expanded: true,
                children: [
                    { name: "Title1", leaf: true },
                    { name: "Title2", leaf: true}
                ]
            },
            { name: 'group2', expanded: true,
                children: [
                    { name: "Title3", leaf: true }
                ]
            },
            { name: 'group3', expanded: true,
                children: [
                    { name: "Title4", leaf: true}
                ]
            }
        ]
    }

But I don't know how to configure the TreeStore and what functions to override to get desired result.

Martin Barnas
  • 185
  • 1
  • 13
  • Have you tried whether a normal grid with grouping suffices? – Alexander Jan 06 '17 at 13:30
  • If you want to convert a flat list into a tree, you have to manually copy all data, loaded into a normal store, into the tree store model by model, record by record, and restore the tree information manually along the way. – Alexander Jan 06 '17 at 13:32
  • Just in case you upgrade to ExtJS 6: [parentIdProperty](http://devdocs.local/extjs-620-docs/classic/Ext.data.TreeStore.html#cfg-parentIdProperty) :) – scebotari66 Jan 06 '17 at 13:42
  • Actually you might want to borrow the treestore's [_treeify_](http://devdocs.local/extjs-620-docs/classic/src/TreeStore.js.html#Ext.data.TreeStore-method-treeify) method from ExtJS 6, which converts a flat array of nodes into a tree structure. – scebotari66 Jan 06 '17 at 15:54
  • @scebotari Please do not link to `devdocs.local`, we won't be able to follow such links. – Alexander Jan 06 '17 at 17:33
  • @Alexander Sorry about that, it just that I use offline docs. Here are the updated links: [parentIdProperty](http://docs.sencha.com/extjs/6.2.0/classic/Ext.data.TreeStore.html#cfg-parentIdProperty) config and [treeify](http://docs.sencha.com/extjs/6.2.0/classic/src/TreeStore.js.html#Ext.data.TreeStore-method-treeify) method – scebotari66 Jan 06 '17 at 17:40
  • @scebotari Upgrade to ExtJs 6 is not possible now. – Martin Barnas Jan 09 '17 at 10:01
  • @Alexander I know that I have to manually copy data to tree and I am able to write code which does this. What I don't know is where this code should come. To controller or to override some function in TreeStore or somewhere else? I should mention that I am new to extjs and I am actually backend developer. – Martin Barnas Jan 09 '17 at 10:09
  • You need a normal store and a tree store, and on the normal store, since it isn't wired to the frontend, you have to add a `load` listener, which has to contain the code that copies your data over into the treestore. – Alexander Jan 09 '17 at 12:29

0 Answers0