PDA

View Full Version : Window Animation



ma_nepali_keta
13 Aug 2010, 11:52 PM
Hi
Good Evening.

I have the following code which works perfectly fine.



Ext.onReady(windowAnimate);
function windowAnimate()
{
var button = new Ext.Button({
text:'Show Window',
id:'myButton',
renderTo:document.body,
handler: function(){

myWindow.show();
} }
) ;

var myWindow= new Ext.Window({
animateTarget:button.el,
title:'My Fancy Window',
id:'myWindow',
width:300,
height:150,
closeAction:'hide',
constrain:true,
});
}


The window will be display on the center of the page using Slide In(I guess it's slide in,plz correct me if i am wrong) effect. Is it possible to change this effect to another one. Let's say If i want the window to fade in while popping up how would be i able to do so. I tried Ext.Fx.ItsMethods(), using window id, but didn't find any luck..

Any hints, suggestions, urls anything will be greatly appreciated.

Thank you
Have a nice weekend

I am sorry. I posted it in a wrong place. Please move This Post..

Animal
13 Aug 2010, 11:56 PM
To fade in instead, do not set an animateTarget.

Add a show listener which hides the Window's Element (getEl()) and then fades the Element in.

ma_nepali_keta
14 Aug 2010, 12:11 AM
Thank you Animal for such quick and great reply.It worked like a charm. As someone else might also run into this problem i am posting the solution here.



Ext.onReady(windowAnimate);
function windowAnimate()
{
var button = new Ext.Button({
text:'Show Window',
id:'myButton',
renderTo:document.body,
handler: function(){

myWindow.show();
} }
) ;

var myWindow= new Ext.Window({
title:'My Fancy Window',
id:'myWindow',
width:300,
height:150,
closeAction:'hide',
constrain:true,
listeners:
{
show:
{
fn:function(){
myWindow.getEl().fadeIn({
endOpacity: 1,
easing: 'easeOut',
duration: .9
});
}
}
}
});
}


Thank you once again Animal.

This thread is solved please marked it as solved. I don't think i can mark it as solved.

Animal
14 Aug 2010, 12:34 AM
The Window has a shadow.

Also, code formatting is very important, or you'll soon lose track of what it's doing.

Another thing is creating object literals over and over (the anim object on each show). Where possible, create things like that only once. Keep a reference and use that referece.

Use



new Ext.Button({
text:'Show Window',
renderTo:document.body,
handler: function(){
myWindow.show();
}
});
var myWindow = new Ext.Window({
title:'My Fancy Window',
id:'myWindow',
width:300,
height:150,
closeAction:'hide',
constrain:true,
anim: {
endOpacity: 1,
easing: 'easeIn',
duration: .9
},
listeners: {
show: function(w){
myWindow.getEl().fadeIn(w.anim);
myWindow.getEl().shadow.el.fadeIn(w.anim);
}
}
});

ma_nepali_keta
14 Aug 2010, 10:25 PM
The Window has a shadow.

Didn't know that. I'd learn new thing...implemented it and the very first thing i said was "WOW"...


Also, code formatting is very important, or you'll soon lose track of what it's doing.
Another thing is creating object literals over and over (the anim object on each show). Where possible, create things like that only once. Keep a reference and use that reference
Yes Sir! i Would definitely remember the way of using single object literals.I am kind a new to the JavaScript programming and crawling slowly..Would definitely do that here after...Once again its a really new thing for me...However i didn't find any config option named: 'anim' in API DOCS. Also i am wondering how an element object would have shadow object which is also not defined anywhere in api docs (ELEMENT).

Thank you once again animal..THANK YOU.~o)

Animal
14 Aug 2010, 11:32 PM
No, "anim" i not a config.

I should explain since you are new.

All config options are copied into the object being created.

So there will be a "this.title" and a "this.id" etc in the Window.

This means that you can usually inject any extra information you need just by adding more configuration. Make sure it does not conflict with existing configs though.

Animal
14 Aug 2010, 11:34 PM
The Window's element object is a special kind of element.

Because it floats, the Window's element is a Layer

http://dev.sencha.com/deploy/ext-3.3-beta1-6976/docs/?class=Ext.Layer

Menus are floating by default and also use a Layer.

ma_nepali_keta
15 Aug 2010, 1:42 PM
This means that you can usually inject any extra information you need just by adding more configuration. Make sure it does not conflict with existing configs though.

Don't have any more words for your generosity. These words are my sticky notes now.

Thank you:D