PDA

View Full Version : Get panel width in viewport's afterrender listener



rafaelrp
17 Apr 2012, 4:18 AM
I'm trying to get with of a panel in a viewport in afterrender listener but i'm getting only with=2, same with height

on firebug returns correctlty (with=1548)


listeners: { afterrender: {
//element: 'el', //bind to the underlying el property on the panel
fn: function(){
var widthCenter = Ext.getCmp("centerPanel").getWidth();
var heightCenter = Ext.getCmp("centerPanel").getHeight();

heightCenter = (heightCenter-heightSouth-43);
console.info(widthCenter);
}
}
},


Thanks ! ~o)

friend
18 Apr 2012, 7:05 AM
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Panel width test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
listeners: {
afterrender: function(component, eOpts) {
Ext.Msg.alert('Panel Width', component.down('panel[title="Center"]').getWidth());
}
},
items: [{
xtype: 'panel',
region: 'west',
title: 'West',
width: 200
},{
xtype: 'panel',
region: 'center',
title: 'Center'
}]
});
});
</script>
</head>

<body>
</body>
</html>

rafaelrp
18 Apr 2012, 9:22 AM
I've did different,



listeners: {
afterlayout: {
fn: function(){
Ext.getCmp("southPanel").on({
'resize' : {
fn: function(){
var heightMapa = Ext.getCmp("centerPanel").getHeight();
var heightSouth = Ext.getCmp("southPanel").getHeight();

Ext.getDom("frameMapa").height = heightMapa;
document.getElementById("frameMapa").contentWindow.mapRoot.getDiv().style.height = heightMapa;

Ext.getCmp("panelGrid").setHeight(heightSouth-28);

console.info("south => resize");
}
}
});
},
single: true
}
},


Thanks !