无法在 extjs 4 的 Treepanel 中显示 json 数据

Question

我正在努力在 EXTJS 4 TreePanel 中显示 JSON 数据。但我的树没有显示任何数据。请让我知道我错在哪里。让我在下面发布我的代码：

查看部分：它有树形面板

xtype: 'treepanel', 
title: 'Standard Geographies',
height: 250,
width: 310,
store: 'Data',  
border: 1,          
displayField: 'name',
useArrows: true,
rootVisible: true,
multiSelect: true,
preventHeader: true,                                            
renderTo: Ext.getBody(),

columns: [{
    xtype: 'treecolumn',
text: 'Standard Geographies',
flex: 1,
sortable: false,
//renderer : change,
dataIndex: 'name'
}], 

模型部分：使用 json 数据

Ext.define('TA.model.TAModel', {
    extend: 'Ext.data.Model',
    fields: ['name','typeId'],
//fields: ['abbr','type'],['name','typeId']


    proxy: {
        type: 'ajax',
        url : 'data/StandardGeoTree.json',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: 'geographyOptions' 
        },
    }   
 });

商店部分：我希望商店部分一切都好

Ext.define('TA.store.Data', {
//extend: 'Ext.data.Store',
//model: 'TA.model.TAModel',

extend: 'Ext.data.TreeStore',
model: 'TA.model.TAModel', 
autoSync: true,
autoLoad: true,     
listeners: {
    load:function(){
        console.log('Schemes Data store loaded');
    }
},      
proxy: {
    type: 'ajax',
    //url : 'data/StandardGeoTree.json',
    api: {
        //read: 'data/StandardGeo.json',
        read: 'data/StandardGeoTree.json',
        //update: 'data/updateTradeArea.json'
    },
    reader: {
        type: 'json',
        root: 'root',
        successProperty: 'success',
        idProperty : 'typeId'
    }
},  
root : {
    text: 'Root',
    id: 'typeId',
    expanded : true,
    loaded : true,
    children: []
}
});

JSON

{
"success": true,
"root" : [
    {   
        "name": "001-USA", 
        "typeId" : "1",

        "children":[        
            {"name": "USA", "typeId" : "1", "leaf":"true"},
            {"name": "State", "typeId" : "2", "leaf":"true"},
            {"name": "DMA", "typeId" : "3", "leaf":"true"},
            {"name": "CSA", "typeId" : "4", "leaf":"true"},

            ]
    }
]
}   

Answer 1

tree组件的store配置其实没必要这么复杂。例如下面的简单商店声明就足够了：

var treestore = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'data/StandardGeoTree.json'
    }
});

然后在你的树配置集store: treestore 和rootVisible: false

最后，商店期望 json 以这种格式响应：

[{
    "text": "To Do", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "text": "Go jogging",
        "leaf": true
    },{
        "text": "Take a nap",
        "leaf": true
    },{
        "text": "Climb Everest",
        "leaf": true
    }]
}]

Answer 2

在您的 JSON 中，您的根属性必须与您的孩子相似。所以它要么是“根”，要么是“孩子”，但不是两者兼而有之。有关完整说明，请参阅this question。

所以只要你坚持：

reader: {
    type: 'json',
    root: 'root',
    successProperty: 'success',
    idProperty : 'typeId'
}

您的 JSON 应该如下所示：

{
"success": true,
"root" : [
    {   
        "name": "001-USA", 
        "typeId" : "1",

        "root":[        
            {"name": "USA", "typeId" : "1", "leaf":"true"},
            {"name": "State", "typeId" : "2", "leaf":"true"},
            {"name": "DMA", "typeId" : "3", "leaf":"true"},
            {"name": "CSA", "typeId" : "4", "leaf":"true"},

            ]
    }
]
} 

Answer 3

没有任何解决办法。所以我不得不在我的视图中编写下面的代码部分来解决我的问题。我正在粘贴下面的代码部分：

    var treeStore = Ext.StoreManager.lookup('Data');
    treeStore.load();

但我希望我的商店自动加载。如果您有任何自动加载商店的解决方案，请告诉我。