Ext.data.JsonStore

Call me a nerd, but I do have a favorite ExtJS class: Ext.data.JsonStore(). I like this class for a number of reasons. . . for starters, it saves several lines of code as you don’t have to declare an Ext.data.Store(), Ext.data.HttpProxy() and Ext.data.JsonReader() class just to read data from the server. Ext.data.JsonStore() does all of that for you, making your code cleaner. . . and who doesn’t like clean code?

I recently found one more reason to love this class. If you return a JSON response from the server which contains a “metaData” property (in addition to whatever “root” property mapped to the actual data), you can save yourself even more lines of code!

For example, a traditional JsonStore() declaration and the JSON response it reads:

As you can see, I have declared a variety of config options for my JsonStore() object. The “baseParams” are sent to the “url” specified. The server response should contain a root attribute (in this case “rootAttribute”), and I’ve told the store to look for the fields “id” and “text” within the returned data.

While this is an improvement over declaring a standard Ext.data.Store() with the HttpProxy() and JsonReader() classes, we can further reduce the number of JavaScript lines required to read the data. Assuming you have thousands of lines of code where you utilize many JsonStore() objects, saving 3 or 4 lines of code per object instance results in maybe 100 lines of code saved or more throughout a large application. Furthermore, it allows the JsonStore() class to become much more flexible.

To accomplish this, we’ll add about 3 lines of code to our server-side file (plus or minus any additional logic needed) which returns the JSON data.

Obviously the “root”, “sortInfo” and “fields” attributes of our original config object are necessary. How else would the JsonStore() class know how to read the returned data? By moving this information into another attribute of the returned JSON object, we can dynamically instruct the JsonStore() class to look for the data we want.

If you read the documentation for the Ext.data.JsonReader() class, you’ll find a section near the top discussing the “metaData” attribute. In essence, the data contained within the “metaData” attribute tell the JsonStore() class what to do with the data it just received. In our case, we’ll tell it which attribute is considered the “root” (to which the actual JSON data is mapped), how to sort the data (via “sortInfo”), and which data fields we want to use (via the “fields” array). All of this is configured on the server – meaning that it’s less code to maintain on the client side.

Take a look at the resulting JsonStore() declaration and the JSON data it accepts:

It’s much simpler!

This also means that for classes like Ext.grid.GridPanel() (as well as any other classes which take a “store” config option), we can dynamically change how those classes are used. In the case of a Grid(), we can dynamically change the column model. In other cases, we could reuse the same JsonStore() to load data for different purposes at different times, saving client-side memory and speeding-up the initial page load. I imagine there are a ton of other uses as well.

While a few of the more advanced users of ExtJS might laugh at the fact I’ve just started playing with this, I find it to be immensely helpful! So helpful, in fact, that I wonder why Ext developers aren’t encouraged to make use of it more often. In any case, have fun with this!