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

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

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

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中，您仍然可以这样做吗？如果可以，在哪里定义渲染器函数？在控制器、视图模型或其他位置？我曾尝试将函数放入控制器，并将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);
                                              }}
]

---

在extjs6中，您也可以创建但不内联

函数

，但我们可以为

网格

或任何

视图

创建内联函数，如下例所示

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

---

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

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

                //your conditions
}}]

---

这就是为什么我讨厌MVC。你可以任意地将一件事情一分为二，这取决于你认为什么是视图，什么是逻辑。我想这应该很简单。我在viewController中有渲染器函数，但在列配置中引用函数名时，函数名周围没有单引号。我只需要将

渲染器：myColumnRenderer

更改为

渲染器：“myColumnRenderer”

。谢谢小心这个。。。在控制器中定义渲染器时存在性能问题。看见基本上，当对单元格进行更改时（通过“单元格编辑”或如果您有一个检查列并对其进行了更改），内联方法不会重新运行。控制器渲染器每次都会重新运行，如果以编程方式检查所有检查列，可能会导致相当大的延迟。控制器

渲染器

在6.2及更高版本中重新运行。需要检查一些解决方案。