ExtJS: Multiple Stores for Single Request

I have a love hate relationship going on right now with ExtJS, a JavaScript application framework originally created as an open source extension to YUI and now a commercially licensed product. You'd think the relationship would be all positive, since anything that simplifies the drudgery of writing attractive browser-side code should promote personal loyalty. But the inherent messiness of JavaScript application development, the lack of product documentation, and the fact every Google search yields examples in the version you are not using, makes it a tough product to love.

So after spending 20 minutes trying to decipher how to create multiple Store objects initialized from the same JSON request, I thought I'd post the answer on my blog in hope it saves someone else a few minutes. Unlike every other ExtJS examples on the web, I'm going to tell you that this example was written in version 4.1. ;)

Ext.define('TestModel', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'count', type: 'integer' }, ] }); var substore1 = Ext.create('Ext.data.Store', { model: 'TestModel', proxy: { type: 'memory', reader: { type: 'json', root: 'jsonpath1' } } }); var substore2 = Ext.create('Ext.data.Store', { model: 'TestModel', proxy: { type: 'memory', reader: { type: 'json', root: 'jsonpath2' } } }); var mainstore = Ext.create('Ext.data.Store', { model: 'TestModel', proxy: { type: 'ajax', url: '/somepage.json', reader: { type: 'json' } }, autoLoad: true, listeners: { load: function(store, records, successful) { substore1.loadRawData(store.proxy.reader.jsonData); substore2.loadRawData(store.proxy.reader.jsonData); } } });

My first serious JavaScript application was a prototype for one of my consulting clients in the dotcom boom. The company had just received its series A and was in need of a web-based user interface for their systems management appliance. My task was to build four different prototypes using different technologies: Java applets, ActiveX controls, server-side HTML, and client-side JavaScript. Prior to this project, I had never built a complex JavaScript-based application (note: this was about five years before this type of development received the cool name AJAX). In reviewing the results with my client, I remember thinking: who the *** would choose this JavaScript approach?!  Well, guess which one we chose?

Several years later it took @leathekd much time and emotional pain to purge the 10K+ lines of JavaScript code this evolved to from the product.