在 ExtJS 4 中，Grid 是一个非常强大的组件，可用于展示大量数据。然而，默认情况下，Grid 中的内容是不可选的，这可能会使用户无法复制/粘贴或进行其他与选择相关的操作。在本文中，我们将讨论如何使 ExtJS 4 Grid 内容可选，并提供一些示例代码来帮助您快速实现此功能。
步骤 1：启用 Grid 的 selModel 属性
要使 Grid 内容可选，我们需要启用 Grid 的 selModel 属性。该属性定义了选择模型（Selection Model），它是控制选择行为的核心。在 ExtJS 4 中，Grid 默认使用 rowmodel，这意味着只能选择一整行。要启用 selModel 属性，请使用以下代码：
Ext.create('Ext.grid.Panel', {
// ... other configurations ...
selModel: Ext.create('Ext.selection.CheckboxModel')
});这里我们使用 CheckboxModel，这意味着您可以选择一行或多行。您还可以使用其他选择模型，例如 CellModel 或 RowModel。
步骤 2：配置 Grid 的 column 块
虽然我们已经启用了 selModel，但我们仍然需要配置 Grid 的 column 块，以确保单元格中的文本可选择。为此，我们将使用 column 的 renderer 函数。该函数允许我们自定义单元格的显示方式。
以下是一个示例 renderer 函数：
function(value, metaData) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}在这个 renderer 函数中，我们使用 tdAttr 属性来定义单元格的 HTML 属性。在本例中，我们添加了一个 data-qtip 属性，用于显示鼠标悬停时的提示文本。如果您不需要提示文本，请将此行代码从 renderer 函数中删除。
步骤 3：使 Grid 内容可编辑
现在，我们已经可以选择 Grid 内容，但是默认情况下，内容仍然是只读的。要启用编辑功能，请将 Grid 中的 editable 属性设置为 true，如下所示：
Ext.create('Ext.grid.Panel', {
// ... other configurations ...
selModel: Ext.create('Ext.selection.CheckboxModel'),
editable: true
});示例代码
下面是完整的示例代码，它显示了如何实现可选、可编辑的 ExtJS 4 Grid：
-- -------------------- ---- -------
---------------------------- -
--------- --------------
------ ----
------- ----
------ -------- ------
------ --------------------------------- -
------- -
------ --------
------ -------- ----- ----------
------ -------- ----- ---------
--
----- -
-------- -------------------- ----------------
-------- -------------------- ----------------
--------- --------------------- ----------------
--------- --------------------- ---------------
-
---
-------- -
-
---- - -------
---- - --
-------- - ------
---------- -------
--------- --------------- --------- -
--------------- - ------------- - ----- - ----
------ ------
-
--
-
---- - --------
----- - ----
-------- - -----
---------- --------
--------- --------------- --------- -
--------------- - ------------- - ----- - ----
------ ------
-
--
-
---- - --------
----- - ----
-------- - -----
---------- --------
--------- --------------- --------- -
--------------- - ------------- - ----- - ----
------ ------
-
-
--
--------- ------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------