Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

On ExtJS 5 Chained Stores

June 6, 2014 by saki 17 Comments

I’ve started to look into new features of ExtJS 5 and today I have picked Chained Stores that solve, or they should, the problem of multiple views using the same store. If you list a store in stores:[] array of application or controller, Ext instantiates the store and registers it to Store Manager. Configuration option store in view usually points to this one global instance of the store. It’s fine because it saves the server round trips but the main drawback is that if you sort or filter the store in one view (clicking a column in a grid) then the global instance gets sorted so are all view using it. That is not desirable. Chained Stores, new in Ext 5, alleviate this problem, however, we must understand how they work, what they are good for and when they cannot be used.

What is a Chained Store

Chained Store is a special kind of store that cannot access the data source directly but via its source store. It maintains its own data snapshots, filters and sorters linking records to its source.

Hence, a record in all chained stores is the same thing as the same record in the source store. Only filters and sorters are unlinked. chained-store

What we should know about Chained Stores?

  1. they have their own links to source store data
  2. if data in the real store change (create, read, update, delete), chained store data also change
  3. updating record in a chained store actually updates the record in the source store, consequently in all chained stores with the same source
  4. if an update causes the main store re-filtering, re-sorting, all stores are affected
  5. sorting and filtering of the main store does not trigger filtering and sorting of chained stores
  6. filtering and sorting of chained stores is independent from each other and from the source store
  7. chained stores do not have load method
  8. they cannot talk to servers directly, they don’t have their own proxies and readers
  9. they cannot be used together with paging
  10. they can be used with buffered renderer plugin
That is what I have found so far. If you have any other interesting findings, do not hesitate to post a comment below this post.

Playground

You can play with the chained stores below. Both grid and data view link to the real store with store id ActorStore, so you can get a hold of it from the command-line by calling Ext.getStore('ActorStore').
Download the example code:
 
  • Author
  • Recent Posts
Follow me:
saki
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:
Latest posts by saki (see all)
  • Ext, Angular, React, and Vue - June 27, 2019
  • The Site Resurgence - February 11, 2018
  • Configuring ViewModel Hierarchy - June 19, 2015

Filed Under: Architecture, ExtJS, Know-how, Theory

Comments

  1. Phaiboon Thussaniyom says

    June 26, 2014 at 10:57 am

    Thanks for your nice article.

    Log in to Reply
    • fsakalos says

      June 26, 2014 at 11:33 am

      Thank you for feedback, we are always happy to provide valuable data to our visitors.

      —
      Filip Sakalos

      Learn from Saki
      Support

      Log in to Reply
  2. Peter Kellner says

    July 11, 2014 at 6:39 pm

    I notice that there is no code shown here (I like that code shown, very helpful).

    Also, shouldn’t source:’ActorStore’ be source:'{ActorStore}’?

    Log in to Reply
    • Saki says

      July 14, 2014 at 2:17 pm

      Peter, in this case the configuration is correct so source should really be ‘ActorStore’. The reason for that is that we are not binding but only configuring the reference to the source store. ActorStore is referenced normally in Application::stores[‘ActorStore’] hence the name.

      As a subscriber, you can download the complete code, cannot you? If not, let us know, we fix it.

      Log in to Reply
      • Rali Gayd says

        July 16, 2014 at 5:26 pm

        Hello, I am a subscriber but i am unable to look at the code.

        Log in to Reply
        • Filip Sakalos says

          July 16, 2014 at 7:04 pm

          Hello Rali,

          you don’t see the code at all or you see it only as an image (unable to copy&paste)?
          On all examples or only a specific one?

          Log in to Reply
      • Peter Kellner says

        July 16, 2014 at 9:18 pm

        Got it. thanks Saki.

        Log in to Reply
  3. Siva Sankar says

    September 13, 2014 at 11:08 am

    Hi I am unable to look the code for chained stores

    Log in to Reply
    • Filip Sakáloš says

      September 15, 2014 at 5:27 pm

      Hello Siva,

      as a free member, you can purchase the code for $9.90. If you want to download the code for free, you need monthly/annual subscription.

      Log in to Reply
  4. Robert Brierley says

    October 28, 2014 at 4:43 pm

    Saki,
    Another great article, just used a chained store to create an associations between (2) data tables. Very nice way to show a grid or data view of associated tables.

    Log in to Reply
    • Saki says

      November 5, 2014 at 1:18 pm

      Congrats Robert!

      Log in to Reply
  5. Dave King says

    May 20, 2015 at 11:53 am

    Hi Saki,
    I do not see the example code, just the live example.
    Thanks,
    Dave

    Log in to Reply
    • Saki says

      May 20, 2015 at 12:02 pm

      Hello Dave,

      this is not a bona fide example, it is a playground to test the filtering behavior of normal and chained stores so that you can make a qualified decision which one to use.

      BTW, the code is nothing special, the grid uses normal store and the data view chained store.

      Best,
      Saki

      Log in to Reply
      • Dave King says

        May 20, 2015 at 3:56 pm

        Got you.. so the example for ExtJS5 complex data binding is essentially the same thing?

        Keep up the good work…. 🙂 it’s helped my immensely !

        Log in to Reply
  6. Dave King says

    May 20, 2015 at 4:00 pm

    The reason I looked at this is I have a scenario where I have a tree where the nodes relate to grids, updating the grid should update the tree and vice versa. There is multiple grids/views linked to the tree.
    What is the best method for refreshing the views ? I looked at events and store listeners but it’s starting to get messy and so I’m thinking it’s not the right approach.

    I was thinking that my tree could be the main store with the various grids as chained stores?

    As always your advice is appreciated.

    Dave

    Log in to Reply
    • Saki says

      May 20, 2015 at 4:52 pm

      The problem here is that tree uses TreeStore while grid uses normal store. You should probably go for a different approach.

      Log in to Reply
  7. Roger Blum says

    June 17, 2015 at 7:19 pm

    The filtering doesn’t seem to behave consistently. If you filter for ‘Hall’ on the Main Store you get 3 records. If you apply the same filter to the Chained Stores you only get 1. How come?
    Are the filters set up in a different way?

    Roger

    Log in to Reply
  8. Rabia Mahmood says

    May 31, 2016 at 12:36 pm

    Thank you, very good explanation especially with diagrams and clarifying some things I wouldn’t have thought of e.g. chained stores don’t have their own load method.

    Rabia

    Log in to Reply

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in