Extjs 5.1.2 Слушатели динамически сгенерированного элемента

Question

Я создаю страницу, которая будет динамически генерировать свернутые панели. Когда пользователь расширяет эти панели, он выполнит запрос GET и заполнит эту сгенерированную панель с ответом JSON. Идея состоит в том, чтобы выполнить какую-то ленивую нагрузку или необходимую нагрузку, поскольку объем данных, которые будут показаны первоначально, может стать ошеломляющим.

Однако я не могу заставить слушателей работать с моими панелями.

Вот код, который генерирует панель с помощью функции нажать кнопку в:

  xtype : 'button', 
      listeners : { 
      click : function (button, e, eOpts) { 
       console.log("Click function"); 
       Ext.Ajax.request({ 
       url: 'data/Countries.json', 
       success: function(response, options) { 
        var data = Ext.JSON.decode(response.responseText).results; 
        var container = Ext.getCmp('panelContainer'); 
        container.removeAll(); 
        for (i = 0; i < data.length; i++) 
        { 
        container.add({ 
         xtype: 'panel', 
         title: 'Country Name - ' + data[i].countryName, 
         collapsible: true, 
         listeners: { 
         expand: function() { 
          Ext.Ajax.request({ 
          url: 'data/CountryData.json', 
          success: function(response, options) { 
           var data = Ext.JSON.decode(response.responseText).results; 
           var me = this; 
           me.add({ 
           xtype: 'grid', 
           store: Ext.create('Ext.data.Store', 
            { 
             fields : [{ 
             name: 'gdp' 
             }, { 
             name: 'rank' 
             }, { 
             name: 'founded' 
             }, { 
             name: 'governor' 
             }, { 
             name: 'notes' 
             }], //eo fields 
            data: data.information, 
            }),// eo store 
           columns: [ 
            { text: 'GDP', dataIndex: 'gdp'}, 
            { text: 'rank', dataIndex: 'rank'}, 
            { text: 'Date', dataIndex: 'founded'}, 
            { text: 'name', dataIndex: 'governor'}, 
            { text: 'Notes', dataIndex: 'notes', flex: 1, cellWrap: true} 
           ], //eo columns 
           autoLoad: true 
           }); 

          }, 
          failure: function(response, options) {} 
          }); 
         }, 
         collapse: function() { 
          console.log("Collapse function"); 
          var me = this; 
          me.removeAll(); 
         } 
         }//eo panel listeners 
        });//eo cont.add() 
        }//eo for loop 
       }, //eo success 
       failure: function(response, options) { 
        //HTTP GET request failure 
       }//eo failure 
       });//eo Ajax request 
      } //eo click 
      }//eo button listeners 

Первоначально панели были динамически генерируемым вместе со своими населенными сетками от события щелчка, которые работали отлично. Обертывая создание сетки в слушателе на динамически созданной панели, чтобы создать нагрузку по мере необходимости, я не могу заставить разворачивать или свертывать слушателей.

Обнаружение вокруг, одно из возможных решений, которое я не пробовал, - создать пользовательский компонент и вызвать его через свой тип xtype, а не строить все в строке, что позволит мне определять слушателей там, а не вставлять их в функцию (это лучше также для читаемого и многоразового кода, но я просто пытаюсь добраться до корня проблемы на данный момент).

Есть ли проблема с слушателями на динамически сгенерированных панелях? В чем причина того, что событие запускает коллапс и расширение, не срабатывает?

Спасибо за помощь!

Answer 1

У меня все еще есть несколько вопросов, но поскольку мой главный вопрос заключался в том, чтобы уволить слушателей, я напишу решение, которое я достиг.

Проблема, с которой я столкнулся, заключалась в том, чтобы слушатели загорелись в динамически сгенерированном элементе. Это привело к вложенным функциям слушателя, и я не определил область действия. Я попробовал решение pagep установить defaultListenerScope, но для меня лично я не видел изменений.

вместо этого я завернул функцию слушателя в свои собственные функции и называюсь затем через слушатель, как это:

listeners: { 
    expand: 'expandFunction', 
    collapse: 'collapseFunction' 
},//eo panel listeners 

expandFunction: function() { 
    //Do Ajax request and add grid to panel 
}, 
collapseFunction: function() { 
    //Remove all child elements from this panel 
} 

Вместо того, чтобы сделать это:

listeners: { 
    expand: function() { 
     //Do Ajax request and add grid to panel 
    }, 
    collapse: function() { 
     //Remove all child elements from this panel 
    } 
},//eo panel listeners 

обертывания информации Этим пути, я смог (в определенной степени) удалить вложенность слушателей сгенерированными элементами. Я также создал пользовательский компонент и разместил эти слушатели с компонентом, который я генерировал. Моя единственная проблема теперь заключается в заполнении сгенерированного элемента, так как я получаю Uncaught TypeError: Cannot read property 'add' of undefined при попытке ссылаться на itemId моего компонента.

Мой последний упрощенный код, который генерирует сжатую панель на кнопке кнопки мыши и заполнит его сгенерированные данные при развернутых, выглядит следующим образом:

//View.js 
    click: function (button, e, eOpts) { 
       Ext.Ajax.request({ 
       url: 'data/Countries.json', 
       success: function(response, options) { 
        var data = Ext.JSON.decode(response.responseText).results; 
        var container = Ext.getCmp('panelContainer'); 
        console.log(container); 
        container.removeAll(); 
        for (i = 0; i < data.length; i++) 
        { 
        container.add({ 
         xtype: 'customPanel', 
         title: data[i].country 
        }); 
        } 
       }); 

//customPanel.js 
    Ext.define('MyApp.view.main.CustomPanel', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.customPanel', 

    xtype: 'panel', 
    collapsible: true, 
    collapsed: true, 
    listeners: { 
     expand: 'expandFunction', 
     collapse: 'collapseFunction' 
    },//eo panel listeners 

    expandFunction: function() { 
     //Do Ajax request and add grid to panel 
    }, 
    collapseFunction: function() { 
     //Remove all child elements from this panel 
    } 
});