ExtJS：一次加载所有商店答案

【问题标题】：ExtJS: All stores loading at onceExtJS：一次加载所有商店
【发布时间】：2014-03-12 18:06:53
【问题描述】：

我的 application.js 文件定义如下。如您所见，有很多商店和视图要加载。

问题是，它们是异步加载的。因此，如果用户在商店加载之前点击按钮，它将不起作用。

如果我等到所有商店都加载完毕，它将按预期工作。

我怎样才能只在需要时才加载商店；或者，这个问题有什么更好的解决方案？

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

【问题讨论】：

顶部有两个选项。要获得同步加载，您可以关闭autoload 并从load 事件的回调中调用下一个存储（以及每个后续存储）（注意：这很容易导致回调地狱）。另一种选择是在商店加载时触发一个函数，该函数计算加载的商店总数。一旦该数字等于商店总数，是否允许互动？
有没有办法在 Grid 首次显示时加载商店？只有在请求网格时，我才应该能够加载网格的数据，这似乎是有道理的。
您可以在商店中将autoLoad 设置为true。是这个意思吗？
Autoload true 似乎会在应用程序启动后立即加载所有内容。我只希望它在我单击显示网格的链接时加载。这可能吗？
确定您只需将listener 添加到click 事件并调用store load（并将autoload 设置为false）

标签： javascript ajax extjs

【解决方案1】：

您应该考虑使用控制器：http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.app.Controller

使用控制器，您可以将应用程序引导类拆分为多个小型控制器，这些控制器在需要时被调用和加载。它们可以依赖于模型、存储和视图，这些将在创建控制器的新实例时（例如，当用户请求打开新窗口时）加载。

【讨论】：