ExtJS 4.0:构建基础表格Grid
"4.0Ext grid" 在ExtJS 4.0中,Grids表格是核心组件之一,主要用于展示、排序、分组和编辑数据。它们提供了强大的功能,允许用户与大量信息进行交互,同时保持界面清晰和易用。在创建一个基本的ExtJS表格时,通常涉及以下几个关键组成部分: 1. 模型对象(Model):模型定义了数据结构,它是一个字段集合,用于描述数据的属性。例如,`Ext.define('User',{ extend:'Ext.data.Model', fields:['name','email','phone'] })` 创建了一个名为`User`的模型,包含`name`、`email`和`phone`三个字段。 2. 存储器对象(Store):存储器是用来管理数据的容器,它可以看作是一系列模型实例的集合。在示例中,我们创建了一个名为`userStore`的存储器,其中包含了几个用户数据,使用在线存储器。在实际应用中,通常会配置代理(Proxy)来与服务器通信,加载或保存数据。 3. 表格面板(GridPanel):GridPanel是实际显示数据的组件。它依赖于模型和存储器,从中获取数据并展示。在创建GridPanel时,需要定义列配置,例如: ``` Ext.create('Ext.grid.Panel',{ store: userStore, columns: [ { header: 'Name', dataIndex: 'name', width: 100, sortable: false, hideable: false }, { header: 'Email', dataIndex: 'email', hidden: true }, // 其他列配置 ], // 其他GridPanel配置 }); ``` 在这个配置中,`header`是列的标题,`dataIndex`指定了列与模型字段的关联,`width`定义列宽,`sortable`和`hideable`控制是否可以排序和隐藏列。 4. 列配置:每个列都有自己的属性,如`width`、`sortable`、`hideable`等,可以自定义列的行为和外观。例如,`email`列默认是隐藏的,可以通过用户界面的选项进行显示。 5. 数据交互:Grids不仅用于显示数据,还支持用户与数据的交互,如编辑单元格、选择行、排序和分组数据。通过监听事件和配置相应的处理器,可以实现这些交互功能。 6. 分页和过滤:对于大数据集,可以配置存储器支持分页,允许用户按页浏览数据。同时,也可以添加过滤功能,让用户根据特定条件筛选数据。 7. 扩展功能:ExtJS的Grids还可以扩展,例如添加工具栏、使用行编辑或行选择模式、集成行拖放功能,以及使用自定义的Cell或Row模板来实现复杂的数据展示。 4.0Ext grid在ExtJS框架中扮演着重要角色,它提供了一种高效且灵活的方式来处理和展示数据,适用于各种业务需求和用户界面场景。开发者可以通过配置模型、存储器和GridPanel来构建功能丰富的数据表格,满足不同应用的需求。
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 1
- 资源: 7
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 计算机人脸表情动画技术发展综述
- 关系数据库的关键字搜索技术综述:模型、架构与未来趋势
- 迭代自适应逆滤波在语音情感识别中的应用
- 概念知识树在旅游领域智能分析中的应用
- 构建is-a层次与OWL本体集成:理论与算法
- 基于语义元的相似度计算方法研究:改进与有效性验证
- 网格梯度多密度聚类算法:去噪与高效聚类
- 网格服务工作流动态调度算法PGSWA研究
- 突发事件连锁反应网络模型与应急预警分析
- BA网络上的病毒营销与网站推广仿真研究
- 离散HSMM故障预测模型:有效提升系统状态预测
- 煤矿安全评价:信息融合与可拓理论的应用
- 多维度Petri网工作流模型MD_WFN:统一建模与应用研究
- 面向过程追踪的知识安全描述方法
- 基于收益的软件过程资源调度优化策略
- 多核环境下基于数据流Java的Web服务器优化实现提升性能
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)