extjs使用MVC从json文件加载树 [英] extjs loading tree from json file using MVC

问题描述

当我从一个json文件加载树的时候，我遇到了一个奇怪的问题，它进入一个循环并显示树如下（在一个连续循环中）

  -A 
 -A 
 -A 
 -A 
  

我的json

  {
success：true，
results：[
 {text：number 1，leaf：true}，
 {text：number 2，leaf 
 {text：number 3，leaf：true}，
 {text：number 4，expanded：true，children：[
 {text：number 4.1，leaf：true}，
 {text：number 4.2，leaf：true}，
 {text：number 4.3 ，leaf：true} 
]}，
 {text：number 5，leaf：true} 
] 
} 
  

我的模型

  Ext.define（'App.model.TreeModel'，{
 extends：'Ext.data.Model'，
 fields：[
 {name：'text'，type：'string'} 
]，
 
 proxy：{
 type：'ajax'，
 url：'data / tree .json'，
 reader：{
 type：'json'，
 root：'results'
} 
} 
}）; 
  

商店

  Ext.define（'App.store.MyTreeStore'，{
 extends：'Ext.data.TreeStore'，
需要：'App.model.TreeModel'，
模型：'App.model.TreeModel'，
}）; 
  

查看

  Ext.define（'App.view.MeetingTree'，{
 extends：'Ext.tree.Panel'，
 title：'Simple Tree'，
 store：'MyTreeStore '，
 alias：'widget.meetingtree'，
 rootVisible：false，
 height：200 
}）; 
  

我的初始化文件

  Ext.application（{
 name：'App'，
 autoCreateViewport：true，
 
 models：['TreeModel']，
 store ：['MyTreeStore']，
 
 launch：function（）{
 
} 
}）; 
  

没有一个线索，为什么它的循环..任何人都有想法？

提前感谢

解决方案

终于找到了解决方案

删除行

  root：'results'
  

从模型

，并将json与

  {
 text：'。'，
 children：[{
  

full json

  {
 text：'。'，
 children：[{
 text：'Basic Ext Layouts'，
 expanded：true，
 children：[{
 text：'Absolute'，
 id： 绝对，
叶：真
}，{
文本：手风琴，
 id：'手风琴'，
叶：真
} ，{
 text：'Anchor'，
 id：'anchor'，
 leaf：true 
}，{
 text：'Border'，
 ID：'边界，
 leaf：true 
}，{
 text：'Card（TabPanel）'，
 id：'card-tabs'，
 leaf：true 
 $ {
文本：'卡（向导）'，
 id：'卡片向导'，
叶：真
}，{
文本：列'，
 id：'column'，
 leaf：true 
}，{
文本：'Fit'，
 id：'fit'，
 leaf：true 
}，{
 text：'Table'，
 id：'table'，
 leaf：true 
}，{
 text ：'vBox'，
 id：'vbox'，
 leaf：true 
}，{
 text：'hBox'，
 id：'hbox'，
 leaf：true 
}] 
}，{
 text：'自定义布局'，
 children：[{
 text：'Center'，
 id：'center'，
 leaf：true 
}] 
}，{
 text：'组合示例'，
 children：[{
文本：绝对的谎言out 
 id：'abs-form'，
 leaf：true 
}，{
 text：'Tabs with Nested Layouts'，
 id：' tab-nested-layouts'，
 leaf：true 
}] 
}] 
} 
  

Hithere, I'm having a strange problem where when I load a tree from a json file it goes into a loop and displays the tree as follows (in a continous loop)

-A
  -A
    -A
      -A

My json

{
    "success": true,
    "results": [
        { "text": "number 1", "leaf": true },
        { "text": "number 2", "leaf": true },
        { "text": "number 3", "leaf": true },
        { "text": "number 4", "expanded": true, "children":[
            { "text": "number 4.1", "leaf": true },
            { "text": "number 4.2", "leaf": true },
            { "text": "number 4.3", "leaf": true }
        ]},
        { "text": "number 5", "leaf": true }
    ]
}

My model

Ext.define('App.model.TreeModel', {
    extend:'Ext.data.Model',
    fields: [
             { name: 'text', type: 'string'}
         ],

        proxy:{
            type:'ajax',
            url: 'data/tree.json',
            reader:{
                type:'json',
                root:'results'
            }
        }
    });

Store

Ext.define('App.store.MyTreeStore', {
    extend: 'Ext.data.TreeStore',
    requires: 'App.model.TreeModel',
    model:'App.model.TreeModel',
});

View

Ext.define('App.view.MeetingTree', {
    extend:'Ext.tree.Panel',
    title:'Simple Tree',
    store:'MyTreeStore',
    alias:'widget.meetingtree',
    rootVisible:false,
    height:200
});

My init file

Ext.application({
    name: 'App', 
    autoCreateViewport: true,

    models: ['TreeModel'],    
    stores: ['MyTreeStore'],

    launch: function() {

    }
});

Dont have a clue why its looping.. anyone got an idea?

Thanks in advance

解决方案

finally found a solution

Remove the line

root:'results'

from the model

and star the json with

{ 
text: '.',
children: [{

full json

{ 
text: '.',
children: [{
    text:'Basic Ext Layouts',
    expanded: true,
    children:[{
        text:'Absolute',
        id:'absolute',
        leaf:true
    },{
        text:'Accordion',
        id:'accordion',
        leaf:true
    },{
        text:'Anchor',
        id:'anchor',
        leaf:true
    },{
        text:'Border',
        id:'border',
        leaf:true
    },{
        text:'Card (TabPanel)',
        id:'card-tabs',
        leaf:true
    },{
        text:'Card (Wizard)',
        id:'card-wizard',
        leaf:true
    },{
        text:'Column',
        id:'column',
        leaf:true
    },{
        text:'Fit',
        id:'fit',
        leaf:true
    },{
        text:'Table',
        id:'table',
        leaf:true
    },{
        text:'vBox',
        id:'vbox',
        leaf:true
    },{
        text:'hBox',
        id:'hbox',
        leaf:true
    }]
},{
    text:'Custom Layouts',
    children:[{
        text:'Center',
        id:'center',
        leaf:true
    }]
},{
    text:'Combination Examples',
    children:[{
        text:'Absolute Layout Form',
        id:'abs-form',
        leaf:true
    },{
        text:'Tabs with Nested Layouts',
        id:'tabs-nested-layouts',
        leaf:true
    }]
}]
}

这篇关于extjs使用MVC从json文件加载树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！