Extjs4 GridPanel核心配置参数详解

ExtJS 4 的表格组件（GridPanel）是数据展示的利器，但刚接触时，面对琳琅满目的配置项和方法，难免有点懵。别急，咱们逐个拆解，把这些配置项和方法的“脾气”摸清楚，以后用起来就顺手多了。

1、Ext.grid.GridPanel

GridPanel 是整个表格的“容器”，所有的数据、列、选择行为都靠它来组织。先说说它的核心配置项：

• store：数据源，表格要展示的数据都放在这里。
• columns：列配置数组，定义每一列怎么显示，自动创建列模型（ColumnModel）。
• autoExpandColumn：自动撑满剩余空间的列，指定列的 id 即可（注意：id 不能为 0）。
• stripeRows：是否隔行变色，默认 false，设成 true 后视觉上更清晰。
• cm、colModel：列模式对象，渲染表格时必须设置。
• sm、selModel：选择模式，默认是 RowSelectionModel（行选择）。
• enableHdMenu：是否显示表头右键菜单，默认 true。
• enableColumnHide：是否允许通过表头菜单隐藏列，默认 true。
• loadMask：加载数据时是否显示遮罩，默认 false。
• view：表格视图对象，默认 GridView。
• viewConfig：视图的配置对象。
• autoExpandMax / autoExpandMin：自动扩充列的最大/最小宽度，默认 1000 和 50。
• columnLines：是否显示列分割线，默认 false。
• disableSelection：是否禁止行选择，默认 false。
• enableColumnMove / enableColumnResize：是否允许拖拽移动列或改变列宽，默认都 true。
• hideHeaders：是否隐藏表头，默认 false。
• maxHeight：表格最大高度。
• minColumnWidth：最小列宽，默认 25。
• trackMouseOver：鼠标悬停时是否高亮所在行，默认 true。

再说几个常用的方法：

• getColumnModel() 获取列模式
• getSelectionModel() 获取选择模式
• getStore() 获取数据集
• getView() 获取视图对象
• reconfigure(store, colModel) 用新的数据集和列模式重新配置表格

2、Ext.grid.Column

Column 定义的是每一列的细节行为，配置项不少，但理解后很好掌握：

• id：列的唯一标识
• header：表头显示的文字
• dataIndex：与数据集中字段对应的名称。如果不设置，则按列索引匹配字段索引。
• width：列宽
• align：数据对齐方式
• hidden：是否隐藏列，默认 false
• fixed：是否固定列宽，禁止调整，默认 false
• menuDisabled：是否禁用列右键菜单，默认 false
• resizable：是否允许改变列宽，默认 true
• sortable：是否允许排序，默认 true
• renderer：自定义单元格渲染函数，这是最灵活的地方。函数接收这些参数：
  - value：原始数据值
  - metadata：元数据对象，包含 css（样式类名）和 attr（HTML 属性字符串）
  - record：当前数据记录对象
  - rowIndex / colIndex：行/列索引
  - store：数据集对象
• xtype：列的渲染器类型，默认 gridcolumn，可选 booleancolumn、numbercolumn、datecolumn、templatecolumn 等
• editable：是否可编辑，默认 true
• editor：编辑器配置
• groupName / emptyGroupText / groupable：分组相关配置

3、Ext.grid.ColumnModel

ColumnModel 管理所有列的定义，是个“列管家”。主要配置项：

• columns：列字段数组
• defaultSortable：是否允许默认排序，默认 false
• defaultWidth：默认列宽

它的方法主要是各种“取”和“设”的操作：

• findColumnIndex(col)：根据 dataIndex 查找列索引
• getColumnById(id)：根据 id 获取列
• getColumnCount(visibleOnly)：获取列总数
• getColumnHeader(col) / getColumnId(index) / getDataIndex(col) / getIndexById(id) 等
• getTotalWidth(includeHidden)：总宽度
• isCellEditable(colIndex, rowIndex) / isFixed() / isHidden(colIndex)：判断状态
• setColumnHeader / setColumnWidth / setDataIndex / setEditable / setEditor / setHidden / setRenderer：动态修改列属性

4、Ext.grid.AbstractSelectionModel

选择模型的基类，提供了锁定/解锁选择区域的能力：

• lock() 锁定选择
• unlock() 解锁
• isLocked() 判断是否锁定

5、Ext.grid.CellSelectionModel

单元格级别的选择模型，用的场景相对少，但有时候很关键：

• clearSelections(preventNotify)：清除选择
• getSelectedCell()：返回 [rowIndex, colIndex] 数组
• hasSelection()：是否有选择
• select(rowIndex, colIndex, preventViewNotify, preventFocus, r)：选择指定单元格

6、Ext.grid.RowSelectionModel

行选择模型，最常用。支持单选和多选：

• singleSelect：是否单选，默认 false（多选）
• clearSelections(fast)：清除所有选择
• deselectRange(startRow, endRow) / deselectRow(row, preventViewNotify)：取消选择
• each(fn, scope)：遍历所有选中行，每行记录传入回调
• getCount()：选中行数
• getSelected() / getSelections()：获取选中记录
• hasNext() / hasPrevious()：判断当前选中行前后是否还有记录可切换
• hasSelection()：是否已选
• isIdSelected(id)：判断某 id 的记录是否被选
• isSelected(index)：判断某索引或记录是否被选
• selectAll() / selectFirstRow() / selectLastRow(keepExisting) / selectNext(keepExisting) / selectPrevious(keepExisting)：各种选中操作
• selectRange(startRow, endRow, keepExisting)：选中范围内的行
• selectRecords(records, keepExisting)：选中指定记录数组
• selectRow(row, keepExisting, preventViewNotify)：选中单行
• selectRows(rows, keepExisting)：选中多行

7、Ext.grid.CheckboxSelectionModel

带复选框的选择模型，多了个 checkOnly 配置：

• singleSelect：是否单选，默认 false
• checkOnly：是否只能通过点击复选框来选择，默认 false
• sortable：复选框列是否可排序，默认 false
• width：复选框列的宽度，默认 20

8、Ext.grid.RowNumberer

行号列，就是给每行加个序号：

• header：表头文字
• width：列宽，默认 23

9、Ext.grid.GridView

GridView 是表格的“皮肤”，负责渲染和布局：

• enableRowBody：是否启用行体（可插入额外内容）
• sortAscText / sortDescText / columnsText：表头菜单中的文字
• autoFill：是否自动扩张列充满表格，默认 false
• forceFit：是否强制适应宽度防止水平滚动，默认 false

常用方法：

• focusCell(row, col)：焦点移到指定单元格
• focusRow(row)：焦点移到指定行
• getCell(row, col)：获取单元格的 td 元素
• getHeaderCell(index)：获取表头 td 元素
• getRow(index)：获取行 tr 元素
• getRowClass(record, index, rowParams, store)：返回行样式名，rowParams 在开启 enableRowBody 时可用，包含 body（HTML）、bodyStyle、cols（colspan）
• refresh(headersToo)：刷新表格
• scrollToTop()：滚动到顶部

实战技巧

两个常用场景：

1. 让滚动条自动滚到最后一行（动态插入数据后）
一行代码搞定：
grid.getView().focusRow(grid.getStore().getCount() - 1);

2. 清除行的选中状态
调用选择模型的清除方法：
grid.getSelectionModel().clearSelections();

掌握了这些配置和方法的用途，ExtJS 表格面板基本就玩转了。剩下的就是多动手，在实践中慢慢体会它们之间的协作关系。