ExtJS中的TreeStore如何添加json格式的数据

最新推荐文章于 2021-08-05 22:01:42 发布

Spring_Ji

最新推荐文章于 2021-08-05 22:01:42 发布

阅读量1.3w

点赞数

分类专栏： Ext 文章标签： Ext json TreeStore store

本文链接：https://blog.csdn.net/jcx5083761/article/details/17305653

版权

Ext 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ext的帮助中写明了给treeStore绑定数据有两种方式，一种是root属性，code如下：

root: {
    expanded: true,
    text: "My Root",
    children: [
        { text: "Child 1", leaf: true },
        { text: "Child 2", expanded: true, children: [
            { text: "GrandChild", leaf: true }
        ] }
    ]
}

这种方式只能添加Tree格式的数据，但是如果想要添加TreeGrid格式的数据就不行了，所以Pass。

另外一种是proxy的方式：这种方式有两种选择，一种是Client端的，一种是Server端的，现在我要绑定json格式的数据，肯定选择Client端的，Client端也有三种方式，其中只有MemoryProxy方式与浏览器无关的，所以选择这种。

Code如下：

//this is the model we will be using in the store
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'},
        {name: 'phone', type: 'string', mapping: 'phoneNumber'}
    ]
});

//this data does not line up to our model fields - the phone field is called phoneNumber
var data = {
    users: [
        {
            id: 1,
            name: 'Ed Spencer',
            phoneNumber: '555 1234'
        },
        {
            id: 2,
            name: 'Abe Elias',
            phoneNumber: '666 1234'
        }
    ]
};

//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    model: 'User',
    data : data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

这里大家如果拿这个code去测试，肯定无法通过的，因为你将store加入到tree.panel中会报错，因为你创建的store格式不是TreeStore格式的，这块需要修改一下，还需要把data拿到proxy里面，因为TreeStore没有data属性，这块是Ext示例代码的问题，修改后的结果为：

var store = Ext.create('Ext.data.TreeStore', {
	autoLoad: true,
	model: 'Case',
	proxy: {
		type: 'memory',
		data: data,
		reader: {
			type: 'json',
			root: 'users'
		}
	}
});