Question

我正在如下创建网格。我想根据条件更改行的样式此外，日期列的值应为->'d.m.Y'。如果条件成立，我想更改行的颜色。但是由于date列具有自己的渲染器方法，因此默认渲染器不起作用。我们如何运行两种渲染器方法？

columns : {
        defaults : {
            renderer : function(value, meta, record) {

                if (record.get('status') === false) {
                    meta.style = "color:#FF0000;";
                }
                return value;
            }
        },
        items : [  {
            text : 'Number',
            dataIndex : 'number',
            flex : 1
        }, {
            text : 'Type'),
            dataIndex : 'type',
            flex : 1
        }, {
            text : 'Date',
            dataIndex : 'date',
            renderer : Ext.util.Format.dateRenderer('d.m.Y'),
            flex : 1
        }]
    }

Answer 1

仅当列中没有渲染器时才调用默认渲染器，您可以在date列中制作一个格式化日期并同时应用元样式的渲染器。

columns: {
    defaults: {
        renderer: function(value, meta, record) {

            if (record.get('status') === false) {
                meta.style = "color:#FF0000;";
            }
            return value;
        }
    },
    items: [{
            text: 'Number',
            dataIndex: 'number',
            flex: 1
        }, {
            text: 'Type',
            dataIndex: 'type',
            flex: 1
    },
    {
        text: 'Date',
        dataIndex: 'date',
        renderer: function(value, meta, record) {
            if (record.get('status') === false) {
                meta.style = "color:#FF0000;";
            }
            return Ext.Date.format(value, 'd.m.Y');
        },
        flex: 1
    }]
}

使用控制器中的渲染器功能

Ext.define('Fiddle.view.GridController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.gridcontroller',
            dateRenderer: function (value, meta, record) {
                if(record.get('status') === false) {
                    meta.style = "color:#FF0000;";
                }
                return Ext.Date.format(value, 'd.m.Y');
            },
})

Ext.create('Ext.grid.Panel', {
    controller: 'gridcontroller',
    columns:
    //other properties...
    {
        text: 'Date',
        dataIndex: 'date',
        renderer: 'dateRenderer',
        flex: 1
    }
    //other properties...
})

提琴here

如何为extjs网格中的少数列运行默认渲染器方法和项目渲染器方法？

1 个答案: