[ ExtJS3.x 範例代碼 ] Ext.grid.GridPanel : 動態選擇 PageSize

參考自 這裡
View:
在 Ext.grid.GridPanel 上面添加 item 讓用戶可以動態選擇 Page Size: (demo)


Code:

view plaincopy to clipboardprint?

1. Ext.onReady(function(){    
2.     Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';  
3.     Ext.QuickTips.init();    
4.     Ext.form.Field.prototype.msgTarget = 'qtip';//統一指定錯誤訊息提示方式    
5.     var limit = 5;  
6.       
7.     var combo = new Ext.form.ComboBox({    
8.         name : 'perpage',    
9.         width: 40,    
10.         store: new Ext.data.ArrayStore({    
11.         fields: ['id'],    
12.         data  : [    
13.             [limit],    
14.             ['10'],    
15.             ['15']    
16.             ]    
17.         }),    
18.         
19.         mode : 'local',    
20.         value: limit,    
21.         listWidth     : 40,    
22.         triggerAction : 'all',    
23.         displayField  : 'id',    
24.         valueField    : 'id',    
25.         editable      : false,    
26.         forceSelection: true    
27.     });  
28.       
29.       
30.       
31.     combo.on('select', function(combo, record) {    
32.         pageBar.pageSize = parseInt(record.get('id'), 10);    
33.         pageBar.cursor = 0;    
34.         store.load({params:{start: pageBar.cursor, limit: pageBar.pageSize}});  
35.     }, this);  
36.   
37.     var store = new Ext.data.Store({//配置分組數據集    
38.         autoLoad :{params : {start : 0,limit : limit}},    
39.         reader: new Ext.data.JsonReader(),    
40.         proxy : new Ext.data.HttpProxy({    
41.             url : 'jsonServer.jsp'    
42.         })    
43.     });      
44.       
45.     var pageBar = new Ext.PagingToolbar({//分頁工具欄    
46.         store : store,    
47.         pageSize : limit,    
48.         displayInfo : true,    
49.         displayMsg : '第 {0} 條到 {1} 條，一共 {2} 條',    
50.         emptyMsg : "沒有數據",  
51.         items   :    [    
52.                       '-',    
53.                       'Per Page: ',    
54.                       combo    
55.                   ]   
56.     });  
57.                   
58.     var grid2 = new Ext.grid.GridPanel({    
59.             id : 'myGridID2',  
60.         title : '表格數據分頁',    
61.         viewConfig: {forceFit: true},  
62.         width:800,    
63.         height:500,    
64.         frame:true,   
65.         renderTo: null,  
66.         tbar : pageBar,  
67.         store: store,    
68.         columns: [//配置表格列    
69.             new Ext.grid.RowNumberer(),//表格行號組件    
70.             {header: "id", width: 80, dataIndex: 'personId', sortable: true},    
71.             {header: "姓名", width: 100, dataIndex: 'personName', sortable: true},    
72.             {header: "年齡", width: 100, dataIndex: 'personAge', sortable: true}    
73.         ]    
74.     });               
75.                       
76.       
77.       
78.     var win = new Ext.Window({  
79.         title: 'Index',  
80.         closable: false,  
81.         height:600,  
82.         width: 650,  
83.         bodyStyle: 'padding:10px',  
84.         contentEl: 'content',  
85.         autoScroll: true,  
86.         collapsible: true,  
87.         draggable: true,  
88.         maximizable: true,  
89.         items: [grid2]  
90.     });  
91.     win.show();  
92.          
93. });  

This message was edited 1 time. Last update was at 29/01/2013 17:49:32