[CLOSED] Check to see if panel is collapsed

[ptrourke]

I have an application that is somewhat similar to https://examples2.ext.net/#/GridPane.../Form_Details/, but it uses a collapsible tab panel with two tabs on the right hand side rather than the form panel in the example, and uses DisplayFields rather than TextFields.

I load the tabs with details and reveal them when 1. an item is selected and 2. a choice is made from the context menu.

I want to change the data shown in these detail tabs when I select another item, but ONLY if the tabs are not collapsed.

Something like this (this is a truncated version of the code, and this particular version hasn't been compiled; but the only thing going wrong in the full version is the commented line in the DirectEvent codebehind):

<ext:Viewport ID="MyViewport" runat="server" Layout="Border">
	<ext:GridPanel runat="server" region="Center" ID="ItemsGrid" ContextMenuID="ItemsContextMenu" ClientIDMode="Static">
		<Store>
			<ext:Store runat="server" ID="ItemsStore" ClientIDMode="Static" OnReadData="ReadData">
				<Proxy>
					<ext:PageProxy />
				</Proxy>
				<Model>
					<ext:Model runat="server" IDProperty="ItemID">
						<Fields>
							<ext:ModelField Name="ItemID" Type="Int" />
						</Fields>
					</ext:Model>
				</Model>
			</ext:Store>
		</Store>
		<ColumnModel runat="server" ID="ItemsColumnModel">
			<Columns>
				<ext: Column runat="server" Text="ID" DataIndex="ItemID" />
			</Columns>
		</ColumnModel>
		<DirectEvents>
			<SelectionChange OnEvent="RefreshDetails">
				<ExtraParams>
					<ext:Parameter Name="ItemID" Value="#{ItemsGrid}.getSelectionModel().getLastSelected().data.ItemID" Mode="Raw" />
				</ExtraParams>
			</SelectionChange>
		</DirectEvents>
	</ext:GridPanel >
	<ext:TabPanel runat="server" ID="DetailsPanel" Region=East" Split="true" Collapsible="true" Collapsed="true" CollapseDirection="Right" Width="300" Border="true">
		<Items>
			<ext:Panel ID="MainDetails" runat="server" Region="East" Split="true" Margins="0 5 5 5">
				<Items>
					<ext:DisplayField ID="ItemIDDisplay" runat="server" FieldLabel="Item ID" Name="ItemID" Visible="true" />
				</Items>
			</ext:Panel>
			<ext:Panel ID="SecondaryDetails" runat="server" Region="East" Split="true" Margins="0 5 5 5">
				<Items>
					<ext:DisplayField ID="SecondaryItemIDDisplay" runat="server" FieldLabel="Item ID" Name="ItemID" Visible="true" />
				</Items>
			</ext:Panel>
		</Items>
	</ext:TabPanel>
</ext:Viewport>

And in the behind code:

protected void RefreshDetails(object sender, DirectEventArgs e)
{
  bool DetailsAreShowing = (DetailsPanel.Collapsed == false || ItemIDDisplay.Text.Trim().Length > 0); // ** THIS IS MY PROBLEM AREA
  if (DetailsAreShowing)
  {
	int newItemID = int.Parse(e.ExtraParams["ItemID"]);
	ItemDetailsBind(newItemID);
   }

}

So, I just need to be able to assign a value to the boolean "DetailsAreShowing" that tells me whether or not the DetailsPanel is visible. Any suggestions? Or is this something that has to be done with a DirectMethod?

Thanks!

Patrick

[geoffrey.mcgill]

Hi Patrick,

How about passing the current collapse/expand state as an <ext:Parameter> to the DirectEvent, similar to how you are passing the ItemID?

You could get the .collapsed property of the object, then pass as a Parameter.

Hope this helps.

[Vladimir]

Panel submit own collapsed state automatically, so you can just read Collapsed property (please ensure that you have form on the page otherwise you need to use extra parameter of direct request)

[ptrourke]

Hi Patrick,

How about passing the current collapse/expand state as an <ext:Parameter> to the DirectEvent, similar to how you are passing the ItemID?

You could get the .collapsed property of the object, then pass as a Parameter.

Hope this helps.

Panel submit own collapsed state automatically, so you can just read Collapsed property (please ensure that you have form on the page otherwise you need to use extra parameter of direct request)

Geoffrey - When I saw your email last night, I had a facepalm moment. Thanks a bunch, yeah, that works right away - it took me maybe a minute to implement.

Vladimir - thanks! When you say the Panel submits its own collapsed state automatically, and that I can just read the Collapsed property, are you talking about in the ExtJS layer, or in the .NET layer? When I tried reading the DetailsPanel.Collapsed property in the C# function called from the DirectEvent, it always returned true, regardless of the collapsed state of the panel. I assume that this was because there was some subtlety of the page life cycle that I was missing. (Everything is inside a form element in the ASPX.)

Additional question - Does an initial selection from a GridPanel (when nothing else is selected) fire the ChangeSelection event once, and selecting another item in the GridPanel fire the ChangeSelection event twice (one for unselecting the initial selection, one for selecting the new selection)? I ask because my function is being called twice.

Thanks!
Patrick

[geoffrey.mcgill]

Hi Patrick,

I didn't remember until after I submitted my post that the Collapsed state is one of the few client-side state properties that is sent from the client to the server, as noted by Vladimir above.

The following sample demonstrates the scenario.

Example

<%@ Page Language="C#" %> 
<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("Collapsed?", this.Panel1.Collapsed).Show();
    }
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Title="Example" 
            Width="350" 
            Height="215" 
            Collapsible="true" 
            />
        
        <ext:Button runat="server" Text="Submit" OnDirectClick="Button1_Click" /> 
    </form>
</body>
</html>

Hope this helps.

[ptrourke]

Hi Patrick,

I didn't remember until after I submitted my post that the Collapsed state is one of the few client-side state properties that is sent from the client to the server, as noted by Vladimir above.


Hope this helps.

Thanks, that is helpful!

Patrick

[ptrourke]

Hi, Geoffrey, Vladimir!

Ok, I can see now why this was not working for me. I created a test case like this:

<%@ Page Language="C#" %> 
<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("Collapsed?", this.Panel1.Collapsed).Show();
    }
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">        
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Title="Example" 
            Width="350" 
            Height="215" 
            Collapsible="true" 
            />
        
        <ext:Button runat="server" Text="Submit" OnDirectClick="Button1_Click" /> 
</ext:Viewport>
    </form>
</body>
</html>

This doesn't work. However, if I remove the attribute 'Layout="BorderLayout"' from the test case, it DOES work. Of course, then the layout of the page is ruined, so I'll have to use the extra param.

Thanks!

[Vladimir]

Your sample is not correct (and not runable)
- Widgets must be defined inside Items collection
- Region property should be defined for each item if container uses border layout
- Button should not be as region of border layout

Please provide runable sample

[ptrourke]

My apologies - I was sloppy in writing out the test case. Chris Wolcott is working up a better test case. Thanks!

Patrick

Your sample is not correct (and not runable)
- Widgets must be defined inside Items collection
- Region property should be defined for each item if container uses border layout
- Button should not be as region of border layout

Please provide runable sample

[geoffrey.mcgill]

We discovered the following scenario does reproduce a defect with the .Collapsed property.

Example

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

<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("Collapsed?", this.Panel1.Collapsed).Show();
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />


        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel
                    ID="Panel1"
                    runat="server"
                    Title="Example"
                    Region="West"
                    Width="350"
                    Collapsible="true"
                    />
                <ext:Panel runat="server" Title="Center" Region="Center">
                    <Buttons>
                        <ext:Button runat="server" Text="Submit" OnDirectClick="Button1_Click" /> 
                    </Buttons>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

We have fixed the problem and committed to SVN. The fix will be publicly available with the upcoming 2.2.0 release.