extjs4行樣式

Question

我在網格行上有條件樣式，樣式最初可以工作，但不能響應數據更改。 可以說，如果您將某列編輯為負值，那么我可以將其樣式更改為紅色。

我試過了

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

因此，我如何執行網格以更新行上的CSS（如何觸發getRowClass或是否有其他方法可以執行此操作）。

Answer 1

僅當在網格上使用相同的列模型運行reconfigure ，您才能嘗試執行的操作。 覆蓋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

Answer 2

您可以將渲染器配置用於列...

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