如何在extjs4中创建动态treePanel

Question

i am working in extjs4. i have view with tree panel as-

Ext.define('Balaee.view.qb.qbquestion.tree1', {

    extend: 'Ext.tree.Panel',
    title: 'Simple Tree',
    width: 200,
    height: 150,
    alias : 'widget.tree1',
   //store: 'qb.qbquestioncomplexityStore',
    rootVisible: true,
    renderTo: Ext.getBody()
});

In controller i have created static store. And binded it to this view. Code is as-

 var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [
                    { text: "detention", leaf: true },
                    { text: "homework", expanded: true, children: [
                        { text: "book report", leaf: true },
                        { text: "algebra", leaf: true}
                    ] },
                    { text: "buy lottery tickets", leaf: true }
                ]
            }
        });

     var bchart=Ext.create('Balaee.view.qb.qbquestion.tree1',{
         store:store

     });
     var comp=Ext.getCmp('QuestionView');
     comp.removeAll();
     comp.add(bchart);

its working correctly. Actually its static store. i want to create tree panel for json-

{"data":[{"Maincategory":"Main","maincategoryId":"1","Subcategory":{"subcategory":"GK","categoryId":"2"},{"subcategory":"History","categoryId":"3"},{"subcategory":"Geography","categoryId":"4"}]},{"Maincategory":"GK","maincategoryId":"2","Subcategory":[{"subcategory":"environment","categoryId":"5"}]},{"Maincategory":"History","maincategoryId":"3","Subcategory":[{"subcategory":"civics","categoryId":"7"}]},{"Maincategory":"Geography","maincategoryId":"4","Subcategory":[{"subcategory":"India","categoryId":"8"}]},{"Maincategory":"environment","maincategoryId":"5","Subcategory":[]}]}

So what modifications i need to do in this json? Do i need to change store? Please can someone please guide me

Answer 1

If you can change your JSON, yes, you definitely need to change the data. First of all, you have no common fields throughout your data. Your JSON should probably look more like example:

{
    "data": [{
            "category": "Main",
            "categoryId": "1",
            "subcategory": [{
                    "category": "GK",
                    "categoryId": "2"
                },{
                    "category": "History",
                    "categoryId": "3"
                },{
                    "category": "Geography",
                    "categoryId": "4"
            }]
        },{
            "category": "GK",
            "categoryId": "2",
            "subcategory": [{
                    "category": "environment",
                    "categoryId": "5"
            }]
    }, .... ]
}

Ext.define('SomeModel', {
extend: 'Ext.data.Model',
fields: [
       { name: 'category'},
       { name: 'categoryId', type: 'int'}
    ]
});


// Your tree store should look like this based on the data

Ext.define('SomeTreeStore', {
    extend: 'Ext.data.TreeStore',
    model: 'SomeModel', // defines your JSON fields 
    defaultRootProperty: 'Subcategory', // your children property name or rename 
                                        // this field in your JSON to children 
                                        // and you don't need this
    proxy: {
        type: 'ajax',
        url: '/yourjsonurl',
        // don't need this section if you define your JSON the way the tree store wants it
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});