Tabpanel and Navigation view events slow down app performance

[dgotty]

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.

[mitchellsimoens]

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?

[dgotty]

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

[mitchellsimoens]

instead of using on() you can use onAfter()... if you are using listeners : {} then you can add order : "after' to it

[dgotty]

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'?

[mitchellsimoens]

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.

[dgotty]

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?