Jun 03, 2013, 6:24 PM
[CLOSED] Animate Window Show
I have an example below that has a Window open, then when you click a button I want to show a second window and have that be animated. I'm trying to achieve a 'slideIn' affect just like the Notification that is also in the example. I've found how to position the 2nd window to the right with the showBy function, but I can't figure out how to do animation. I found for ExtJS:
Ext.create('Ext.fx.Anim', {
target: myWindow,
duration: 1000,
from: {
width: 400 //starting width 400
opacity: 0, // Transparent
color: '#ffffff', // White
left: 0
},
to: {
width: 300, //end width 300
height: 300 // end height 300
}
});<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
<ext:Button ID="btnWindow" runat="server" Text="Open Window">
<Listeners>
<Click Handler="App.myWind.show();"></Click>
</Listeners>
</ext:Button>
<ext:Window ID="myWind" runat="server" Title="Test Window" Modal="true" AutoRender="true" Height="600" Width="625" CloseAction="Hide">
<Content>
<ext:Panel ID="Panel1" runat="server" Layout="TableLayout" Title="Test Panel" BodyPadding="10" Width="600">
<LayoutConfig>
<ext:TableLayoutConfig Columns="2"></ext:TableLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button ID="btnSlider" runat="server" Text="Client Slider">
<Listeners>
<Click Handler="
Ext.net.Notification.show({
hideFx : {
args : [ 'l', {} ],
fxName : 'ghost'
},
showFx : {
args : [ 'l', {} ],
fxName : 'slideIn'
},
pinEvent : 'click',
alignToCfg : {
offset : [ 2, 0 ],
position : 'l-r',
el : Ext.net.getEl('myWind')
},
height : 600,
html : 'This will be my help message',
title : 'Title'
});"></Click>
</Listeners>
</ext:Button>
<ext:Button ID="btnWinSlide" runat="server" Text="Window Slider" OnClientClick="App.slideWindow.showBy('myWind','tl-tr');"></ext:Button>
</Items>
</ext:Panel>
</Content>
</ext:Window>
<ext:Window ID="slideWindow" runat="server" Title="Help" Modal="false" AutoRender="false" Height="600" Width="200" CloseAction="Hide">
<Content>
<ext:Panel ID="Panel2" runat="server">
<Content>
Here is some content to show
</Content>
</ext:Panel>
</Content>
</ext:Window>
</form>
</body>
</html>
Last edited by Baidaly; Jun 04, 2013 at 10:14 PM.
Reason: [CLOSED]
