PDA

View Full Version : Bad Sizing of Carousel when inside a Panel



graham_alton
2 Nov 2010, 3:18 AM
The following works as expected. A look at the console after loading this page shows widths and heights set.


Ext.setup({
onReady: function() {
new Ext.Carousel({
fullscreen: true,
layout: 'card',
items: [{
html: '1'
},
{
html: '2'
},
{
html: '3'
},
{
html: '4'
}],
listeners: {
afterlayout: function(panel) {
for (var i=0;i<panel.items.items.length;i++) {
console.log("width",panel.items.items[i].getWidth());
console.log("height",panel.items.items[i].getHeight());
}
}
}
});
}
});

However, the following example which is a simplified case of what I'm doing in my UI does not set the width/height after the third carousel element. Width/Height are set and reported correctly for up to and including three carousel elements but you can add as many more as you like after that and the sizes don't seem to get set.


Ext.ns('my');

my.ui = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',

listeners: {
afterlayout: function(panel) {
for (var i=0;i<panel.items.items[0].items.items.length;i++) {
console.log("width",i,panel.items.items[0].items.items[i].getWidth());
console.log("height",i,panel.items.items[0].items.items[i].getHeight());
}
}
},

items: [
new Ext.Carousel({
items: [{
html: '1'
},
{
html: '2'
},
{
html: '3'
},
{
html: '4'
}]
})
],
});

Ext.setup({
onReady: function() {
new my.ui();
}
});

As I mentioned, this is a simplified case I've put together to attempt to isolate and explain the problem a little easier. The panel in this example is pretty redundant but in my application that panel serves as the layout for the rest of the page with a docked tabbar at the bottom and various combinations of hbox and vbox layouts for the rest of the page including the carousel shown above.

evant
2 Nov 2010, 3:43 AM
Ext.setup({
onReady: function(){
var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
xtype: 'carousel',
items: [{
html: 'a'
},{
html: 'b'
},{
html: 'c'
}]
}],
listeners: {
delay: 50,
afterlayout: function(){
var c = main.items.first();
console.log('main', c.getSize());
c.items.each(function(child){
console.log('child', child.getSize());
});
}
}
});
}
});


The reason you're seeing the issue is because it's not fully initialized yet.

graham_alton
2 Nov 2010, 4:28 AM
Ext.setup({
onReady: function(){
var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
xtype: 'carousel',
items: [{
html: 'a'
},{
html: 'b'
},{
html: 'c'
},{
html: 'd'
}]
}],
listeners: {
delay: 500,
afterlayout: function(){
var c = main.items.first();
console.log('main', c.getSize());
c.items.each(function(child){
console.log('child', child.getSize());
});
}
}
});
}
});

Thanks for the reply evant.

That does not appear to correct the issue. You need four (or more) carousel items (as in the above), even with a tenfold increase in delay the fourth item sizes are reported incorrectly. The sizes of the first three carousel items always appear to be reported correctly but the fourth and beyond report a height and width of zero.

Graham