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

Question

This is my code for combo box inside grid:

{
    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' event is not fired. I need to enable or disable component after its rendered.

Can anyone help?

Answer 1

It's just a typo, afterrender should be in quotes otherwise you will just add the function for undefined event.

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

Answer 2

There are a few problems with your code.

1. It looks like you're trying to create a combobox in the renderer function of a grid (your code at the top didn't get included in the code block). You're better off using the Ext.grid.plugin.CellEditing plugin instead, which will create a field on demand instead of when the column renders. Plus, every time your grid view refreshes you'll be creating another store and combobox for every row in the grid. Not good for performance, not good for the user experience either.

2. When calling defer, the duration is in milliseconds, not seconds. Also, you don't need to wrap the function in parenthesis. Just give it the function itself. Like this:

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

3. Setting lazyRender to true only works if your component is the child of some container that doesn't render all its components immediately (like a tabpanel).

4. It may be easier to just set the disabled config in the combobox when you create it instead of when you render it, unless you don't have the information available at creation time.

5. Like nscrob said, when using the on method you need to specify the event as a string. If you use the listeners config (which you have commented out), you can just do:

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

   It's important to note that the scope of these listener functions defaults to the component itself (your combobox) so scope: this is unnecessary. Unless you want the scope to be whatever object is creating this combobox, that is.

The first point is the most important. Look into using the CellEditing (or RowEditing) plugin and I guarantee things will go a lot more smoothly.