Is this required to add the code ? to just let us know the expand and collapse to be animated .. , this is very pain for adding the code since this is a large set of Markup code
anyway my Html
<ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout" StyleSpec="padding:10px 10px 10px 10px;">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" Pack="Start" />
</LayoutConfig>
<Items>
<ext:Panel ID="PanelSideBar" runat="server" Header="false" Title="" CollapseDirection="Left"
AnimCollapse="true" AnimCollapseDuration="20000" Floatable="true" CollapseMode="Mini"
Collapsed="true" Width="220" Border="true" Frame="false" AutoScroll="true" Layout="VBoxLayout"
PaddingSpec="0 0 0 0">
<Items>
<ext:Panel ID="Panel1" runat="server" Header="false" Title="" Width="190" Border="false"
Frame="true" Layout="VBoxLayout" PaddingSpec="0 0 0 0" BodyStyle="background:white;">
<Defaults>
<ext:Parameter Name="margins" Value="5 0 5 0" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" />
</LayoutConfig>
<Items>
<ext:Label ID="LabelCount" runat="server" Text="0" HideMode="Display" Hidden="true">
</ext:Label>
<ext:TagLabel ID="TagLabel4" runat="server" Stacked="true" Width="180" MaxLength="100">
<Tags>
<ext:Tag Text="Export to File" Icon="PageWhiteText" Style="padding-right: 25px !important;
background-position: right 5px center !important;">
</ext:Tag>
</Tags>
<Callouts>
<ext:Callout ID="calloutExport" runat="server" Title="Test"
BodyStyle="padding:px;">
<HeaderToolbar>
<ext:Toolbar ID="Toolbar4" runat="server" Flat="true">
<Items>
<ext:Button ID="Button4" runat="server" Icon="Decline" ToolTip="Close" Handler="this.up('toolbar').callout.hide();" />
</Items>
</ext:Toolbar>
</HeaderToolbar>
<BodyWidget>
<ext:Container ID="Container4" runat="server" Width="220" Height="40" Layout="HBoxLayout">
<Defaults>
<ext:Parameter Name="margins" Value="0 0 0 0" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" Align="Middle" />
</LayoutConfig>
<Items>
<ext:TextField ID="textExportFileName" runat="server" EmptyText="File Name" Width="200"
MaskRe="[0-9A-Za-z_()!]">
</ext:TextField>
<ext:Button runat="server" ID="btnExportToFile" Text="" Icon="PlayBlue" Width="20"
ToolTip="Go">
</ext:Button>
</Items>
</ext:Container>
</BodyWidget>
</ext:Callout>
</Callouts>
</ext:TagLabel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="panelMain" Header="false" Flex="1">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" StyleSpec="padding-bottom:0px;" Frame="true"
Flat="true">
<Items>
<ext:Button ID="Button1" runat="server" Icon="TextAlignJustify" Text="Click to Toggle">
<Listeners>
<Click Handler="toggleSidePanel()">
</Click>
</Listeners>
</ext:Button>
<ext:TabStrip ID="TabStrip1" runat="server">
<Items>
<ext:Tab Text="Tab1" ActionItemID="panel6" />
<ext:Tab Text="Tab2" ActionItemID="Panel2" />
<ext:Tab Text="Tab3" ActionItemID="Panel3" />
</Items>
</ext:TabStrip>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="panel6" DefaultAnchor="" runat="server" Border="false" Title="Search"
Header="false" ButtonAlign="Center" Layout="AnchorLayout" PaddingSpec="2 0 0 5"
Hidden="false">
<Items>
<ext:Panel ID="Panel5" runat="server" Layout="VBoxLayout">
<Items>
<ext:ComboBox ID="cboLastContact" runat="server" EmptyText="Last Contacted" AnchorHorizontal="80%">
<Items>
<ext:ListItem Text="1 month">
</ext:ListItem>
<ext:ListItem Text="3 months">
</ext:ListItem>
<ext:ListItem Text="6 months">
</ext:ListItem>
<ext:ListItem Text="12 months">
</ext:ListItem>
<ext:ListItem Text="18 months">
</ext:ListItem>
<ext:ListItem Text="24 months">
</ext:ListItem>
</Items>
</ext:ComboBox>
<ext:DateField runat="server" ID="dtFrom"
EmptyText="From Date">
</ext:DateField>
<ext:TextField ID="TextField1" runat="server" EmptyText="Zip/Postal Code" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" >
<Content>
some data...
</Content>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" >
<Content>
some data...
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Hidden runat="server" ID="SideBarVisible" Text="0">
</ext:Hidden>
Javascript function
<script type="text/javascript">
function toggleSidePanel() {
var sideBar = App.PanelSideBar;
var sideBarVisible = App.SideBarVisible.getValue();
if (sideBarVisible == 1) {
sideBar.collapse();
App.SideBarVisible.setValue(0)
} else {
sideBar.expand();
App.SideBarVisible.setValue(1)
}
}
</script>
Click on Toggle Button then side bar will be toggling fast, need to toggled it slowly( feels animated)
Thanks in advance.
