在 extjs 中渲染表格后使用不同样式设置两个单独的网格单元格

Posted 2023-02-26

【中文标题】在 extjs 中渲染表格后使用不同样式设置两个单独的网格单元格

【英文标题】：Styling two separate grid cells with different styles after rendering the table in extjs

【发布时间】：2014-08-24 10:14:00

【问题描述】：

我在 ExtJS 5 中为某些单元格设置样式时遇到了麻烦。 我在索引页中有两条样式规则：

.yellow-cell .x-grid-cell
    font-weight: bold;
    background-color: yellow;

.red-cell .x-grid-cell
    color:blue;
    background-color: red;

在select 事件中，所选单元格应使用yellow-cell 规则着色。并且它之前的单元格需要使用其他规则red-cell 着色，表格的其余部分只是默认值。

var gridTable = Ext.getCmp('gridTable');
gridTable.on("select",function(obj, record, index, eOpts)
    gridTable.getView().addItemCls(record, 'yellow-cell');
);

在取消选择时，我使用removeItemCls() 然后addItemCls() 添加red-cell 样式。

有没有合适的方法来做到这一点？因为我的代码只是为整行着色，而我只想为选定/取消选择的单元格着色。

我真的被困在这里，任何帮助将不胜感激。

【问题讨论】：

你使用单元格选择模型还是行选择模型？

【参考方案1】：

gridTable.getView().getCell(rec,col).addCls('yellow-cell');

您也可以尝试使用 console.log(record) 来找到正确的 div 名称并执行以下操作：

Ext.get('idOfcellDiv...').addClas('yellow-cell');