Bug in Ext.ux.GroupTabPanel?

[smcguire36]

I think I found a bug in the Sencha provided user extension: GroupTabPanel.

If you put a listener on the beforegroupchange event and return false in order to cancel the group tab change, the group change gets cancelled but if you then try to click the new group a second time the group tab change event doesn't fire again. You need to select a different group first.

For example:

1. You are currently viewing group 1.
2. You click on group 2.
3. The beforegroupchange event fires and the custom code returns false to cancel the change (as documented in the API documentation).
4. You try to click on group 2 again.
5. Nothing happens (I verified that the tree node select event is not firing a second time).
6. You click on group 3.
7. Focus moves to group 3.
8. You click on group 2.
9. Focus now moves to group 2.

I tracked down the issue and have a fix for it:

On the last line of the initComponent for the GroupTabPanel class there is the following line:

me.mon(me.down('treepanel').getSelectionModel(), 'select', me.onNodeSelect, me);

Change that line to the following:

me.mon(me.down('treepanel').getSelectionModel(), 'beforeselect', me.onNodeSelect, me);

Basically, by attaching the onNodeSelect() method to the select event, the tree node selection has already occurred, so returning false from a beforegroupchange event will not stop the underlying tree control from changing the selected node and the tree will not fire the select event on the currently active node.

By changing the event to beforeselect instead of select, if false is returned from the onNodeSelect() method then the underlying tree node selection will be cancelled as well as the group selection within the GroupTabPanel.

After making this simple change, the selection process works as documented after a cancelled group tab change.

[scottmartin]

Thank you for the report. Moving to bugs forum for review.

Scott.

[evant]

I can't reproduce this. I changed the code in the example slightly:

Ext.onReady(function () {
    Ext.tip.QuickTipManager.init();

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        type: 'gear',
        handler: function () {
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    }, {
        type: 'close',
        handler: function (e, target, panel) {
            panel.ownerCt.remove(panel, true);
        }
    }];

    Ext.create('Ext.Viewport', {
        layout: 'fit',
        items: [{
            xtype: 'grouptabpanel',
            listeners: {
                beforegroupchange: function(tabs, p){
                    if (p.tabTip == 'Configuration tabtip') {
                        return false;
                    }
                }    
            },
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    iconCls: 'x-icon-tickets',
                    tabTip: 'Tickets tabtip',
                    //border: false,
                    xtype: 'gridportlet',
                    margin: '10',
                    height: null
                }, {
                    xtype: 'portalpanel',
                    title: 'Dashboard',
                    tabTip: 'Dashboard tabtip',
                    border: false,
                    items: [{
                        flex: 1,
                        items: [{
                            title: 'Portlet 1',
                            html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>'
                        }, {

                            title: 'Stock Portlet',
                            items: {
                                xtype: 'chartportlet'
                            }
                        }, {
                            title: 'Portlet 2',
                            html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>'
                        }]
                    }]
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    border: false,
                    layout: 'fit',
                    items: [{
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [{
                            title: 'Nested Tabs',
                            html: Ext.example.shortBogusMarkup
                        }]
                    }]
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    border: false,
                    items: {
                        xtype: 'form',
                        // since we are not using the default 'panel' xtype, we must specify it
                        id: 'form-panel',
                        labelWidth: 75,
                        title: 'Form Layout',
                        bodyStyle: 'padding:15px',
                        labelPad: 20,
                        defaults: {
                            width: 230,
                            labelSeparator: '',
                            msgTarget: 'side'
                        },
                        defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'First Name',
                            name: 'first',
                            allowBlank: false
                        }, {
                            fieldLabel: 'Last Name',
                            name: 'last'
                        }, {
                            fieldLabel: 'Company',
                            name: 'company'
                        }, {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype: 'email'
                        }],
                        buttons: [{
                            text: 'Save'
                        }, {
                            text: 'Cancel'
                        }]
                    }
                }]
            }, {
                expanded: false,
                items: {
                    title: 'Single item in third',
                    bodyPadding: 10,
                    html: '<h1>The third tab group only has a single entry.<br>This is to test the tab being tagged with both "first" and "last" classes to ensure rounded corners are applied top and bottom</h1>',
                    border: false
                }
            }]
        }]
    });
});

See the attached screen capture: http://screencast.com/t/5cNWJiVp