动态生成元素上的Extjs 5.1.2侦听器

我正在创建一个动态生成折叠面板的页面。当用户展开这些面板时，它将执行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:'button'，
听众：{
点击：功能（按钮、e、eOpts）{
console.log（“点击功能”）；
Ext.Ajax.request({
url:'data/Countries.json'，
成功：功能（响应、选项）{
var data=Ext.JSON.decode（response.responseText）.results；
var container=Ext.getCmp（'panelContainer'）；
container.removeAll（）；
对于（i=0；i

最初，面板是通过单击事件动态生成的，并带有填充的网格，效果非常好。通过在动态生成的面板上的侦听器中包装网格创建以根据需要创建负载，我无法触发展开或折叠侦听器

环顾四周，我没有尝试过的一个可能的解决方案是创建一个自定义组件，并通过其xtype调用它，而不是在线构建所有内容，这样我就可以在那里定义侦听器，而不是将它们嵌套在函数中（对于可读和可重用的代码来说，这也更好，但我现在只是想找到问题的根源）

动态生成的面板上的侦听器是否存在问题？塌陷和展开事件触发器未触发的原因是什么

---

感谢所有的帮助！

我仍然有一些问题，但由于我的主要问题是关于解雇听众，我将写下我达成的解决方案

我遇到的问题是让侦听器在动态生成的元素中启动。这导致了嵌套侦听器函数，并且我没有定义范围。我尝试了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
}

//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
    }
});

而不是这样做：

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:在尝试引用我的组成部分

我的最终简化代码在单击按钮时生成一个折叠面板，并在展开时用生成的数据填充该面板，如下所示：

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
}

//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
    }
});

//View.js
点击：功能（按钮、e、eOpts）{
Ext.Ajax.request({
url:'data/Countries.json'，
成功：功能（响应、选项）{