1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Answers
    1
    Vote Rating
    0
    indapublic is on a distinguished road

      0  

    Default Unanswered: Carousel inside panel

    Unanswered: Carousel inside panel


    There are many questions about it, but i don't find working solution

    Code:
    Ext.application ({
    		launch: function () {
                        
                        var headContainer = Ext.create('Ext.Container', {
                            fullscreen          :   'true',
                            layout              :   'hbox',
                            items               :   [
                                {
                                    xtype       :   'carousel',
                                    defaults    :   {
                                        layout  :   'hbox'
                                    },
                                    items       :   [
                                        {
                                            html    :   '1',
                                            cls     :   'card'
                                        },
                                        {
                                            html    :   '2',
                                            cls     :   'card'
                                        }
                                    ]
                                },
                                {
                                    xtype       :   'panel',
                                    html        :   'second',
                                    flex        :   1
                                },
                                {
                                    xtype       :   'panel',
                                    html        :   'third',
                                    flex        :   1
                                }
                            ]
                        });
                        
                    }
                    
                });
    Carousel is not showing, screen contains only 'second' and 'third'.

    What's wrong?

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    You can use following code:

    Code:
     Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'hbox',
        defaults: {
            flex: 1
        },
        items: [
        	{
            	xtype:'carousel'
                , items:[
                	{
                        html    :   'carousel',
                        cls     :   'card',
                        style: 'background-color: green'
                    },
                    {
                        html    :   'carousel',
                        cls     :   'card',
                        style: 'background-color: red'
                    }
                ]
            },
            {
            	xtype:'panel',
                html:'panel1',
                flex:1,
                style: 'background-color: blue'
            },
            {
            	xtype:'panel',
                html:'panel2',
                flex:1,
                style: 'background-color: yellow'
            }
        ]
    });
    Output:

    ccc.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread