首页 > PHP资讯 > HTML5培训技术 > ExtJS中的TreeStore如何添加json格式的数据

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

HTML5培训技术

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 storeExt.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 phoneNumbervar 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 abovevar 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'		}	}});


HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持10不支持0