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綁定資料來源