Results 1 to 4 of 4

Thread: Floating image bind to container

  1. #1
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    389
    Answers
    13

    Default Answered: Floating image bind to container

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

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

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

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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:

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

  4. #3
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    389
    Answers
    13

    Default

    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.

    :-)

  5. #4
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    389
    Answers
    13

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •