namespace is undefined

[sachindev]

Hi All,
I am new to Ext JS 4 and creating my first app. I am getting an error "namespace is undefined" thru firebug. Please help me out.
My application has 3 section header ,content and footer. Problem is coming with the footer class?:

Header:


Ext.define('Ponderosa.view.Header',{
extend:'Ext.Component',
alias:'widget.header',
autoEl : {
tag : 'div',
html : '<H1>Header</H1>'
}
});
Footer:

Ext.define('Ponderosa.view.Footer',{
extend:'Ext.Component',
alias:'widget.footer',
autoEl : {
tag : 'div',
html : '<H1>Footer</H1>'
}});

app:


Ext.application({
name :'Ponderosa',
appFolder : 'app',
launch : function(){
Ext.create('Ext.container.Viewport',{
renderTo:Ext.getBody(),
layout : {
type : 'border' // Using border layout
},
defaults : {
split : false
},
items:[
{
xtype:'header',
height:50,
region:'north'
},
{
xtype:'tabpanel',
region:'center',
items:[
{
title:'tab 1'
}
]
},
{
xtype:'footer',
height:50,
region: 'south'

}
]
});
}
});

[skirtle]

Please use [CODE] tags when posting code.

Are you using the dynamic loader or are you just including files using script tags? Either way, are you definitely including the relevant files? Take a look through Firebug's Net tab, see if the files are being loaded. With the dynamic loader you'll need to require the classes, if you're not using the loader then just make sure you have the correct script tags listed in your HTML.

You should probably add the views config, that'll implicitly require the relevant files:


Ext.application({
name :'Ponderosa',
appFolder : 'app',
views: ['Footer', 'Header'],

...

On a side note, you shouldn't have a renderTo on a viewport. You may also be interested in the setting autoCreateViewport:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Application-cfg-autoCreateViewport