Three-column Carousel (or List?)

[indapublic]

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

Is it possible?

[sword-it]

Hi,

You can use following 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

[indapublic]

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

[sword-it]

Hi,

You can use this :

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

[indapublic]

Thanks, friend.

[indapublic]

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

[sword-it]

Hi,

You can use following 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

[indapublic]

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

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

[indapublic]

Oh, I solved it

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