剛學EXT分頁的時候搞不清楚他的原理，其實很簡單，就是把異步請求的json數據填充到grid中。至於分頁實際上只是對一些參數的控制，start,limit還有個重要的參數baseParams.我們經常遇到分頁的情況，同時還要對分類的數據進行分頁。剛開始學，不分類的數據分頁都搞不清楚，更不用說對分類數據進行分頁了。我這裏總結一下三種情況，供參考，或許對初學者有幫助。第一種：同類數據分頁，第二種：分類數據分頁。第三種：加combobox分頁。
grid分頁一定要明白這三個參數的含義。start表示從哪條記錄開始，limit表示顯示多少條記錄pageSize。正如mysql中數據庫讀取select * from tb_xx limit $start,$limit; 後臺將這些查詢數據用json格式打印出來就ok了。其餘的動作，分頁都自動完成了。用firfox+firbug調試一下，打印$start和$limit的值就明白其中的道理了。
簡單分頁：
- var client_cm = new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),
- client_check_select,
- {header:'ID',dataIndex:'id',width:40,sortable:true},
- .....................................
- ]);
- var person_ds = new Ext.data.Store({
- id: 'client_datasource',
- proxy: new Ext.data.HttpProxy({url:'grid.php'}),
- reader: new Ext.data.JsonReader({
- totalProperty: 'totalProperty',
- root: 'root'
- }, [
- {name: 'id'},
- {name: 'user_name'},
- {name: 'ip_addr'}
- ])
- });
- var grid = new Ext.grid.GridPanel({
- ds: person_ds,
- cm: client_cm,
- tbar: new Ext.PagingToolbar({
- pageSize: 10,
- store: ds,
- displayInfo: true,
- displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
- emptyMsg: "沒有記錄"
- })
- });
- person_ds.load({params:{start:0,limit:10}});
- 後臺getParameter. start,limit，各種語言不一樣就不用說了。
- 查詢出結果打印json，分頁自動完成。
分類數據分頁 ：經常遇到數據分類管理的情況，同時又要對分類的結果進行分頁。以前剛學的時候試着在start,limit上面動手腳，或者採用其它的方式，其實不用那麼複雜，做過WEB開發的人都知道，分類分頁多傳個參數，讓多傳的這個參數值變化就得了。那這個參數就是通過baseParams傳遞,這裏假定多傳的參數爲type,見如下代碼：
- var person_ds = new Ext.data.Store({
- id: 'client_datasource',
- baseParams: {type:0},
- proxy: new Ext.data.HttpProxy({url:'grid.php'}),
- reader: new Ext.data.JsonReader({
- totalProperty: 'totalProperty',
- root: 'root'
- }, [
- {name: 'id'},
- {name: 'machine_name'},
- {name: 'user_name'}
- ])
- });
這裏跟上面的區別只是多加了baseParams: {type:0},
type默認值爲0，如果要傳遞更多個參數，直接寫在後面就行了。
baseParams: {type: 0 , other: 1}, 或者baseParams:
{type: 'all' , other:'not'},
值是傳過去了，如何改變baseParams，很簡單：
person_ds.baseParams = {type:2}; 加到你的事件中,再reload就可以了。
這個時候後臺要做相應的調整：
獲取參數start,limit,type......
如查詢語句: select * from tb_xx where type='$type'
limit $start,$limit;
打印json搞定。
combobox下拉選擇分頁 ：剛開始我也是不知道如何下手，不知道參數該如何傳遞，改變limit?還是改變baseParams? 網上找了一些相關的例子，看上去感覺有點複雜，所以自己想搞個簡單點的。原理很簡單，選中下拉列表某個值的時候去更limit參數值就行了。這個時候我開始想去改變limit的值：
person_ds.reload({params:{start:0,limit:parseInt(comboBox.getValue()}});
這樣第一頁是沒問題，翻頁的時候問題就出現了。limit又是10.....記得PagingToolbar有個pageSize參數,更改一下這個值之後就成功了,原來更改pageSize就等於更改了limit的值，代碼如下：
- //分頁的下拉框
- var pagesize_combo = new Ext.form.ComboBox({
- store: page_size_store,
- width:50,
- readOnly:true,
- emptyText: '10',
- mode: 'remote',
- triggerAction: 'all',
- valueField: 'value',
- displayField: 'text'
- });
- //下拉列表事件，更改pageSize.重新加載
- pagesize_combo.on("select",function(comboBox){
- page_toolbar.pageSize = parseInt(comboBox.getValue());
- person_ds.reload({params:{start:0,limit:page_toolbar.pageSize}});
- });
- //分頁工具欄
- var page_toolbar = new Ext.PagingToolbar({
- region:'south',
- pageSize: 10,
- store: client_person_ds,
- displayInfo: true,
- displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
- emptyMsg: "沒有記錄",
- items:[
- ' 每頁顯示記錄數量：',
- pagesize_combo
- ]
- });
- 希望此文對初學者有所幫助。