ExtJs4 编写首页面，Ext.container.Viewport，layout，border，accordion，treepanel

var content = '<div class="portlet-content">aaaa</div>';
Ext.onReady(function(){
 Ext.QuickTips.init();
 Ext.create('Ext.container.Viewport', {
  layout: 'border',
        items: [{
            region: 'north',
            height:80,
            html: '<h1>logo</h1>',
            xtype: "panel",
            autoHeight: true,
            border: false,
            bbar:[{
             text:'办公桌面'
            },{xtype:'tbseparator',id:'adminSeparator',hidden:false},{
             text:'用户管理'
            },'-',{
             text:'退出'
            },'-',{
             text:'帮助'
            }]
        }, {
            region: 'center',
            layout: 'border',
            items: [{
             region: 'west',
             title: '功能菜单',
             split: true,
             minWidth:100,
             maxWidth:350,
             collapsible: true,
             width: 200,
             animCollapse: true,
             defaults: {
                    bodyStyle: 'padding:5px',
                    collapsed:true 
                },
             layout:{
                    type: 'accordion',
                    hideCollapseTool:false,
                    collapseFirst:true,
                    animate: true
                },
                items: [{
                 title:'<center>通知公告</center>',
                    autoScroll: true,
                    border: false,
                    xtype:'treepanel',
                    rowLines:false,
                    rootVisible:false,
     animate:true,
                    root: {
                        text: 'Root Node',
                        expanded: true,
                        children: [{
                            text: '发布通告',
                            leaf: true
                        }, {
                            text: '浏览通告',
                            leaf: true
                        }]
                    }
                   
                },{
                 title:'<center>内部邮件</center>',
                    html: '222222222',
                    autoScroll: true,
                    border: false
                },{
                 title:'<center>考勤管理</center>',
                    html: '33333333',
                    autoScroll: true,
                    border: false
                },{
                 title:'<center>工作日志</center>',
                    html: '44444444444',
                    autoScroll: true,
                    border: false
                },{
                 title:'<center>人事通告</center>',
                    html: '44444444444',
                    autoScroll: true,
                    border: false
                }]
            },{
             region: 'center',
             xtype: 'tabpanel',
             activeItem: 0,
             items: {
                 title: '首页',
                 html: '主功能区'
             }
            }]
        }, {
            region: 'south',
            html: '这里放置版权信息',
            split: true,
            height: 50
        }]
    });
});

附带一张图片：