當按下按鈕時更改背景的行顏色

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"); 
    }); 
    }