Results 1 to 1 of 1

Thread: Stacked images overlap on first render

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
      0  

    Default Stacked images overlap on first render

    Update: Problem seems to have disappeared once I view app via http:// rather than file:///

    Wondering if this is a bug or some quirk in my implementation.

    My page comes up on a regular basis with my images all scrunched on top of each other (see attached screen shot - card1: kiwi is on top of grapes, card2: small tide is on top of large tide) when they should be vertically stacked. (Relevant lines are hilit in the ocde snippet) If I simply refresh, the images will show up correctly next time.

    (I don't think the carousel is part of the problem, I think the problem is with the rendering of the container with the vertical stacking images.)

    Also, if, rather than refreshing the whole page, I merely tab off that menu item to another and then back, there will be no images at all - just empty purple. Again, a refresh will clear the problem.

    It's kind of like the page is displaying itself before it has entirely finished laying out the images.



    Code:
    Concierge.Specials = Ext.extend(Ext.Container, {
    initComponent: function() {
     var config = {
      items: [{
       xtype: 'carousel',
       width:740,
       height:363,
       layout: 'hbox',
       direction:'horizontal',
       items: [{   //card 1
        xtype:'container',
        width:740,
        height:1200,
        fullscreen:true,
        items:[{
         cls: 'dept_header',
         html: 'Fresh Produce'
        },{
         layout: 'vbox',
         scroll: 'vertical',
         height: 345,
         items: [{
    html: "<img class='ad med' src='img/ads/specials_ad2_lrg_grapes.png'>"
         },{
    html: "<img class='ad med' src='img/ads/specials_ad2_med_kiwi.png'>"
                  }]
        }]
       },{     //card 2
        xtype:'container',
        width:740,
        height:1200,
        fullscreen:true,
        items:[{
         cls: 'dept_header',
         html: 'Dry Goods'
        },{
         layout: 'vbox',
         scroll: 'vertical',
         height: 345,
         items: [{
      html: "<img class='ad med' src='img/ads/specials_ad2_lrg_tide.png'>"
         },{
      html: "<img class='ad med' src='img/ads/specials_ad2_med_kraft.png'>"
         },{
      html: "<img class='ad med' src='img/ads/specials_ad2_med_tide.png'>"
                  }]
        }]
       },{     //card 3
        xtype:'container',
        width:740,
        height:1200,
        fullscreen:true,
        items:[{
         cls: 'dept_header',
         html: 'Meat, Fish , Poultry'
        },{
         layout: 'vbox',
         scroll: 'vertical',
         height: 345,
         items: [{
          html: "<img class='ad med' src='img/ads/specials_ad2_lrg_turkey.png'>"
                  }]
        }]
       },{     //card 4
        xtype:'container',
        width:740,
        height:1200,
        fullscreen:true,
        items:[{
         cls: 'dept_header',
         html: 'Snacks, Beverages'
        },{
         layout: 'vbox',
         scroll: 'vertical',
         height: 345,
         items: [{
          html: "<img class='ad med' src='img/ads/specials_ad2_med_tetley.png'>"
                  }]
        }]
                }]
               }]
           }
     Ext.apply(this, Ext.apply(this.initialConfig, config));
           Concierge.Specials.superclass.initComponent.apply(this, arguments);
    },
    });
    Ext.reg('concierge_specials', Concierge.Specials);
    Attached Images Attached Images
    Last edited by DaveC426913; 17 Sep 2010 at 7:02 AM. Reason: Problem seems to be moot - would delete post if I could

Similar Threads

  1. Replies: 0
    Last Post: 24 Aug 2010, 6:03 AM
  2. Strange behaviour with images when using Ext.get().move()
    By bissinger in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Sep 2008, 6:41 AM
  3. Intermittent rendering issue with ComboBox
    By david.kuhn in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 20 May 2008, 8:15 AM

Posting Permissions

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