PDA

View Full Version : Auto Resize of window with increase of form fields within it



adibhagra
3 Nov 2009, 1:32 AM
hey guys,

i have a window with a form , certain form fields are generated dynamically based on selections made in combo boxes.eg : when i select yes within my combo box a new fieldset gets added.however my fieldset is not completely visible because of the window size and hence i wanted to know how can my window resize itself automatically to fit in the fields.

regards,

ice

Animal
3 Nov 2009, 2:02 AM
See if this helps:



Ext.override(Ext.BoxComponent, {
/**
* Synchronizes the height of this Container to exactly fit the specified descendant Component's content
* height with no scrollbars if possible, taking into account Panel and Window framing elements.
* The height calculated is constrained to either the passed maximum value, or the height of the browser viewport.
* @param {Component} c (Optional - defaults to this Container) The Component who's content height to sync to.
* @param {Number} min (Optional - defaults to 40) The minimum height to set this Container to.
* @param {Number} max (Optional - defaults to the browser viewport height) The maximum height to set this Container to.
*/
syncContentHeight: function(c, min, max) {
c = c || this;
min = min || 40;
max = max || Ext.lib.Dom.getViewportHeight();
var el = c.getContentTarget ? c.getContentTarget() : c.getEl();
el.setStyle('height', 'auto');
for (var h = el.dom.offsetHeight; c && c !== this.ownerCt; c = c.ownerCt) {
if (c.getFrameHeight) {
h += c.getFrameHeight();
}
}
this.setHeight(Math.max(Math.min(h, max), min)).doConstrain && this.doConstrain();
}
});

adibhagra
3 Nov 2009, 3:00 AM
thanks a lot animal , seems like this would work , however i'm not sure as to how i'm supposed to use this override ,



Ext.override(Ext.BoxComponent, {
/**
* Synchronizes the height of this Container to exactly fit the specified descendant Component's content
* height with no scrollbars if possible, taking into account Panel and Window framing elements.
* The height calculated is constrained to either the passed maximum value, or the height of the browser viewport.
* @param {Component} c (Optional - defaults to this Container) The Component who's content height to sync to.
* @param {Number} min (Optional - defaults to 40) The minimum height to set this Container to.
* @param {Number} max (Optional - defaults to the browser viewport height) The maximum height to set this Container to.
*/
syncContentHeight: function(c, min, max) {
c = c || this;
min = min || 40;
max = max || Ext.lib.Dom.getViewportHeight();
var el = c.getContentTarget ? c.getContentTarget() : c.getEl();
el.setStyle('height', 'auto');
for (var h = el.dom.offsetHeight; c && c !== this.ownerCt; c = c.ownerCt) {
if (c.getFrameHeight) {
h += c.getFrameHeight();
}
}
this.setHeight(Math.max(Math.min(h, max), min)).doConstrain && this.doConstrain();
}
});

am i supposed to replace Ext.BoxComponent with my window object , otherwise where do i put this code . i'm sorry for being so ignorant but guess i need your help on this one.