EXTJS 6网格列渲染器功能 - 您在哪里定义它？

Posted 2021-05-06

在EXTJS 4/5中，您可以创建一个内联函数，然后可以将其用作网格列渲染器，就像这样

function myColumnRenderer(value, metaData, record, rowIndex, colIndex, store){
    //do something with the data and return
    return value;
}

在网格的列定义中，您将像这样引用渲染器

columns:[
{ text: 'ColA',  dataIndex: 'ColA', renderer: myColumnRenderer},
{ text: 'ColB',  dataIndex: 'ColB', renderer: myColumnRenderer}
]

在EXTJS 6.5中，你仍然可以这样做吗？若然，你在哪里定义渲染器功能？在控制器，或viewModel，或其他地方？我已经尝试将该函数放在控制器中并将this.myColumnRenderer放在列的渲染器中，但它似乎永远不会被调用。

看起来这是一个选项，只是不确定它是否是正确的方法

columns:[
{ text: 'ColA',  dataIndex: 'ColA', renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                                   return this.getController().myColumnRenderer(value, metaData, record, rowIndex, colIndex, store);
                                              }},
{ text: 'ColB',  dataIndex: 'ColB', renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                                   return this.getController().myColumnRenderer(value, metaData, record, rowIndex, colIndex, store);
                                              }}
]

答案

在ExtJS 6中你也可以创建但是内联function但是我们可以为ViewController或任何grid创建view而不是内联函数，如下例所示

Ext.define('MyViewController', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.myview',

    // This method is called as a "handler" for the Add button in our view
    onAddClick: function() {
        Ext.Msg.alert('Add', 'The Add button was clicked');
    }
});

Ext.define('MyView', {
    extend: 'Ext.Panel',
    controller: 'myview',

    items: [{
        xtype: 'button',
        text: 'Add',
        handler: 'onAddClick',  // calls MyViewController's onAddClick method
    }]
});

在这个FIDDLE中，我使用viewController和grid组件创建了一个演示。我希望这有助于/指导您实现您的要求。

代码链

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('GridController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.gridcntr',
            //This event will fire for grid column renderer
            onColRender: function (value, metaData, record, rowIndex, colIndex, store) {
                console.log(value);
                return value;
            }
        });

        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "[e-mail]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[e-mail]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[e-mail]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[e-mail]",
                "phone": "555-222-1254"
            }]
        });

        Ext.create({
            xtype: 'grid',
            controller: 'gridcntr',
            title: 'user data',

            store: store,

            columns: [{
                text: 'Name',
                dataIndex: 'name',
                width: 200,
                renderer: 'onColRender'
            }, {
                text: 'Email',
                dataIndex: 'email',
                width: 250,
                renderer: 'onColRender'
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120,
                renderer: 'onColRender'
            }],


            layout: 'fit',
            fullscreen: true,
            renderTo:Ext.getBody()
        });
    }
});