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

標籤

2013年1月29日 星期二

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


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


Code:
  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

沒有留言:

張貼留言

網誌存檔

關於我自己

我的相片
Where there is a will, there is a way!