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

	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

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.

Sencha Touch TabPanel example

[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 TabPanel Example In Action

This article is about: Sencha Touch,


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 (, DZone MVB and founder of


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