ExtJS 4.0 Grid属性详解与常用操作指南

EXTGrid属性方法是ExtJS 4.0中用于创建和定制网格面板的核心组件，它提供了丰富的功能和定制选项，使得开发者能够构建高效、交互性强的数据展示界面。以下是一些关键的属性和方法的详细说明： 1. Ext.grid.GridPanel：这是EXTGrid的基本构建块，用于组织数据和定义列布局。它包含store（数据源）、columns（列模型）以及视图（GridView）等重要部分。 - `store`：存储数据的实例，可以是Ext.data.Store，负责管理和加载数据到网格中。 - `columns`：采用`ColumnModel`模式，列配置可以设置宽度、样式、排序、可拖动、可调整大小等属性。`autoExpandColumn`允许指定自动展开的列，而`stripeRows`用于设置行交替背景颜色，默认关闭。 - `selModel`：选择模型，可以选择多种类型，如RowSelectionModel，用于处理用户选择行的操作。 - `enableHdMenu`：是否显示列头菜单，如列头工具栏，可自定义列头行为。 - `enableColumnHide`：是否允许用户隐藏列。 - `loadMask`：数据加载时的遮罩，用于显示加载提示，默认关闭。 - `view`：视图类，通常使用GridView，配置了自动展开最大和最小宽度限制。 - `viewConfig`：更详细的视图配置，如自动展开的最大和最小宽度值。 2. 获取和设置属性：GridPanel提供了多个方法来访问或修改这些属性。例如： - `getColumnModel()`：获取当前的列模型对象，用于进一步定制列的属性。 - `getSelectionModel()`：获取选择模型，用于获取当前的选中策略。 - `getStore()`：获取数据源实例，管理数据加载和更新。 - `getView()`：获取当前的视图实例，进行视图定制。 - `reconfigure(store, colModel)`：重新配置GridPanel，传入新的数据源和列模型。 3. 列属性设置：每个列都有自己的属性，如： - `id`：列的唯一标识符。 - `header`：列的标题文本。 - `dataIndex`：对应store中的字段，用于数据绑定。 - `width`：列的固定宽度。 - `align`：对齐方式，如居中或左对齐。 - `fixed`：列是否固定，不随滚动而移动。 - `menuDisabled`：是否禁用列头的上下文菜单。 - `resizable`：是否允许列宽调整。 - `sortable`：是否允许列排序。 - `renderer`：用于格式化单元格内容的函数。 - `value`：预设单元格的初始值。 - `metadata`：提供额外的元数据，如样式、CSS类等。 - `attr`：自定义单元格HTML标签的属性。 4. 事件和行为：GridPanel支持监听特定事件，例如`mouseover`，以及通过`record`, `rowIndex`, 和 `colIndex`获取当前单元格的数据。`store`的xtype属性用于定义列的不同类型，如布尔型、数字型、日期型等，以及模板列。 EXTGrid属性方法提供了强大的灵活性，允许开发者精细控制网格的外观、行为和数据呈现，是构建复杂数据表单和报表的重要工具。通过理解和掌握这些核心属性和方法，开发人员可以创建出功能强大且用户友好的数据可视化界面。