ExtJS：一次加载所有商店

Question

My application.js file is defined as shown below. As you can see, there are a lot of stores and views to load.

The problem is, they are loaded asynchronously. So, if a user clicks a button before the store has been loaded, it will not work.

If I wait until all stores have been loaded, it will work as intended.

How can I only load a store when it is required; or, what is a better solution to this problem?

Ext.define('RateManagement.Application', {
    name: 'RateManagement',

    extend: 'Ext.app.Application',

    views: [
        // TODO: add views here
        'RateManagement.view.Grids.CountryRateGrid',
        'RateManagement.view.Grids.LocationRateGrid',
        'RateManagement.view.ComboBox.CountryCombo',
        'RateManagement.view.ComboBox.CurrencyCombo',
        'RateManagement.view.ComboBox.LocationCombo',
        'RateManagement.view.ComboBox.RateTypeCombo',
        'RateManagement.view.Columns.CurrencyColumn',
        'RateManagement.view.Columns.RateTypeColumn',
        'RateManagement.view.Columns.LocationColumn',
        'RateManagement.view.Columns.RateTypeColumn',
        'RateManagement.view.Columns.CountryColumn',
        'RateManagement.view.ServiceSelect.ServiceSelect',
        'RateManagement.view.Grids.AirShipmentGrid',
        'RateManagement.view.Grids.LocationWithYearOtherRateGrid',
        'RateManagement.view.Grids.CountryWithYearOtherRateGrid',
        'RateManagement.view.Grids.RealtorFeeRateGrid',
        'RateManagement.view.Grids.AirfareRateGrid'
    ],

    controllers: [
        // TODO: add controllers here
    ],

    stores: [
        // TODO: add stores here
        'RateManagement.store.CountryStore',
        'RateManagement.store.CurrencyStore',
        'RateManagement.store.LocationStore',
        'RateManagement.store.RateTypeStore',
        'RateManagement.store.LegalRateStore',
        'RateManagement.store.DeparturePackageRateStore',
        'RateManagement.store.HouseSearchStore',
        'RateManagement.store.LanguageTrainingStore',
        'RateManagement.store.TempLiving1BedroomStore',
        'RateManagement.store.TempLiving2BedroomStore',
        'RateManagement.store.TempLiving3BedroomStore',
        'RateManagement.store.TransportationLuxury',
        'RateManagement.store.TransportationMidSize',
        'RateManagement.store.LanguageTrainingStore',
        'RateManagement.store.AirShipmentStore',
        'RateManagement.store.ServiceStore',
        'RateManagement.store.HomeSearchTripLodgingStore',
        'RateManagement.store.HomeSearchTripCarRentalStore',
        'RateManagement.store.HomeSearchTripMealsStore',
        'RateManagement.store.SchoolSearchStore',
        'RateManagement.store.RealtorFeeStore',
        'RateManagement.store.AirfareStore'
    ],

    models: [
        'RateManagement.model.Country',
        'RateManagement.model.Currency',
        'RateManagement.model.Location',
        'RateManagement.model.CountryRate',
        'RateManagement.model.LocationRate',
        'RateManagement.model.CountryRate',
        'RateManagement.model.Service',
        'RateManagement.model.AirShipmentModel',
        'RateManagement.model.RealtorFeeModel',
        'RateManagement.model.AirfareRate'
    ],

    launch: function() {
        //app launch code

        //stupid fix for stupid bug
        Ext.override(Ext.grid.RowEditor,{

          addFieldsForColumn: function(column, initial) {
            var me = this,
                i,
                length, field;


            if (Ext.isArray(column)) {
                for (i = 0, length = column.length; i < length; i++) {
                    me.addFieldsForColumn(column[i], initial);
                }
                return;
            }


            if (column.getEditor) {


              field = column.getEditor(null, {
                  xtype: 'displayfield',
                  getModelData: function() {
                      return null;
                  }
              });
              if (column.align === 'right') {
                  field.fieldStyle = 'text-align:right';
              }


              if (column.xtype === 'actioncolumn') {
                  field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field';
              }


              if (me.isVisible() && me.context) {
                  if (field.is('displayfield')) {
                      me.renderColumnData(field, me.context.record, column);
                  } else {
                      field.suspendEvents();
                      field.setValue(me.context.record.get(column.dataIndex));
                      field.resumeEvents();
                  }
              }
              if (column.hidden) {
                  me.onColumnHide(column);
              } else if (column.rendered && !initial) {
                  me.onColumnShow(column);
              }

              // -- start edit
              me.mon(field, 'change', me.onFieldChange, me);
              // -- end edit
            }
          }
        });
    }
});

Answer 1

You should consider using controllers: http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.app.Controller

With controllers you can split your application bootstrap class in multiple small controllers which were invoked and loaded when needed. They can have depenencies to models, stores and views which will be loaded when a new instance of the controller is created (eg when a user requests opening a new window).