Results 1 to 3 of 3

Thread: Bad Sizing of Carousel when inside a Panel

  1. #1

    Default Bad Sizing of Carousel when inside a Panel

    The following works as expected. A look at the console after loading this page shows widths and heights set.

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

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

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Code:
    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

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

Similar Threads

  1. Carousel inside a Container?
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 25 Aug 2010, 5:57 AM
  2. Placing a carousel inside a tab panel
    By revolt in forum Sencha Touch 1.x: Discussion
    Replies: 9
    Last Post: 6 Aug 2010, 6:41 AM
  3. Replies: 0
    Last Post: 19 May 2010, 7:55 AM
  4. Replies: 1
    Last Post: 13 Aug 2009, 7:16 PM
  5. Sizing of HtmlEditor inside
    By JEBriggs in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 4 Aug 2007, 10:02 PM

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
  •