What's New?

[CLOSED] Collapsing a tab panel when all tabs are hidden

  1. #1
    May 21, 2013, 11:27 PM

    [CLOSED] Collapsing a tab panel when all tabs are hidden

    Hi, Folks!

    I have a tab panel that is collapsed on load. The tabs in the panel (there are several) are hidden on load.

    I have a DirectEvent (we'll call it the Report) that changes the hidden value of the tabs to false and loads them with data (selectively; sometimes three tabs, sometimes 2, sometimes 1, etc.) when a button is clicked. This works great.

    The tabs are closable, with closeaction set to hide. This works great.

    I'd like to be able to collapse the panel when I close the last tab (whichever tab it is). I have a script (we'll call it the Close Script) that checks the hidden state of the tabs, and if all are hidden, it is supposed to collapse the panel.

    I've tried firing that script from a Close listener, but it never fired; and from a Hide listener, but now it fires every time I close any tab, even if all the other tabs are still open; and also fires when the tabs are loaded/reloaded. Now, I imagine that this is because the "hidden" state is changed in the DirectEvent, and when the listener is fired, it's reading the state of the tabs when the page loaded.

    If I use a DirectMethod for the Report instead of a DirectEvent, called via a JS function from a Listener on the button, and change the hidden state of the tabs in the JS function rather than in the DirectMethod, is the close script more likely to work?

    Thanks!

    Patrick
    Last edited by Daniil; May 24, 2013 at 1:14 PM. Reason: [CLOSED]
  2. #2
    May 22, 2013, 12:43 AM
    Hello!

    Can you provide simplified and runnable example? http://forums.ext.net/showthread.php?10205
  3. #3
    May 22, 2013, 11:15 AM
    Quote Originally Posted by Baidaly View Post
    Hello!

    Can you provide simplified and runnable example? http://forums.ext.net/showthread.php?10205
    Thanks, I will, but it likely won't be until Wednesday evening EDT.
  4. #4
    May 22, 2013, 7:02 PM
    Quote Originally Posted by Baidaly View Post
    Hello!

    Can you provide simplified and runnable example? http://forums.ext.net/showthread.php?10205
    A little earlier than I thought I could send this. Here's an example:

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

<%@ 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></title>
    <script type="text/javascript">
        var ReportClose = function () {
            if
          (App.Tab1.hidden == true &&
          App.Tab2.hidden == true &&
          App.Tab3.hidden == true
          ) {
                App.BottomPanel.collapse();
            };
        };
    </script>
    <script runat="server">
    //I'm guessing that I will have to make this a DirectMethod for it to work...
        public void ShowReports(object sender, DirectEventArgs e)
        {
            if (OpenTab1.Checked)
            {
                Tab1.Hidden = false;
                Tab1.Render();
                Tab1.Show();
            }

            if (OpenTab2.Checked)
            {

                Tab2.Hidden = false;
                Tab2.Render();
                Tab2.Show();
            }

            if (OpenTab3.Checked)
            {

                Tab3.Hidden = false;
                Tab3.Render();
                Tab3.Show();
            }
            BottomPanel.Collapsed = false;
            BottomPanel.Show();
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager" Theme="Default" ScriptMode="Debug" runat="server" />
    <div>
        <ext:Viewport ID="MyViewport" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="TopPanel" runat="server" Title="Top" Region="Center" Border="true"
                    Resizable="true" EnableViewState="true" Flex="1">
                    <Content>
                        <h1>
                            TEST PANEL</h1>
                            <ext:Checkbox ID="OpenTab1" runat="server" FieldLabel="OpenTab1"  />
                            <ext:Checkbox ID="OpenTab2" runat="server" FieldLabel="OpenTab2" />
                            <ext:Checkbox ID="OpenTab3" runat="server" FieldLabel="OpenTab3" />
                            <ext:Button ID="RunReport" runat="server" Text="ShowSelectedTabs">
                            <DirectEvents>
                            <Click OnEvent="ShowReports" /> 
                            </DirectEvents>
                            </ext:Button>
                    </Content>
                </ext:Panel>
                <ext:TabPanel ID="BottomPanel" runat="server" ClientIDMode="Static" Region="South"
                    AutoScroll="true" CollapseMode="Mini" Collapsible="true" Collapsed="true" Title="Bottom"
                    MaxHeight="700" Split="true">
                    <Items>
                        <ext:GridPanel ID="Tab1" runat="server" Title="Tab 1" Closable="true" CloseAction="Hide"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab1Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab1ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab1_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab1_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                            <Listeners>
                                <Hide Fn="ReportClose" />
                            </Listeners>
                        </ext:GridPanel>
                        <ext:GridPanel ID="Tab2" runat="server" Title="Tab 2" Closable="true" CloseAction="Hide"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab2Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab2ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab2_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab2_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                            <Listeners>
                                <Hide Fn="ReportClose" />
                            </Listeners>
                        </ext:GridPanel>
                        <ext:GridPanel ID="Tab3" runat="server" Title="Tab 3" Closable="true" CloseAction="Hide"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab3Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab3ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab3_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab3_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                            <Listeners>
                                <Hide Fn="ReportClose" />
                            </Listeners>
                        </ext:GridPanel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
    Thanks!
  5. #5
    May 23, 2013, 4:53 AM
    It's not good to render components to just show them. Please, try the following sample:

    <%@ Page Language="C#" AutoEventWireup="true"  %>
 
<%@ 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></title>
    <script type="text/javascript">
        var ReportClose = function (tabPanel, tab) {
            tab.tab.hide();
            var isEmpty = false;
            
            if (App.BottomPanel.getTabBar().items.items.every(function (item) { return !item.isVisible(); }))
                tabPanel.collapse();
            return false;
        };
    </script>
    <script runat="server">
    //I'm guessing that I will have to make this a DirectMethod for it to work...
        public void ShowReports(object sender, DirectEventArgs e)
        {
            AbstractComponent activeTab = null;
            
            if (OpenTab1.Checked)
            {
                activeTab = Tab1;
                Tab1.AddScript(string.Format("{0}.tab.show();", Tab1.ClientID));
            } else
                Tab1.Hide();
 
            if (OpenTab2.Checked)
            {
                activeTab = Tab2;
                Tab2.AddScript(string.Format("{0}.tab.show();", Tab2.ClientID));
            } else
                Tab2.Hide();
 
            if (OpenTab3.Checked)
            {
                activeTab = Tab3;
                Tab3.AddScript(string.Format("{0}.tab.show();", Tab3.ClientID));
            } else
                Tab3.Hide();
            
            if (activeTab != null)
            {
                BottomPanel.SetActiveTab(activeTab);
                BottomPanel.Expand();
            }
             
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager" Theme="Default" ScriptMode="Debug" runat="server" InitScriptMode="Linked" />
    <div>
        <ext:Viewport ID="MyViewport" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="TopPanel" runat="server" Title="Top" Region="Center" Border="true"
                    Resizable="true" EnableViewState="true" Flex="1">
                    <Content>
                        <h1>
                            TEST PANEL</h1>
                            <ext:Checkbox ID="OpenTab1" runat="server" FieldLabel="OpenTab1"  />
                            <ext:Checkbox ID="OpenTab2" runat="server" FieldLabel="OpenTab2" />
                            <ext:Checkbox ID="OpenTab3" runat="server" FieldLabel="OpenTab3" />
                            <ext:Button ID="RunReport" runat="server" Text="ShowSelectedTabs">
                            <DirectEvents>
                            <Click OnEvent="ShowReports" /> 
                            </DirectEvents>
                            </ext:Button>
                    </Content>
                </ext:Panel>
                <ext:TabPanel ID="BottomPanel" runat="server" ClientIDMode="Static" Region="South" Plain="True" 
                    AutoScroll="true" CollapseMode="Mini" Collapsible="true" Collapsed="true" Title="Bottom" 
                    MaxHeight="700" Split="true">
                    <Listeners>
                        <BeforeTabHide Fn="ReportClose"></BeforeTabHide>
                    </Listeners>
                    <Items>
                        <ext:GridPanel ID="Tab1" runat="server" Title="Tab 1" Closable="true" CloseAction="Hide" AutoDestroy="False"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab1Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab1ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab1_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab1_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                        <ext:GridPanel ID="Tab2" runat="server" Title="Tab 2" Closable="true" CloseAction="Hide"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab2Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab2ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab2_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab2_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                        <ext:GridPanel ID="Tab3" runat="server" Title="Tab 3" Closable="true" CloseAction="Hide"
                            Hidden="true" AutoScroll="true" Icon="Report">
                            <Store>
                                <ext:Store ID="Tab3Store" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="MyID" Type="Int" />
                                        <ext:ModelField Name="MyName" Type="Int" />
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="Tab3ColumnModel" runat="server">
                                <Columns>
                                    <ext:Column runat="server" ID="Tab3_MyID" Text="MyID" DataIndex="MyID" Hideable="true"
                                        Hidden="true" Align="Right" Flex="1" />
                                    <ext:Column runat="server" ID="Tab3_MyName" Text="My Name" DataIndex="MyName" Hideable="false"
                                        Hidden="false" Align="Right" Flex="1" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
  6. #6
    May 23, 2013, 1:58 PM
    Quote Originally Posted by Baidaly View Post
    It's not good to render components to just show them. Please, try the following sample:
    Thanks, Baidaly! Just to be clear, I did leave out some of the functionality for the purpose of simplification, assuming that you'd just focus on the reveal/hide tabs part: 

     public void ShowReports(object sender, DirectEventArgs e)
        {

            DataSet MyResult = GetDataFromMyStoredProcedure(CompaniesSelectedInOtherGrid, OpenTab1.Checked, OpenTab2.Checked, OpenTab3.Checked);

            int ResultCount = 0;

            if (OpenTab1.Checked)
            {
                Tab1.Hidden = false;
                Tab1.Store[0].DataSource = MyResult.Tables[ResultCount].ToListString();
                Tab1.Store[0].DataBind();
                Tab1.Render();
                Tab1.Show();
                ResultCount ++;
            }
 
            if (OpenTab2.Checked)
            {
 
                Tab2.Hidden = false;
                Tab2.Store[0].DataSource = MyResult.Tables[ResultCount].ToListString();
                Tab1.Store[0].DataBind();
                Tab2.Render();
                Tab2.Show();
                ResultCount ++;
            }
 
            if (OpenTab3.Checked)
            {
 
                Tab3.Hidden = false;
                Tab3.Store[0].DataSource = MyResult.Tables[ResultCount].ToListString();
                Tab3.Store[0].DataBind();
                Tab3.Render();
                Tab3.Show();
                ResultCount ++;
            }
            BottomPanel.Collapsed = false;
            BottomPanel.Show();
             
        }
    (Even this is a simplification; the point is that I generate a report where there might be as many as three tables, and so only show the tabs for which I have generated the report. I want to be able to rebind the tabs when I rerun the report with a different selection of Companies and of reports). Given this scenario, I will still have to render the Tabs, no?

    I'll try your suggestion today. Thanks!
  7. #7
    May 23, 2013, 5:54 PM
    The revised version of the ReportClose script worked perfectly. I adopted your version of the ShowReports method, but added the .Render() as I said because I am changing the content of the store when I click the button.

    Thanks again!
  8. #8
    May 24, 2013, 4:01 AM
    Hello!

    Given this scenario, I will still have to render the Tabs, no?
    In this case I would prefer to create UserControls or reload data in the Grids. However, I think you can use Render method as well.

    Do you have any other questions about this?
  9. #9
    May 24, 2013, 4:04 AM
    Hi,

    A Store's DataBind call should be enough to update the Store itself and its associated GridPanel.

    Do you really need a Render call?

    Also you, probably, can remove one of these statements
    Tab1.Hidden = false;
Tab1.Show();
    They actually do the same.
  10. #10
    May 24, 2013, 11:50 AM
    Yes, thanks, I've removed the "show()" command. I thought "hidden" didn't bring it forward. There's another set of tabs I've been having a problem with (I won't get into that here, to keep the thread somewhat clean, and because I haven't exhausted my resources yet).

    On Render() - when i tried it without Render(), the tabs were blank. With Render(), they were not. This is likely because I'm changing the number of columns depending upon the year coverage of the report.

    My problem in this thread seems to be resolved, thanks! I'll look at the Render() issue and see if I have any specific questions. Thank you for your help!

Similar Threads

  1. [CLOSED] Image quality loss when collapsing a panel
    By RCN in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Apr 18, 2013, 4:32 AM
  2. Panel isn't collapsing after dynamically add a fieldset
    By joaxazevedo in forum 2.x Help
    Replies: 4
    Last Post: Feb 27, 2013, 12:41 PM
  3. [CLOSED] [1.0] Problem collapsing North Panel
    By bbo1971 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 17, 2010, 6:39 PM
  4. [CLOSED] Ext.EventManager is undefined when collapsing panel
    By UGRev in forum 1.x Legacy Premium Help
    Replies: 22
    Last Post: Apr 16, 2010, 2:59 PM
  5. [CLOSED] Can I use a control to optionally allow the user to make the viewing panel larger (by hiding/collapsing the left hand panel) to make .swf display a bit larger?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Apr 08, 2010, 1:36 PM

Tags for this Thread

Posting Permissions