Extjs4.2.1 - 将 json 加载到树面板失败 [英] Extjs4.2.1 - Load json to treepanel fails

问题描述

我创建了一个树面板，然后创建了 store 就像

 var store = Ext.create('Ext.data.TreeStore', {自动加载:假，代理人: {类型:'阿贾克斯'，网址:'data.php'，读者:{类型:'json'，根:'结果'}}});

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

{结果":[{ id : '1' , text : '1', 展开: true,孩子们 :[{ ID:'5'，文本:'5'，叶:真}，{ ID:'6'，文本:'6'，叶:真}]},{ id:'2'，文本:'2'，叶:真}，{ ID:'3'，文本:'3'，叶:真}，{ ID:'4'，文本:'4'，叶:真}，{ ID:'7'，文本:'7'，叶:真}，{ ID:'8'，文本:'8'，叶:真}，{ ID:'9'，文本:'9'，叶:真}，{ id:'10'，文本:'10'，扩展:真，孩子们 :[{ ID:'11'，文本:'11'，叶:真}，{ ID:'12'，文本:'12'，叶:真}]}]}

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

而且我的树增加了两倍

如何解决这个问题，谢谢

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

var store = Ext.create('Ext.data.TreeStore', {自动加载:假，代理人: {类型:'阿贾克斯'，网址:'data.php'，读者:{类型:'json'，根:'结果'}}});Ext.create('Ext.tree.Panel', {title: '简单的树',宽度:200，高度:150，商店:商店，根可见:假，renderTo: Ext.getBody()});

这是我的data.php

回声{'成功':真的，'变量':100，'结果':[{ id : '1' , text : '1', 展开: true,孩子们 :[{ ID:'5'，文本:'5'，叶:真}，{ ID:'6'，文本:'6'，叶:真}]},{ id:'2'，文本:'2'，叶:真}，{ ID:'3'，文本:'3'，叶:真}，{ ID:'4'，文本:'4'，叶:真}，{ ID:'7'，文本:'7'，叶:真}，{ ID:'8'，文本:'8'，叶:真}，{ ID:'9'，文本:'9'，叶:真}，{ id:'10'，文本:'10'，扩展:真，孩子们 :[{ ID:'11'，文本:'11'，叶:真}，{ ID:'12'，文本:'12'，叶:真}]}]}";

解决方案

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

回声{'成功':真的，'变量':100，'结果':[{ 'id' : '1' , 'text' : '1', 'expanded': true,'结果':[{ '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,'结果':[{ 'id' : '11' , 'text' : '11', 'leaf':true},{ 'id' : '12' , 'text' : '12', 'leaf':true}]}]}";

另一个选项是将顶级 results 属性名称更改为 children 并将您商店的根标记为 children.

I create a treepanel and I and create store like

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

my server print json look like

{ "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}
        ]
    }
    ]
}

But when i run my code, i see firebug and that always run GET http://localhost/example/data.php... never stop :(

and my tree is added so much double

How to fix that thank

Edit
In real i define my treepanel with alias and using it as xtype
But i create new example and get same problem. Here is my 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()
        });

And here is my 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}
        ]
    }
    ]
}";

解决方案

What you have here is something I consider to be a bug in the treestore. When you change the reader to use a root that isn't children, you also need to change every instance of the children property name in the data to the new name too. That means if you want to change the root to results, your tree data would actually have to look something like this:

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}
        ]
    }
    ]
}";

The other option is to change the top level results property name to children and mark the root of your store as children.

这篇关于Extjs4.2.1 - 将 json 加载到树面板失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！