1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default Tabpanel and Navigation view events slow down app performance

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    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 @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.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    instead of using on() you can use onAfter()... if you are using listeners : {} then you can add order : "after' to it
    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.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    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 @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.

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      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?