Ext.data.GroupingStore 从后台获取数据
2011-12-16 16:58
344 查看
1.看ExtJs3.3.1的examples,学习了一下,实现从后台获取数据,真的不喜欢,本地的数据,一定要实现了后台读取数据,才爽。。。。
前台js
var xg = Ext.grid; //1.定义数据存储器store var store = new Ext.data.GroupingStore({ autoLoad:true, reader: new Ext.data.JsonReader({ root:'results',//与后台中的map的key相同,开始的时候写在了外面了,数据没有显示出来。 //以前简写时是直接写的,用了JsonReader之后要加载{},里面,后面就是以前的fields(而fields,也可以写成Ext.data.record.cr //eate([{}]),这样的形式) }, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, {name: 'industry'}, {name: 'desc'} ]), //data: xg.dummyData2,//本地数据直接是对象数组。 proxy : new Ext.data.HttpProxy({ url : 'getGroupDatas.json', method: 'GET' }), sortInfo:{field: 'company', direction: "ASC"}, groupField:'industry'//指定列分组 }); var grid = new xg.GridPanel({ store: store, columns: [ {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney}, {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], view: new Ext.grid.GroupingView({ forceFit:true, //下面这个属性会对每一组进行统计总数。 groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' }), frame:true, width: 700, height: 450, collapsible: true, animCollapse: false, title: 'Grouping Example', iconCls: 'icon-grid', fbar : ['->', { text:'Clear Grouping', iconCls: 'icon-clear-group', handler : function(){ store.clearGrouping();//去除分组,好像没见添加分组的函数。 } }], renderTo: document.body });
后台获取数据,用的是servlet,
if("/getGroupDatas".equals(path)){ //company,price,change,pctChange,lastChange,industry List<Map<String,Object>> list = new ArrayList<Map<String,Object>>(); for(int i=0;i<10;i++){ Map<String,Object> map = new HashMap<String,Object>(); map.put("company", "IBM("+i+")"); map.put("price",10.1+i); map.put("change", 0.05+i); map.put("pctChange", Float.parseFloat("0.4"+i)); map.put("lastChange", "4/3 12:00am"); if(i < 3){ map.put("industry", "Manufacturing"); }else if(i <6 ){ map.put("industry", "Food"); }else { map.put("industry", "Computer"); } list.add(map); } Map<String,Object> maps = new HashMap<String,Object>(); maps.put("results", list); JSONObject obj= JSONObject.fromObject(maps); out.println(obj.toString());}
相关文章推荐
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 关于从不同的URL获取JSON数据时Ext.data.Store反映迟缓问题的解决
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- ext的Ext.data.JsonStore不自动获取数据的问题记录
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- Extjs和Asp.NET后台的数据交互(二) => Ext.data.Connection
- flex中Menubar组件dataprovider的后台数据获取方法
- Ext.data.xxxStore 数据解析的简单运用
- Ext.data-GroupingStore/JsonStore/SimpleStore
- [转载]EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore
- 【转】Ext.data.Store加载及显示数据
- Ext.data-GroupingStore/JsonStore/SimpleStore