What's New?

Update TabPanel UI

  1. #1
    Apr 13, 2016, 5:00 PM

    Update TabPanel UI

    On the following example, press Change UI button

    The new UI is not applied to all elements
    Click image for larger version.  Name: ui001.png  Views: 49  Size: 24.5 KB  ID: 24562

    Any ideas to overcome this issue?

    Thanks in advance.

    <% ResourceManager.RegisterUI(); %>
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
    <ext:TabPanel ID="_tbp" Width="250" Height="200" Title="TabPanel" runat="server">
        <Items>
            <ext:Panel ID="_pnl" Title="Default" Html="Default" runat="server">
                <TabConfig UI="Default" runat="server" />
                <Buttons>
                    <ext:Button Text="Change UI" runat="server">
                        <Listeners>
                            <Click Handler="App._pnl.tab.setUI('warning');" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</body>
</html>
  2. #2
    Apr 14, 2016, 2:36 AM
    Hello!

    You have to recursively run setUI() on the components you want to change the UI.

    Changing the UI of a tab won't change the tab's inner components' UI.

    Well, that is, if I correctly understood your question...
    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 14, 2016, 11:44 AM
    SetUI is undefined on all:

    App._pnl.tab.btnWrap tab-1013-btnWrap

    App._pnl.tab.btnEl tab-1013-btnEl

    App._pnl.tab.btnIconEl tab-1013-btnIconEl

    App._pnl.tab.btnInnerEl tab-1013-btnInnerEl
  4. #4
    Apr 14, 2016, 12:49 PM
    Its possible to overcome the issue by doing the following

    <% ResourceManager.RegisterUI(); %>
<!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        Ext.tab.Tab.override({
            setUI: function (ui) {
                var me = this;
                var activeUI = me.activeUI;
                me.setButtonUI(me.btnWrap, activeUI, ui);
                me.setButtonUI(me.btnEl, activeUI, ui);
                me.setButtonUI(me.btnIconEl, activeUI, ui);
                me.setButtonUI(me.btnInnerEl, activeUI, ui);

                me.callParent(arguments);
            },
            setButtonUI: function (child, originalUI, ui) {
                if (originalUI && originalUI !== ui) {
                    var elementData = child.getData();
                    if (!elementData.isSynchronized) {
                        child.synchronize();
                    }
                    var mainClass = Object.keys(elementData.classMap)[0];
                    child.removeCls(mainClass + '-' + originalUI);
                    child.addCls(mainClass + '-' + ui);
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
    <ext:TabPanel ID="_tbp" Width="250" Height="200" Title="TabPanel" runat="server">
        <Items>
            <ext:Panel ID="_pnl" Title="Tab" Html="Content" runat="server">
                <TabConfig UI="Default" runat="server" />
                <Buttons>
                    <ext:Button Text="Default" runat="server">
                        <Listeners>
                            <Click Handler="App._pnl.tab.setUI('default')" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button Text="Danger" runat="server">
                        <Listeners>
                            <Click Handler="App._pnl.tab.setUI('danger')" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button Text="Warning" runat="server">
                        <Listeners>
                            <Click Handler="App._pnl.tab.setUI('warning')" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</body>
</html>

Similar Threads

  1. update a aspx file from another, in TabPanel
    By Juan Carlos in forum 2.x Help
    Replies: 1
    Last Post: Dec 12, 2012, 5:02 AM
  2. Update Tabpanel Icon after autoload page directmethod
    By norphos in forum 1.x Help
    Replies: 1
    Last Post: May 20, 2011, 5:02 AM
  3. [CLOSED] How to update the icon of a TabPanel on the fly?
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 04, 2010, 9:38 PM
  4. [CLOSED] Update TabPanel content without activating
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 07, 2009, 1:47 PM
  5. Hi, Why the TabPanel cannot update 2 tabs?
    By bruce in forum 1.x Help
    Replies: 2
    Last Post: Apr 20, 2009, 10:25 PM

Posting Permissions