PDA

View Full Version : [CLOSED] Show no expandable panel in accordion layout panel



Tactem
Nov 13, 2012, 8:03 AM
Hi guys,

I have a panel with AccordionLayout, same : http://examples2.ext.net/#/Layout/Accordion/Original_Header/.

Initially, i have 1 panel show in accordion and 3 hidden. I show/hide the last 3 panels with GridRowSelection (associated to javascript function)

Actually, when i show a hidden panel and hide show panel, my first panel isn't display. I want the first panel doesn't move and keep display.

Sample :


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Original Header - Ext.NET Examples</title>
<script language="javascript" type="text/javascript">
var testButton1 = function ()
{
Ext.getCmp('Panel4').show();
Ext.getCmp('Panel5').hide();
}
var testButton2 = function ()
{
Ext.getCmp('Panel5').show();
Ext.getCmp('Panel4').hide();
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="Panel1" runat="server" Width="300" Border="false" Region="West" Layout="Fit"
BodyPadding="5">
<Items>
<ext:Panel ID="Panel2" runat="server" Layout="Accordion" Margins="0 0 15 0">
<LayoutConfig>
<ext:AccordionLayoutConfig OriginalHeader="true" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel3" runat="server" Title="Item 1" Border="false">
<Items>
<ext:Button Text="ButShowPanel4" runat="server">
<Listeners>
<Click Handler="testButton1();" />
</Listeners>
</ext:Button>
<ext:Button Text="ButShowPanel5" runat="server">
<Listeners>
<Click Handler="testButton2();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Title="Item 2" Border="false">
<Listeners>
<Render Handler="#{Panel4}.hide();" />
</Listeners>
</ext:Panel>
<ext:Panel ID="Panel5" runat="server" Title="Item 3" Border="false">
<Listeners>
<Render Handler="#{Panel5}.hide();" />
</Listeners>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

Regards

Yoann

Daniil
Nov 13, 2012, 10:18 AM
Hi Yoann,

What about to move this Panel out from AccordionLayout?

Tactem
Nov 13, 2012, 11:27 AM
If a click on "ButShowPanel4" and "ButShowPanel5" i have (Before.png) :

5081

and i want (after.png) :

5082

Daniil
Nov 13, 2012, 1:36 PM
Please try this.

Example

somePanel1.hide();
somePanel2.show(null, function () {
mainPanel.expand();
});

Tactem
Nov 13, 2012, 2:22 PM
I try


var testButton1 = function ()
{
Ext.getCmp('Panel4').show(null, function ()
{
Ext.getCmp('Panel2').expand();
});
Ext.getCmp('Panel5').hide();
}
var testButton2 = function ()
{
Ext.getCmp('Panel4').hide();
Ext.getCmp('Panel5').show(null, function ()
{
Ext.getCmp('Panel2').expand();
});

}

but problem is the same

Daniil
Nov 13, 2012, 3:07 PM
Please also set Animate="false" for the AccordionLayoutConfig.

If you do need animation, then please set up the following CustomConfig.


<ext:AccordionLayoutConfig OriginalHeader="true">
<CustomConfig>
<ext:ConfigItem Name="onComponentShow" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:AccordionLayoutConfig>

It will work with your initial JavaScript. But I would interchange the hide and show calls.

The original onComponentShow function is:

onComponentShow: function (comp) {
// Showing a Component means that you want to see it, so expand it.
this.onComponentExpand(comp);
}

Tactem
Nov 13, 2012, 4:07 PM
Perfect, thanks a lot daniil !!!