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


Posted in Javascript onMay 21, 2016

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如图所示。

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

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' }] 
});

分组显示效果如下图所示,点击这里查看官方分组显示代码。

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

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分页功能代码。

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

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 

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
Prototype Function对象 学习
Jul 12 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
javascript RegExp 使用说明
May 21 #Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 #Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
js获取浏览器的各种属性
2017/04/27 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python的re模块正则表达式操作
2016/05/25 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python分析作业提交情况
2017/11/22 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python3代码中实现加法重载的实例
2020/12/03 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
中学生自我评价范文
2014/02/08 职场文书
学期评语大全
2014/04/30 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
给下属加薪申请报告
2015/05/15 职场文书
高中数学教学反思范文
2016/02/18 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers