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
}]
});
});
附带一张图片: