Why?
Applications usually need many stores to be filled with data. For the purposes of this explanation we can classify these stores as normal (or dynamic if you wish) where data is changed by users then it is saved to the server or new data is loaded from the server for the user to interact with. The other stores hold data that is never changed during the application lifetime – I call them static stores. These are various lists: genders, states, countries, types of other items, etc.
Now, when the application starts we have to load these stores so we usually wind up with 20-100 initial Ajax server requests. That does have a negative effect both on the client application startup time but also on the server that is loaded with many often unnecessary requests.
What?
Hence, what we need and want is the reduction of the number of initial server requests to the minimum.
How?
This example shows how it can be easily done. We send the initial one request asking server to deliver data for all static stores, the response is decoded, data saved and all static stores populated with their records.
Live Demo
Main Features
- improves application startup time
- decreases server load
- very simple, easily understood
- shows where to store constant data
- configurable, stores can be added removed easily
- easily integrated with Simple Login System
Use Case
This example finds its use in any (bigger) application that uses one kind of constant lists or another. It is suitable not only for combos but also for grids, trees, charts, dataviews; in any component that is backed by a store.
Do not use it for stores where data can be modified by the user or often refreshed from the server. Use stores with proxy configuration in these cases.
Example Files (relative to example root)
The example has been initially generated with sencha generate app in a workspace. The following list contains only the relevant files:
app/Application.js app/Const.js app/store/statics/Continents.js app/store/statics/Countries.js app/view/Form.js
If you want to see the example code, login or sign-up. Free membership is available.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
