ExtJS – QueryStore & Store Query Language

This is purely conceptual at this point but I would love to have this feature. It would be similar to TrimQuery but be based on Ext Stores. I would love to be able to do this:


Let me preface this with the fact that this is NOT server side SQL. This SQL never gets sent to the server. This is a very simple client side implementation that is only used for joining together data from multiple stores into an intermediary store which is useful for displaying grids that don’t match your server side data model.  It saves you from having to create one-off data providers for these grids and having to migrate changes to your other stores by hand.


This particular query would give you all of the direct relationships for person #1. The “IF” statement in the select would label the relation type; whether person #1 is the parent or the child. This would be useful for doing a grouping store so you can see all of person #1’s parents, and their children.

This store would be based off of the “relationship” store and the “people” store. Its data represents all the parent names and their child names.

Some sample data might look like this:

The QueryStore would subscribe to events on the stores referenced in the query so that when data changes, the data in the QueryStore is updated. The QueryStore would evaluate the changes to ensure they affect the results of its query.

So, if you rename someone in one store then they are renamed in all the QueryStore’s based off it. And because of this, all your grids get automatically updated as well.

I model my Stores off of server side objects. That is, a record has all the fields that the server side object has. Utilizing CRUD operations I send those records to the server when they need to be saved. The data easily translates one to one. The problem here (this is what the QueryStore is meant to solve) is that often I have grids that are slightly different from the server side data model. For one, I want to display names instead of numeric ids. Another good example is this parent child relationship thing. In order to support this we have created 2 components (I can’t take credit for the StoreLink… that one was Steve Skrla):

  1. StoreLink
  2. StoreSynchronizer

StoreLink is essentially used to copy names where id’s exist and migrates changes between the stores that are “linked.” Its like a foreign key relation. StoreSynchronizer mimics what a where clause would do in the QueryStore. It essentially copies one store to another, but only the records that apply to its “where clause.” It also syncs changes to both stores back and forth. The relationship example I have here? I already do this in our production application using a combination of these 2 components. The real trick is parsing a query that sets these things up automatically!

How cool would it be to then add a record to the QueryStore and have it intelligently add the data to the other stores?… “very cool” is the right answer.

Alas… I don’t have time to work on this. I will file this in my “one day” pile that only gets bigger and rarely gets smaller.


  1. Not quite what I am talking about… maybe people who are using Ruby on Rails will find your component useful. I don’t like Ruby so… I can’t really comment on it. I will say that I don’t like how dependent your component is on the server for defining relationships. I think the client should be the one to define the relationships between stores. This is what we have done with our StoreLink and StoreSynchronizer utlities. I like my Query store idea because it is so easy to read as far as how relationships are defined. Please keep in mind that this is not SQL as in this is not sent to the database. This “SQL” is parsed by javascript and simply used to map data from one store to another.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">