位置: 编程技术 - 正文
JavaScript的Ext JS框架中的GridPanel组件使用指南
编辑：rootadmin推荐整理分享JavaScript的Ext JS框架中的GridPanel组件使用指南，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
1 最简单的Grid PanelGrid 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)。
接下来创建Store，Store是User的集合，包括多个User实例。
Model和Store都创建好之后，就可以创建Grid Panel了。
最后创建的用户Grid Panel如图所示。
2 Grid Panel数据分组（Grouping）只要在Store中设置groupField属性，就可以对Grid Panel显示的数据进行分组。假设公司有很多员工，需要对公司的员工在Grid Panel中按部门进行分组显示。首先在Store中设置groupField属性为department。
然后在Grid Panel中添加grouping Feature，实现分组显示效果。
分组显示效果如下图所示，点击这里查看官方分组显示代码。
3 Grid Panel分页显示当数据比较多一页显示不完的时候，就需要对数据进行分页显示。Grid Panel可以通过Paging Toolbar和Paging Scroller两种方式实现分页显示显示，Paging Toolbar有上一页/下一页按钮，Paging Scroller是当Grid Panel滚动显示到底部的时候动态加载数据。要实现分页显示，首先要设置Store支持分页，在Store中设置pageSize，pageSize默认是。在reader中设置数据总数量totalProperty，分页插件根据pageSize和totalProperty进行分页。下面的代码pageSize设置为4，totalProperty则从返回的json数据中total属性获取。
假设json数据格式如下
Store的分页已经设置完毕，下面在Grid Panel中实现Paging Toolbar分页功能。
Paging Toolbar的分页效果如下图所示，点击这里查看官方Paging Toolbar分页功能代码。
Paging Scroller的分页实现比较简单，只要在Grid Panel中设置如下代码即可，点击这里查看官方Paging Scroller分页功能代码。
4 Grid Panel添加Checkbox只要设置Grid Panel的selModel属性为Ext.selection.CheckboxModel，点击这里查看官方代码实例。
5 综合示例
(1)获取数据 :单行
或者
多行
(2)删除数据 :
(3)查询
(4)添加一行列 :Ext自己带的一个插件 需要文件 RowExpander.js
在grid的columns中加 expand， 并在grid属性中加 plugins: expand
Ext JS框架中日期函数的用法及日期选择控件的实现 Ext.Date是一个单例，封装了一系列日期操作函数，扩展JavaScriptDate的功能，下面列出一些常用的功能。基本函数：Ext.Date.add(date,interval,value)给date增加或减
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享 在Extjs开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题.Ext.onReady(function(){Ext.Window
ExtJS 4.2 Grid组件单元格合并的方法 ExtJS4.2Grid组件本身并没有提供单元格合并功能，需要自己实现这个功能。目录1.原理2.多列合并3.代码与在线演示1.原理1.1HTML代码分析首先创建一个Grid组
标签: JavaScript的Ext JS框架中的GridPanel组件使用指南
本文链接地址:https://www.jiuchutong.com/biancheng/368500.html 转载请保留说明！上一篇：JavaScript的ExtJS框架中数面板TreePanel的使用实例解析(js 编辑框)
下一篇：Ext JS框架中日期函数的用法及日期选择控件的实现(js日期选择框)
