extjs4行造型

Question

我对网格行有条件样式，最初的样式工作，但它不响应数据更改。比方说，如果你编辑一个列是一个负值可以说，然后我希望它的风格改变回红。

我试图

grid.doLayout(); 
grid.doComponentLayout(); 
grid.update(); 
grid.updateLayout() 

所以我怎么可以强制网格以更新该行的CSS（我怎么触发getRowClass，或者是有这样做的任何其他方式）。

Answer 1

您可以使用渲染器配置为列...

function change(val) { 
    if (val > 0) { 
     return '<span style="color:green;">' + val + '</span>'; 
    } else if (val < 0) { 
     return '<span style="color:red;">' + val + '</span>'; 
    } 
    return val; 
} 

    function pctChange(val) { 
    if (val > 0) { 
     return '<span style="color:green;">' + val + '%</span>'; 
    } else if (val < 0) { 
     return '<span style="color:red;">' + val + '%</span>'; 
    } 
    return val; 
} 

    // create the Grid 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    collapsible: true, 
    multiSelect: true, 
    stateId: 'stateGrid', 
    columns: [ 
     { 
      text  : 'Company', 
      flex  : 1, 
      sortable : false, 
      dataIndex: 'company' 
     }, 
     { 
      text  : 'Price', 
      width : 75, 
      sortable : true, 
      renderer : 'usMoney', 
      dataIndex: 'price' 
     }, 
     { 
      text  : 'Change', 
      width : 75, 
      sortable : true, 
      renderer : change, 
      dataIndex: 'change' 
     }, 
     { 
      text  : '% Change', 
      width : 75, 
      sortable : true, 
      renderer : pctChange, 
      dataIndex: 'pctChange' 
     }, 
     { 
      text  : 'Last Updated', 
      width : 85, 
      sortable : true, 
      renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
      dataIndex: 'lastChange' 
     } 
      ], 
height: 350, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    viewConfig: { 
     stripeRows: true, 
     enableTextSelection: true 
    } 
}); 

Answer 2

你所要做的仅是可能的，如果你运行reconfigure与电网同columnmodel。覆盖该视图的getRowClass属性导致grid.Panel本身没有。

gridReference.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
    // your code 
} 

参考这个

的JSFiddle例如或者您可以使用您通过添加一个改变细胞的元数据渲染

使用的渲染器，但这次类。

var classRenderer = function(v,m) { 
    if (v=='Lisa') { 
     m.tdCls = 'demo' 
    } 
    return v; 
} 

这里的一个JSFiddle除了