在使用 ExtJS 进行 Web 应用开发时，`Ext.grid.ColumnModel` 是一个非常重要的组件，它负责定义数据网格（Grid）中列的布局、样式和行为。作为 Grid 的核心配置之一，ColumnModel 控制着每一列的显示方式、排序、宽度、对齐方式等属性。本文将对 `Ext.grid.ColumnModel` 的常用属性进行详细解析，帮助开发者更好地理解和应用这一组件。
一、ColumnModel 简介
`Ext.grid.ColumnModel` 是 ExtJS 中用于管理表格列配置的类。它通常与 `Ext.grid.GridPanel` 或 `Ext.grid.Panel` 配合使用，用来定义表格中的各个列信息。每个列对象（`Ext.grid.Column`）都可以设置不同的属性，以满足不同的展示需求。
二、主要属性详解
1. `columns` 属性
这是 ColumnModel 的核心属性，用于定义所有的列。它是一个数组，数组中的每一个元素都是一个 `Ext.grid.Column` 实例或其配置对象。
```javascript
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age' }
]
```
> 说明：通过这个属性可以灵活地定义表格的列结构。
2. `defaultWidth` 属性
用于设置默认的列宽。如果某列没有单独设置 `width` 属性，则会使用这个默认值。
```javascript
defaultWidth: 100
```
> 说明：有助于统一表格列的初始宽度，提升界面一致性。
3. `flex` 属性
该属性用于设置列的弹性比例，常用于实现自适应布局。多个列设置 `flex` 后，它们会根据比例自动分配剩余空间。
```javascript
{
text: '姓名',
dataIndex: 'name',
flex: 1
},
{
text: '年龄',
dataIndex: 'age',
flex: 0.5
}
```
> 说明：适用于需要动态调整列宽的场景，如响应式设计。
4. `align` 属性
设置列内容的对齐方式，支持 `'left'`, `'center'`, `'right'` 三种值。
```javascript
{
text: '金额',
dataIndex: 'amount',
align: 'right'
}
```
> 说明：对于数字类型的数据显示，右对齐更符合阅读习惯。
5. `sortable` 属性
控制该列是否可排序。默认为 `true`。
```javascript
{
text: '姓名',
dataIndex: 'name',
sortable: false
}
```
> 说明：在不需要用户交互排序的情况下，可以关闭该功能以提高性能。
6. `hideable` 属性
设置列是否可以被隐藏。默认为 `true`。
```javascript
{
text: '备注',
dataIndex: 'note',
hideable: false
}
```
> 说明：在某些场景下，可能需要固定某些列不可隐藏。
7. `menuDisabled` 属性
控制该列的右键菜单是否禁用。默认为 `false`。
```javascript
{
text: '操作',
dataIndex: 'action',
menuDisabled: true
}
```
> 说明：在不需要用户操作该列时，可以禁用菜单以简化界面。
8. `renderer` 属性
用于自定义列内容的渲染方式。可以返回 HTML 字符串或对单元格进行样式处理。
```javascript
{
text: '状态',
dataIndex: 'status',
renderer: function(value) {
return value === 'active' ? '激活' : '停用';
}
}
```
> 说明：适合用于条件渲染、图标显示等复杂展示需求。
三、其他常用属性
- `dataIndex`: 对应 Store 中字段的名称。
- `width`: 设置列的具体宽度。
- `locked`: 是否锁定该列（固定列）。
- `groupable`: 是否可分组。
- `summaryType`: 用于汇总计算（如求和、平均值等）。
四、总结
`Ext.grid.ColumnModel` 是 ExtJS 中用于配置表格列的重要组件，通过合理设置其属性，可以极大地提升表格的可读性、交互性和美观度。理解并掌握这些属性的使用方法，是构建高效、友好的数据展示界面的关键。
在实际开发中，建议结合 `Ext.data.Store` 和 `Ext.grid.Panel` 使用 ColumnModel，以实现灵活的数据绑定和视图展示。同时，也可以通过自定义 `renderer` 和 `sorter` 来增强表格的功能性与用户体验。
