Results 1 to 7 of 7

Thread: Tabpanel and Navigation view events slow down app performance

  1. #1
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    31
    Vote Rating
    5
      0  

    Default Tabpanel and Navigation view events slow down app performance

    Has anyone else run into any issues regarding your touch app's speed/performance because of tabpanel and nav view events? I tend to notice that if I perform logic following a tabpanel's activeitemchange event or a navigation view's activeitemchange, back, pop, or push events my app's performance decreases dramatically. Once I changed my logic into individual component activate events the app will perform much better. I know the number one reason an app will slow down will generally be DOM bloat but I feel I do a pretty good job of keeping my DOM light.

    Let me know if you've experience the same thing or if you think I'm just going about my application logic the wrong way. I've also noticed that removing nav view and tabpanel animations helps a little bit but I think it's nicer with the animations there.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    I personally haven't seen issues with it. Are you making sure you are doing the logic with order of after so it's being done after the animation is done?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  3. #3
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    31
    Vote Rating
    5
      0  

    Default

    What do you mean by 'doing the logic with order of after'? Is there a way I can wait until the animation takes place and then perform my logic?

    I should also note that I'm using touch 2.0.1

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    instead of using on() you can use onAfter()... if you are using listeners : {} then you can add order : "after' to it
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  5. #5
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    31
    Vote Rating
    5
      0  

    Default

    Oh I see what you mean. I'm using the controller though so I have something like the following:

    Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',


    config: {
    refs: {
    myTabPanel: '#myTabPanel'
    },


    control: {
    'myTabPanel': {
    activeitemchange: 'tabActiveChange'
    }
    }
    },

    tabActiveChange: function(tabpanel, value, oldValue, eOpts) {
    // peform logic here
    }

    });

    Are you saying that I can use an 'afteractiveitemchange' instead of the 'activeitemchange'?

  6. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    There is no afteractiveitemchange event but that activeitemchange will fire before the animation. What I usually do is listen for the activeitemchange with onAfter method in the view and fire a custom event, like fire the afteractiveitemchange event passing the same arguments.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  7. #7
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    31
    Vote Rating
    5
      0  

    Default

    Ok I understand thanks.

    Doesn't this solution seem kind of out of the way though? Is there a reason that after/before events weren't created for the Sencha Touch components but they were for the ExtJs components?

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
  •