PDA

View Full Version : [CLOSED] Animate Window Show



jwhitmire36
Jun 03, 2013, 6:24 PM
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
}
});


I can't seem to figure out how to apply this within Ext.Net. Thanks for your help.



<%@ 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>


JW

Baidaly
Jun 04, 2013, 12:08 AM
Hello!

Please, look at the following sample:



<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>

</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>

<ext:Window ID="myWind" runat="server" Title="Test Window" Modal="true" AutoRender="true" Height="400" 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="btnWinSlide" runat="server" Text="Window Slider" OnClientClick="
App.slideWindow.showBy('myWind','tl-tr');
App.slideWindow.animate({ to: { width: 200, height: 400 } });
"></ext:Button>
</Items>
</ext:Panel>
</Content>
</ext:Window>
<ext:Window ID="slideWindow" runat="server" Title="Help" Modal="false" AutoRender="false" Height="400" Width="0" 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>

jwhitmire36
Jun 04, 2013, 2:29 PM
Thanks Baidaly! I had tried .animate but I think I had to and width flipped in the parms like .animate({ width: { to: 400} });

Here's my final code example with the addition of a Listener on the slideWindow Close event to reset the height and width back to zero so if you close and re-open it will animate again. Please mark this closed.



<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
</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="btnWinSlide" runat="server" Text="Window Slider" OnClientClick="App.slideWindow.showBy('myWind','tl-tr');
App.slideWindow.animate({ to: { width: 200, height: 600 },
duration: 500 });"></ext:Button>
</Items>
</ext:Panel>
</Content>
</ext:Window>
<ext:Window ID="slideWindow" runat="server" Title="Help" Modal="false" AutoRender="false" Height="0" Width="0" CloseAction="Hide">
<Content>
<ext:Panel ID="Panel2" runat="server">
<Content>
Here is some content to show
</Content>
</ext:Panel>
</Content>
<Listeners>
<Close Handler="App.slideWindow.setWidth(0);App.slideWindow.setHei ght(0);"></Close>
</Listeners>
</ext:Window>
</form>
</body>
</html>


JW

Baidaly
Jun 04, 2013, 10:14 PM
Thank you for your final sample!