Blame | Last modification | View Log | RSS feed
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @class Ext.Viewport
* @extends Ext.Container
* A specialized container representing the viewable application area (the browser viewport).
* <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>
* Example showing a classic application border layout :<pre><code>
new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
},
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',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
</code></pre>
* @constructor
* Create a new Viewport
* @param {Object} config The config object
*/
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.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('viewport', Ext.Viewport);