Последующий механизм не работает для выпадающего списка при использовании в сетке в 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

Есть несколько проблем с вашим кодом.

1. Похоже, вы пытаетесь создать комбинированный список в функции рендеринга сетки (ваш код вверху не был включен в блок кода). Вам лучше использовать Ext.grid.plugin.CellEditing вместо этого плагин, который будет создавать поле по требованию, а не когда визуализирует столбец. Кроме того, каждый раз, когда обновляется сетка, вы будете создавать новый магазин и комбинированный список для каждой строки в сетке. Не хорошо для производительности, не хорошо для пользовательского опыта.

2. При вызове defer продолжительность указывается в миллисекундах, а не в секундах. Кроме того, вам не нужно заключать функцию в скобки. Просто дайте ему саму функцию. Как это:

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

3. Установка для lazyRender значения true работает только в том случае, если ваш компонент является дочерним элементом некоторого контейнера, который не отображает сразу все свои компоненты (например, панель табуляции).

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), и я гарантирую, что все пойдет намного лучше.

Answer 2

Это просто опечатка, последующий вывод должен быть в кавычках, иначе вы просто добавите функцию для неопределенного события.

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