Utterly Baffled: Event Sequence for Tab Panel

[jearlu]

I am using Sench Touch version 2.0.0. My app is utilizing a tab panel for navigation. In one of the tabs, I am using an index bar to manage a long list of users (1500). I was thinking and hoping that after the initial render that switching back to the users tab would be relatively quick and painless as it is essentially simply hiding one tab and showing another. This is anything but quick (up to 6-8 seconds on my iPhone 4). I tried a number of things to optimize the amount of time required to display the users tab, all with limited success. I eventually came to accept this as a limitation of the mobile device itself (this is extremely fast and a non-issue in Chrome and Safari running on my laptop). Still though, I needed a way to communicate to the end-user that the app was actually processing their request. I decided to add a load mask to the content area of the tab panel on the tap event of the users tab button and remove the mask once the tab panel had been updated with the users list.


Specifics:
Ext.tab.Panel consisting 5 tabs (cards) that extend from Ext.NavigationView. The users tab (card) consists of an Ext.List using an index bar to manage navigation through the list.


Problem:
To handle the load mask when selecting the users tab, I drilled down to the users tab button (Ext.tab.Tab) and added a tap event handler that sets the mask. I attempted to remove the mask using the painted event on the users list. I also tried removing it using the show, activate, and painted events on the users tab (card) and the activeitemchange event on the tab panel. Problem is that all of these events fire before the tap event on the tab button. As a long time ExtJS user, I find this utterly baffling and completely unacceptable. The tab button's tap event fires long after the user's physical tap (up to 6-8 seconds on my iPhone 4), leaving no meaningful way to apply the load mask.

[Jamie Avins]

Moving this to discussion. 1500 items in a list is not something that is going to work well on mobile devices. That's really going to have get get to something more reasonable until we have proper dynamic loading lists in 2.1.

[mitchellsimoens]

This is confusing. So in a Ext.tab.Panel you have the Ext.tab.Panel, the Ext.tab.Bar that holds the different Ext.tab.Tab. To switch tabs, you tap on the Ext.tab.Tab instance. Ext.tab.Bar listens to when Ext.tab.Tab is tapped on and then does the setActiveTab. Ext.tab.Panel then listens to the activetabchange event from Ext.tab.Bar to then switch the actual item.

So the whole process happens after the tap event from Ext.tab.Tab.

[jearlu]

I'm ok with it taking a long time to load as long as I am able to give the user feedback that their request is being processed. I get that 1500 records is less than ideal. My issue is with the timely firing of the tap event, not the time required to display the data.

On a side note, even when tested with 2300+ records, once the list has been displayed, the index bar is very responsive.

[jearlu]

Mitchell,

I am adding the initialize method that is defined for the tab panel. This should clear things up.



initialize: function() {
var usersButton = this.getTabBar().getItems().items[3];
usersButton.on({tap: function() {
Ext.getCmp('main').mask({ // main is the id of the tab panel
xtype: 'loadmask',
message: 'Loading...'
});
}});

this.callParent();
}