ExtJs中Ext.grid.GridPanel使用实例

关键对象：
Ext.data.HttpProxy　　创建访问服务端的代理
Ext.data.JsonReader　　创建读取器
Ext.data.Store　　　　数据存储器
Ext.grid.ColumnModel　　gridPanel呈现时，显示的列集合
Ext.PagingToolbar　　gridPanel分页
Ext.grid.GridPanel　　数据呈现

var proxy = new Ext.data.HttpProxy({
　　url:'yourserverurl.ashx?action=get',
　　method:'GET'
});
var readerOption = {root:'Data',totalProperty:'TotalRecord',id:'ID'};
var product = Ext.data.Record.create([
　　{name:'ID',mapping:'ID'},//name:js下对象属性名称，mapping:对应服务器端属性名称
　　{name:'Name'}
]);
var reader = new Ext.data.JsonReader(
　　readerOption,
　　product
);
var store = new Ext.data.Store({
　　proxy:proxy,
　　reader:reader,
　　remoteSort:false//用于客户端排序[点击列头时升序/倒序]
});
var cm = new Ext.grid.ColumnModel({
　　columns:[
　　　　{header:'序号',tooltip:'提示序号',align:'right',width:40,dataIndex:'ID'},
　　　　{header:'产品名称',tooltip:'XX产品名称',align:'left',width:100,dataIndex:'Name'}//注意此dataIndex要与product中的name对应，且却分大小写
　　],
　　defaults:{sortable:false}//不允许客户端点击列头排序，可以打开s
});
//cm用于显示gridpanel时的列呈现
var pageBar = new Ext.PagingToolbar({
　　pageSize:25,
　　store:store,
　　displayInfo:true,
　　displayMsg:'总记录数{0}-{1}of{2}',
　　emptyMsg:'没有记录'
});
var grid = new Ext.grid.GridPanel({
　　store:store,
　　renderTo:'div_grid',//html页面上面必须要有以此div_grid为id的标签
　　cm:cm,
　　columnLines:true,
　　frame:true,
　　autoScroll:true,
　　loadMask:true,
　　autoExpandColumn:'Position',
　　height:500,
　　width:800,
　　stripeRows:true//相邻两行背景色不同　　
});
grid.store.on('load',function(){});//在服务器数据获取后，呈现之前自行处理结果集[比如，增加合计]
grid.loadMask.msg='加载中...';
grid.load({params:{start:0,limit:25},callback:overLoad});//callback用于在数据加载完成后处理页面的按钮状态，或其他业务需求。如果无其他需求可以去掉callback
grid.load({params:{start:0,limit:25}});
以上解释属个人理解，如有不妥，望指正。