PDA

View Full Version : Dynamically adding / resizing columns and portlets



Piruthu
19 Oct 2010, 10:14 PM
Hi All,

I am trying to modify the portal example (http://dev.sencha.com/deploy/dev/examples/portal/portal.html) to allow adding new columns dynamically and resizing of portlets.

Many of these related threads went unanswered:

http://www.sencha.com/forum/showthread.php?82810-Adding-removing-column-from-a-portal-with-a-ColumnLayout
http://www.sencha.com/forum/showthread.php?22774-Portal-Resizable-Portlets-and-Dynamic-Columns
http://www.sencha.com/forum/showthread.php?92664-Reset-PortalColumn-s-columnWidth-dynamically&p=439640#post439640

Could any one help me in this regard.

Many Thanks.

vitolini
27 Dec 2010, 4:18 PM
Did you get any solution to this problem? I need resizing of portlets (horizontally and vertically) too.

Thanks

Piruthu
27 Dec 2010, 8:28 PM
Not yet! Able to resize vertically (http://www.sencha.com/forum/showthread.php?18593-Portlet-vertical-resizing), but no luck with horizontal resizing yet.

Condor
28 Dec 2010, 12:58 AM
Resizing a portlet horizontally would mean having to intercept the beforeresize event of the Resizer and horizontally resize the PortalColumn ownerCt instead of the Portlet itself.

vitolini
28 Dec 2010, 1:05 AM
Condor,

Thanks for the hint. Do you mean the ownerCt of the portlet which is the PortalColumn, or you mean the ownerCt of the portalColumn ?

Piruthu
28 Dec 2010, 1:31 AM
Resizing a portlet horizontally would mean having to intercept the beforeresize event of the Resizer and horizontally resize the PortalColumn ownerCt instead of the Portlet itself.
Thanks Condor, tried increasing the columnWidth, currently my portal columns are rendered in the 'center' region and all three columns have .33 percentage width each.
Now while increasing the size of first column, the portlet on the third column is getting shifted to the next row (works like word wrap). I don't want to shrink the other columns either. Is there a way to grow the 'center' region to accomodate the extra width?
Thanks again!

Condor
28 Dec 2010, 1:33 AM
Only if you increase the width of the Portal container too.

Piruthu
6 Jan 2011, 12:17 AM
Thanks Condor!

Horizontal resizing made possible by
moving the Portal from the 'center' region to a new container in the center region and by changing the 'columnWidth' value to 'width' (in pixels)
and by changing the width of the container while resizing in the Portlet.js file


Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor : '100%',
frame : true,
collapsible : true,
draggable : true,
cls : 'x-portlet',
onRender : function(ct, position) {
Ext.ux.Portlet.superclass.onRender.call(this, ct, position);

this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: .6,
easing: 'backIn',
handles: 's e',
minHeight: this.minHeight || 100,
pinned: false
});
this.resizer.on("resize", this.onResizer, this);
},
onResizer : function(oResizable, iWidth, iHeight, e) {
var currentColumnWidth = this.ownerCt.getWidth();
this.ownerCt.setWidth(iWidth);
var containerWidth = this.ownerCt.ownerCt.getWidth();
this.ownerCt.ownerCt.setWidth(containerWidth+(iWidth - currentColumnWidth));

this.setHeight(iHeight);
this.setWidth(iWidth);
}
});

Ext.reg('portlet', Ext.ux.Portlet);