ExtJS4 GridPanel 样式与选择模式解析

"这篇文档主要介绍了ExtJS4中GridPanel的样式使用以及选择模式，适合对ExtJS感兴趣的开发者参考学习。" 在ExtJS4中，GridPanel是一个强大的组件，用于展示表格数据。以下是对GridPanel的几种样式和选择模式的详细说明： 1. **简单表格**： - GridPanel的基本样式通常包括标题、宽度、高度和渲染位置。例如，通过`title`设置面板标题，`width`和`height`设置面板尺寸，`renderTo`指定渲染的DOM元素。 - `frame: true`添加边框，`viewConfig`用于定制视图配置，如`forceFit: true`使得所有列自适应填充宽度，`stripRows: true`显示行间间隔。 - `store`用于定义数据源，这里使用了内存代理`proxy: { type: 'memory', ... }`，数据通过`data`属性提供，`reader: 'array'`表示数据读取器处理数组数据。 - `columns`定义列配置，包括列头（`header`）、宽度（`width`）、数据索引（`dataIndex`）和是否可排序（`sortable`）。 2. **表格列样式**： - 表格列可以有多种类型，例如字符串、布尔值、日期和数字。`fields`定义了数据模型，为每个字段指定名称和类型。 - 对于布尔值，可以使用自定义转换器进行显示，例如将`true`显示为“是”，`false`显示为“否”。 - 日期可以使用日期格式化器（如`Ext.Date.format`）进行格式化输出。 - 数字数据类型可以使用`numberRenderer`进行格式化，例如添加货币符号或保留小数位数。 - `Action`列通常用于包含操作按钮，可以通过自定义列模板实现。 3. **选择模式**： - GridPanel提供了多种选择模式，例如`SINGLE_SELECT`（单选）、`MULTI_SELECT`（多选）和`SIMPLE_SELECT`（连续多选）。通过`selType`属性设置选择模式。 - 可以使用`selModel`来进一步定制选择模型的行为，如设置默认选中项、禁用选择等。 4. **其他样式和功能**： - 使用`columnLines: true`可以在列之间显示分隔线。 - `stripeRows: true`可以交替改变行背景色，提高可读性。 - `headers`可以自定义列头样式，例如字体、颜色、对齐方式等。 - `tbar`和`bbar`分别用于添加顶部和底部工具栏，可以包含按钮、文本框等控件。 5. **提示和交互**： - `Ext.tip.QuickTipManager.init();`初始化快速提示管理器，用于处理鼠标悬停时显示的提示信息。 通过以上介绍，你可以根据需求定制GridPanel的样式和交互，创建出满足业务需求的表格组件。在实际开发中，还可以结合其他ExtJS组件和功能，如分页、过滤、排序等，来增强GridPanel的功能。