afterextender在EXTJS的网格中使用时，不适用于组合框

Question

这是我的网格内组合框代码：

{
    header: 'FSCS',
    dataIndex: 'acntOvrrideTypeCd',
    flex: 1,
    renderer: function(val, metaData, record, rowIndex, colIndex) {
        var id = Ext.id();
        var store = new Ext.data.Store({
            fields: ['code', 'description'],
            data: [{
                "code": "",
                "description": ""
            }, {
                "code": "E",
                "description": "E"
            }, {
                "code": "D",
                "description": "D"
            }, {
                "code": "S",
                "description": "S"
            }]
        });

        Ext.Function.defer(
            (function() {
                var cb = Ext.create('Ext.form.ComboBox', {
                    id: 'acntOvrrideTypeCd-' + rowIndex,
                    queryMode: 'local',
                    renderTo: id,
                    store: store,
                    forceSelection: true,
                    triggerAction: 'all',
                    lazyRender: true,
                    size: 5,
                    valueField: 'code',
                    displayField: 'description',
                    value: val
                    //listeners:{
                    //    scope: this,
                    //    'select': Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex)
                    //}

                });
                cb.on(afterrender, function() {
                    console.log("------- box---" + rowIndex);
                    Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex);
                });
            }), 0.25);

        console.log("i----------" + id);
        return (Ext.String.format('<div id="{0}"></div>', id));
    }
}

'afterrender'事件不会被触发。渲染后，我需要启用或禁用组件。

有人可以帮忙吗？

Answer 1

这只是一个错字，应在引号后加上引号，否则您将仅添加未定义事件的函数。

cb.on('afterrender',function(){
     console.log("------- box---" + rowIndex);
     Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex);
});

Answer 2

您的代码有一些问题。

1. 似乎您正在尝试在网格的渲染器功能中创建一个组合框（您的顶部代码未包含在代码块中）。您最好改用Ext.grid.plugin.CellEditing插件，它将按需创建字段，而不是在显示列时创建字段。另外，每次刷新网格视图时，都将为网格中的每一行创建另一个商店和组合框。不利于性能，也不利于用户体验。

2. 调用延迟时，持续时间以毫秒为单位，而不是秒。另外，您无需将函数包装在括号中。只要给它功能本身。像这样：

   Ext.defer(function(){
       // do stuff
   }, 25);
   

3. 将lazyRender设置为true只能在您的组件是某个容器的子组件，而该容器不能立即呈现其所有组件（如tabpanel）。

4. 除非在创建时没有可用的信息，否则在创建组合框时而不是在渲染时仅在组合框中设置禁用的配置会更容易。

5. 如nscrob所说，当使用on方法时，需要将事件指定为字符串。如果您使用了监听器配置（已将其注释掉），则可以执行以下操作：

   listeners: {
       afterrender: function(){
           console.log("------- box---" + rowIndex);
           Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex);
       },
       select: function(){
           Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex);
       }
   }
   

重要的是，这些侦听器功能的范围默认为组件本身（您的组合框），因此不需要scope: this。除非您希望范围是正在创建此组合框的任何对象，否则就是。

第一点是最重要的。考虑使用CellEditing（或RowEditing）插件，我保证一切都会更加顺利。