我们如何在 EXTJS 4 门户示例的面板中添加最大化和最小化：
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html
完整的工作代码：
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
var mainColumnPanelId;
//var mainPanelId;
var itemNo=0;
this.tools= [
{
type:'minimize',
hidden:true,
scope:this,
handler: function(e, target, panel)
{
var cardPanel=Ext.getCmp("app-portal");
var c = panel.up("viewport");
var maximizePortletPanel = Ext.getCmp("maximizePortletPanel");
cardPanel.layout.setActiveItem(0);
var originalPanel=Ext.getCmp(mainColumnPanelId);
originalPanel.insert(itemNo,maximizePortletPanel.items.items[0]);
panel.tools['close'].setVisible(true);
panel.tools['collapse-top'].setVisible(true);
panel.tools['minimize'].setVisible(false);
panel.tools['maximize'].setVisible(true);
}
},
{
type:'maximize',
scope:this,
handler: function(e, target, panel)
{
var cardPanel=Ext.getCmp("app-portal");
var columnPanel = panel.ownerCt.ownerCt;
var maximizePortletPanel = Ext.getCmp("maximizePortletPanel");
mainColumnPanelId=columnPanel.getId();
var columnPanelItems=columnPanel.items.items;
for(var j=0;j<columnPanelItems.length;j++){
if(columnPanelItems[j].getId()==panel.ownerCt.getId()){
itemNo=j;
break ;
}
}
maximizePortletPanel.insert(0,panel.ownerCt);
cardPanel.layout.setActiveItem(1);
panel.tools['minimize'].setVisible(true);
panel.tools['close'].setVisible(false);
panel.tools['collapse-top'].setVisible(false);
panel.tools['maximize'].setVisible(false);
}
}];
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
region: 'center',
layout:'card',
items:[{
xtype: 'portalpanel',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.tools,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.tools,
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.tools,
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.tools,
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
},{ //title: 'Portlet',
xtype:'panel',
id:'maximizePortletPanel',
layout:'fit',
autoScroll:true
//border:true,
//frame:true
}]////
}]//
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});