Как создать динамическое treePanel в extjs4

Question

Я работаю в extjs4. У меня есть вид с панелью деревьев 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() 
}); 

В контроллере я создал статический магазин. И привязал его к этому взгляду. Код -

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); 

его работа правильно. На самом деле его статический магазин. Я хочу создать древовидную панель для 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":[]}]} 

Итак, какие изменения мне нужно сделать в этом json? Нужно ли мне менять магазин? Пожалуйста, кто-нибудь может направить меня

Answer 1

Если вы можете изменить свой JSON, да, вам обязательно нужно изменить данные. Прежде всего, у вас нет общих полей во всех ваших данных. Ваш JSON должен, вероятно, больше похож на пример:

{ 
    "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' 
     } 
    } 
});