Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Store asynchronous loading and Form loading

  1. #1

    Question Store asynchronous loading and Form loading

    hi folks,

    ext js store loading is asynchronous which is nice when performance is critical. however, lack of option to turn this behavior off is quite annoying when dealing with form.

    my use case is, an editing form of entity A which contains couple combo boxes use different stores loading reference data from database. when user navigate to this page with an entity id parameter, these combo boxes' stores should finish loading before the form loading entity data by id. Otherwise, the data of these combo boxes won't be populated correctly (combo box populating will fail due to no data in store to look up).

    In order to achieve this goal, I turned off autoLoad of all stores, chained these combo boxes via "load" event handler, manually load the combo box A, which call combo box B's load method via "load" event handler, similar combo box C, D, etc. the last combo box Z's "load" event handler will call the form's load method to load the entity data.

    my question is, is there a better solution for this use case (ver 3.2)? the load event chaining is so easy to mess up and hard to maintain.

    p.s. anyone know why ext js store's loading is asynchronous exclusively?

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Location
    USA
    Posts
    111

    Default

    you can write function,which will check form elements by XType for example and load data to your combos stores.

  3. #3
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Not 100% sure I understand the scenario, so sorry if I'm off the mark.
    It sounds like you have a user coming in with an ID of a record that the form will load with. But, you want the combo boxes in that form to load prior to the form loading whatever record it's received from the user?

    What if you masked the form and had a taskRunner running every x seconds to see if each combo box had a view (which I believe is not created until the combo's store has been loaded the first time). If there is no combo view on each combo then do nothing. If there is a view on each combo field then load then load the form, unmask the form, and stop the taskRunner.

    That would only work if the combo's store hadn't yet been loaded and no view created. Otherwise maybe have it check to see if the value of each combo was something other than its originalValue property?

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    57

    Default

    This StoreDependencyController might help: http://www.sencha.com/forum/showthread.php?91002

    Store loads are asynchronous so that the browser does not freeze while the request is taking place.

  5. #5
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    459

    Default

    My advice would be to architect the application in such a way that all the data required for display of the form - the values in the form fields as well as the data for the combo stores - could be returned on the same Ajax request. Make the combo mode 'local' and then just use the loadData method on their stores. This could be more performant anyway since you're making one url request instead of three.

    Ajax requests might have to be async in Ext-JS but loading the data doesn't have to be.

  6. #6

    Default

    did you reply to a wrong thread?

    Quote Originally Posted by aramaki View Post
    you can write function,which will check form elements by XType for example and load data to your combos stores.

  7. #7

    Default

    put it simple, combo box's store has to be loaded before loading value via form.load method. otherwise, set value on a combo box without pre-loaded store will fail.

    thanks for reply anyway

    Quote Originally Posted by slemmon View Post
    Not 100% sure I understand the scenario, so sorry if I'm off the mark.
    It sounds like you have a user coming in with an ID of a record that the form will load with. But, you want the combo boxes in that form to load prior to the form loading whatever record it's received from the user?

    What if you masked the form and had a taskRunner running every x seconds to see if each combo box had a view (which I believe is not created until the combo's store has been loaded the first time). If there is no combo view on each combo then do nothing. If there is a view on each combo field then load then load the form, unmask the form, and stop the taskRunner.

    That would only work if the combo's store hadn't yet been loaded and no view created. Otherwise maybe have it check to see if the value of each combo was something other than its originalValue property?

  8. #8

    Default

    hmm, interesting. I am looking for a dependency controller which can handle one component depending on multiple stores. maybe i can implement a similar one.

    I understand the benefit of asynchronous, just hope extjs could make it default behavior but not exclusive.

    Quote Originally Posted by zachext View Post
    This StoreDependencyController might help: http://www.sencha.com/forum/showthread.php?91002

    Store loads are asynchronous so that the browser does not freeze while the request is taking place.

  9. #9

    Default

    thanks for advise. as you said, still have to deal with async problem(javascript code) if choose this approach. and as a java developer, i managed to not manually write one single javascript code but let spring + helper class (java) to take care of it. really don't want to break this pure java code + extjs standard framework + no customized javascript mode.


    so far looks like this is a limitation of current extjs. really wish future version could provide loading dependency control.

    Quote Originally Posted by firefoxSafari View Post
    My advice would be to architect the application in such a way that all the data required for display of the form - the values in the form fields as well as the data for the combo stores - could be returned on the same Ajax request. Make the combo mode 'local' and then just use the loadData method on their stores. This could be more performant anyway since you're making one url request instead of three.

    Ajax requests might have to be async in Ext-JS but loading the data doesn't have to be.

  10. #10
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    459

    Default

    Still trying to understand this...

    So what exactly is the problem? Is it that you have some valueNotFoundText on the combo boxes and then since the stores are not loaded before the form values are this text is still there? If you look at the Ext source code for ComboBox.setValue, it is apparent that the value still gets stored on the combo - it's just the display text that is messed up.

    If this is indeed your problem, one possible solution would be to simply call set value on the combo box with it's current value when the store is loaded. It's kind of a hack and there might be a delay in removing the not found text on slower connections, but it would probably work and it could be sander than trying to manually chain the loads. For example,

    Code:
    function appInit() { var myTextField = new Ext.form.TextField({ fieldLabel: 'First Name', name: 'first_name' });
    var myCombo = new Ext.form.ComboBox({ fieldLabel: 'State', name: 'state', forceSelection: true, mode: 'local', triggerAction: 'all', valueNotFoundText: 'Not found...', store: ['WI', 'AZ'] });
    var form = new Ext.form.FormPanel({ title: 'My Form', height: 300, width: 500, frame: true, items: [ myTextField, myCombo ] });
    form.render(Ext.getBody());
    form.getForm().setValues({ first_name: 'Tassadar', state: 'IA' });
    //Hack to fix incorrect valueNotFoundText display... myCombo.store.on('load', function() { //If this is commented out, then combo text will be 'Not found...' myCombo.setValue(myCombo.getValue()); });
    myCombo.store.loadData(['WI', 'AZ', 'IA']); }
    Ext.onReady(appInit);

Page 1 of 2 12 LastLast

Similar Threads

  1. loading form data from a RESTful store
    By evejones in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Oct 2010, 12:04 AM
  2. Asynchronous loading of remote JS files?
    By Arcomat in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 10 Oct 2008, 10:29 AM
  3. [SOLVED]Problems loading JSON store into Form
    By josh803316 in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 13 Jun 2008, 4:44 PM
  4. Access to the SVN and loading a treepanel form a store
    By mrollins in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2008, 1:05 PM
  5. Replies: 4
    Last Post: 14 Nov 2007, 12:38 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •