【问题标题】:Extjs tree panel not loading json dataExtjs树面板不加载json数据
【发布时间】:2025-12-08 01:15:02
【问题描述】:

您好,我正在尝试通过 json 和
为树形面板加载数据 我指的是this link。树面板正常显示,但没有数据。

这是我的代码
编辑按照 Objectone 的建议更新了代码

Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeJson.json'
    },      
    root: {
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    renderTo: 'tree-div',
    height: 300,
    width: 250,
    title: 'Files',
    useArrows: true,
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Expand All',
            handler: function(){
                tree.expandAll();
            }
        }, {
            text: 'Collapse All',
            handler: function(){
                tree.collapseAll();
            }
        }]
    }]
});

console.log(store.getRootNode());
});

这里是 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
        }
    ]
}
]

Firebug 没有显示错误,
知道我做错了什么吗?

提前致谢

【问题讨论】:

  • 将 JSON 的 id 设为“src”
  • Kishan,我试图为 json 提供 id 但它不起作用,现在我从 root 中删除了 id 但它只显示 root。

标签: javascript json extjs extjs4


【解决方案1】:

在您的存储中,您将根 id 称为 src,但您的 json 没有 src 的 id。

在示例链接 JSON 如下所示,id 被称为“src/fx”,其中 src 是根

{text:fx, id:src/fx, cls:folder, qtip:Type: Folder<br />Last Modified: Jul 9, 2013, 3:24 am}

要让你的东西正常工作,只需从根目录中删除 id

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeJson.json'
    },      
    root: {
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});

【讨论】:

  • 感谢您的回复,我尝试了您的建议,但它仍然没有显示除 root 以外的任何数据。
  • 此代码在我的服务器上运行,但在我的本地计算机上运行,​​似乎我的 URL 有问题。为您的意见 +1 :)