Activate a Sencha Touch tab from a custom JS function

Question

I have a Cordova project on iOS and I want to switch to a specific tab following an event 'X'.

Assuming event 'X' just occurred, my objective C makes the following call to run a JS function openNotificationTab() like so:

NSString *goToNotification = [NSString stringWithFormat:@"openNotificationTab()"];
[viewController.webView stringByEvaluatingJavaScriptFromString:goToNotification];

The openNotificationTab() function resides in filename.js and I verified it is within scope and accessible by testing with an alert() .

Now the definition for my js function is as follows:

function openNotificationTab(){
    Ext.Viewport.setActiveItem({
    xtype: 'notificationtabview'
    });
}

The problem is that this function opens the correct panel, but overlays it on top of everything else. So the entire tab menu is no longer visibile and thus inaccessible.

I also tried

"Ext.Viewport.setActiveItem(1)" and  "Ext.Viewport.setActiveItem('notificationtabview')"

but neither does anything. Thanks for your help.

Answer 1

You need to call setActiveItem on your TabPanel, with either the index of the tab that you want to show, or the item you want to show.

You can check the class of your viewport with:

Ext.Viewport.$className

You will probably learn here that the viewport is not your tab panel.

var tabPanel = Ext.Viewport.down("tabpanel");
tabPanel.setActiveItem(tabPanel.down("notificationtabview"))

or

var tabPanel = Ext.Viewport.down("tabpanel");
tabPanel.setActiveItem(1)

both works.