View Full Version : Sequencing events with ajax

17 Mar 2011, 11:29 AM
I'm pretty new to Ext JS and have been struggling with handling things in the proper order with regards to loading data from the server via AJAX. What I am struggling with is this:

-> For some component configurations I would like to use data from the server
-> I am using AJAX to retrieve the initial set of data, and in one server call - I don't want each component's store calling the server separately.
-> I cannot be certain that the AJAX data has been returned prior to configuring said components without introducing a dependency upon an event listener (i.e. load from say a JsonStore).

Currently when the user clicks upon an action item (which ultimately loads a new tab into a tab panel) a factory function creates my tab and all internal components (grids, trees, stores, etc). Then in some cases I must reconfigure items once the user takes certain action because some of the grids are very dynamic although the ultimate layout is the same (lets say they can load data from different tables).

What I think would resolve my problems is to change the sequencing events so that nothing gets created until after the initial load of a store is complete. The sequence would be as follows:

-> User selects action
-> Factory function is called, along with a completion callback, that loads the initial store, along with related data for the various components of the tab.
-> Factory function returns and nothing is happening except maybe I've set the loading mask so the user isn't wondering what's happing.
-> Store load of data is completed, callback is made, which then creates all of the required items with the data each requires.
-> Control is returned to the user.

What I guess I really want to know is this a reasonable way of approaching this problem? I've looked at the ability of the JsonStore to reconfigure itself based upon the metadata it receives and that helps, and I'm currently using reconfigure on my grid, but am not completely happy with the results.

I'm trying to avoid bizarre approaches due to ignorance of the system.

Thanks in advance

17 Mar 2011, 4:58 PM
Not really too sure what you are asking here. Is it that you want to combine requests into a single ajax call and then split the response and populate each respective store/component?

17 Mar 2011, 5:22 PM
Yep, with the addition that some of those stores will be used to create components in a panel. The stores have to be loaded prior to my call to create the panel, but with ajax there is no guarantee of sequencing.

17 Mar 2011, 5:45 PM
I made the relevant changes and it does work fine, but I don't know if I'm a fan of doing it this way as a default pattern. I could wrap the relevant functionality in a library (say some asynchronousAddToPanel function off an extension of TabPanel) that takes functions to create a store and panel and handles the proper sequencing, but am not certain I'm going to need it.

My issue with ExtJS stores and components is by default each data-bound component wants its own store and each store seems to prefer calling the server which is extremely chatty and undesirable in many situations (think WANs). Certainly stores can accept a block of data and parse them, but ultimately that data has to come from a server and if the stores are dependent upon an initial load then that load must complete prior to initializing the subordinate stores. Hence handling the load event of the initial store. I just wonder if I'm missing something obvious due to my unfamiliarity with the framework specifically (and javascript in general).