/*!
|
* Ext JS Library 3.1.0
|
* Copyright(c) 2006-2009 Ext JS, LLC
|
* licensing@extjs.com
|
* http://www.extjs.com/license
|
*/
|
/**
|
* @class Ext.Viewport
|
* @extends Ext.Container
|
* <p>A specialized container representing the viewable application area (the browser viewport).</p>
|
* <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of
|
* the browser viewport and manages window resizing. There may only be one Viewport created
|
* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
|
* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
|
* method of any of its child Panels may themselves have a layout.</p>
|
* <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
|
* for scrolling if needed using the {@link #autoScroll} config.</p>
|
* <p>An example showing a classic application border layout:</p><pre><code>
|
new Ext.Viewport({
|
layout: 'border',
|
items: [{
|
region: 'north',
|
html: '<h1 class="x-panel-header">Page Title</h1>',
|
autoHeight: true,
|
border: false,
|
margins: '0 0 5 0'
|
}, {
|
region: 'west',
|
collapsible: true,
|
title: 'Navigation',
|
width: 200
|
// the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
|
}, {
|
region: 'south',
|
title: 'Title for Panel',
|
collapsible: true,
|
html: 'Information goes here',
|
split: true,
|
height: 100,
|
minHeight: 100
|
}, {
|
region: 'east',
|
title: 'Title for the Grid Panel',
|
collapsible: true,
|
split: true,
|
width: 200,
|
xtype: 'grid',
|
// remaining grid configuration not shown ...
|
// notice that the GridPanel is added directly as the region
|
// it is not "overnested" inside another Panel
|
}, {
|
region: 'center',
|
xtype: 'tabpanel', // TabPanel itself has no title
|
items: {
|
title: 'Default Tab',
|
html: 'The first tab\'s content. Others may be added dynamically'
|
}
|
}]
|
});
|
</code></pre>
|
* @constructor
|
* Create a new Viewport
|
* @param {Object} config The config object
|
* @xtype viewport
|
*/
|
Ext.Viewport = Ext.extend(Ext.Container, {
|
/*
|
* Privatize config options which, if used, would interfere with the
|
* correct operation of the Viewport as the sole manager of the
|
* layout of the document body.
|
*/
|
/**
|
* @cfg {Mixed} applyTo @hide
|
*/
|
/**
|
* @cfg {Boolean} allowDomMove @hide
|
*/
|
/**
|
* @cfg {Boolean} hideParent @hide
|
*/
|
/**
|
* @cfg {Mixed} renderTo @hide
|
*/
|
/**
|
* @cfg {Boolean} hideParent @hide
|
*/
|
/**
|
* @cfg {Number} height @hide
|
*/
|
/**
|
* @cfg {Number} width @hide
|
*/
|
/**
|
* @cfg {Boolean} autoHeight @hide
|
*/
|
/**
|
* @cfg {Boolean} autoWidth @hide
|
*/
|
/**
|
* @cfg {Boolean} deferHeight @hide
|
*/
|
/**
|
* @cfg {Boolean} monitorResize @hide
|
*/
|
|
initComponent : function() {
|
Ext.Viewport.superclass.initComponent.call(this);
|
document.getElementsByTagName('html')[0].className += ' x-viewport';
|
this.el = Ext.getBody();
|
this.el.setHeight = Ext.emptyFn;
|
this.el.setWidth = Ext.emptyFn;
|
this.el.setSize = Ext.emptyFn;
|
this.el.dom.scroll = 'no';
|
this.allowDomMove = false;
|
this.autoWidth = true;
|
this.autoHeight = true;
|
Ext.EventManager.onWindowResize(this.fireResize, this);
|
this.renderTo = this.el;
|
},
|
|
fireResize : function(w, h){
|
this.onResize(w, h, w, h);
|
}
|
});
|
Ext.reg('viewport', Ext.Viewport);
|
