日期:2014-05-16  浏览次数:20377 次

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}});
以上解释属个人理解,如有不妥,望指正。