PDA

View Full Version : extjs panel resizing



prajeesh_bs
24 Apr 2011, 10:37 PM
I have an extjs panel container. Each time i click on add button a new child panel will be added inside the container.I need to make these child panels resizable.How this can be done?

prajeesh_bs
25 Apr 2011, 12:43 AM
this is my code.pls help
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.QuickTips.init();

var p = new Ext.Panel({
border: false,
layout: 'absolute',
ref: 'containerPanel',
resizable: true,
title: 'Container Panel'
});

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,
layout: 'fit',
resizable: false,
width: 800,
items: [p],
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

});

w.containerPanel.add(childPanel);
w.containerPanel.doLayout();
}
}]
});

w.show();
});

prajeesh_bs
25 Apr 2011, 3:27 AM
After a lot of googling i have found out the method for dragging and resizing panels. Now the issue is as follows.
I have a set of child panels created dynamically by clicking a button. I need to pass the width, height,position of all the child panels to server side when i click on save button. How this can be done?

bhomass
25 Dec 2011, 12:06 AM
could you please give ref to the articles that show how to drag and resize a panel? I need to do the same.

Thanks