ExtJS 解析json数据 动态创建grid表格
我想实现的是从后台获取到json格式的数据,然后直接创建一个grid。在网上查了很多资料,各种不懂啊。代码如下:
返回的json数据为:
问题如下:
1,表格创建失败,大家帮忙看下哪里有问题
2,返回的json数据必须有数量count这个变量吗?直接是条目的列表不行吗?
3,reader里的数组有什么作用?该怎么写?
现在的结果是:只出来了cm的那一行 展开
2013-11-22 · 知道合伙人软件行家
是你自己做的太复杂了。。。写简单点就好了
//构建数据集
Ext.onReady(function() {
var store=Ext.create('Ext.data.Store', {
//这里的字段名称是自定义的,不一定要和后台返回的一一对应,但是数量要相等,否则后面的将不会显示
fields: ['字段1','字段2','字段3'],
//自动加载数据
autoLoad: true,
proxy: {
type: 'ajax',
url: 'xxx',
reader: {
type: 'json',
//这里的root不是一定要设置的,如果返回的本身就是表格数据,就不需要
root: 'items'
}
}
});
//构建表格
Ext.create('Ext.grid.Panel', {
store:store,
renderTo: Ext.getBody(),
columns: [{
text: '列名',
dataIndex: '对应store的field,而不是json的字段',
},{
//同上
}]
});
});
不行啊,后台都没接收到ajax请求
那你用的什么版本的?我这是4.1的写法
store 在ext里叫数据存储器,你上面写的太繁复,ext提供高级store
首先你要弄清楚这个过程:
store 的load函数会触发数据存储器根据httpProxy设定的url去请求数据,请求回来的数据,要用数据读取器Reader对象,比如用你的JsonReader,每一条数据对应一个Ext.data.Record对象,你第三个问题问reader里的数组有什么用,它是Ext.data.Record的简写,你可以把那个数组写成一下这样来代替你的那个数组,不过通常为了简单起见我们都写简写
var RecordTemplate = new Ext.data.Record.create([
/* name对应的值就是存储在本条record中的key值,当你需要
* 从某一条数据中取出某个字段是,你就必须用这个key
*/
{name: 'firstname'},
/* 上面说name对应的值你读取后的key索引值,那
* mapping对应的值就是你从后台请求回来的每一条数据元素中的一个key,
* 意思就是,我从请求回来的数据中读取
* key为occupation的值存储在store 中一条record的job索引key中
*/
{name: 'job', mapping: 'occupation'}
});
http proxy
1>.SimpleStore = Store + MemoryProxy + ArrayReader 用作读取静态本地数据
2>.JsonStore = Store + HttpProxy + JsonReader 用作读取后台json信息
var ds = new Ext.data.JsonStore(
{
url:"", //请求地址
paramNames:{arg0:0}, //提交请求,附带的参数,通常你需要使用分页,排序,可以在这里
fields:["key"],//对应Reader里返回json对象中的每个key,在grid里也对应ColumnModel列模型中的dataIndex
});
2,返回的json数据必须有数量count这个变量吗?直接是条目的列表不行吗?
答:不用必须,这个count是完全自定义的,你需要分页工具条时,需要指定总共多少条数据,需要一个字段存储总条数数据,至于是count,还是total,只要和你后台返回的json中去取值时对应就可以了,分页工具条,会以count作为key在你请求回来的json去取值。这是一个前后和后台的约定字段,只要保持一致,起什么名字都无关。
直接是条目的列表是行的。其实 重要的你要理解 前台 和 后台 的约定,这不是说那一边行不行,你前台定义了什么样的格式来读,你后台就要提供什么样的数据,不然读不到数据,响应,你后台提供了什么样的数据格式,前台就要按照这个格式来读。 这是 一种约定,而数据格式是完全可以自定义的。那么你安装xml格式都可以。如果你使用的读取器前台控件规定了读取方式,那么你 后台返回的数据就要严格按照这种格式来组织。不然你后台返回的数据,前台不认识就无法读取,这是有严格逻辑的。
你可以把 root:"",totalRecords:"",id:;"" 这都都不要,后台返回的数据 是json Array,就是你说的条目列表就可以了。
改成
[{name: 'siteNo'},{name: 'siteName'}.......]
count数据总条数,做分页的时候用的
改了也不行啊,各种不出数据啊,会不会是ajax加载数据有延迟(异步)造成的