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中读取和保存文件实例
May 08 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
javascript前端实现多视频上传
Dec 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
PHP开发工程师面试问题集锦
2012/11/01 面试题
南京某公司笔试题
2013/01/27 面试题
公司领导推荐信
2013/11/12 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
房产公证书
2015/01/23 职场文书
目标责任书格式范文
2015/05/11 职场文书
联谊会开场白
2015/06/01 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL