ExtJS中的TreeStore如何添加json格式的数据
2013-12-13 17:39
701 查看
Ext的帮助中写明了给treeStore绑定数据有两种方式,一种是root属性,code如下:
这种方式只能添加Tree格式的数据,但是如果想要添加TreeGrid格式的数据就不行了,所以Pass。
另外一种是proxy的方式:这种方式有两种选择,一种是Client端的,一种是Server端的,现在我要绑定json格式的数据,肯定选择Client端的,Client端也有三种方式,其中只有MemoryProxy方式与浏览器无关的,所以选择这种。
Code如下:
这里大家如果拿这个code去测试,肯定无法通过的,因为你将store加入到tree.panel中会报错,因为你创建的store格式不是TreeStore格式的,这块需要修改一下,还需要把data拿到proxy里面,因为TreeStore没有data属性,这块是Ext示例代码的问题,修改后的结果为:
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' } } });
相关文章推荐
- 如何在Django中接收JSON格式的数据
- 如何使用json的数据格式给Highcharts赋值
- java 如何返回json格式数据
- C# 语言如何获取json格式的数据,不用javascript用c#实现。。。
- 如何让webapi只返回json格式数据
- Asp.net生成Extjs-Tree数据格式的json类
- 关于java 发送http json数据格式请求时,服务器端如何接收json数据并解析
- 如何使用PHP调用API接口( 如何POST一个JSON格式的数据给Restful服务)
- Servlet如何获取ajax中以json格式传入的数据?
- Android如何用json格式传数据到后台(SSM) 做一个简单的登录流程
- extjs JSONStore的load事件/insert,add方法应用 如何动态改变显示数据
- extjs读取解析后端json格式数据并显示条形图
- Extjs 使用Ext.JSON.encode封装json格式的数据
- 如何通过Java的Web服务器把DataSet或DataTable数据通过json格式传回给C#的客户端
- EmberJS中EmberData如何解析非默认格式的JSON数据
- 后台返回一个string类型的json格式数据,前台js如何读取?
- ajax请求返回Json格式数据如何循环输出成table形式
- 如何将ajax请求返回的Json格式数据循环输出成table形式
- android 用json格式同步数据库数据时遇到null值如何传递
- 如何在FastReport.Net中使用JSON格式的数据