PDA

View Full Version : Sencha Touch MVC application with header and footer



bundinho
18 Jul 2011, 3:22 AM
I'm new to Sencha Touch. Therefore, I'm building a MVC application with header and footer. Now I try to implement the header to all pages:

First I have a main panel view:


tagip.views.MainPanel = Ext.extend(Ext.Panel,{
layout: 'vbox',
scroll: 'vertical',
cls : 'general',

initComponent: function () {

Ext.apply(tagip.views, {
header: new tagip.views.Header(),
viewport : new tagip.views.Viewport()
});

Ext.apply(this, {
items: [
tagip.views.header,
tagip.views.viewport
]
});

tagip.views.MainPanel.superclass.initComponent.apply(this, arguments);
}
});

Then I have a header view:


tagip.views.Header = Ext.extend(Ext.Panel, {
height: 20,
html : "<h1>Header</h1>",

initComponent: function (){
tagip.views.Header.superclass.initComponent.apply(this, arguments);
}
});

And Last I have a "card" viewport containing the pages of my applications :


tagip.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen:true,
cls: 'general',
minWidth: 320,
flex: 1,
layout: 'card',
scroll: 'vertical',
cardSwitchAnimation: 'slide',
activeItem: 0,

//items:{tagip.views.header},

initComponent: function() {
//put instances of cards into app.views namespace


Ext.apply(tagip.views, {
login : new tagip.views.Login(),
home : new tagip.views.Home()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
tagip.views.login,
tagip.views.home
]
});
tagip.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

But when I launch the application, I only see the content of this viewport without the header.

Can anyone help me please ?