JavaScript的Ext JS架構中的GridPanel組件使用指南_extjs

1 最簡單的Grid Panel
Grid Panel是ExtJS的核心部分之一，通過Grid Panel可以對資料顯示、排序、分組和編輯。Model和Store是Grid Panel處理資料的核心，每個Grid Panel都必須設定Model和Store。要建立Grid Panel，首先要定義Model，Model包括了Grid Panel所有需要顯示的欄位，相當於資料庫中表欄位的集合。Store可以看作是一行資料的集合或者是Model的執行個體集合，每個Store都包含一個或多個Model執行個體，Grid Panel顯示的資料都儲存在Store裡面。Grid Panel通過Store擷取資料並顯示，Store則通過Proxy對資料進行讀取和儲存。
下面建立一個Grid Panel用來顯示使用者的基本資料，包括使用者名稱、郵箱、手機號(name、email、phone)，首先建立使用者模型(User Model)。

Ext.define('User', {  extend: 'Ext.data.Model',  fields: [ 'name', 'email', 'phone' ] }); 

接下來建立Store，Store是User的集合，包括多個User執行個體。

var userStore = Ext.create('Ext.data.Store', {  model: 'User', //剛才建立的User Model  data: [  { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },  { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },  { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },  { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }  ] }); 

Model和Store都建立好之後，就可以建立Grid Panel了。

Ext.create('Ext.grid.Panel', {  renderTo: Ext.getBody(),  store: userStore, //綁定上面建立的Store  width: 400,  height: 200,  title: 'Application Users',  columns: [  {  text: 'Name',  width: 100,  sortable: false,  hideable: false,  dataIndex: 'name' //Grid Panel中顯示的欄位，必須要和User Model中的欄位一致  },  {  text: 'Email Address',  width: 150,  dataIndex: 'email',  hidden: true  },  {  text: 'Phone Number',  flex: 1,  dataIndex: 'phone'  }  ] }); 

最後建立的使用者Grid Panel如圖所示。

2 Grid Panel資料分組（Grouping）
只要在Store中設定groupField屬性，就可以對Grid Panel顯示的資料進行分組。假設公司有很多員工，需要對公司的員工在Grid Panel中按部門進行分組顯示。首先在Store中設定groupField屬性為department。

Ext.create('Ext.data.Store', {  model: 'Employee',  data: ...,  groupField: 'department' //設定資料按照department分組 }); 

然後在Grid Panel中添加grouping Feature，實現分組顯示效果。

Ext.create('Ext.grid.Panel', {  ...  features: [{ ftype: 'grouping' }] }); 

分組顯示效果如下圖所示，點擊這裡查看官方分組顯示代碼。

3 Grid Panel分頁顯示
當資料比較多一頁顯示不完的時候，就需要對資料進行分頁顯示。Grid Panel可以通過Paging Toolbar和Paging Scroller兩種方式實現分頁顯示顯示，Paging Toolbar有上一頁/下一頁按鈕，Paging Scroller是當Grid Panel滾動顯示到底部的時候動態載入資料。
要實現分頁顯示，首先要設定Store支援分頁，在Store中設定pageSize，pageSize預設是25。在reader中設定資料總數量totalProperty，分頁外掛程式根據pageSize和totalProperty進行分頁。下面的代碼pageSize設定為4，totalProperty則從返回的json資料中total屬性擷取。

Ext.create('Ext.data.Store', {  model: 'User',  autoLoad: true,  pageSize: 4, //設定每頁顯示的資料數量  proxy: {  type: 'ajax',  url : 'data/users.json',  reader: {  type: 'json',  root: 'users', //指定從json的哪個屬性擷取資料，如果不指定，則從json的跟屬性擷取  totalProperty: 'total' //總資料數量  }  } }); 

假設json資料格式如下

{  "success": true,  "total": 12,  "users": [  { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },  { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },  { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },  { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }  ] } 

Store的分頁已經設定完畢，下面在Grid Panel中實現Paging Toolbar分頁功能。

Ext.create('Ext.grid.Panel', {  store: userStore,  columns: ...,  dockedItems: [{  xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar  store: userStore, //把paging toolbar的Store設定成和Grid Panel的Store一樣  dock: 'bottom',  displayInfo: true  }] }); 

Paging Toolbar的分頁效果如下圖所示，點擊這裡查看官方Paging Toolbar分頁功能代碼。

Paging Scroller的分頁實現比較簡單，只要在Grid Panel中設定如下代碼即可，點擊這裡查看官方Paging Scroller分頁功能代碼。

Ext.create('Ext.grid.Panel', {  //使用Paging Scroller分頁外掛程式  verticalScroller: 'paginggridscroller',  // do not reset the scrollbar when the view refreshs  invalidateScrollerOnRefresh: false,  // infinite scrolling does not support selection  disableSelection: true,  // ... }); 

4 Grid Panel添加Checkbox
只要設定Grid Panel的selModel屬性為Ext.selection.CheckboxModel，點擊這裡查看官方代碼執行個體。

Ext.create('Ext.grid.Panel', {  selModel: Ext.create('Ext.selection.CheckboxModel'), //設定Grid Panel的選擇模式為Checkbox  store: userStore,  columns: ... }); 

5 綜合樣本

var grid = new Ext.grid.GridPanel({  store //資料來源  cm //Ext.grid.columnModel  columns //功能和Ext.grid.columnModel一樣。與cm有一個就行  autoWidth:true  width  title  border:false  columnLines: true,  renderTo //顯示div標籤的id  animCollapse:false //True 表示為面板閉合過程附有動畫效果 (預設為true,在類 Ext.Fx 可用的情況下).  collapsible: true, //true 表示面板可以閉合  columnLines：true, //true 表示有格邊框  loadMask:true //擷取資料裡時有等待介面  stripeRows: true, //雙色表格  plugins：true,  bbar:new Ext.PagingToolbar({  pageSize:10,  store:store, //資料來源  displayInfo:true, //為true時下面的才顯示  displayMsg:'顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',  emptyMsg:'沒有記錄'  }),  tbar:[{  text:'查詢',  icon:'/trade/images/delete.gif',  cls:'x-btn-text-icon',  handler:function(){win.show();}  } }) 

//********************************************** //PagingToolbar分頁 //傳到伺服器資料 start開始查詢位置， limit要查詢多少條 //排序 //伺服器 sort,dir //********************************************** var com = new Ext.grid.ColumnModel([  new Ext.grid.RowNumberer(),  {header: "客戶ID", width: 50, sortable: true, dataIndex: 'memid'},  {header: "客戶姓名", width: 75, sortable: true, dataIndex: 'memName'},  {header:'姓別', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}}  {header: '跟蹤號',width:150,dataIndex:'code'},  {header: '日期', width:150, dataIndex: 'kd_time'} ]); 

 

/*********************************************** grid tbar 樣式 cls:'x-btn-text-icon' 添加 **************************************************/ EditorGridPanel  chickToEdit:1 //點擊次數  ColumnModel 中要加editor editor:new Ext.form.TextField({  }) //擷取修改後的資料 var storeEdit = grid.getStore(); //  var modified = storeEdit.modified.slice(0); //  Ext.each(modified,function(m){  alert(m.data.id);  //資料就在m.data中 id 為欄位名 }) 

//擷取grid資料 var selModel = grid.getSelectionModel(); 擷取選擇模式 var record; if(!selModel.hasSelection()){  Ext.Msg.alert('警告','請選擇要修改的行!');  return; } selModel.getSelections().length; //選擇的行數  record = selModel.getSelected(); //擷取選擇行的資料 

(1)擷取資料 :
單行 

id = record.get('id'); 

或者 

id = record.data.id; 

多行 

record[i].get('ddd') 

(2)刪除資料 :

var obj = grid.getSelectionModel().getSelected(); store.remove(obj); grid.getView().refresh(); 

(3)查詢 

store.baseParams['memid'] = fb.form.findField('memid').getValue(); store.baseParams['start'] = 0; store.load(); 

(4)添加一行列 :
Ext自己帶的一個外掛程式 
需要檔案 RowExpander.js 

var expand = new Ext.ux.grid.RowExpander({  tpl : new Ext.Template(  '<p>{address}</p>'  ) }); 

在grid的columns中加 expand， 
並在grid屬性中加 plugins: expand