Ext 表格 之 带复选框的分页表格

具体实现一个Ext表格流程如下
1) 确定数据源，数据可以从服务器获取，也可以从本地获取，但是一般来说从本地获取意义不大。实现如下。

var jsonhttp=new Ext.data.HttpProxy({url:'aabbcc.do'});
var ds = new Ext.data.Store({ proxy: jsonhttp,
 reader:new Ext.data.JsonReader( {root:’table’},
 [{name:'id'},{name:'name'},{name:'sex'}])});

 

 

 这段代码从aabbcc.do中获取数据，然后按照
{‘table’:[{id:’x’,name:’y’,sex:’z’}]}格式简析,当然，返回数据也可以多条
{‘table’:[{id:’x’,name:’y’,sex:’z’},{id:’x1’,name:’y1’,sex:’z1’},……]}。
加上ds.load(); 加载数据。

2) 定义表格列模型，如下

var cm = new Ext.grid.ColumnModel([
{id:'0',header:'编号',dataIndex:'id'}, 
{id:'1',header:'姓名',dataIndex:'name'},
{id:'2',header:'性别',dataIndex:'sex'}]);

 
                       如果不希望在表格中显示某列，可以在对应的列中加上hidden：true，如果希望按照某一列排序的可以在加上sortable：true。

 

 

3) 定义表格

var grid = new Ext.grid.GridPanel({
renderTo:"xdiv",
height:260,
width:790, 
cm:cm,
store:ds});

 
renderTo：指定组建渲染的对象
cm：表格的列模型，

store：表格的数据源。以上属性是配置一个表格的必须属性，当然，根据需要还可以增加一些属性如：
sm:表格的选择模型，
loadMask：是否需要在表格加载时显示遮罩效果。

stripeRows：是否为表格加上分隔线。
tbar,bbar:分别用于指定表格上下的工具栏。
title:表格标题，加上这个属性后表格标题栏也会随之显示。

4) 加上grid.render(),表格就可以显示了。

如果在编号字段上加上sortable：true则效果如下

加上collapsible:true,显示效果如下。

为表格加上复选框。首先，定义一个选择模式，如下
         var sm = new Ext.grid.CheckboxSelectionModel();

然后在grid的属性和ColumnModel的属性中加上sm属性即可的如下显示。

 

 

为表格加上分页。首先定义一个分页面板如下。如下：

 

var bb = new Ext.PagingToolbar({pageSize: 10, store: ds, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2}条',emptyMsg: "没有记录"});

 

然后在grid中加入tbar或bbar属性bbar：bb即可的到分页效果，如下

 

 

 

然而此时并不具备分页功能。需要给服务器提交几个参数，然后服务器根据这几个参数取出相应值，返回给客户端。与传统分页不同的是，服务器端不需要记录当前是第几页，分页参数在ds.load()中传递给服务器，如下。

ds.load({params:{start:0,limit:10}}); 

  
这条语句代表初始从第0条记录开始，每页显示10条记录。以后每点击下一页或上一页，ext会自动处理，不需要我们理会。界面如下

 

 

此时服务器传回来的数据格式如下

{'countrow':'17','table':[{'id':'1','name':'张一','sex':'男'},
{'id':'2','name':'李二','sex':'女'},
{'id':'3','name':'张三','sex':'男'},
{'id':'4','name':'赵八','sex':'女'},
{'id':'5','name':'黄武','sex':'男'},
{'id':'6','name':'赵千里','sex':'男'},
{'id':'7','name':'杨总一','sex':'男'},
{'id':'8','name':'刘月','sex':'女'},
{'id':'9','name':'姚远','sex':'男'},
{'id':'10','name':'黄大于','sex':'女'}
]}

 

而json的解析格式改为如下

 

({totalProperty: 'countrow',root:'table'},[{name:'id'},
  {name:'name'},{name:'sex'}])

 

 

 

totalProperty就是获得的记录总数

 

 

 

全部代码如下

Ext.onReady(function(){
 var jsonhttp=new Ext.data.HttpProxy({url:'griddemo.do?method=extgrid'});
 var ds = new Ext.data.Store({ proxy: jsonhttp,
  reader:new Ext.data.JsonReader({totalProperty: 'countrow',root:'table'},[{name:'id'},{name:'name'},{name:'sex'}])});
 ds.load({params:{start:0,limit:10}});
 var sm = new Ext.grid.CheckboxSelectionModel();
 var bb = new Ext.PagingToolbar({
   pageSize: 10, store: ds, displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
   emptyMsg: "没有记录"});
 var cm = new Ext.grid.ColumnModel([sm,
  {id:'0',header:'编号',dataIndex:'id',sortable:true}, 
  {id:'1',header:'姓名',dataIndex:'name'},
  {id:'2',header:'性别',dataIndex:'sex'}]);
  var grid = new Ext.grid.GridPanel({
  renderTo:"tablediv",
  height:260,
  width:450, 
  cm:cm,
  sm:sm,
  title:'我的表格',
  collapsible:true,
  store:ds,
  bbar:bb,
  });
 grid.render();
});

 

每次分页的时候服务器端接收两个参数，几start和limit，只需要处理这两个参数就可以了，不必理会当前是第几页，ext会自动处理。

start：从第几条记录开始

limit：每页显示几条记录

EXTJS1.1中，如何实现checkbox的效果？
需要三种选择状态：未操作、打钩、打叉。

俺是在cell中填入<img/>标签得到的。
觉得比较繁琐，请问有更简便的方法么？