PDA

View Full Version : panel.height property vs panel.getHeight() method



vitolini
29 Dec 2010, 4:11 PM
I am trying to solve an issue and i spent more than enough time on this and can't find a solution on the forum :(

I have a portal and give the portlets (panels) a predefined height (300) in the height property of the initial config object. After I create the portlet and add it to the portal column. panel.height is 300 but panel.getHeight() gives back 225. The problem is I also have a resizer for the panel and try to get the final size after resize and save it to the database so it can be loaded back when the page is loaded. In the resize event the height is calculated off of 225 base. So If I increase the height for a few pixels I get 235 instead of 225. But I can't save 235 it really must be 310 (if the increase was 10 pixels) What am I doing wrong here? I tried various options with the panel (getOuterSize(), getFrameHeight(), getHeight()) and none of them seem to give me the correct height i gave at the configuration...



panel = createEmptyPortlet('panel1', 'Panel 1', 500, 300);
column.add(panel);
column.doLayout();
console.log(panel.height+":"+panel.getHeight()); //This prints 300:225

function createEmptyPortlet(id, title, width, height)
{

var panel = new Ext.ux.Portlet({
id :'dashboard_'+id,
title: title,
collapsible: true,
border: true,
width: width,
height: height,
layout: 'anchor',
listeners: {
render: function(p) {
createPanelResizer(p);
}
}
});

return panel;
}

function createPanelResizer(panel)
{
var resizer = new Ext.Resizable(panel.getEl(), {
handles: 's',
pinned: true,
animate: true,
resizeElement: function() {
var box = this.proxy.getBox();
panel.updateBox(box);
if (panel.layout)
{
var c = panel.doLayout();
}

return box;
}
});

resizer.on("resize", function(r, width, height, event){
console.log(height); ///// It prints relative to 225 here...
savePanelHeight(panel, height);
});
}