在 ExtJS 的 GridPanel 组件中，我们经常使用 Checkbox 作为表格中每行数据的选择器。但是，在某些情况下，一些行应该是不可选中的，因此需要禁用 Checkbox。本文将介绍如何实现这一功能。
解决方法
第一步：在数据模型中添加一个标志位
为了让 GridPanel 知道哪些行应该被禁用，我们需要在数据模型中添加一个标志位。例如，我们可以添加一个名为 disabled 的布尔字段来表示行是否应该被禁用。
-- -------------------- ---- -------
--------------------------------- -
------- -----------------
------- -
- ----- ------- ----- -------- --
- ----- ------ ----- ----- --
- ----- --------- ----- -------- --
- ----- ----------- ----- --------- - -- -- -------- --
-
---第二步：在 ColumnModel 中定义 Checkbox
在相应的列模型中定义 Checkbox，并使用渲染器来处理是否禁用 Checkbox 的逻辑。我们可以检查当前行的 disabled 字段，如果为真，则禁用 Checkbox。
-- -------------------- ---- -------
------------------------------------ -
------- -----------------
-------- -
- ------ -------------- ---------- ---------- ------ -- -- -- -- --------
- ----- ------- ---------- ------- ------ --- --
- ----- ------ ---------- ------ ------ -- --
- ----- --------- ---------- --------- ------ -- -
--
----------- -
------------ ---------------- --------- ---------- ------ -
-- ------------------------ -
------ --------------- -- -------
-
------ ---
-
--
-------- --
------ -------------
------------- -
--
---在 getRowClass 方法中，我们检查记录的 disabled 字段，并返回一个 CSS 类名 disabled-row 以标记被禁用的行。
第三步：使用 CSS 禁用 Checkbox
最后，在 CSS 中定义 disabled-row 类的样式，以禁用所有属于该类的复选框。
.disabled-row .x-grid-checkcolumn {
pointer-events: none;
opacity: 0.4;
}这里我们使用 pointer-events: none 来禁用鼠标事件，并将不透明度设置为 0.4，使被禁用的复选框变得半透明。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------------------------------- -
------- -----------------
------- -
- ----- ------- ----- -------- --
- ----- ------ ----- ----- --
- ----- --------- ----- -------- --
- ----- ----------- ----- --------- -
-
---
------------------------------------ -
------- -----------------
-------- -
- ------ -------------- ---------- ---------- ------ -- --
- ----- ------- ---------- ------- ------ --- --
- ----- ------ ---------- ------ ------ -- --
- ----- --------- ---------- --------- ------ -- -
--
----------- -
------------ ---------------- --------- ---------- ------ -
-- ------------------------ -
------ ---------------
-
------ ---
-
--
-------- --
------ -------------
------------- -
--
---
-----------------
----- --------
------- ---------- -
------------------------------------ -
------- ------
------ --
------ --------------
------ --- ---- -------
------ -
------ -
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------