[CLOSED] setActiveTab with disabled TabPanel

[softmachine2011]

Hi,

When setActiveTab between tabs with disabled TabPanel, show content's tab of activeTab but selects the previous tab.

Example:

<ext:Panel runat="server" Layout="VBoxLayout">
    <Items>
        <ext:Button runat="server" Icon="DoorIn" ToolTip="Tooltip">
            <Listeners>
                <Click Handler="
                    mainTabPanel.setActiveTab(tab1); 
                    mainTabPanel.setDisabled(true); 
                    mainTabPanel.setActiveTab(tab2);
                    mainTabPanel.setDisabled(false);" />
                </Listeners>
            </ext:Button>
            <ext:TabPanel ID="mainTabPanel" runat="server" Border="false" Region="Center" DeferredRender="false">
                <Items>
                    <ext:Panel ID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
                        <Items>
                            <ext:Container runat="server" Layout="HBoxLayout">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Label runat="server" Text="TAB1" />
                                </Items>
                            </ext:Container>
                        </Items>
                        <Listeners>
                            <BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
                        </Listeners>
                    </ext:Panel>
                    <ext:Panel ID="tab2" runat="server" Border="false" Title="Tab2" Layout="FitLayout">
                        <Items>
                            <ext:Container runat="server" Layout="HBoxLayout">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Label runat="server" Text="TAB2" />
                                </Items>
                            </ext:Container>
                        </Items>
                        <Listeners>
                            <BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
                        </Listeners>
                    </ext:Panel>
                    <ext:Panel ID="tab3" runat="server" Border="false" Title="Tab3" Layout="FitLayout">
                        <Items>
                            <ext:Container runat="server" Layout="HBoxLayout">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Label runat="server" Text="TAB3" />
                                </Items>
                            </ext:Container>
                        </Items>
                        <Listeners>
                            <BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
                        </Listeners>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
    </Items>
</ext:Panel>

How can fix it?

Greetings,

[Daniil]

Hi @softmachine2011,

I think it is not a defect. A setActiveTab method should not be called if a TabPanel is disabled.

You can add a condition if needed.

if (!tabPanel.isDisabled()) {
    tabPanel.setActiveTab(tab);
}

[softmachine2011]

Hi @softmachine2011,

I think it is not a defect. A setActiveTab method should not be called if a TabPanel is disabled.

You can add a condition if needed.

if (!tabPanel.isDisabled()) {
    tabPanel.setActiveTab(tab);
}

Hi Daniil,

I think it really is a bug. If you really could not call the function, would not make anything.

But i need change Tab when tabPanel is disabled. Is there any way to do this?

Thanks,

[Daniil]

I think it really is a bug. If you really could not call the function, would not make anything.

Do you think the "active tab" term is actual for a disabled TabPanel? Well, I don't think so. If it needs to set up an active tab for a disabled TabPanel, maybe, there is something wrong in the design.

I am not sure what you mean here:

If you really could not call the function, would not make anything.

Could you, please, clarify?

But i need change Tab when tabPanel is disabled. Is there any way to do this?

An Enable listener can help to set up an active tab when a disabled TabPanel becomes enabled.

[Fergus]

Hi,
I also have a requirement to change the tab of a disabled tabpanel.

I have one active tabpanel and i have another tabpanel that is enabled but within a panel that is disabled.
I want to keep the 2 tabpanels synced. So when i change the left tab i want to do the same with the right tabpanel.
But when the right panel is enabled again the tabpanel has the correct panel showing but the tab is still the one that was selected before it was disabled. The tab that is meant to be selected now does nothing when clicked.

I am wondering why when the tabpanel is not disabled but under a disabled parent why it will not change tab correctly.

I have this requirement in a few places and is proving difficult to add an enable listener to set the tab.

Is there any other way around this?

Thanks
Fergus

[Baidaly]

Hello!

You can try to override this behavior. Take a look at this sample:

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>

</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug" />

    <script>
        Ext.override(Ext.tab.Bar, {
            setActiveTab: function (tab, initial) {
                var me = this;
                if (tab !== me.activeTab) {
                    if (me.activeTab) {
                        if (me.activeTab.isDestroyed) {
                            me.previousTab = null;
                        } else {
                            me.previousTab = me.activeTab;
                            me.activeTab.deactivate();
                        }
                    }
                    tab.activate();
                    me.activeTab = tab;
                    me.needsScroll = true;
                    if (!initial) {
                        me.fireEvent('change', me, tab, tab.card);
                        me.updateLayout();
                    }
                }
            }
        });
    </script>

    <ext:Button runat="server" ID="Button1" Text="Activate second tab">
        <Listeners>
            <Click Handler="
                App.mainTabPanel.setActiveTab(1);
                App.mainTabPanel.tabBar.setActiveTab(App.mainTabPanel.getComponent(1).tab);
                ">
            </Click>
        </Listeners>
    </ext:Button>

    <ext:TabPanel ID="mainTabPanel" runat="server" Border="false" Region="Center" DeferredRender="false" Disabled="True">
        <Items>
            <ext:Panel ID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Label runat="server" Text="TAB1" />
                        </Items>
                    </ext:Container>
                </Items>
                <Listeners>
                </Listeners>
            </ext:Panel>
            <ext:Panel ID="tab2" runat="server" Border="false" Title="Tab2" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Label runat="server" Text="TAB2" />
                        </Items>
                    </ext:Container>
                </Items>
                <Listeners>
                </Listeners>
            </ext:Panel>
            <ext:Panel ID="tab3" runat="server" Border="false" Title="Tab3" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Label runat="server" Text="TAB3" />
                        </Items>
                    </ext:Container>
                </Items>
                <Listeners>
                </Listeners>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</body>
</html>