PDA

View Full Version : [CLOSED] Collapsing a tab panel when all tabs are hidden



ptrourke
May 21, 2013, 11:27 PM
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

Baidaly
May 22, 2013, 12:43 AM
Hello!

Can you provide simplified and runnable example? http://forums.ext.net/showthread.php?10205

ptrourke
May 22, 2013, 11:15 AM
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.

ptrourke
May 22, 2013, 7:02 PM
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!

Baidaly
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(fun ction (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>

ptrourke
May 23, 2013, 1:58 PM
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(CompaniesSelectedInOt herGrid, 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!

ptrourke
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!

Baidaly
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?

Daniil
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.

ptrourke
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!