JavaScript的Ext JS框架中的GridPanel组件使用指南
死神的丧钟 人气:01 最简单的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/imageshttps://img.qb5200.com/download-x/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
加载全部内容