Change Background Row Color when Press a Button

Question

i just want to change the default background color of a grid row after it had been selected and when i press a button. I'm using sencha extjs 4.2.

Anyone could help me please?

Thank you in advance

Answer 1

Task can be solved using column renderer: 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

This is the way to select a one row at a time and highlight as selected row to add css class

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