View Full Version : first app, help for construction

28 Oct 2010, 8:14 AM

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

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

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

var tapHandler = function(button, event) {

//--- 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'
title: 'Clients',
iconCls: 'user' ,

title: 'Projets' ,
iconCls: 'settings' ,
ui: 'action',
handler : tapHandler

listeners :{


if (Ext.is.AndroidOS) {
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