5 minutes

Sencha Touch TabPanel example

By Editorial @stacktips, On Sep 17, 2023 Sencha Touch 2.38K Views

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

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.

SenchaTouch TabPanel Example In Action

stacktips avtar


StackTips provides programming tutorials, how-to guides and code snippets on different programming languages.