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

Posted 2023-02-26

【中文标题】无法在 extjs 4 的 Treepanel 中显示 json 数据

【英文标题】：Can't show the json Data in Treepanel in extjs 4

【发布时间】：2012-11-28 15:30:55

【问题描述】：

我正在努力在 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",

            ]
    
]
   

【问题讨论】：

为什么要在模型和商店中都定义代理？因为在您提供的代码中，只会使用商店代理。

这实际上是我从某个地方得到的解决方案。反正我已经把它删了。

【参考方案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
    ]
]

【参考方案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",

            ]
    
]
 

【讨论】：

感谢@Izhaki 的回答，但它仍然没有显示任何数据。

加载时是否获得控制台日志？另外，您能否评论模型上的代理 - 以便我们可以放大问题。

加载时没有得到任何控制台日志。我已经从模型中删除了代理。在侦听器中，我添加了： afterrender: function(n) console.log('afterrender');控制台.log(n); ，这给了我以下日志：afterrender Object xtype="treepanel", title="Standard Geographies", height=250, more...

好的，当您定义树时，您确定Data 存储在范围内吗？是否取决于您是否通过控制器将两者绑定为应用程序的一部分。您是否也可以尝试手动加载商店，看看您是否在加载时获得日志？

【参考方案3】：

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

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

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

【讨论】：

我仍然认为我对答案的最后评论可能是解决方案。能否请您发布您的控制器代码？

我的控制器工作正常，我已经在我的控制器中绑定了所有的商店和模型。我交叉检查了他们。令人惊讶的是，我所有其他的 json 都被加载了。是不是很奇怪？