Получить размеры и положение дочерней панели Ext JS

Question

У меня есть контейнер Ext JS.Каждый раз, когда я нажимаю на кнопку, внутри контейнера панели создается дочерняя панель.Я могу перетащить и изменить размер дочерних панелей в любом месте контейнера.

Моя проблема заключается в том, чтобы получить ширину, высоту и положение всех дочерних панелей и передать их на серверную сторону, когда я нажимаю кнопку «Сохранить».Как это можно сделать?Буду признателен за любую помощь.

Это то, что я создал до сих пор:

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

Answer 1

Метод getBox Ext.Panel возвращает размер и положение:

var box = my_panel.getBox();

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