---
title: "Dynamically Add Items in Tab Panel in Sencha Touch"  
description: "In this article, I’m explaining how to dynamically add items in tab panel in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-06  
updated: 2020-01-27  
canonical: https://www.mindstick.com/articles/1313/dynamically-add-items-in-tab-panel-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# Dynamically Add Items in Tab Panel in Sencha Touch

In this article, I’m explaining how to dynamically [add items](https://www.mindstick.com/forum/160381/how-to-add-items-to-a-list-collection-in-c-sharp) in tab panel in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

Tab panels are a great way to allow users to [switch](https://www.mindstick.com/blog/104495/switch-bringing-new-advancements-in-the-education-management-system) between several pages. Each [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in the Tab Panel will have its own tab, which gets display when the user taps on the icon. Tabs can be displayed on the top or the bottom of the Tab Panel.

To add items dynamically in tab panel:

##### Step 1:

Drag-n-drop the tab panel into the canvas from the toolbox, and give name MyTabPanel and set alias name mytabpanel.

```
Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',
 
    config: {
        id: 'tabpanel',
        itemId: 'tabpanel',
        ui: 'light',
        defaults: {
            styleHtmlContent: true
        },
        tabBar: {
            docked: 'bottom',
            ui: 'light'
        }
    }
});
```

Through tabBar config, we are positioning the tab panel to the bottom of the screen.

##### Step 2:

Add a [controller](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc) to the [project](https://yourviews.mindstick.com/story/1788/things-to-ensure-your-construction-project-is-successful) and attach an initialize event to the tab panel view component using id : tabpanel, this event will fire onTabpanelinitialize() [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-function) when the tab panel is initializing or loading on the screen.

```
Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            "#tabpanel": {
                initialize: 'onTabpanelInitialize'
            }
        }
    },

    onTabpanelInitialize: function(component, eOpts) {
        var DynamicPanel = [
        {
            xtype:'container',
            title: 'home',
            iconCls: 'home',
            html: 'This is Home Page'
        },
        {
            xtype:'container',
            title: 'About Me',
            iconCls: 'info',
            html: 'This is About Me Page'
        },
        {
            xtype:'container',
            title: 'Contact Me',
            iconCls: 'user',
            html: 'This is Contact Page'
        }
        ];

        component.add(DynamicPanel);
    }
});
```

\

Add three [containers](https://www.mindstick.com/interview/2194/which-containers-use-a-flowlayout-as-their-default-layout-in-java) to the onTabpanelInitialize() function and set the [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) of the containers as shown above.

##### Output

![Dynamically Add Items in Tab Panel in Sencha Touch](https://www.mindstick.com/mindstickarticle/79e8d374-0a74-4c94-9aa6-bc01f4023791/images/4d315686-9832-42fe-b844-6626d57b4a47.png)

---

Original Source: https://www.mindstick.com/articles/1313/dynamically-add-items-in-tab-panel-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.