What's New?

How to lock or freeze a TabPanel tab for viewing?

  1. #1
    Jan 22, 2012, 12:33 AM

    How to lock or freeze a TabPanel tab for viewing?

    Hi,

    Is there any way to lock a tab of the TabPanel so that it always stays in view? I have a number of tabs open dynamically in JS with EnableTabScroll set to "true" on the TabPanel. I'd like to be able to keep a couple of tabs defined in the page markup in view by "locking" them so that they don't hide on scrolling. Is this possible?

    Thanks,

    Vadym
  2. #2
    Jan 23, 2012, 1:26 PM
    Hi,

    Unfortunately, there is no such functionality.

    We can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var onBeforeRender = function (tabStrip, panel, indexToActive) {
            tabStrip.initTab = tabStrip.initTab.createSequence(function (item, index) {
                Ext.fly(item.tabEl).on(
                    "click", 
                    onTabElClick.createDelegate({
                        panel : panel,
                        index : indexToActive
                    })
                );
            });
        };

        var onTabElClick = function () {
            this.panel.layout.setActiveItem(this.index);       
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel
            ID="MainPanel"
            runat="server" 
            Height="100" 
            Width="400" 
            Layout="CardLayout" 
            ActiveIndex="0">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:TabStrip runat="server" ActionContainerID="Panel1">
                            <Items>
                                <ext:TabStripItem runat="server" Title="Locked 1" />
                                <ext:TabStripItem runat="server" Title="Locked 2" />
                            </Items>
                            <Listeners>
                                <BeforeRender Handler="onBeforeRender(this, MainPanel, 0);" />
                            </Listeners>
                        </ext:TabStrip>
                        <ext:ToolbarSpacer Width="10" />
                        <ext:TabStrip 
                            runat="server" 
                            ActionContainerID="Panel2" 
                            EnableTabScroll="true" 
                            Width="250">
                            <Items>
                                <ext:TabStripItem runat="server" Title="Not Locked 1" />
                                <ext:TabStripItem runat="server" Title="Not Locked 2" />
                                <ext:TabStripItem runat="server" Title="Not Locked 3" />
                                <ext:TabStripItem runat="server" Title="Not Locked 4" />
                            </Items>
                            <Listeners>
                                <BeforeRender Handler="onBeforeRender(this, MainPanel, 1);" />
                            </Listeners>
                        </ext:TabStrip>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Container 
                    ID="Panel1" 
                    runat="server" 
                    Layout="CardLayout" 
                    ActiveIndex="0">
                    <Items>
                        <ext:Panel runat="server" Html="Locked 1" />
                        <ext:Panel runat="server" Html="Locked 2" />
                    </Items>
                </ext:Container>
                <ext:Container 
                    ID="Panel2" 
                    runat="server" 
                    Layout="CardLayout" 
                    ActiveIndex="0">
                    <Items>
                        <ext:Panel runat="server" Html="Not Locked 1" />
                        <ext:Panel runat="server" Html="Not Locked 2" />
                        <ext:Panel runat="server" Html="Not Locked 3" />
                        <ext:Panel runat="server" Html="Not Locked 4" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Jan 23, 2012, 3:02 PM
    Thanks for the fine suggestion Daniil!

    Vadym
  4. #4
    Apr 12, 2012, 12:13 PM
    Here is the version for Ext.NET v2.

    Example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var onAfterRender = function (tabStrip, panel, indexToActive) {
            tabStrip.items.each(function (tab) {
                Ext.fly(tab.el).on(
                    "click", 
                    Ext.Function.bind(onTabElClick, {
                        panel : panel,
                        index : indexToActive
                    })
                );
            });
        };
 
        var onTabElClick = function () {
            this.panel.layout.setActiveItem(this.index);       
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel
            ID="MainPanel"
            runat="server"
            Height="100"
            Width="400"
            Layout="CardLayout"
            ActiveIndex="0">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:TabStrip ID="TabStrip1" runat="server" ActionContainerID="Panel1">
                            <Items>
                                <ext:Tab runat="server" Text="Locked 1" />
                                <ext:Tab runat="server" Text="Locked 2" />
                            </Items>
                            <Listeners>
                                <AfterRender Handler="onAfterRender(this, #{MainPanel}, 0);" />
                            </Listeners>
                        </ext:TabStrip>
                        <ext:ToolbarSpacer Width="10" />
                        <ext:TabStrip
                            runat="server"
                            ActionContainerID="Panel2"
                            EnableTabScroll="true"
                            Width="250">
                            <Items>
                                <ext:Tab runat="server" Text="Not Locked 1" />
                                <ext:Tab runat="server" Text="Not Locked 2" />
                                <ext:Tab runat="server" Text="Not Locked 3" />
                                <ext:Tab runat="server" Text="Not Locked 4" />
                            </Items>
                            <Listeners>
                                <AfterRender Handler="onAfterRender(this, #{MainPanel}, 1);" />
                            </Listeners>
                        </ext:TabStrip>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Container
                    ID="Panel1"
                    runat="server"
                    Layout="CardLayout"
                    ActiveIndex="0">
                    <Items>
                        <ext:Panel runat="server" Html="Locked 1" />
                        <ext:Panel runat="server" Html="Locked 2" />
                    </Items>
                </ext:Container>
                <ext:Container
                    ID="Panel2"
                    runat="server"
                    Layout="CardLayout">
                    <Items>
                        <ext:Panel runat="server" Html="Not Locked 1" />
                        <ext:Panel runat="server" Html="Not Locked 2" />
                        <ext:Panel runat="server" Html="Not Locked 3" />
                        <ext:Panel runat="server" Html="Not Locked 4" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>
    Though there are two problem at the moment.

    1. The initially activated tabs don't look activated.

    2. The right arrow of TabScroll is almost invisible.

    We are investigating a possible fix.
  5. #5
    Apr 15, 2012, 2:46 AM
    Any luck fixing the tab activation issue? Also, tabs on the second tabstrip do not look activated when clicked either.

    Regards
    Adrian.
  6. #6
    Apr 16, 2012, 10:35 AM
    Quote Originally Posted by Adrian View Post
    Any luck fixing the tab activation issue?
    Not yes, we are still investigating a possible fix.

    Quote Originally Posted by Adrian View Post
    Also, tabs on the second tabstrip do not look activated when clicked either.
    Do you click on the first tab? Well, it's already activated tab since it's a different TabStrip. So, it's the same issue.
  7. #7
    Apr 18, 2012, 5:28 PM
    The fix has been added to SVN, please update.

Similar Threads

  1. [CLOSED] How to freeze the status bar while scrolling ?
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 13, 2012, 11:08 AM
  2. Error viewing examples
    By phillipl in forum 1.x Help
    Replies: 0
    Last Post: Jun 03, 2010, 12:53 AM
  3. Grid Header Freeze
    By jordnlvr in forum 1.x Help
    Replies: 1
    Last Post: Mar 27, 2010, 3:52 AM
  4. Freeze (Lock) Columns feature in Grid Panel.
    By kunal_icreon in forum 1.x Help
    Replies: 7
    Last Post: Feb 22, 2010, 3:52 AM
  5. How to freeze 1st row in GridPanel from being sorted
    By patrahil in forum 1.x Help
    Replies: 0
    Last Post: May 19, 2009, 5:16 AM

Tags for this Thread

Posting Permissions