EXTJS 单击时更改网格单元背景颜色

Question

我的代码的一部分

xtype: 'grid',

width: 500,
store: store6,

columns:[{

text:'Market',

sortable: false,

width:145,
dataIndex: 'market
}]

我尝试使用侦听器（我认为我没有正确执行），并且由于每个单元格没有 id 标签，我不知道 click 是否可以在这里工作。

使用案例 1. 用户点击单元格 2. 代码将单元格变成绿色 3. 用户点击同一个单元格 4. 代码将单元格变成白色 每个单元格的颜色完全取决于用户。

这都是客户端开发，我还没有开始任何服务器端（PHP）开发。我在 Stack 上搜索了一下，但没有找到有效的解决方案。任何帮助或评论都会很有帮助。

Answer 1

这正是我正在寻找的。感谢 InnerJL 为我指明了正确的方向。我需要它来点击。白色和绿色之间交替。解决方案贴在下面

function(value, metaData, record, rowIndex, colIndex, store)
{
var test =  Ext.get(metaData.id).getStyle("background-color");
if(test == "green")
{
Ext.get(metaData.id).setStyle("background-color", "white");
}
else
{
Ext.get(metaData.id).setStyle("background-color", "green");
}
return value;
}

Answer 2

我做了类似的事情，我们使用自定义 列渲染器。

这是示例代码：

statusRenderer: function (value, metaData, record, rowIndex, colIndex, store) {
        if (rowIndex == undefined) {
            return;
        }
        metaData.css = getCss(value);
        return formatValue(value);
    }

请注意，您可以修改元数据中的 css 属性 - 您可以设置单元格的颜色。例如，每次点击，您都会增加记录的一些内部计数器。然后，渲染器根据此计数器在单元格上添加不同的 css 类。

希望这有帮助！

Answer 3

我已经尝试过 statusRenederer 但没有任何反应，但我从下面的代码中得到了一些响应。

fn:function(value, metaData, record, rowIndex, colIndex, store)
{
alert(metaData.id);
metaData.trattr = 'style="background-color: red;"';
alert(metaData.css);
return value;
}

问题是我实际上可以获取 id。而且 getCSS 也有一些问题。除非有一个我不能的 ExtJS 类我可以在 sencha.com 上查找 ID，但无法更改 CSS。

Answer 4

成功！！！！

fn:function(value, metaData, record, rowIndex, colIndex, store)
{
document.getElementById(metaData.id).style.background = "green";
return value;
}

我选择了 DOM 编程，而不是查看 ExtJS，这才是我真正想要的，但这可以完成工作。我所要做的就是在绿色和白色之间切换。