first app, help for construction

[tonin10]

Hello,

i try to made my first app, i'm totaly beginner with exJs.

i search help not for made my job but for unsterstand how can i do it.

so i try to describe the app :

first screen :
login panel

second screen :
a bottom bar and first icon : list of contact (per projet)
second icon, another list (list of projet)

for the moment i made a php page for login with ajax (index.php)
if ok we go to second page (index2.php)

for this it's ok
i have made my bottom bar but i don't now how change after the click (in doc i found html part)

i try to do the same like kitchenSink for construction but to hard for the moment.

So if someone can help me to make a good construction of this projets

if a click on my tabbar how can i change content ?
like this :
click on first icon =>
var content= new Ext.Panel({})

click on second icon => var content2 =new Ext.Panel({})

I hope you understand my poor english
thanks



code of js for index2.php for the moment no console.log works


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


var tapHandler = function(button, event) {
console.log('action','change');
};

//--- ecran accueil bar bas
var bottomTab = new Ext.TabPanel
({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'slide',
cover: false
},

defaults: {
scroll: 'vertical',
cls:'card card3'
},
items:[
{
title: 'Clients',
iconCls: 'user' ,
text:'lll'
},

{
title: 'Projets' ,
iconCls: 'settings' ,
ui: 'action',
handler : tapHandler
}
],

listeners :{
change:function()
{
console.log('action','change');
},
toggle:function()
{
console.log('action','toogle');
}
}

})



if (Ext.is.AndroidOS) {
bottomTab.items.unshift({
xtype: 'component',
styleHtmlContent: true,
html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
});
}

if (Ext.is.Phone) {
bottomTab.fullscreen = true;
} else {
Ext.apply(bottomTab, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}



}
});