View Full Version : get size and position of child panels

25 Apr 2011, 8:52 PM
i have an extjs panel container. each time i click on a button a child panel is created inside panel container. I can drag/drop , resize the child panels anywhere in the container. My issue is to get width,height,position of all the child panels and pass them to server side when i click on a save button. Since these child panels are created dynamically i dont know how to retrieve the size and position of child panels. how this can be done? any help would be appreciated.
This is what i have created so far

Ext.override(Ext.Panel, {
// private
initEvents : function(){

this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: '.6',
easing: 'backIn',
handles: 'all', // handles:'s' gives vertical resizing only
// minHeight: this.minHeight || 100,
// minWidth:this.minWidth || 100,
pinned: false,
this.resizer.on("resize", this.onResizer, this);
onResizer : function(oResizable, iWidth, iHeight, e) {

var p = new Ext.Panel({
border: false,
layout: 'absolute',
margins:'0 0 5 0',
ref: 'containerPanel',
resizable: true,
title: 'Container Panel',
buttons: [{
text: 'Add Panel',
handler: function() {
var childPanelCount = w.containerPanel.items.length;

var startYPosition = 10;
startYPosition = startYPosition * childPanelCount;

var childPanel = new Ext.Panel({
draggable: dragMeToHeckAndBack,
layout: 'fit',
height: 100,
title: 'New Panel ' + (childPanelCount + 1),
resizable: true,
width: 200,
x: 10,
y: startYPosition,
tools: tools


text: 'save',
handler: function() {}

var dragMeToHeckAndBack = {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
endDrag : function(e){

w = new Ext.Window({
height: 600,
layout: 'fit',
resizable: false,
width: 800,
items: [p]



25 Apr 2011, 9:28 PM
var box = childPanel.getBox();

'Box dimensions: '
+' width='+ box.width
+' height='+ box.height
+' x='+ box.x
+' y='+ box.y

If this is wirtten on click event i can get the required properties. But i will be dragging/resizing child panels and finally when save button is clicked i need to get the dimensions. Can anybody help?

26 Apr 2011, 3:54 AM
You can walk the list of child panels thusly:

var childPanelCount = yourParentPanel.items.length;
var childPanel = null;

for(var i = 0; i < childPanelCount; i++)
childPanel = yourParentPanel.items.get(i);
// call childPanel.getWidth(), getHeight(), etc.
// and store to an Array/JSON collection for later submit.

26 Apr 2011, 9:07 PM
thanks friend. I saved the dimensions and position of all the child panels and saved it as a json array which could be passed to server side through ajax call. Thanks for your solution :)

26 Apr 2011, 10:45 PM
Now when i click on the button child panels are added one below the other inside the container panel. Each time i click on the button i want the child panels to be displayed at a predefined position say x:20,y:20. How this can be done?

26 Apr 2011, 11:08 PM
The default position of child panel is relative. Each time a new child panel is added positioning is done relative to the previous child panel. Now i have changed the position to absolute which solves my problem.