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());}
![](http://hi.csdn.net/attachment/201112/16/0_1324025922ycym.gif)