PDA

View Full Version : Main app navagation



anajafi
29 Sep 2013, 6:25 PM
I need some help. I have my application created but I am not sure how to make it so that it will show a tab panel at the bottom without hard coding every page in.

Can someone please help me?

This is my main app:



Ext.application({
name: 'app',


views: ['home', 'events', 'opportunities', 'projects', 'contact'],



launch: function() {
// The whole app UI lives in this tab panel

var events = Ext.create('app.view.events');
var home = Ext.create('app.view.home');
var opportunities = Ext.create('app.view.opportunities');
var projects = Ext.create('app.view.projects');
var contact = Ext.create('app.view.contact');

var view = Ext.create('Ext.TabPanel', {
fullscreen: true,
scrollable: {
direction: 'vertical',
directionlock: true
},
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
items:[home]
},{
title: 'Events',
iconCls: 'star',
items:[events],
listeners: {
tap: function() {
alert("You tapped me");
}
}

},{
title: 'Opportunity',
iconCls: 'team',
items:[opportunities]
},{
title: 'Projects',
iconCls: 'compose',
items:[projects]
},{
title: 'Contact Us',
iconCls: 'locate',
items:[contact]
}

]
});
});

j.aakash
29 Sep 2013, 6:45 PM
I would Rather Suggest you to make your app this way :




Ext.application({ name: 'app', views: ['home', 'events', 'opportunities', 'projects', 'contact'], launch: function() { // The whole app UI lives in this tab panel /* * Dont Create these instances here..... * var home = Ext.create('app.view.home'); * var events = Ext.create('app.view.events'); * var opportunities = Ext.create('app.view.opportunities'); * var projects = Ext.create('app.view.projects'); * var contact = Ext.create('app.view.contact'); */ Ext.Viewport.add( Ext.create('Ext.TabPanel', { fullscreen: true, defaults: { styleHtmlContent: true }, layout: { type: 'card', animation: { type: 'fade' }, items: [ {xtype:'home'}, {xtype:'events'}, {xtype:'opportunities'}, {xtype:'projects'}, {xtype:'contact'} ] }));//Close viewport//close launch//Close Ext.application

fmoseley
1 Oct 2013, 12:01 PM
Change your app to use a tabpanel
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.tab.Panel