View Full Version : Floating image bind to container

9 Nov 2011, 9:11 AM
I have a viewport which i wish to 'overlay' a floating image on it. Everything is fine (including resizing of viewport) however SCROLLING screws up everything as the image just *stays* there on the screen while the background content moves.....

var coverimage = Ext.create('Ext.Img', {
src: '/images/landing/coverimage.png',
floating: true,
shadow: false

Ext.define('Squirt.view.Viewport', {
extend: 'Ext.container.Viewport',

style: 'background: #000000;',
autoScroll: 'vertical',

layout: {
type: 'hbox',
pack: 'center'
items: [{
id: 'mainSplash',
border: false,
width: 800,
bodyStyle: 'background: #000000;',
defaults: {
border: false
items: [{
height: 91,
bodyStyle: 'background: url(/images/landing/header.jpg);'
}, {
height: 43,
bodyStyle: 'background: url(/images/landing/redbar.png);'
}, {
height: 479,
bodyStyle: 'background: url(/images/landing/greyback.jpg);'
listeners: {
resize: function() {
// var x = (window.innerWidth / 2) - 425;
coverimage.show().alignTo(Ext.get('mainSplash'), 'tl', [ -25, 0 ]);

I guess I thought 'alignTo' would 'lock' the floating image to "mainSpash' so that if mainsplash scrolled
the image would follow it ...



9 Nov 2011, 9:18 PM
While I understand the requirement for the image to move with the scrolling I'm not entirely clear exactly where you want the image to appear. Given the information I have, this put it on screen such that it follows the scrollbar:

Ext.create('Ext.Img', {
floating: true,
renderTo: 'mainSplash',
shadow: false,
src: '/images/landing/coverimage.png',
x: 25,
y: 25

Using the id mainSplash like this is a bit dubious but you get the idea.

16 Nov 2011, 12:48 PM
Hi! Thanks for the response. The result is much better - but a situation of soooo close but not quite there. It would be perfect if the image i'm floating over was smaller than the container - but it isn't. Parts of it should be seen outside the container.

I guess the result that i'm looking for is the same way that a 'drop down' or 'menu' follows the trigger field even if the page is scrolled. The drop down/menu lies outside the trigger area and follows it like a puppy dog no matter in which direction the page scrolling (if any) happens.

Excellent example - take a look at the 'Font' drop down above (if you are replying to this message). Click on it - then move your cursor away from the list of drop down items. When you scroll your page - the list follows the Font drop down. That's pretty much what I need. An image 'aligned and locked to' a component on the screen (in this case a smaller panel) and have the image follow the panel if it scrolls up / down.


17 Nov 2011, 11:28 AM
Figured it out. It appears (maybe) that you cannot align an image to a viewport - probably because the viewport doesn't scroll - the stuff inside it does. So the simple solution was to nest my app entirely in a panel and move everything 'down' one level. The image is now bound to a panel that is the only item in the viewport and functions perfectly :-)