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

Ext.Panel的getBox方法返回大小和位置：

var box = my_panel.getBox();

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

获取Ext JS子面板的尺寸和位置

1 个答案: