在线等，ExtJs4.2 viewport 显示问题，请高手帮忙看看viewport的问题出在哪里

Question

我用ExtJs4.2写的一个页面框架，写出来后发现头、菜单、内容区等等都不显示，请高手帮帮忙，看看问题到底出在哪里了？
app.js
Ext.Loader.setConfig({enabled : true}); // 动态加载的核心 
Ext.application({
name : 'SJXC',
appFolder : 'app',
autoCreateViewport: true, // 自动创建视图
controllers : [
'Main'
]
});Main.js
Ext.define('SJXC.controller.Main', {
extend : 'Ext.app.Controller',
init : function(){
}
});Header.js
Ext.define('SJXC.view.Header',{
extend : 'Ext.Component',
initComponent : function(){
Ext.applyIf(this, {
xtype : 'box',
cls : 'header',
region : 'north',
html : '<h1>管理系统</h1>',
height : 30
});
this.callParent(arguments);
}
});Menu.js
Ext.define('SJXC.view.Menu', {
extend : 'Ext.tree.Panel',
initComponent : function(){
Ext.apply(this, {
id : 'menu-panel',
title : '系统菜单',
iconCls : 'icon-menu',
margins : '0 0 -1 1',
region : 'west',
border : false,
enableDD : false,
split : true,
width : 212,
minSize : 130,
maxSize : 300,
rootVisible : false,
containerScroll : true,
collapsible : true,
autoScroll : false
});
this.callParent(arguments);
}
});South.js
Ext.define('SJXC.view.South', {
extend : 'Ext.toolbar.Toolbar',
initComponent : function(){
Ext.apply(this,{
id : 'botton',
region : 'south',
title : '首页',
height : 23,
items : ["首页"]
});
this.callParent(arguments);
}
});TabPanel.js
Ext.define('SJXC.view.TabPanel', {
extend : 'Ext.tab.Panel',
initComponent : function(){
Ext.apply(this, {
id : 'content-panel',
region : 'center',
defaults : {
autoScroll : true,
bodyPadding : 10
},
activeTab : 0,
border : false,
items : [{
id : 'HomePage',
title : '首页',
iconCls : 'home',
layout : 'fit'
}]
});
this.callParent(arguments);
}
});Viewport.js
Ext.define('SJXC.view.Viewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
hideBorders : true,
requires : [
'SJXC.view.Header',
'SJXC.view.Menu',
'SJXC.view.TabPanel',
'SJXC.view.South'
],
initComponent : function(){
var me = this;
Ext.apply(me, {
items : [{
id : 'desk',
layout : 'border',
items : [
Ext.create['SJXC.view.Header'],
Ext.create['SJXC.view.Menu'],
Ext.create['SJXC.view.TabPanel'],
Ext.create['SJXC.view.South']
]
}]
});
me.callParent(arguments);
}
});ExtJs4.2viewport

Answer 1

autoCreateViewport: true, // 自动创建视图
至少这一句是多余的
关于App.js文件的写法您可以参照如下
Ext.Loader.setConfig({ enabled: true }); //开启动态加载
    Ext.Loader.setPath(
        {
            'AppWellCtrl': 'AppWellCtrl'
        });
Ext.application({
        name: 'AppWellCtrl', //为应用程序起一个名字,相当于命名空间
        appFolder: Ext.Loader.getPath('AppWellCtrl'),
        controllers: [//声明所用到的控制层
            'MainCtrl'
        ],
        launch: function () {//开始
            Ext.tip.QuickTipManager.init();
            Ext.widget('homeMainViewport');
        }
    });