Carousel is a customized Panel, provides the ability to slide back and forth between different child items. It usually adds the items as in card layout and on slide it flips through the items. Carousel can be created using either ways, using Ext.Carousel class constructor or by using carousel xtype. Provides an indicator while toggling between items to notify the user to know where they are in the card stack. You can also disable the indicator by setting the indicatorconfiguration property to false. The direction configuration property allows user to set the direction of the Carousel. Default is ‘horizontal’.

Below is the example demonstrating the usage of Carousel.

Ext.setup({
	icon : 'icon.png',
	tabletStartupScreen : 'tablet_startup.png',
	phoneStartupScreen : 'phone_startup.png',
	glossOnIcon : false,
	
	onReady : function() {
		
		var title = new Ext.Toolbar({
			 title: 'Carousel Example'
		});
		
		var actionBar = new Ext.Toolbar({
            id: 'mytoolbar',
            dock: 'bottom',
            ui: 'light',
             items: [{
                xtype: "button",
                ui: "back",
                text: "Previous",
                handler: function(){
	carousel.prev();
	}
              },{
	xtype:'spacer'
              },{
                xtype: "button",
                ui: "forward",
                text: "Next",
                handler: function(){
	carousel.next();
	}
              }]            
	     });
		
		var carousel = new Ext.Carousel({
	            direction: 'horizontal',
	            items: [{
	                title: 'Tab 1',
	                html: 'Carousel Tab 1'
	            },{
	                title: 'Tab 2',
	                html: 'Carousel Tab 2'
	            },{
	                title: 'Tab 3',
	                html: 'Carousel Tab  3'
	            }]
	        });
		
		var formBase = new Ext.Panel({
			layout : 'fit',
			pinHeaders: true,
			id: 'formbase',
			name: 'formBase',
			fullscreen : true,
			items: [carousel],
			dockedItems: [title, actionBar]
		});

	Ext.apply(formBase, {
		fullscreen : true,
		autoRender : true,
		hideOnMaskTap : false		
	});

	formBase.show();
	}
});

[box type=”note” border=”full”]Note that, this example will work only on web-kit browser that supports Sencha touch. For best results you may use Google chrome browser or safari.[/box]

SenchaTouch Carousel Example In Action

This article is about: Sencha Touch,

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Discussions

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.