Get dimensions and position of Ext JS child panel

I have an Ext JS panel container. Each time I click on a button, a child panel is created inside a panel container. I can drag–drop and resize the child panels anywhere in the container.

My issue is to get the width, height, and position of all the child panels and pass them to the server side when I click on a 'save' button. 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.contain开发者_StackOverflow社区erPanel.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();

The getBox method of an Ext.Panel returns size and position:

var box = my_panel.getBox();

alert(
    'Box dimensions: '
    +' width='+ box.width
    +' height='+ box.height
    +' x='+ box.x
    +' y='+ box.y
);