new vertical resizing portal

[user_xm]

fixed code bugs from vertical resizing portal.
original post:http://extjs.com/forum/showthread.php?t=18593


Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame: true,
collapsible: true,
draggable: true,
cls: 'x-portlet',
//resizer properties
heightIncrement:16,
pinned:false,
duration: .6,
easing: 'backIn',
transparent:false,

onRender : function(ct, position) {
Ext.ux.Portlet.superclass.onRender.call(this,ct,position);

//2008.1.11 xm
var createProxyProtoType=Ext.Element.prototype.createProxy;
Ext.Element.prototype.createProxy=function(config){
return Ext.DomHelper.append(this.dom, config, true);
};

this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: this.duration,
easing: this.easing,
handles: 's',
transparent:this.transparent,
heightIncrement:this.heightIncrement,
minHeight: this.minHeight || 100,
pinned: this.pinned
});
this.resizer.on('resize', this.onResizer, this);

Ext.Element.prototype.createProxy=createProxyProtoType;
//2008.1.11 xm
},

onResizer : function(oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
},

onCollapse : function(doAnim, animArg) {
this.el.setHeight('');
Ext.ux.Portlet.superclass.onCollapse.call(this, doAnim, animArg);
}
});

[franckxx]

Hi user_XM,

JUST GREAT !!

Thx for share

[Tim Vasil]

Out of curiosity, what were the bugs you fixed? When I run your version of the code I get an "Object expected" error in a create method on the line "return A[C.xtype||D](C)"

[trowa]

thanks a lot.
and don't forget put those code at last.


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


fixed code bugs from vertical resizing portal.
original post:http://extjs.com/forum/showthread.php?t=18593


Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame: true,
collapsible: true,
draggable: true,
cls: 'x-portlet',
//resizer properties
heightIncrement:16,
pinned:false,
duration: .6,
easing: 'backIn',
transparent:false,

onRender : function(ct, position) {
Ext.ux.Portlet.superclass.onRender.call(this,ct,position);

//2008.1.11 xm
var createProxyProtoType=Ext.Element.prototype.createProxy;
Ext.Element.prototype.createProxy=function(config){
return Ext.DomHelper.append(this.dom, config, true);
};

this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: this.duration,
easing: this.easing,
handles: 's',
transparent:this.transparent,
heightIncrement:this.heightIncrement,
minHeight: this.minHeight || 100,
pinned: this.pinned
});
this.resizer.on('resize', this.onResizer, this);

Ext.Element.prototype.createProxy=createProxyProtoType;
//2008.1.11 xm
},

onResizer : function(oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
},

onCollapse : function(doAnim, animArg) {
this.el.setHeight('');
Ext.ux.Portlet.superclass.onCollapse.call(this, doAnim, animArg);
}
});

[ojas]

hi user_xm,
thank you for sharing your code...:D
i am facing a problem while moving the portlets....:-?
in my application there are various portlets each contians a grid. each portlet has different height but when i move smaller portlet below the bigger one and again bigger portlet is moved somewhere else the smaller portlets does not show the portlet body only header part is seen
i am trying to figure out why this is happening
can you please help me to find the solution?

thank you,
Ojas

[moegal]

I added 2 things to the portlet. Hope you don't mind.

layout: 'fit'
and
canResize:true



Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame: true,
collapsible: true,
draggable: true,
layout: 'fit',
cls: 'x-portlet',
//resizer properties
canResize: true,
heightIncrement:16,
pinned:false,
duration: .6,
easing: 'backIn',
transparent:false,

onRender : function(ct, position) {
Ext.ux.Portlet.superclass.onRender.call(this,ct,position);

var createProxyProtoType=Ext.Element.prototype.createProxy;
Ext.Element.prototype.createProxy=function(config){
return Ext.DomHelper.append(this.dom, config, true);
};
if(this.canResize==true){
this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: this.duration,
easing: this.easing,
handles: 's',
transparent:this.transparent,
heightIncrement:this.heightIncrement,
minHeight: this.minHeight || 100,
pinned: this.pinned
});
this.resizer.on('resize', this.onResizer, this);
}
Ext.Element.prototype.createProxy=createProxyProtoType;
},

onResizer : function(oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
},

onCollapse : function(doAnim, animArg) {
this.el.setHeight('');
Ext.ux.Portlet.superclass.onCollapse.call(this, doAnim, animArg);
}
});
Ext.reg('portlet', Ext.ux.Portlet);


Thanks, Marty

[CrazyEnigma]

I'm combining this Portlet code with maximize code, just wanted to know if anyone knows the problem that I am facing. The resizing shims are off in nowhere. On maximize, should I be turning off resizing, and how can I fix the resizing so it's not preventing the maximize?

Maximize works if I don't resize using the resizer. Here is how I get there:

Resize the Portlet.
Maximize the Portlet. - This is where the shims are off, and the maximize is cut off.
Restore the Portlet to view other portlets in the portal - The shims are not in the right location.


var minimizeTool = {
id:'minimize',
hidden:true,
qtip: 'Minimize Panel',
handler: function(e, target, panel)
{
panel.tools['toggle'].setVisible(true);
panel.tools['maximize'].setVisible(true);
panel.tools['minimize'].setVisible(false);
panel.tools['close'].setVisible(true);
panel.ownerCt.columnWidth = panel.ownerCt.originalColumnWidth;
panel.setSize(panel.originalSize);
panel.setHeight(panel.originalHeight);
var p = panel.nextSibling();
while (p != null)
{
p.show();
p = p.nextSibling();
}
p = panel.previousSibling();
while (p != null)
{
p.show();
p = p.previousSibling();
}
var c = panel.originalOwnerCt.nextSibling();
while (c != null)
{
c.columnWidth = c.originalColumnWidth;
c.show();
c = c.nextSibling();
}

c = panel.originalOwnerCt.previousSibling();
while (c != null)
{
c.columnWidth = c.originalColumnWidth;
c.show();
c = c.previousSibling();
}
panel.draggable = true;
panel.ownerCt.ownerCt.doLayout(false);
}
};
var maximizeTool = {
id:'maximize',
qtip: 'Maximize Panel',
handler: function(e, target, panel)
{
// Resize Columns

panel.originalOwnerCt = panel.ownerCt;
panel.originalSize = panel.getSize();
panel.originalHeight = panel.getInnerHeight();

var p = panel.nextSibling();
while (p != null)
{
p.hide();
p = p.nextSibling();
}
p = panel.previousSibling();
while (p != null)
{
p.hide();
p = p.previousSibling();
}
var c = panel.originalOwnerCt.nextSibling();
while (c != null)
{
c.originalColumnWidth = c.columnWidth;
c.columnWidth = 0.01;
c.hide();
c = c.nextSibling();
}

c = panel.originalOwnerCt.previousSibling();
while (c != null)
{
c.originalColumnWidth = c.columnWidth;
c.columnWidth = 0.01;
c.hide();
c = c.previousSibling();
}

// Set the column width to 1.0
panel.ownerCt.columnWidth = 1.0;
panel.draggable = false;
panel.tools['toggle'].setVisible(false);
panel.tools['maximize'].setVisible(false);
panel.tools['minimize'].setVisible(true);
panel.tools['close'].setVisible(false);

panel.setWidth(panel.ownerCt.ownerCt.getWidth());
panel.setHeight(panel.ownerCt.ownerCt.getHeight() - 55);
panel.ownerCt.ownerCt.doLayout(false);
}
};