PR3 - Ext.tab.Panel (Returning false activeitemchange)

**btoc007** · 19 Dec 2011 9:03 AM

When returning false on activeitemchange on an Ext.tab.Panel the panel does not switch but the button on the tabbar is highlighted. This should not occur.

**mitchellsimoens** · 19 Dec 2011 9:08 AM

Thanks for the report.

**joaquinmag** · 9 Feb 2012 11:20 AM

Hi,

I'm having the same issue here.

Where can I found the code to fix this?

I don't have time to make a migration right now...

Thanks,

Joaquín.

**btoc007** · 27 Mar 2012 7:15 AM

Fix obviously did not work or regressed in the 2.0 release

**Jamie Avins** · 27 Mar 2012 7:37 AM

Reopening this issue. Can we get a test case so we can be sure it resolved your specific problem.

**btoc007** · 27 Mar 2012 7:42 AM

Code:

Ext.define("SWENGLE.view.TabPanelTest", {
    extend: 'Ext.Panel',
    xtype : 'xswengle-view-tabpaneltest',
    config: {
        layout: 'fit',
        cls: 'swengle-view-tabpaneltest',
    },
    initialize: function() {
        this.callParent(arguments);


        this.titleBar = Ext.create('Ext.TitleBar', {
            docked: 'top',
            title: 'Test',
        });
        
        this.tabPanel = Ext.create('Ext.tab.Panel', {
            tabBar: {
                docked: 'bottom',
                ui: 'light'
            },
            listeners: {
                activeitemchange: function(tabPanel, to, from, opts) {
                    return false;
                },
                order: 'before'
            },
            layout: {
                animation: {
                    duration:0
                }
            },
            items: [{
                title: 'Tab 1',
                html: 'Tab 1',
                iconCls: 'user'
            },
            {
                title: 'Tab 2',
                html: 'Tab 2',
                iconCls: 'search'
            }]
        });
        this.add([this.titleBar, this.tabPanel]);
    }
});

Tapping Tab2 will result in the button being highlighted in the tab bar.

**Jamie Avins** · 27 Mar 2012 8:25 AM

Perfect, thanks.

**Jamie Avins** · 27 Mar 2012 9:34 AM

The following override should resolve the issue:

Code:

Ext.define('Ext.tabpanel.override', {
    override: 'Ext.tab.Panel',
    doTabChange: function(tabBar, newTab) {
        var oldActiveItem = this.getActiveItem(),
            newActiveItem;
        this.setActiveItem(tabBar.indexOf(newTab));
        newActiveItem = this.getActiveItem();
        return oldActiveItem !== newActiveItem;
    }
});

If I may also make a suggestion. Not sure if it was just for a test case, but we don't recommend using initialize in the manner presented. The use of initialize should almost always be to add additional listeners which you don't want to override in a configuration. Otherwise you should be using configs as much as possible. The test case would better be represented as follows:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>1297</title>
    <link rel="stylesheet" href="../../resources/css/sencha-touch.css"/>
    <script src="../../sencha-touch.js"></script>
    <script>
        Ext.application({
            launch:function () {
                Ext.define("TabPanelTest", {
                    extend:'Ext.Panel',
                    xtype:'tabtest',
                    config:{
                        layout:'fit',
                        cls:'swengle-view-tabpaneltest',
                        items:[
                            {
                                xtype:'titlebar',
                                docked:'top',
                                title:'Test'
                            },
                            {
                                xtype:'tabpanel',
                                tabBar:{
                                    docked:'bottom',
                                    ui:'light'
                                },
                                listeners:{
                                    activeitemchange:function (tabPanel, to, from, opts) {
                                        return false;
                                    },
                                    order:'before'
                                },
                                layout:{
                                    animation:{
                                        duration:0
                                    }
                                },
                                items:[
                                    {
                                        title:'Tab 1',
                                        html:'Tab 1',
                                        iconCls:'user'
                                    },
                                    {
                                        title:'Tab 2',
                                        html:'Tab 2',
                                        iconCls:'search'
                                    }
                                ]
                            }
                        ]
                    }
                });
                Ext.Viewport.add({ xtype:'tabtest'});
            }
        });
    </script>
</head>
<body></body>
</html>

**btoc007** · 27 Mar 2012 10:08 AM

While I understand why using config, I would ask this question to see what you would recommend. Say I have a panel whose html is set differently based a some global variable. A good example is say you want to display some html that is different based on the fact that a user is signed in. How would you accomplish this using the config?

in pseudo:

if (user_is_logged_in) {
setHtml('Welcome user');
} else {
setHtml('Come on now, let me know who you are');
}

**btoc007** · 27 Mar 2012 10:31 AM

Cannot go back to the first tab

PR3 - Ext.tab.Panel (Returning false activeitemchange)

Thread Tools

Search Thread

Display

PR3 - Ext.tab.Panel (Returning false activeitemchange)

PR3 - Ext.tab.Panel (Returning false activeitemchange)

This is still broken

This is still broken

Sample failing component

Sample failing component

Conditional in config

Conditional in config

Fix does not quite work

Fix does not quite work