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

时间:2013-08-28 22:02:04

标签: css extjs grid row

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

有人可以帮我吗?

提前谢谢

2 个答案:

答案 0 :(得分: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());

答案 1 :(得分:1)

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

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