css - 按下按钮时更改背景行颜色

Question

我只想在选择网格行后以及按下按钮时更改其默认背景颜色。我正在使用 sencha extjs 4.2。

任何人都可以帮助我吗？

先感谢您

Answer 1

可以使用列渲染器解决任务：http: //jsfiddle.net/bLgSA/10/

var button = Ext.create('Ext.button.Button', {
    text: 'btn',
    listeners: {
        click: function() {
            var sm = grid.getSelectionModel();
            if (sm.hasSelection()) {
                var rec = sm.getSelection()[0];
                if (rec.get("color") == "black")
                   rec.set("color", "red");
                else
                  rec.set("color", "black");
            }
        }
    }
});

var renderer = function(value, metaData, record) {
    metaData.style = 'color:'+record.get("color");
    return value;
}

var grid = Ext.create('Ext.grid.Panel', {
    height: 300,
    width: 400,
    title: 'hello',
    columns: [
        {text: 'c1', dataIndex: 'id', renderer: renderer},
        {text: 'c2', dataIndex: 'label', renderer: renderer}
    ],
    store: Ext.create('Ext.data.Store', {
        fields: ['id', 'label', 'color'],
        data: [
            {id: 0, label: 'a', color: 'black'}, 
            {id: 1, label: 'b', color: 'red'}
        ]
    })
});

grid.render(Ext.getBody());
button.render(Ext.getBody());

Answer 2

这是一次选择一行并突出显示为选定行以添加 css 类的方法

  function rowHighlight()
    {       
    $('#facCodes tr').click(function(event){
    $(this).addClass("click").siblings().removeClass("click");
    });
    }