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编程起步(第六课)
Jan 10 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
微信小程序如何连接Java后台
Aug 08 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
python3读取csv和xlsx文件的实例
2018/06/22 Python
python将list转为matrix的方法
2018/12/12 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
毕业生实习鉴定
2013/12/11 职场文书
小学生家长寄语
2014/04/02 职场文书
卖车协议书
2014/04/21 职场文书
环保口号大全
2014/06/12 职场文书
护林防火标语
2014/06/27 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
五好家庭事迹材料
2014/12/20 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
会计主管竞聘书
2015/09/15 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android