1. #1
    Sencha User jlyman's Avatar
    Join Date
    Nov 2010
    Posts
    28
    Answers
    4
    Vote Rating
    0
    jlyman is on a distinguished road

      0  

    Default Answered: Delaying view render until data has loaded

    Answered: Delaying view render until data has loaded


    Is there a way by listening to the right events that you can get a store to reload and modify a view before it has been rendered to the screen, but after it has been added to the viewport? Currently, I have the following which will give me fresh data, but because the view as already been rendered, its height is not correct and will not scroll:

    PHP Code:
    show: function () {
        
    console.log('Checklists view activated.');
        
    Ext.getStore('Checklists').load(function(recordsoperationsuccess) {
           
    console.log('Reloaded checklist items...');
           
    this.renderChecklists(); // This line programmatically adds new elements to the view
        
    }, this);

    Ideally, I'd like to try and get things to work as follows, but there may be a better way to do this, which I'm all open to. (Note that I'm not using a DataView bound to a store to do any of this.)
    1. Checklist view gets requested to be shown via a Viewport.add()
    2. Either the checklist controller or the checklist view catches that it is about to be shown
    3. The store for checklists gets reloaded with fresh data
    4. New elements are created programmatically for items in the checklists store
    5. These new elements are added to the view
    6. The view is shown to the user.
    What's the best/right way to go about something like this? Thanks in advance all.

  2. So I suppose that I was just thinking about how to execute it incorrectly. From what the indomitable Mitchell has said, I reworked it so that my request to open a view fired an application event instead, which was handled by an event handler in the controller that reloaded the store and then opened the view once that was complete (via the callback on store.load()).

    It seems that there isn't a way to do this as I was thinking earlier. Thanks Mitchell.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Everything is async so you can listen to the load event on the store to add your item(s) to the Viewport.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User jlyman's Avatar
    Join Date
    Nov 2010
    Posts
    28
    Answers
    4
    Vote Rating
    0
    jlyman is on a distinguished road

      0  

    Default


    Isn't that similar to what's being done in the code sample above? The callback function on the store.load() calls this.renderChecklists(), which does do it's job and renders out the components. However, because it's async, the rendering process for the view is finished before the new components are created and added to the form.

    Is there a way to force a repaint of a view so that it gets the right height and is scrollable if the new content is lengthier than the original?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That callback should fire after the store has loaded so then if renderChecklists function adds the components to the Viewport then the rendering should happen after the store loads.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User jlyman's Avatar
    Join Date
    Nov 2010
    Posts
    28
    Answers
    4
    Vote Rating
    0
    jlyman is on a distinguished road

      0  

    Default


    So I suppose that I was just thinking about how to execute it incorrectly. From what the indomitable Mitchell has said, I reworked it so that my request to open a view fired an application event instead, which was handled by an event handler in the controller that reloaded the store and then opened the view once that was complete (via the callback on store.load()).

    It seems that there isn't a way to do this as I was thinking earlier. Thanks Mitchell.

Thread Participants: 1