ExtJS 4 Keeping Store Loads to a Minimum

When creating a user interface, you always want it to feel smooth and fast as you can, and any time that the user is left waiting on the system decreases the appearance of how fast your system is. Delays on web applications can be caused from things such as processing lots of data, to constantly requesting new data from the server. It’s the latter case that I’m going to look at today and show a method that can reduce the amount of times you request data from the server.

For a working example, say we have a registration screen that is asking for the user’s country and province/state that they live in. Both fields could be simple text boxes, but it’s a little bit nicer if you provide combo boxes that give the user a list of options to choose from.

You probably want the list of provinces/states that you show to be dynamic based upon what country they select. So your province/state combo box will likely have an event listener that looks like this:

Above is a simple listener that listens for when the combo box expands (when the user opens the combo box to view the choices), and when it does that, it gets what the country combo box is set to, sets it as a parameter, and then retrieves the list of provinces/states from the server based on the selected country.

So if they select a country, and then open the combo box for the province/state, it will load up the list properly. The problem is that if they open the combo box for the province/state again, it will request the list from the server again, even if the country selection hasn’t changed.

There are two fairly simple ways that we can prevent that second server request.

The first is to check and see if the country has changed before we reload the province/state store:

This way, if the country hasn’t changed from when we last got the list of provinces/states, then we just use our current list of provinces/states as it’s the same data that the server would have given us.

By: Matt Locke, Application Developer, WebSan Solutions Inc., a Canadian Certified Microsoft Partner