Sencha Touch TabPanel example

This example will help you to create TabPanel in Sencha touch. TabPanel is another type of container used to automatically set a top-docked or bottom-docked toolbar with automatically generated buttons for every child item.

Tapping any of the button flips through items. Items added to TabPanel are known as “cards”. TabPanel can be created using either ways, using Ext.TabPanel class constructor or by using tabpanel xtype.

Below example shows the usages of Sencha Touch TabPanel

Ext.setup({
	icon : 'icon.png',
	tabletStartupScreen : 'tablet_startup.png',
	phoneStartupScreen : 'phone_startup.png',
	glossOnIcon : false,

	onReady : function() {
		var toolbar = new Ext.Toolbar({
			dock : 'top',
			title : 'Toolbar Sample'
		});

		var tabPanel = new Ext.TabPanel({
			dock : 'bottom',
			styleHtmlContent : true,
			tabBar : {
				dock : 'bottom',
				layout : {
					pack : 'center'
				}
			},
			defaults : {
				scroll : 'vertical'
			},
			items : [{
				title : 'Home',
				html : '<h2>Home</h2>',
				iconCls : 'home'
			}, {
				title : 'Settings',
				html : '<h2>Settings</h2>',
				iconCls : 'settings'
			}, {
				title : 'Favourites',
				html : '<h2>Favourit</h2>',
				iconCls : 'favorites',
				badgeText : '2'
			}]
		});

		var panel = new Ext.Panel({
			fullscreen : true,
			dockedItems : [toolbar, tabPanel],
			layout : 'fit',
			scroll : 'vertical'
		});

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

		panel.show();
	}
});

Below is the output of the following program, Figure (A) displays the TabBar docked to bottom and (B) represents the TabBar docked to top. Sencha touch doesn’t display icon for top docked TabBar even it is it is configured with iconCls property. The badgeText configuration property used to display the notification icon to user, as shown in the image below.

SenchaTouch TabPanel Example In Action