What's New?

UI TabPanel

  1. #1
    Apr 13, 2016, 12:18 PM

    UI TabPanel

    On UI > TabPanel example (https://examples4.ext.net/#/Miscellaneous/UI/TabPanel/), TabBar layout is changed during TabPanel's TabChange event

    var tabchange = function (tabPanel, newCard, oldCard) {
    if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
        tabPanel.getTabBar().removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
    }

    if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
        tabPanel.getTabBar().addCls("x-tab-bar-" + newCard.tabConfig.ui);
    }
};
    Click image for larger version.  Name: tp004.png  Views: 49  Size: 3.5 KB  ID: 24560

    It works on Gray, Neptune and NeptuneTouch but fails on Crisp and CrispTouch. It was not possible to reproduce the issue on Aria and on Triton due to the following: http://forums.ext.net/showthread.php?60832.

    Note: The issue presented above is also present on version 3.x, but only on themes Crisp and CrispTouch and Aria since Triton is not present on that version.

    Thanks in advance.
    Last edited by Daniil; Apr 20, 2016 at 1:41 PM.
  2. #2
    Apr 14, 2016, 2:30 AM
    Hello @Raphael!

    That's a known issue since the update and we didn't fix it -- yet!

    We only had issue #1245 logged so far but there were no forum issues pointing to it, so that's probably why you didn't find the issue were known.

    Now we've bound this thread to the issue and we'll provide feedback here when we fix this.

    Thanks for the report!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Apr 20, 2016, 1:46 PM
    Hello!

    #1245 is better to associate to another thread. Triton UI support has been added (supported in all browsers except IE8 and IE9).

    As for the current thread, let's leave it dedicated to the issue with the "tabchange" listener with the Crisp and CrispTouch themes. I will investigate.
  4. #4
    Apr 20, 2016, 5:42 PM
    As for the current thread, let's leave it dedicated to the issue with the "tabchange" listener with the Crisp and CrispTouch themes. I will investigate.
    It's possbible to overcome the issue by defining the following CSS rules (lines 5 to 8)

    Click image for larger version.  Name: tui001.png  Views: 44  Size: 1.9 KB  ID: 24568
    <!DOCTYPE html>
<html>
<head runat="server">
    <style type="text/css">
        .x-theme-crisp .uiEnabledTabStrip .x-tab-bar-top > .x-tab-bar-strip,
        .x-theme-crisptouch .uiEnabledTabStrip .x-tab-bar-top > .x-tab-bar-strip {
            height: 2px !important;
        }
    </style>
    <script type="text/javascript">
        var tabchange = function (item, newCard, oldCard) {
            if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
                item.getTabBar().removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
            }

            if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
                item.getTabBar().addCls("x-tab-bar-" + newCard.tabConfig.ui);
            }
        };
    </script>
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
    <ext:TabPanel Cls="uiEnabledTabStrip" DeferredRender="false" Title="TabPanel" Width="600" Height="300" Border="true" runat="server">
        <Items>
            <ext:FormPanel Title="Default" runat="server">
                <TabConfig UI="Default" runat="server" />
                <Items>
                    <ext:TextField FieldLabel="Field 001" runat="server" />
                </Items>
            </ext:FormPanel>
            <ext:FormPanel Title="Primary" runat="server">
                <TabConfig UI="Primary" runat="server" />
                <Items>
                    <ext:TextField FieldLabel="Field 002" runat="server" />
                </Items>
            </ext:FormPanel>
            <ext:FormPanel Title="Success" runat="server">
                <TabConfig UI="Success" runat="server" />
                <Items>
                    <ext:TextField FieldLabel="Field 003" runat="server" />
                </Items>
            </ext:FormPanel>
        </Items>
        <Listeners>
            <TabChange Fn="tabchange" />
        </Listeners>
    </ext:TabPanel>
</body>
</html>
    Last edited by RaphaelSaldanha; Apr 20, 2016 at 7:17 PM.
  5. #5
    Apr 21, 2016, 4:50 PM
    Thank you.

    Okay, Crisp and CrispTouch themes has no tab bar (it is 0px height). It is meant to be like that.

    So, I don't think this issue is a bug. To me it is the differences in the themes. A new UI is being applied on a tab bar on the tab change event. But ff it is not visible because of the current theme specificity, well, to me it is okay.

    I've revised the tabchange handler to:
    var tabchange = function (tabPanel, newCard, oldCard) {
    var tabBar = tabPanel.getTabBar();

    if (tabBar.getHeight() > 0) {
        if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
            tabBar.removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
        }

        if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
            tabBar.addCls("x-tab-bar-" + newCard.tabConfig.ui);
        }
    }
};
    There is a thing that bothers me even more. With Crisp and CrispTouch themes the tabs don't have borders and it doesn't really look like a TabPanel. It looks like a set of buttons. To improve look&feel I have added text to the tabs to see that something is actually switching on changing the tabs.

    Created a GitHub issue to have it logged.
    https://github.com/extnet/Ext.NET.Examples/issues/4

    The changes have been pushed to the repo and to the Examples online.

    Thank you for the suggestions!

Similar Threads

  1. PDF open from TabPanel
    By moth1 in forum 1.x Help
    Replies: 4
    Last Post: May 21, 2014, 3:50 AM
  2. Cannot Open a New Tab on the TabPanel with Error Code 200
    By coder in forum 2.x Help
    Replies: 1
    Last Post: Dec 11, 2013, 11:21 PM
  3. [CLOSED] How to close all open tabs of a tabpanel, except one
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 23, 2013, 4:22 PM
  4. Howto open window in TabPanel after press F7 or another key in MVC ?
    By vikram in forum 2.x Help
    Replies: 1
    Last Post: Aug 21, 2013, 7:45 AM
  5. [OPEN] [#46] TabPanel Firing Error
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 18, 2012, 12:41 PM

Posting Permissions