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

Posted

技术标签:

【中文标题】无法在 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: treestorerootVisible: 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 都被加载了。是不是很奇怪?

以上是关于无法在 extjs 4 的 Treepanel 中显示 json 数据的主要内容,如果未能解决你的问题,请参考以下文章

在 ExtJs 4.1 TreePanel 中隐藏一个节点

如何在extjs 4.1中的treePanel中移动节点标签的复选框结尾

在 ExtJs 4.0 TreePanel 中更改文件夹和叶子节点的顺序

extjs 4中treepanel重复加载。

Extjs 4 treepanel 重新加载和展开

ExtJs基础知识总结:DomIFrame和TreePanel