ExtJS 7.8读取JSON文件失败求助：修复Sencha Fiddle示例#2

问题概述 #

我在读取JSON文件时遇到了极大困难。使用Ext.window.Window嵌套Ext.panel.Panel和Ext.tree.TreePanel，TreePanel通过配置了AJAX proxy与JSON reader的Ext.data.TreeStore加载Ext.data.Model。现有两个Sencha Fiddle示例，#1可正常运行，#2无法工作，需修复#2。

核心问题分析 #

对比两个示例后，发现#2的主要问题集中在JSON数据结构与TreeStore Reader的匹配性上：

• #1的JSON子节点使用默认的children字段，TreeStore无需额外配置即可识别；
• #2的JSON子节点字段为items，但TreeStore的Reader未指定对应的rootProperty，导致无法解析子节点结构。

此外需确认：

• Model是否正确定义了JSON中的字段（如text、leaf）；
• TreePanel的displayField是否与JSON中的文本字段一致；
• AJAX Proxy的url路径是否正确指向目标JSON文件。

修复步骤 #

1. 修改TreeStore的Reader配置，添加rootProperty: 'items'以匹配#2的JSON结构：

   Ext.create('Ext.data.TreeStore', {
       model: 'YourModel',
       proxy: {
           type: 'ajax',
           url: 'your-json-path.json',
           reader: {
               type: 'json',
               rootProperty: 'items' // 关键配置，匹配JSON子节点字段
           }
       },
       root: {
           expanded: true
       }
   });
   

2. 确认Model字段定义，确保包含JSON中的必要字段：

   Ext.define('YourModel', {
       extend: 'Ext.data.Model',
       fields: [
           { name: 'text', type: 'string' },
           { name: 'leaf', type: 'boolean' }
           // 其他JSON字段按需添加
       ]
   });
   

3. 检查TreePanel配置，确保displayField与Model中的文本字段一致（默认是text，若JSON中是其他字段需调整）：

   Ext.create('Ext.tree.TreePanel', {
       store: yourTreeStore,
       displayField: 'text' // 与Model及JSON中的文本字段匹配
       // 其他配置项
   });
   

内容的提问来源于stack exchange，提问作者SMerrill8