PDA

View Full Version : Floating a container on the right side of screen



mrtedweb
28 Mar 2013, 3:17 AM
Hello everyone,

I've been trying to float a 200px x 25px container to the top right side of the browser window. As expected, it needs to always stay on top of things in the upper right corner. I've been trying this for the past day unsuccessfully. Please help!!!

Here is the javascript:



this.myPanel = Ext.create('Ext.container.Container', {
floating: true,
shadow: false,
cls: 'floating-panel-right',
html: 'This is the panel to be floating on the right!'
});

this.myPanel.setVisible(true);

And the CSS:


.floating-panel-right
{
width: 200px;
height: 25px;
position: absolute;
top: 0px!important;
right: 0px!important;
}

And this is the element's style in Firebug after being rendered and laid out:


element.style {
left: 583px;
right: 0;
top: 307px;
z-index: 19010;
}

.floating-panel-right {
width: 200px;
height: 25px;
position: absolute;
right: 0 !important;
top: 0 !important;
}

As you can see, ExtJS is throwing a 'left' style attribute that's preventing me from aligning my container. It's appearing at the top of the window, but centered horizontally. Arrrggghhhh!!!! How do I fix this??? Please help!!!

Many thanks to anyone that can help.

--
mrtedweb

slemmon
28 Mar 2013, 5:57 AM
See if this works for you. It does use the showBy() method which was introduced in 4.1.3.



var p = Ext.widget('panel', {
floating: true
, html: 'This is the panel to be floating on the right!'
, shadow: false
});


p.showBy(Ext.getBody(), 'tr-tr');

mrtedweb
28 Mar 2013, 9:21 AM
Argh. No. This seems like it should be such a simple and basic task!

slemmon
28 Mar 2013, 9:23 AM
How about this instead:
http://jsfiddle.net/slemmon/D64y9/



var p = Ext.widget('panel', {
floating: true
, html: 'This is the panel to be floating on the right!'
, shadow: false
});


p.show().alignTo(Ext.getBody(), 'tr-tr');