EXTJS 6网格列渲染函数-您在哪里定义它？

Question

在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}
]

在EXTJS6.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);
                                              }}
]

Answer 1

在ExtJS 6中，您也可以创建但内联的function，但不能使用内联函数，我们可以为grid或任何view创建ViewController，如下例所示

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

在这个小提琴中，我使用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": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "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()
        });
    }
});

Answer 2

您可以像这样使用ExtJs 6这样的渲染器

columns: [
            { width:"100%", renderer: function(value,metaData,records,view) {

                //your conditions
}}]