获取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

的Ext.Panel收益大小和位置的getBox方法：

var box = my_panel.getBox(); 

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