ExtJS基础教程：Grid面板与数据存储

"这篇文档是关于ExtJS框架中的Grid组件的使用指南，涵盖了基础的Grid面板、模型和存储、渲染器、导航、选择模型、编辑、分组、分页、缓冲渲染以及嵌入式组件等内容。" 在ExtJS中，`Ext.grid.Panel`是一个核心组件，它提供了一种方便的方式来展示、排序、分组和编辑数据。这个组件具有极高的灵活性，被广泛用于数据密集型的应用中。 ### 基础Grid面板 (BasicGridPanel) 创建一个基本的`Ext.grid.Panel`非常简单。要启动一个简单的网格，你需要知道如何设置模型和存储。`Ext.grid.Panel`仅仅负责显示`Ext.data.Store`中包含的数据。`Ext.data.Store`可以看作是一个记录集合，或者说是`Ext.data.Model`实例的集合。 ### 模型和存储 (Model and Store) 模型（Model）和存储（Store）的分离是ExtJS设计的一大优点。`Ext.grid.Panel`只关注数据的显示，而`Ext.data.Store`则负责通过`Ext.data.proxy.Proxy`获取和保存数据。 例如，我们可以定义一个代表"用户"的模型（Model）： ```javascript Ext.define('User',{ extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); ``` 这里定义了三个字段：名字、电子邮件和电话。 ### 渲染器 (Renderers) 渲染器允许我们自定义单元格中的数据显示方式。比如，我们可以为特定字段添加格式化或颜色，以增强数据的可读性。 ### 导航 (Navigation) `Ext.grid.Panel`支持导航，如键盘导航，使用户能够通过键盘在行和列之间移动。 ### 选择模型 (Selection Models) 选择模型管理着用户如何选择网格中的行。常见的选择模型有单选和多选模式。 ### 编辑 (Editing) 有两种主要的编辑方式：单元格编辑（Cell Editing）和行编辑（Row Editing）。这些允许用户直接在网格中修改数据。 ### 分组 (Grouping) 分组功能可以将数据按照一个或多个字段进行聚合，方便查看和操作。 ### 分页 (Paging) 当数据量较大时，分页是必要的。`Ext.grid.Panel`可以与分页工具栏（Paging Toolbar）结合，提供数据的分页浏览。 ### 缓冲渲染 (Buffered Rendering) 缓冲渲染优化了大量数据的显示性能，只加载视窗内的数据，而不是一次性加载所有数据。 ### 嵌入式组件 (Embedded Components) `Ext.grid.Panel`还允许你在网格的列中嵌入其他组件，如按钮、下拉框等，以增强交互性。 ExtJS的Grid组件提供了强大的数据展示和管理能力，是构建企业级应用不可或缺的一部分。通过深入理解和灵活运用上述知识点，开发者可以创建出功能丰富的数据管理界面。