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

最初，这些面板是与click事件中的填充网格一起动态生成的，这非常有效。通过将网格创建包装在动态生成的面板上的侦听器中以创建按需加载，我无法触发展开或折叠侦听器。

搜索一下，我没有尝试过的一个可能的解决方案是创建一个自定义组件并通过它的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

通过这种方式包装信息，我能够（在某种程度上）删除具有生成元素的侦听器的嵌套。我还创建了一个自定义组件，并将这些侦听器与我生成的组件放在一起。我现在唯一的问题是填充生成的元素，因为我在尝试引用组件的itemId时得到Uncaught TypeError: Cannot read property 'add' of undefined。

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

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

Extjs 5.1.2动态生成元素的监听器

1 个答案: