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 

、パネルは、動的に完全に働いたクリックイベントから、彼らの人口のグリッドに沿って発生させました。動的に生成されたパネル上のリスナーにグリッド作成をラップして、必要に応じてロードを作成することで、リスナーの展開または折りたたみをトリガーすることができません。

私が試したことのない解決策の1つは、カスタムコンポーネントを作成して、インラインですべてをビルドするのではなくxtypeで呼び出すことです。リスナーを関数に入れ子にするのではなく、これは、読みやすく再利用可能なコードにとっても優れていますが、今のところ根本的に解決しようとしています）。

動的に生成されるパネル上のリスナーに問題はありますか？イベントが崩壊と拡大の原因となった理由は何ですか？

ありがとうございました！

Answer 1

私はまだいくつかの問題を抱えていますが、私の主な質問はリスナーを撃つことだったので、私が到達した解決策を書きます。

私が持っていた問題は、ダイナミックに生成された要素の中で、リスナーを起動させることでした。これはネストされたリスナー関数をもたらし、スコープを定義していませんでした。私はdefaultListenerScopeを設定するpagepの解決策を試していましたが、私にとっては個人的に私は変更が見られませんでした。私は、情報をこのようにラップすることにより、

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

：

私の代わりに、独自の機能にリスナー関数を包み、このようなリスナーを介して、その後呼ば：

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 
} 

の代わりにこれをやって生成された要素で聴取者の入れ子を取り除く（ある程度まで）ことができました。私はカスタムコンポーネントを作成し、これらのリスナーを私が生成していたコンポーネントに配置しました。私の唯一の問題は、私のコンポーネントの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 
    } 
});