In my application.js file, I have defined the code snippet below. It includes a long list of stores and views that need to be loaded.
The issue arises because these components are loaded asynchronously. This means that if a user clicks a button before a store has finished loading, it may not work as expected.
One potential solution would be to load a store only when it is required. Alternatively, is there a better way to address this problem?
Ext.define('RateManagement.Application', {
name: 'RateManagement',
extend: 'Ext.app.Application',
views: [
// List of views
'RateManagement.view.Grids.CountryRateGrid',
'RateManagement.view.Grids.LocationRateGrid',
...
'RateManagement.view.Grids.AirfareRateGrid'
],
controllers: [
// List of controllers
],
stores: [
// List of stores
'RateManagement.store.CountryStore',
'RateManagement.store.CurrencyStore',
...
'RateManagement.store.AirfareStore'
],
models: [
// List of models
'RateManagement.model.Country',
'RateManagement.model.Currency',
...
'RateManagement.model.AirfareRate'
],
launch: function() {
// App launch code
// Stupid fix for a bug
Ext.override(Ext.grid.RowEditor,{
// Code for row editor
});
}
});