extjs - Extjs 4.1ストアが複数のコンボボックスのウィンドウにロードされるのを待ちます

Question

ExtJS 4.1 を使用しています。コンボボックスのすべてのストアがロードされるのを待ちたいと思っています。ウィンドウの beforerender イベントをリッスンします。

この場合、コンボボックスの数が定義されていない場合は、すべてのコンボボックスを取得し、カウントを保存し、ストアをロードして、コンボボックスの数を減らすコールバックを登録します。カウントがゼロになると、show メソッドが呼び出され、ウィンドウが表示されます。

コンボボックスの数が定義されている場合、ゼロの場合は true を返し、ウィンドウを表示できるようにします。それ以外の場合は false を返します。

ただし、問題は、すべてのコンボボックスが displayValue を表示するわけではなく、代わりに valueField を表示することです。

    console.log('--- onWindowBeforeRender');

if (typeof this.comboboxCount != 'undefined') {
    if (this.comboboxCount == 0) {
        console.log('returning true:');
        return true;
    }
    else {
        console.log('returning false1:');
        return false;
    }
}

var x = component.query('combobox');

console.log('x.length:');
console.log(x.length);

this.comboboxCount = x.length;

for (var i = 0; i < x.length; i++) {
    var y = x[i];

    console.log('y:'+i);
    console.log(y);

    y.store.load({
        scope: this,
        callback: function(records, operation, success) {
            this.comboboxCount--;

            console.log('comboboxCount:' + this.comboboxCount);
            if (!this.comboboxCount) {
                console.log('all stores loaded.');
                this.show();
           }
        }
    });
}
console.log('returning false2');
return false;

コンボボックスのコードは次のとおりです。

                    {
                        xtype: 'combobox',
                        anchor: '100%',
                        fieldLabel: 'Region',
                        name: 'region_id',
                        displayField: 'name',
                        store: 'RegionStore',
                        valueField: 'id'
                    },
                    {
                        xtype: 'combobox',
                        anchor: '100%',
                        fieldLabel: 'Country',
                        name: 'country_id',
                        displayField: 'name',
                        store: 'CountryStore',
                        valueField: 'id'
                    }

店舗は次のとおりです。

Ext.define('RR.store.CountryStore', {
  extend: 'Ext.data.Store',

  requires: [
  'RR.model.CountryModel'
  ],

  constructor: function(cfg) {
  var me = this;
  cfg = cfg || {};
  me.callParent([Ext.apply({
      model: 'RR.model.CountryModel',
      storeId: 'CountryStore',
      proxy: {
      type: 'ajax',
      api: {
          create: '/country/create',
          read: '/country/read',
          update: '/country/update'
      },
      reader: {
          type: 'json',
          root: 'countrys'
      }
      }
  }, cfg)]);
  }
});

Ext.define('RR.store.RegionStore', {
  extend: 'Ext.data.Store',

  requires: [
  'RR.model.RegionModel'
  ],

  constructor: function(cfg) {
  var me = this;
  cfg = cfg || {};
  me.callParent([Ext.apply({
      model: 'RR.model.RegionModel',
      storeId: 'RegionStore',
      proxy: {
      type: 'ajax',
      api: {
          create: '/region/create',
          read: '/region/read',
          update: '/region/update'
      },
      reader: {
          type: 'json',
          root: 'regions'
      }
      }
  }, cfg)]);
  }
});