JavaScript的Ext JS框架中的GridPanel組件使用指南
1 最簡單的Grid Panel
Grid Panel是ExtJS的核心部分之一，通過Grid Panel可以對數(shù)據(jù)顯示、排序、分組和編輯。Model和Store是Grid Panel處理數(shù)據(jù)的核心，每個Grid Panel都必須設(shè)置Model和Store。要創(chuàng)建Grid Panel，首先要定義Model，Model包括了Grid Panel所有需要顯示的字段，相當(dāng)于數(shù)據(jù)庫中表字段的集合。Store可以看作是一行數(shù)據(jù)的集合或者是Model的實例集合，每個Store都包含一個或多個Model實例，Grid Panel顯示的數(shù)據(jù)都存儲在Store里面。Grid Panel通過Store獲取數(shù)據(jù)并顯示，Store則通過Proxy對數(shù)據(jù)進行讀取和保存。
下面創(chuàng)建一個Grid Panel用來顯示用戶的基本信息，包括用戶名、郵箱、手機號(name、email、phone)，首先創(chuàng)建用戶模型(User Model)。
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
接下來創(chuàng)建Store，Store是User的集合，包括多個User實例。
var userStore = Ext.create('Ext.data.Store', {
model: 'User', //剛才創(chuàng)建的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都創(chuàng)建好之后，就可以創(chuàng)建Grid Panel了。
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore, //綁定上面創(chuàng)建的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'
}
]
});
最后創(chuàng)建的用戶Grid Panel如圖所示。
2 Grid Panel數(shù)據(jù)分組（Grouping）
只要在Store中設(shè)置groupField屬性，就可以對Grid Panel顯示的數(shù)據(jù)進行分組。假設(shè)公司有很多員工，需要對公司的員工在Grid Panel中按部門進行分組顯示。首先在Store中設(shè)置groupField屬性為department。
Ext.create('Ext.data.Store', {
model: 'Employee',
data: ...,
groupField: 'department' //設(shè)置數(shù)據(jù)按照department分組
});
然后在Grid Panel中添加grouping Feature，實現(xiàn)分組顯示效果。
Ext.create('Ext.grid.Panel', {
...
features: [{ ftype: 'grouping' }]
});
分組顯示效果如下圖所示，點擊這里查看官方分組顯示代碼。
3 Grid Panel分頁顯示
當(dāng)數(shù)據(jù)比較多一頁顯示不完的時候，就需要對數(shù)據(jù)進行分頁顯示。Grid Panel可以通過Paging Toolbar和Paging Scroller兩種方式實現(xiàn)分頁顯示顯示，Paging Toolbar有上一頁/下一頁按鈕，Paging Scroller是當(dāng)Grid Panel滾動顯示到底部的時候動態(tài)加載數(shù)據(jù)。
要實現(xiàn)分頁顯示，首先要設(shè)置Store支持分頁，在Store中設(shè)置pageSize，pageSize默認是25。在reader中設(shè)置數(shù)據(jù)總數(shù)量totalProperty，分頁插件根據(jù)pageSize和totalProperty進行分頁。下面的代碼pageSize設(shè)置為4，totalProperty則從返回的json數(shù)據(jù)中total屬性獲取。
Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4, //設(shè)置每頁顯示的數(shù)據(jù)數(shù)量
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users', //指定從json的哪個屬性獲取數(shù)據(jù)，如果不指定，則從json的跟屬性獲取
totalProperty: 'total' //總數(shù)據(jù)數(shù)量
}
}
});
假設(shè)json數(shù)據(jù)格式如下
{
"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的分頁已經(jīng)設(shè)置完畢，下面在Grid Panel中實現(xiàn)Paging Toolbar分頁功能。
Ext.create('Ext.grid.Panel', {
store: userStore,
columns: ...,
dockedItems: [{
xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar
store: userStore, //把paging toolbar的Store設(shè)置成和Grid Panel的Store一樣
dock: 'bottom',
displayInfo: true
}]
});
Paging Toolbar的分頁效果如下圖所示，點擊這里查看官方Paging Toolbar分頁功能代碼。
Paging Scroller的分頁實現(xiàn)比較簡單，只要在Grid Panel中設(shè)置如下代碼即可，點擊這里查看官方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
只要設(shè)置Grid Panel的selModel屬性為Ext.selection.CheckboxModel，點擊這里查看官方代碼實例。
Ext.create('Ext.grid.Panel', {
selModel: Ext.create('Ext.selection.CheckboxModel'), //設(shè)置Grid Panel的選擇模式為Checkbox
store: userStore,
columns: ...
});
5 綜合示例
var grid = new Ext.grid.GridPanel({
store //數(shù)據(jù)源
cm //Ext.grid.columnModel
columns //功能和Ext.grid.columnModel一樣。與cm有一個就行
autoWidth:true
width
title
border:false
columnLines: true,
renderTo //顯示div標(biāo)簽的id
animCollapse:false //True 表示為面板閉合過程附有動畫效果 (默認為true,在類 Ext.Fx 可用的情況下).
collapsible: true, //true 表示面板可以閉合
columnLines：true, //true 表示有格邊框
loadMask:true //獲取數(shù)據(jù)里時有等待界面
stripeRows: true, //雙色表格
plugins：true,
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store, //數(shù)據(jù)源
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分頁
//傳到服務(wù)器數(shù)據(jù) start開始查詢位置， limit要查詢多少條
//排序
//服務(wù)器 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 //點擊次數(shù)
ColumnModel 中要加editor editor:new Ext.form.TextField({
})
//獲取修改后的數(shù)據(jù)
var storeEdit = grid.getStore(); //
var modified = storeEdit.modified.slice(0); //
Ext.each(modified,function(m){
alert(m.data.id); //數(shù)據(jù)就在m.data中 id 為字段名
})
//獲取grid數(shù)據(jù)
var selModel = grid.getSelectionModel(); 獲取選擇模式
var record;
if(!selModel.hasSelection()){
Ext.Msg.alert('警告','請選擇要修改的行!');
return;
}
selModel.getSelections().length; //選擇的行數(shù)
record = selModel.getSelected(); //獲取選擇行的數(shù)據(jù)
(1)獲取數(shù)據(jù) :
單行
id = record.get('id');
或者
id = record.data.id;
多行
record[i].get('ddd')
(2)刪除數(shù)據(jù) :
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
- ExtJs中g(shù)ridpanel分組后組名排序?qū)嵗a
- Extjs4實現(xiàn)兩個GridPanel之間數(shù)據(jù)拖拽功能具體方法
- ExtJs設(shè)置GridPanel表格文本垂直居中示例
- Extjs4 GridPanel 的幾種樣式使用介紹
- Extjs4 GridPanel的主要配置參數(shù)詳細介紹
- Extjs中的GridPanel隱藏列會顯示在menuDisabled中解決方法
- Extjs EditorGridPanel中ComboBox列的顯示問題
- Extjs gridpanel 出現(xiàn)橫向滾動條問題的解決方法
- ExtJs GridPanel簡單的增刪改實現(xiàn)代碼
- ExtJS 2.0 GridPanel基本表格簡明教程
- ExtJS GridPanel 根據(jù)條件改變字體顏色
相關(guān)文章
ExtJs grid行 右鍵菜單的兩種方法，需要用extjs制作右鍵菜單的朋友可以參考下。2010-06-06
ExtJS border布局使用說明，需要的朋友可以參考下。2009-10-10
在解決這個有很多優(yōu)化方法，今天來說其中一種，那就是在Ant腳本打包的時候，把js中空格、注釋去掉、以及合并，合并今天不說了，還未實現(xiàn)這個，在研究中2013-04-04
Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個項目中，需要實現(xiàn)ComboBoxTree的效果，由于在Extjs中是沒有這種效果，所以看看別人的資料自己寫了一個，感興趣的朋友可以參考下哈2013-05-05
ExtJs 學(xué)習(xí)筆記 Ext.Panle Ext.TabPanel Ext.Viewport
ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)2008-12-12
Exitjs DataView中圖片文件名獲取實現(xiàn)代碼。2009-11-11
ExtJs 實現(xiàn)動態(tài)加載grid完整示例
動態(tài)加載grid在ExtJs中如何實現(xiàn)，貌似有很多的朋友都不知道吧，下面有個不錯的示例，希望對大家有所幫助2013-09-09
所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持而局操作，每一個容器都會有一個對應(yīng)的布局，布局負責(zé)管理容器組件中子元素的排列、組合及渲染方式等。2009-04-04
多人都習(xí)慣在渲染子組件的時候?qū)ird渲染到容器內(nèi)的一個div里，為什么那么多人喜歡使用這種方式來添加子組件呢，下面為大家詳細介紹下2013-06-06
ExtJS Store的數(shù)據(jù)訪問與更新問題
ExtJS Store的數(shù)據(jù)訪問與更新問題，需要的朋友可以參考下。2010-04-04