欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 17:18:32
1 最简单的grid panel grid panel是extjs的核心部分之一,通过grid panel可以对数据显示、排序、分组和编辑。model和store是gri...

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)。

接下来创建store,store是user的集合,包括多个user实例。

model和store都创建好之后,就可以创建grid panel了。

最后创建的用户grid panel如图所示。

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

2 grid panel数据分组(grouping)
只要在store中设置groupfield属性,就可以对grid panel显示的数据进行分组。假设公司有很多员工,需要对公司的员工在grid panel中按部门进行分组显示。首先在store中设置groupfield属性为department。

然后在grid panel中添加grouping feature,实现分组显示效果。

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

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属性获取。

假设json数据格式如下

store的分页已经设置完毕,下面在grid panel中实现paging toolbar分页功能。

paging toolbar的分页效果如下图所示,点击这里查看官方paging toolbar分页功能代码。

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

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 GridPanel