get size and position of child panels

[prajeesh_bs]

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(){

                        if(this.draggable){
                            this.initDraggable();
                        }
                        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,
                            transparent:true
                        });
                        this.resizer.on("resize", this.onResizer, this);
                    },
                    onResizer : function(oResizable, iWidth, iHeight, e) {
                        this.setHeight(iHeight);
                        this.setWidth(iWidth);
                        //alert(iHeight);
                    }
                    
                });
                var p = new Ext.Panel({
                    border: false,
                    layout: 'absolute',
                    autoScroll:true,
                    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

                                });

                                w.containerPanel.add(childPanel);
                                w.containerPanel.doLayout();
                            }
                        },
                        {
                            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){
                        this.panel.el.setX(this.x);
                        this.panel.el.setY(this.y);
                    }
                };
        
                w = new Ext.Window({
                    height: 600,
                    autoScroll:true,
                    layout: 'fit',
                    resizable: false,
                    width: 800,
                    items: [p]
                    
                });
        
                w.show();
            });

[prajeesh_bs]

var box = childPanel.getBox();

                alert(
                    '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?

[friend]

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.
}

[prajeesh_bs]

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

[prajeesh_bs]

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?

[prajeesh_bs]

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.