extjs - extjs4 行样式

Question

我在网格行上有条件样式，样式最初有效，但它不响应数据更改。可以说，如果您将列编辑为负值，可以说我希望它的样式变回红色。

我试过了

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

那么我如何强制网格更新行上的css（我如何触发getRowClass，或者有没有其他方法可以做到这一点）。

Answer 1

只有在网格上使用相同的 columnmodel运行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
    }
});