PDA

View Full Version : how to get panel width, height, position of child panels



prajeesh_bs
25 Apr 2011, 4:34 AM
i have an extjs panel container. each time i click on a button a child panel is created inside panel container. I can drag/drop , resize the child panels anywhere in the container. My issue is to get width,height,position of all the child panels and pass them to 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
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.QuickTips.init();
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

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();
});
</script>

25 Apr 2011, 11:43 AM
Two issues:

What version of the framework?

Please reformat your code and wrap your code within [CODE] tags!

Please post in the proper forum next time.