ExtJS之Grid

### ExtJS之Grid #### 一、ExtJS框架与Grid组件概述 ExtJS是一个功能强大的JavaScript库，用于构建复杂的Web应用程序。它提供了大量的UI组件，包括表单、按钮、导航菜单、工具栏、窗口等。其中，`Ext.grid.Panel`是ExtJS中的核心组件之一，用于展示表格数据，并支持排序、分组以及编辑等功能。 #### 二、基本GridPanel 在创建一个简单的`Ext.grid.Panel`时，我们需要关注以下几个关键点： 1. **定义模型（Model）**：首先需要定义数据模型，即`Ext.data.Model`，它表示了数据结构。 2. **创建存储（Store）**：接着创建`Ext.data.Store`，用来存储数据记录。 3. **配置GridPanel**：最后配置并实例化`Ext.grid.Panel`，并将之前创建的存储添加到GridPanel中。 #### 三、模型和存储 - **模型（Model）**： - 定义模型可以使用`Ext.define`方法。模型是一系列字段的集合，代表某种类型的数据。例如，我们可以定义一个“用户”模型，包含姓名、电子邮件和电话号码三个字段。 - 示例代码如下： ```javascript Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); ``` - **存储（Store）**： - 存储是模型实例的集合，通常通过`Ext.create`来创建。 - 我们可以将数据直接加载到存储中，或者通过配置代理（Proxy）来从服务器获取数据。 - 示例代码如下： ```javascript var userStore = Ext.create('Ext.data.Store', { model: 'User', data: [ { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } ] }); ``` #### 四、GridPanel配置 - **配置GridPanel**： - 创建`Ext.grid.Panel`时，可以通过配置项指定其显示的存储和其他选项。 - 使用`renderTo`属性指定GridPanel渲染的目标DOM元素，通常为`document.body`。 - 示例代码如下： ```javascript Ext.create('Ext.grid.Panel', { renderTo: document.body, store: userStore, columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email' }, { text: 'Phone', dataIndex: 'phone' } ], height: 300, width: 600, title: 'Users' }); ``` #### 五、其他特性 除了基本的显示功能外，`Ext.grid.Panel`还支持许多高级特性，如： - **单元格渲染器**：用于自定义单元格的显示方式。 - **导航选择模型**：允许用户进行行或列的选择。 - **单元格编辑**：使用户可以直接在表格中编辑数据。 - **行编辑**：提供了一种方便的方式来编辑整行数据。 - **分组**：支持对数据进行分组显示。 - **分页存储设置**：可以配置分页功能，以处理大量数据。 - **分页工具栏**：提供分页导航控件。 - **缓冲渲染**：对于大数据集，可以启用缓冲渲染以提高性能。 - **嵌入式组件**：可以在单元格内放置其他ExtJS组件。 #### 六、总结 通过以上步骤，我们成功地创建了一个基本的`Ext.grid.Panel`，并且了解了如何定义模型、创建存储以及配置GridPanel。此外，我们也简单介绍了GridPanel的一些高级特性。这些功能使得`Ext.grid.Panel`成为了一个非常灵活且强大的表格组件，适用于各种应用场景。