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组件创建了一个演示。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

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

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

2 个答案: