View Full Version : Ext Pannel is not resizing according to Users PC resolution

8 Mar 2010, 2:46 AM
Hi All,

I am new in using EXT JS. I am creating a form from Ext. Window and rending the ext js panel in it. But on the different resolution, it is not resizing automatically and also not aligning to IE.

I have tried layouts:'fit.' But it does not working. I am copiing some of the code of the that form

Suggestions.Dialog = Ext.extend(Ext.Window, (function(){

return {
// width: '767px'
width: '750px'
,layout: 'fit'
//, title: '<span class="dialogCaption">I-Marketing Editorial Team</span>'
, header: false
, closable: false
, border:false
//, plain:true
, bodyStyle:'padding:5px;'
, resizable: false
, frame: false
, border: false
, minWidth: 300
, minHeight: 200
, hideBorders: true
, modal: true
,autoHeight: true
, onRender: onRender
} // return;

function onRender() {

Suggestions.Dialog.superclass.onRender.apply(this, arguments);
var form = new Ext.form.FormPanel({
items: [
// graphics and captions


If anybody have some idea then please suggest

8 Mar 2010, 4:39 AM
1. width and height should be specified as Numbers and not as Strings!
2. Consider overriding the constructor or initComponent instead of modifying the prototype and overriding onRender.

8 Mar 2010, 4:46 AM
Well i got the solution from some site. Here I have given the x and y position of EXT.Window.

var browserWidth = Ext.lib.Dom.getViewWidth();
var browserHeight = Ext.lib.Dom.getViewHeight();

var x = (browserWidth -750)/2;
var y = (browserHeight -750)/2;

It give the resolution of the user. I have just subtracted the x and y position from 1/4 of resolution.