EXTJS 6 Grid Column Renderer Function - 你在哪里定义它？

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

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

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

在这个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": "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
}}]