GroupTabPanel ux bug - Missing lower rounded corner

[smcguire36]

Ext version tested:

• Ext 4.1.0

Browser versions tested against:

• Firefox
• IE8
• Chrome
• Not browser dependent

Description:

• If you have a group tab panel with a tab group that has only a single tab in it, the active group only gets the top rounded corner and not the bottom.

Steps to reproduce the problem:

• Change the GroupTabPanel example so that the second group only has a single tab in it.
• Run the example: examples/grouptabs/grouptabs.html

The result that was expected:

• Click on the second tab group header.
• Active group should have rounded corners on the top and bottom.

The result that occurs instead:

• The bottom rounded corner is missing.

Test Case:

Just remove the second tab from the second group in the examples/grouptabs/grouptabs.js example file.

HELPFUL INFORMATION


Debugging already done:

• I tracked down the problem to the renderer method on the treecolumn item @ line 75 in the examples/ux/GroupTabPanel.js file. The following code starting @ line 78 adds the class names to the tree item when the item is the first tab in the group. The problem is that when there is only a single tab in the group that tab is considered expanded always so the second if block below never evaluates to true when there is only a single tab in the group.

if (node.parentNode && node.parentNode.parentNode === null) {
    cls += ' x-grouptab-first';
    if (node.previousSibling) {
        cls += ' x-grouptab-prev';
    }
    if (!node.get('expanded')) {
        cls += ' x-grouptab-last';
    }
} else ...

Possible fix:

• The following code illustrates a fix for this problem. I added an additional check to see if the firstChild is null which would indicate a group with only a single tab, then it adds the x-grouptab-last class to the div.

if (node.parentNode && node.parentNode.parentNode === null) {
    cls += ' x-grouptab-first';
    if (node.previousSibling) {
        cls += ' x-grouptab-prev';
    }
    if (!node.get('expanded')) {
        cls += ' x-grouptab-last';
    }
    else if (node.firstChild === null) {
        cls += ' x-grouptab-last';
    }
} else ...

Additional CSS used:

• ext-all.css
• GroupTabPanel.css

Operating System:

• Windows 7

[scottmartin]

Can you provide a screen to make sure we are looking at the same thing?

Regards,
Scott.

[smcguire36]

I commented out the "Email Templates" tab from the group tabs example and this is what you get if you click on the "Configuration" tab.

GroupTabsBeforeFix.jpg

NOTE: In the example you will need to modify the all-classes.js file starting at line 86953 instead of in GroupTabPanel.js line 78. My inserted code would go right after line 86960. I didn't realize that you had the example setup now to use a custom js file for loading the Ext classes.

Here is the same page after applying my fix:

GroupTabsAFterFix.jpg