Floating image bind to container

[keckeroo]

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 ...

Thanks!

Kevin

[skirtle]

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.

[keckeroo]

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.

:-)

[keckeroo]

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 :-)