ExtJS4 OA主页portal实现

	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);
}

效果图：