In this article, I’m explaining how to dynamically add items in tab panel in sencha touch.
Tab panels are a great way to allow users to switch between several pages. Each component 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 to the project and attach an initialize event to the tab panel view component using id : tabpanel, this event will fire onTabpanelinitialize() 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 to the onTabpanelInitialize() function and set the properties of the containers as shown above.
Output
Leave Comment