I found a solution that seems to work. I added listeners for the resize and orientationchange events to the TabPanel where I call doComponentLayout for all Tabs.
Code:
listeners: {
resize: function (cmp) {
cmp.items.each(function (item) {
item.doComponentLayout();
});
},
orientationchange: function (cmp) {
cmp.items.each(function (item) {
item.doComponentLayout();
});
}
}
Interestingly only the orientationchange listener is called even in Chrome, i.e. the resize listener may be unnecessary.
I can confirm that there is a bug with adding/removing toolbars, I had it in my app, too. Fortunately (at least for me) I could solve it by wrapping the whole thing in another way:
Before, my app consist of a TabPanel with a tabBar docked to the bottom. Some of the cards were lists and some of the lists were adding/removing toolbars when the cardswitch was done. If you do a resize and the switch to one of the lists with toolbars, the list disappeared and it seemed that the bottom tabBar "jumped" to the top.
I solved it by wrapping the lists in panels and called the addDocked/removeDocked methods on the panel not on the TabPanel.
But I think this is a Sencha Touch bug and I hope this will be fixed.