Extjs4.2.1 - 将 json 加载到树形面板失败

Posted 2023-02-26

【中文标题】Extjs4.2.1 - 将 json 加载到树形面板失败

【英文标题】：Extjs4.2.1 - Load json to treepanel fails

【发布时间】：2013-09-21 10:17:20

【问题描述】：

我创建了一个树形面板，然后创建store 喜欢

          var store = Ext.create('Ext.data.TreeStore', 
            autoload: false,
            proxy: 
                type: 'ajax',
                url: 'data.php',
                reader: 
                    type: 'json',
                    root: 'results'                 
                
            
          );

我的服务器打印 json 看起来像

 "results": 
    [
     id : '1' , text : '1', expanded: true, 
        children :[
             id : '5' , text : '5', leaf:true,
             id : '6' , text : '6', leaf:true
        ]
    ,
     id : '2' , text : '2', leaf:true,
     id : '3' , text : '3', leaf:true,
     id : '4' , text : '4', leaf:true,
     id : '7' , text : '7', leaf:true,
     id : '8' , text : '8', leaf:true,
     id : '9' , text : '9', leaf:true,
     id : '10' , text : '10', expanded: true, 
        children :[
             id : '11' , text : '11', leaf:true,
             id : '12' , text : '12', leaf:true
        ]
    
    ]

但是当我运行我的代码时，我看到了萤火虫并且总是运行GET http://localhost/example/data.php... 永不停止:(

我的树加了这么多双

如何解决这个问题，谢谢

编辑 实际上，我用别名定义了我的树形面板，并将其用作xtype 但是我创建了新示例并遇到了同样的问题。 这是我的js

var store = Ext.create('Ext.data.TreeStore', 
            autoload: false,
            proxy: 
                type: 'ajax',
                url: 'data.php',
                reader: 
                    type: 'json',
                    root: 'results'                 
                
            
        );

        Ext.create('Ext.tree.Panel', 
            title: 'Simple Tree',
            width: 200,
            height: 150,
            store: store,
            rootVisible: false,
            renderTo: Ext.getBody()
        );

这是我的data.php

echo "

    'success': true, 
    'variable': 100, 
    'results': 
    [
     id : '1' , text : '1', expanded: true, 
        children :[
             id : '5' , text : '5', leaf:true,
             id : '6' , text : '6', leaf:true
        ]
    ,
     id : '2' , text : '2', leaf:true,
     id : '3' , text : '3', leaf:true,
     id : '4' , text : '4', leaf:true,
     id : '7' , text : '7', leaf:true,
     id : '8' , text : '8', leaf:true,
     id : '9' , text : '9', leaf:true,
     id : '10' , text : '10', expanded: true, 
        children :[
             id : '11' , text : '11', leaf:true,
             id : '12' , text : '12', leaf:true
        ]
    
    ]
";

【参考方案1】：

我认为你在这里的东西是树库中的一个错误。当您将阅读器更改为使用不是children 的根时，您还需要将数据中子属性名称的每个实例也更改为新名称。这意味着如果您想将根更改为results，您的树数据实际上必须如下所示：

echo "

    'success': true, 
    'variable': 100, 
    'results': 
    [
     'id' : '1' , 'text' : '1', 'expanded': true, 
        'results':[
             'id' : '5' , 'text' : '5', 'leaf':true,
             'id' : '6' , 'text' : '6', 'leaf':true
        ]
    ,
     'id' : '2' , 'text' : '2', 'leaf':true,
     'id' : '3' , 'text' : '3', 'leaf':true,
     'id' : '4' , 'text' : '4', 'leaf':true,
     'id' : '7' , 'text' : '7', 'leaf':true,
     'id' : '8' , 'text' : '8', 'leaf':true,
     'id' : '9' , 'text' : '9', 'leaf':true,
     'id' : '10' , 'text' : '10', 'expanded': true, 
        'results':[
             'id' : '11' , 'text' : '11', 'leaf':true,
             'id' : '12' , 'text' : '12', 'leaf':true
        ]
    
    ]
";

另一个选项是将*** results 属性名称更改为 children 并将商店的根标记为 children。

【讨论】：

我花了一段时间才弄清楚这一点，因为这种行为没有意义。我们在应用中使用了大量的树木。

【参考方案2】：

检查您的 autoLoad 配置拼写。

 var store = Ext.create('Ext.data.TreeStore', 
        //    autoload: false,
            autoLoad : false,
            proxy: 
                type: 'ajax',
                url: 'data.php',
                reader: 
                    type: 'json',
                    root: 'results'                 
                
            
          );

【讨论】：

我只是改变它并得到同样的问题:(

能否提供treepanel配置？

【参考方案3】：

你能像关注一样添加根数据来存储吗

var store = Ext.create('Ext.data.TreeStore', 
            autoLoad : false,
            root: 
                text: 'Corporate Media',
                id: '0',
                expanded: true
            
            proxy: 
                type: 'ajax',
                url: 'data.php',
                reader: 
                    type: 'json',
                    root: 'results'                 
                
            
          );

【讨论】：

您可以使用您的代码在 jsfiddle 上创建示例吗？我会检查的。

但是使用 php 和 jsfiddle 我认为不能。我正在使用 extjs 4.2.1.883，我将编辑我的标题