ExtJS使用本地JSON建树，重复加载

[Uco__]

初学Extjs，建树时使用了本地的JSON文件，但出现重复的问题，如图

json:

{
    "success": true,
    "deps": [
        {
            "id": 1,
            "text": "Class 1",
            "leaf": false,
            "children": [
                {
                    "id": 2,
                    "text": "Class 1.1",
                    "leaf": true,
                    "children": []
                },
                {
                    "id": 3,
                    "text": "Class 1.2",
                    "leaf": true,
                    "children": []
                }
            ]
        },
        {
            "id": 4,
            "text": "Class 2",
            "leaf": false,
            "children": [
                {
                    "id": 5,
                    "text": "Class 2.1",
                    "leaf": true,
                    "children": []
                }
            ]
        }
    ]
}

model:

Ext.define('App.model.Dep', {

    extend: 'Ext.data.Model',

    idProperty: 'depmodel',

    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'text',
        type: 'string'
    }]

});

store:

Ext.define('App.store.DepTree', {

    extend: 'Ext.data.TreeStore',

    alias: 'store.deptree',

    model: 'App.model.Dep',

    autoLoad: false,

    root: {
        id: 0,
        text: 'root',
        leaf: false,
        expanded: true
    },

    proxy: {
        type: 'ajax',
        url: 'data/dep.json',
        reader: {
            type: 'json',
            rootProperty: 'deps',
            successProperty: 'success'
        }

    }
});

treepanel:

Ext.define('App.view.dep.DepTree', {

    extend: 'Ext.tree.Panel',

    alias: 'widget.deptree',

    uses: [
        'App.store.DepTree'
    ],

    title: '部门',

    glyph: 0xf0c9,

    rootVisible: false,

    lines: true,

    viewModel: 'dep',

    initComponent: function () {
        var me = this;
        var store = Ext.create('App.store.DepTree');
        me.store = store;
        me.callParent();
    }

});

[Uco__]

@showbo 拜托拜托

[斯洛文尼亚旅游]

配置proxy后，你点击展开一次就全部返回json的所有数据，这样这些数据不就全部作为你点击的这个子节点了。。 用动态页来过滤，返回需要的节点，而不是json，ext不会帮你自动过滤的，如果不支持动态页，直接用ext.ajax请求你的json获取到数据后再生成tree，将获取到的数据来配置App.store.DepTree的root，去掉proxy 如 Ext.define('App.store.DepTree', { extend: 'Ext.data.TreeStore', root: { id: 0, text: 'root', leaf: false, expanded: true } }); Ext.define('App.view.dep.DepTree', { extend: 'Ext.tree.Panel', //alias: 'widget.deptree', uses: ['App.store.DepTree'], title: '部门', //glyph: 0xf0c9, rootVisible: false, lines: true, //viewModel: 'dep', initComponent: function () { var me = this; var store = Ext.create('App.store.DepTree'); me.store = store; me.callParent(); Ext.Ajax.request({ url: 'csdn.json', success: function (response) { var o = Ext.decode(response.responseText); var root = store.getRootNode(); root.appendChild(o.deps); } }); } });

[斯洛文尼亚旅游]

配置proxy后，你点击展开一次就全部返回json的所有数据，这样这些数据不就全部作为你点击的这个子节点了。。 用动态页来过滤，返回需要的节点，而不是json，ext不会帮你自动过滤的，如果不支持动态页，直接用ext.ajax请求你的json获取到数据后再生成tree，将获取到的数据来配置App.store.DepTree的root，去掉proxy 如 Ext.define('App.store.DepTree', { extend: 'Ext.data.TreeStore', root: { id: 0, text: 'root', leaf: false, expanded: true } }); Ext.define('App.view.dep.DepTree', { extend: 'Ext.tree.Panel', //alias: 'widget.deptree', uses: ['App.store.DepTree'], title: '部门', //glyph: 0xf0c9, rootVisible: false, lines: true, //viewModel: 'dep', initComponent: function () { var me = this; var store = Ext.create('App.store.DepTree'); me.store = store; me.callParent(); Ext.Ajax.request({ url: 'csdn.json', success: function (response) { var o = Ext.decode(response.responseText); var root = store.getRootNode(); root.appendChild(o.deps); } }); } });

[Uco__]

引用 2 楼 showbo 的回复:

配置proxy后，你点击展开一次就全部返回json的所有数据，这样这些数据不就全部作为你点击的这个子节点了。。 用动态页来过滤，返回需要的节点，而不是json，ext不会帮你自动过滤的，如果不支持动态页，直接用ext.ajax请求你的json获取到数据后再生成tree，将获取到的数据来配置App.store.DepTree的root，去掉proxy

谢谢