2
我有一個Ext JS面板容器。每次點擊一個按鈕時,面板容器內都會創建一個子面板。我可以拖放並調整容器中任何位置的子面板的大小。獲取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();
如何能在我的代碼被應用。我將拖動/調整一些子面板的大小,之後當我單擊保存按鈕時,我需要獲取當前所有子面板的大小和位置。 – prajeesh 2011-04-26 05:08:44
您可以通過迭代父面板的「項目」屬性來查看任何面板的子項。如果您將父項存儲在「w.containerPanel」中,則可以將函數傳遞給w.containerPanel.items.each,並在傳遞給它的每個子面板上調用getBox。 – owlness 2011-04-26 13:11:55
現在當我點擊按鈕子面板添加一個在容器面板下面的一個。每次我點擊按鈕時,我都希望將子面板顯示在預定位置,例如x:20,y:20。如何做到這一點? – prajeesh 2011-04-27 06:46:26