java程序员菜鸟进阶（十一）Extjs4常用功能（三）——列表grid的使用（带综合查询，分页）

在开发中，显示数据库表中的列表功能是很常用的功能，一般列表都会带有综合查询和分页功能，在extjs4中为我们提供了强大的列表grid功能，在此记录一下，算是做个备忘

var mystore = Ext.create('Ext.data.Store',
{
fields : [ 'id', 'occurDate',"occurPlace","charger","content","inputUserName","institutionName"],
//分页大小
        pageSize: 10,
proxy : {
type : 'ajax',
url : 'CenterBankTrendAction!CenterBankTrendList',
reader : {
type : 'json',
root : 'trendList',
totalProperty : 'total'
}
},
autoLoad : true
}
)
var mygrid = Ext.create('Ext.grid.Panel', {
 tbar:[
           	 {xtype:'button',icon:'../images/add.png',text:'添加动态',handler:function(){win.show();}}
           	],
title : '人行动态',
renderTo : Ext.getBody(),
//layout:{type:'vbox',align:'left'},
frame : true,
store :mystore ,
columns : [ new Ext.grid.RowNumberer(), 
//{
//xtype: 'actioncolumn',
//header:"删除",
//width:50,
//icon   :  '../images/delete3.png',
//handler: function(grid, rowIndex, colIndex){
//            Ext.MessageBox.confirm("确认",'是否确认删除？',function(btn){
//            if('yes' == btn){
//            var store = mygrid.getStore();
//               var value = store.getAt(rowIndex);
//               var trendId = value.get('id');
//window.location.href="CenterBankTrendAction!deleteTrend?trend.id="+trendId;
//            }
 //           })
//           }//handler is closed
//},
{
xtype: 'actioncolumn',
header:"详情",
width:40,
icon   :  '../images/edit.png',
handler: function(grid, rowIndex) {
                 	 var id= grid.getStore().getAt(rowIndex).get('id');
                    	editWinShow(id);
               	  }//handler is closed
},
{
header : "时间",
width : 100,
dataIndex : 'occurDate',
}, {
header : "地点",
width : 150,
dataIndex : 'occurPlace',
//sortable : true
}, {
header : "动态内容",
width : 160,
dataIndex : 'content',
}, 
{
header : "对应xx",
width : 160,
dataIndex : 'institutionName',
},
{
header : "负责人",
width : 80,
dataIndex : 'charger',
}
 ]
 ,
 //分页开始
 dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    store: mystore,  // same store GridPanel is using
                    dock: 'bottom', //分页 位置
                    emptyMsg: '没有数据',
                    displayInfo: true,
                    displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
                    beforePageText: '第',
                    afterPageText: '页/共{0}页'
                }],//分页结束
});

首先创建一个数据源store，一般加载数据源都是用ajax的方式，也有其他的方式，大家可以去查看一下帮助文档。Store中：

url指定的是去哪加载数据源，

reader算是一个加载器，

type指定加载的数据类型，这里我用的是json数据类型。

root指定加载数据源的变量名

totalProperty指定记录数据总数的变量名

autoLoad指定是否自动加载

创建完数据源后，然后就要去定义一个grid，一般在grid里面加一个tbar来放综合查询的一些控件。

Store指定数据源，这里指定我们在上面写的mysrore

renderTo指定把这个grid渲染到页面的哪一部分

Columns指定grid中都有哪些列

dataIndex指定这一列的所要显示的数据name

dockedItems指的的下面的停靠栏所要显示的内容，这里是显示的分页部分

在一些actioncolumn中，handler指定点击该行的按钮时所要执行的功能。

在这里，有一点要说明的是一个综合查询，上面的例子没有综合查询，只是给出一个简单的grid实例，下面我说说这里的综合查询怎么实现。

由于grid的数据源大部分是ajax加载数据实现的，所以在如果我们提交综合查询时直接把查询参数传到后台的话，那我们在ajax加载数据源的时候无法得到正确的结果，所以，我们可以换个思路，在构架store时把这综合查询参数动态添加到store的url中。添加到url后，然后再让store去加载数据源。也就是说在我们点击综合查询的提交按钮时，我们去加载数据源，这样直接在提交按钮触发事件时调用我们定义的创建store方法就OK了。下面看一下具体实例：

tbar:[
    	 yearsCombx,
    	     financeInstitutionCombx,//这里是连个下拉列表，在后面会降到
    	            	 {
           	 xtype:'button',
           	 icon:'../images/accept.png',
           	 text:'查看',
           	 handler:function(){
           	 var year = yearsCombx.getValue()==null?0:yearsCombx.getValue();
           	 var institutionId =financeInstitutionCombx.getValue();
           	 freshStore(year,institutionId);
           	 }
           	 }
           
           	],
function freshStore(year,institutionId){
if(institutionId==null)institutionId='';
 mystore = Ext.create('Ext.data.Store',
{
fields : [ 'reportInstitution','byAssistInstitution','assistDate','assistContent','result','reportYear','reportUsername'],
//分页大小
        pageSize: 10,
proxy : {
type : 'ajax',
url : "AssistJudicialCaseAction!assistJudicialList?search.institutionId="+institutionId+"&&search.year="+year,
reader : {
type : 'json',
root : 'freezeAccountList',
totalProperty : 'total'
}
},
autoLoad : true
}
)
mygrid.reconfigure(mystore, cm);
mygrid.getDockedComponent('pageBar').bind(mystore);//重新绑定分页
}

这里还要注意的一点事，在每次提交综合查询的时候都会创建一个新的store，所以在最后要从新给grid和pagebar绑定数据源