PDA

View Full Version : Maximize Portlets in Portal Example ExtjS4.2



sowmyaranjan
22 May 2013, 7:15 AM
I am using ExtJS4.2 version and new to Ext.I saw couple of examples but found ExtJs portal is more interesting.I am dynamically loading portal columns from JSON files and rendering panels to it.

But I am unable to maximize the portlet panel to the browser ViewPort.
I found out this forum discussion
http://www.sencha.com/forum/showthread.php?42838-SOLVED-Maximize-Portlets-in-Portal-Example.
But this is not working.

I could not found any post related to maximize Portlet on ExtJs4 version.

Please help me.

slemmon
24 May 2013, 8:44 AM
There's not a maximize() method for portlets as they're a custom extension of Panel used only for the purpose of that example. But, you could probably get creative. You could have the viewport owning the portal have a card layout with the portal view being the first card and the second card be an empty container with fit layout. Maximizing would effectively be removing the portlet from the portal, adding it to the card 2 container, and setting card 2 as active.

Not that I've tested any of this - just spitballing. But seems feasable.

sowmyaranjan
25 May 2013, 12:09 PM
Hi Slemmon

Thanks for your reply.I got it working.......B)

gundakiran
7 Jun 2013, 10:35 AM
If possible, can you please put the sample code for 'maximizing' the portlet ? were you able to restore as well ?

Thank you

goyal.nitj
17 Jul 2013, 11:57 AM
Can you paste the code please. Minimize is not working for me.

goyal.nitj
18 Jul 2013, 4:56 AM
Fully working code:




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

fangzhouxing
11 Aug 2013, 12:32 AM
@goyal.nitj, great! Thank you for the fully working code!