Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Exclamation Bug in Ext.ux.GroupTabPanel?

    Bug in Ext.ux.GroupTabPanel?


    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:

    Code:
    me.mon(me.down('treepanel').getSelectionModel(), 'select', me.onNodeSelect, me);
    Change that line to the following:

    Code:
    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.

    Stewart McGuire
    Ext JS 2.x, 3.x, 4.x - Advanced User / Sencha Architect 3 - User

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


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

    Code:
    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2