items:[{
id: 'app-portal',
xtype: 'portalpanel',
padding: '5 5 5 5',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: '已发公告',
tools: this.getTools(),
items: Ext.create('Ext.grid.Panel',{
store: getAdviceListStore('sended'),
columns: [
{xtype: 'rownumberer'},
{ text: '标题', dataIndex: 'adviceForm.adviceTitle', flex: 1 },
{ text: '发布时间', dataIndex: 'adviceForm.insertTime',width:150}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
}),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: '收件箱',
tools: this.getTools(),
items: Ext.create('Ext.grid.Panel',{
store: getAdviceListStore('sended'),
columns: [
{xtype: 'rownumberer'},
{ text: '发送人', dataIndex: 'adviceForm.sendTime',width:100},
{ text: '标题', dataIndex: 'adviceForm.adviceTitle', flex: 1 },
{ text: '发布时间', dataIndex: 'adviceForm.insertTime',width:150}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
}),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id:'aaa',
title:'测试啦啦啦啦啊',
html:'asdjklllllllllllllllllllllllladasdad</br>'
+'asdajdkljadlkjalskdjklajdlakjdlajkdlakjdlakd</br>'
+'asdalksdl;askd;lad;aksd;lakd;alksd;laskd;'
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: '工作计划',
// tools: this.getTools(),
// html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
html:'<div class="portlet-content">'+'aaaasdadadasjfalsjflajsldfja'+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
function getTools(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
}
function onPortletClose(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
}
function showMsg(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
}
function clearMsg(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
//CSS代码
#app-header {
color: #596F8F;
font-size: 22px;
font-weight: 200;
padding: 8px 15px;
text-shadow: 0 1px 0 #fff;
}
#app-msg {
background: #D1DDEF;
border: 1px solid #ACC3E4;
padding: 3px 15px;
font-weight: bold;
font-size: 13px;
position: absolute;
right: 0;
top: 0;
}
.x-panel-ghost {
z-index: 1;
}
.x-border-layout-ct {
background: #DFE8F6;
}
.x-portal-body {
padding: 0 0 0 8px;
}
.x-portal .x-portal-column {
/* columns must have vertical padding to avoid losing dimensions when empty */
padding: 8px 8px 0 0;
}
.x-portal .x-panel-dd-spacer {
border: 2px dashed #99bbe8;
background: #f6f6f6;
border-radius: 4px;
-moz-border-radius: 4px;
margin-bottom: 10px;
}
.x-portlet {
margin-bottom:10px;
padding: 1px;
}
.x-portlet .x-panel-body {
background: #fff;
}
.portlet-content {
padding: 10px;
font-size: 11px;
}
#app-options .portlet-content {
padding: 5px;
font-size: 12px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
.info {
background-image:url(../shared/icons/fam/information.png);
}
效果图: