PDA

View Full Version : Confusion using alignTo in a viewport based on Ext.example.msg (plz move-> Ext: Help)



danderson
17 Mar 2009, 7:11 AM
I am attempting to create a sliding message based on Ext.example.msg within a viewport, and am running into issues whenever attempting to do any alignment based on a bottom anchor point of the element.

Is my interpretation of 'alignTo' incorrect? Shouldn't the following align the element to the bottom right corner of the viewport?


msgCt.alignTo(document, 'br-br');

Instead, it appears offscreen, and seems to be aligning the top right of the element to the bottom right of the viewport (target). If I tweak the positioning using the optional offset, then the element begins to come into view.

the only css i have applied to the sliding element is:



#msg-div {
width:180px;
z-index:20000;
}
.msg {
border: 1px solid black;
}


Thanks.

Animal
17 Mar 2009, 7:57 AM
Works fine for me

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/nobugasusual.jpg

danderson
17 Mar 2009, 8:14 AM
Works fine for me

Thanks Animal. It appears I was indeed interpreting the API correctly and my issue lies elsewhere. I will revisit it.

danderson
24 Mar 2009, 8:12 AM
I was able to successfully able to align window elements, etc. but still was unable to align an element that needs to slide in from the bottom right corner. Has anyone been able to slide an element into the viewport in such a manner?

Animal
24 Mar 2009, 8:20 AM
Calculate the position it needs to slide to, then slide it.

http://extjs.com/deploy/dev/docs/?class=Ext.Element&member=getAlignToXY

Animal
24 Mar 2009, 8:22 AM
Don't just slide the Element. Remember it has a shadow too.

Use



Ext.override(Ext.Window, {
slideTo: function(x, y) {
var a = Ext.lib.Anim.motion(this.el, {left: {to: x}, top: {to: y}});
a.onTween.addListener(function(){
this.syncShadow();
}, this);
a.onComplete.addListener(function(){
this.x = x;
this.y = y;
a.onTween.clearListeners();
}, this, {single: true});
a.animate();
}
});