JavaScript的Ext JS框架中的GridPanel组件使用指南

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

(0)

相关推荐

  • Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    1.之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框.如下图所示: 定义代码如下: 复制代码 代码如下: {               xtype:'gridpanel',               multiSelect: true,                id:'staff',                 x: 5,      

  • Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

    在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

  • Extjs gridpanel 出现横向滚动条问题的解决方法

    复制代码 代码如下: viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)

  • Extjs4 GridPanel 的几种样式使用介绍

    简单表格 排序,显示某列,读取本地数据 复制代码 代码如下: //本地数据 var datas = [ ['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] ]; //创建面板 Ext.create('Ext.grid.Panel', { title: 'easy grid', width: 400, height: 300, renderTo: Ext.getBody(), frame: true, viewConfig:

  • Extjs4 GridPanel的主要配置参数详细介绍

    1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

  • ExtJS GridPanel 根据条件改变字体颜色

    1.在GridPanel中加入GridView 复制代码 代码如下: <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg" /> </ext:GridView> </View> 2.加入js脚本 复制代码 代码如下: <script language="javascri

  • ExtJs GridPanel简单的增删改实现代码

    1.首先看下效果图: 2.ext代码 复制代码 代码如下: /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> Ext.namespace('XQH.ExtJs.Frame'); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleMana

  • ExtJs设置GridPanel表格文本垂直居中示例

    业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

  • Extjs EditorGridPanel中ComboBox列的显示问题

    为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 复制代码 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "GetDepartmentJson.aspx", method: 'GET' }), reader: new Ext.data.

  • ExtJs中gridpanel分组后组名排序实例代码

    复制代码 代码如下: /**   * 定义降序的groupingStore   */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : 'ASC', groupBy : function(field, forceRegroup, direction) {     direction = direction ? (String(direction)               .toUpperCase()

  • ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

随机推荐