Proportional Window Sizes

[bpjohnson]

Here's a quick plugin for Ext.Window that will set the initial window size to be a percentage of the available space, with the 'height' and 'width' attributes acting as minHeight and minWidth. Also, you can choose to maintain the aspect ratio between your height and width when sizing.

For example, if you want to create a window with a percentage size of .66, and a minimum height and width of 400 and 600 you do:


win = new Ext.Window({
layout:'fit',
width:600,
height:400,
closeAction:'hide',
plain: true,
plugins: [ new Ext.ux.plugins.ProportionalWindows() ],
aspect: true,
percentage: .66,
items: [{title: 'Hello World', html: 'lorem ipsum'}],
});

win.show();In a viewport of 1024x768, the window would be 675x446 (because we constrained the aspect ratio). In a viewport of 1600x1200 the window would be 1056x697. However, if your desktop area was 800x600, the window would be created at 600x400 because we've hit our minimums.

With 'aspect: false' the various sizes would be: 1024x768 -> 675x507, 1600x1200 -> 1056x792, 800x600 -> 600x400.

Here's the code:


Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.ProportionalWindows = function(config) {
Ext.apply(this, config);
};

Ext.extend(Ext.ux.plugins.ProportionalWindows, Ext.util.Observable, {
init:function(win) {
Ext.apply(win, {
onRender:win.onRender.createSequence(function(ct, position) {
var ctr = this.container;
var ctrW = ctr.getWidth();
var ctrH = ctr.getHeight();
if (this.aspect) {
// maintain aspect ratio
var ratio = this.height / this.width;
var newWidth = Math.round(ctrW * this.percentage);
var newHeight = Math.round(newWidth * ratio);
} else {
var newWidth = Math.round(ctrW * this.percentage);
var newHeight = Math.round(ctrH * this.percentage);
}
newWidth = (newWidth > this.width)?newWidth:this.width;
newHeight = (newHeight > this.height)?newHeight:this.height;
this.setSize(newWidth, newHeight);
})// End onRender
}
);
} // end of function init
}); // end of extend

[franckxx]

hi bpjohnson,

You have GREAT ideas !!!

This plug is very nice....

THX for provide cool plugins for community =D>


PS : Sorry for my english

[george.antoniadis]

Extremelly nice and usefull plugin! :)
Thanks for sharing.

[george.antoniadis]

Just in case anyone has problems with their window height with this plugin...
The plugin uses a % of the body element, so if you don't really have any html it won't work...
Use something like:


body {
height: 100%;
}

for it to play nice. :)

Great ux mate! tnxxx

[tof]

Thanks !