PDA

View Full Version : Stacked images overlap on first render



DaveC426913
17 Sep 2010, 6:24 AM
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.





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