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

      0  

    Default Answered: Three-column Carousel (or List?)

    Answered: Three-column Carousel (or List?)


    I want to make 3-column vertical carousel (or list?). For example, https://dl.dropbox.com/u/3480160/carousel.png

    Is it possible?
    Attached Images

  2. Hi,

    You can use this :

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

    Attachment 38189

  3. #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.Carousel', {
        fullscreen: true,
    	layout:{
        	type:'hbox'
        },
        defaults: {
            styleHtmlContent: true
        },
    
    
        items: [
            {
                style: 'background-color: #759E60'
                , layout:'hbox'
                , items:[
                	{
                    	xtype:'panel',
                        width:130,
                        style: 'background-color: red'
                    },
                    {
                    	xtype:'panel',
                        width:130,
                        style: 'background-color: yellow; margin-left:10px'
                    },
                    {
                    	xtype:'panel',
                        width:130,
                        style: 'background-color: green; margin-left:10px'
                    }
                ]
            },
            {
                html : 'Item 2',
                style: 'background-color: #5E99CC'
            }
        ]
    });
    Output:
    carosoul.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

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

      0  

    Default


    No, you have carousel with two pages. One page contains 3 panels.
    On my screenshot 3 vertical carousels

  5. #4
    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 this :

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

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

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

      0  

    Default


    Thanks, friend.

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

      0  

    Default


    One more question:

    I want to replace one panel from carousel to list. List is prepared, but to show I must run "List.show()", how can I place list into panel? I can't find anything in documentation

  8. #7
    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    :   'carousel1',
                        cls     :   'card',
                        style: 'background-color: red'
                    }
                ]
            },
            {
            	xtype:'carousel'
                , items:[
                	{
                        html    :   'carousel2',
                        cls     :   'card',
                        style: 'background-color: yellow'
                    }
                ]
            },
            {
            	xtype:'list',
                widht:100,
                title:'list',
                itemTpl: '{title}',
                data: [
                   { title: 'Item 1' },
                   { title: 'Item 2' },
                   { title: 'Item 3' },
                   { title: 'Item 4' }
                ]
            }
        ]
    });
    Output:cc.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

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

      0  

    Default


    Thanks for reply. But I need to prepare list. For example,

    Code:
    Ext.regModel('Records', {
                                fields: ['Caption', 'imgURL']
                            });
                            
                            var DataStore = new Ext.data.JsonStore({
                                model: 'Records',
                                sorters: 'Caption',
                                
                                getGroupString: function(record) {
                                    return record.get('Caption')[0];
                                },
                                
                                data: [
                                   {Caption: 'First', imgURL: 'Image.png'},
                                   {Caption: 'Second', imgURL: 'Image.png'},
                                   {Caption: 'Third', imgURL: 'Image.png'},
                                   {Caption: 'Fourth', imgURL: 'Image.png'},
                                ]
                            });
                            
                            var List = new Ext.List({
                                fullscreen: false,
                                itemTpl: '<img src="{imgURL}" width="150" height="300" />',
                                store:  DataStore
                            });

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

      0  

    Default


    Oh, I solved it

    Code:
    {
    	xtype:      'list',
            flex:       1,
            store:  DataStore,
            itemTpl: '<img src="{imgURL}" width="150" height="300" />'
    }

Thread Participants: 1

Tags for this Thread