ExtJs：ストアの作成時にストアデータを取得する

Question

私は、単純なコンボボックスの内部にあるインラインストアを持っています。このストアには、デフォルトのインラインデータがあります。今私は、ストアが作成され、このイベントがストアにあるデータを私に供給する必要があると解雇されるイベントを探しています。

私はこのようにそれを試してみました：

Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose', 
    store: { 
     autoLoad: true, 
     fields: [ 
      {name: 'name', type: 'string'} 
     ], 
     data : [ 
      {"name":"TestName_A"}, 
      {"name":"TestName_B"}, 
      {"name":"TestName_C"}, 
     ], 
     listeners: { 
      load: function(store) { 
       let records = store.getData() 
       records.forEach(record => { 
        console.log(record.getField('name')) 
       }) 
      } 
     } 
    }, 
    queryMode: 'local', 
    valueField: 'name', 
    displayField: 'name', 
    renderTo: Ext.getBody() 
}); 

しかし、それは動作しません。 store.getData()は私のレコードを含んでいないようです。 https://fiddle.sencha.com/?fiddle=v7#fiddle/1h53

Answer 1

使用この今ストアショーコンソールデータ：

Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose', 
    queryMode: 'local', 
    valueField: 'name', 
    displayField: 'name', 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function(me) { 

      var store = Ext.create('Ext.data.Store', { 
       //autoLoad: true, 
       fields: [ 
        {name: 'name', type: 'string'} 
       ], 
       data : [ 
        {"name":"TestName_A"}, 
        {"name":"TestName_B"}, 
        {"name":"TestName_C"}, 
       ], 
       listeners: { 
        datachanged : function(store) { 
         Ext.each(store.data.items,function(rec){ 
          console.log(rec.data.name); 
         }); 
        } 
       } 
      }); 
      me.setStore(store); 
      store.load(); 
     } 
    }, 
}); 

Answer 2

私は最終的にそれがコンボボックスがレンダリングされます後にストアにアクセスすることで問題を解決するために管理：

は私のバイオリンあります https://fiddle.sencha.com/?fiddle=v7#fiddle/1h7c

Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose', 
    store: { 
     autoLoad: true, 
     fields: [ 
      {name: 'name', type: 'string'} 
     ], 
     data : [ 
      {"name":"TestName_A"}, 
      {"name":"TestName_B"}, 
      {"name":"TestName_C"}, 
     ], 
    }, 
    queryMode: 'local', 
    valueField: 'name', 
    displayField: 'name', 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function(me) { 
      let store = me.getStore() 
      console.log("Event fired!") 
      store.each(record => { 
       console.log(record.get('name')) 
      }) 
     } 
    }, 
}); 

Answer 3

あなたは簡単のafterrenderストアを作成することによってこれを行うことができます

コンボボックスとコンボボックスにストアを設定します。

 
Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose', 
    queryMode: 'local', 
    valueField: 'name', 
    displayField: 'name', 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function(me) { 

      var store = Ext.create('Ext.data.Store', { 
       autoLoad: true, 
       fields: [ 
        {name: 'name', type: 'string'} 
       ], 
       data : [ 
        {"name":"TestName_A"}, 
        {"name":"TestName_B"}, 
        {"name":"TestName_C"}, 
       ], 
       listeners: { 
        load: function(store) { 
         Ext.each(store.data.items,function(rec){ 
          console.log(rec.data.name); 
         }); 
        } 
       } 
      }); 
      me.setStore(store); 
     } 
    }, 
});