Sencha Touch MVC application with header and footer

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 开发者_JAVA技巧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 ?

The best way to handle this is to create and register your header / footer panels.

Header:

app.views.Navigation = Ext.extend(Ext.Panel, {
id: 'navigation',
height: '60',
layout: {
    type:'hbox',
    align:'stretch'
},
defaults:{flex:'1'},
style: 'text-align:center',
items: [
{
    html: '<a href="#">Item 1</a>'
},{
    html: '<a href="#">Item 2</a>'
},{
    html: '<a href="#">Item 3</a>'
}],  
initComponent : function() {
    app.views.Navigation.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('navigation', app.views.Navigation);

Footer:

app.views.Footer = Ext.extend(Ext.Panel, {
items: {
    xtype: 'panel',
    id: 'footer',
    html: '<p>Copyright 2011 Your Company, LLC. All Rights Reserved<br><a href="#">Privacy Policy</a>'
},  
initComponent : function() {
    app.views.Footer.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('footer', app.views.Footer);

Example view using your header and footer:

app.views.Home = Ext.extend(Ext.Panel, {
scroll: 'vertical',
items: [{
    xtype: 'navigation'
},{
    xtype: 'panel',
html: '<p>this is your content</p>'
},{
    xtype: 'footer'
}],     
initComponent : function() {
    app.views.Home.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('home', app.views.Home);

Then you can render the 'home' view in your controller like this:

var home = this.render({
        xtype: 'home',
        listeners: {
            deactivate: function(home) {
                home.destroy();
            }
        }
    });

    this.application.viewport.setActiveItem(home);

I would add your header content as either an xtype: toolbar or simply to the dockedItems: property. Because this is part of the containing panel, the cards with in it will all share these docked items.

In your MainPanel definition:

// ...

cls: 'general',
dockedItems: [{
        html : "<h1>Header</h1>"
}],

// ...