PDA

View Full Version : Minimum ViewPort Size Extension



rpiwonka
22 Apr 2009, 1:45 PM
This is a rough implementation of a viewport extension that will size up and down with the browser, unless the minimum height or width are reached. This is rough and was tested briefly only on IE7. If you like it, be my guest, make it better. I am sure there would be some changes for Firefox and other supported browsers, but there is only so much time in the day. If we end up using this on my project I will re-post any upgrades.

CSS necessary:

.minSize-viewport, .minSize-viewport body{

margin: 0;
padding: 0;
border: 0 none;
overflow: auto !important;
}
DIV.minSize-viewport
{
top:0;
left:0;
position:absolute;
}

Here is the extension you would use in place of a viewport:


Ext.ux.MinSizeViewport = Ext.extend(Ext.Container, {
minHeight: 768,
minWidth: 1024,
initComponent: function()
{
Ext.Viewport.superclass.initComponent.call(this);
document.getElementsByTagName('html')[0].className += ' minSize-viewport';
this.el = Ext.DomHelper.append(Ext.getBody(), '<div class="minSizeViewPort" style="postion:absolute;"></div>', true);

this.allowDomMove = false;

Ext.EventManager.onWindowResize(this.fireResize, this);
var bodySize = Ext.getBody().getSize();
this.fireResize(bodySize.width, bodySize.height);
this.setPagePosition(0, 0);
this.renderTo = this.el;
},

fireResize: function(w, h)
{
var newSize = { width: 0, height: 0 };
newSize.width = Math.max(w, this.minWidth);
newSize.height = Math.max(h, this.minHeight);
this.el.setSize(newSize);
this.doLayout();


this.fireEvent('resize', this, newSize.width, newSize.height, newSize.width, newSize.height);
}
});