Viewport.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Viewport
  3.  * @extends Ext.Container
  4.  * <p>A specialized container representing the viewable application area (the browser viewport).</p>
  5.  * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of
  6.  * the browser viewport and manages window resizing. There may only be one Viewport created
  7.  * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
  8.  * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
  9.  * method of any of its child Panels may themselves have a layout.</p>
  10.  * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
  11.  * for scrolling if needed using the {@link #autoScroll} config.</p>
  12.  * <p>An example showing a classic application border layout:</p><pre><code>
  13. new Ext.Viewport({
  14.     layout: 'border',
  15.     items: [{
  16.         region: 'north',
  17.         html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',
  18.         autoHeight: true,
  19.         border: false,
  20.         margins: '0 0 5 0'
  21.     }, {
  22.         region: 'west',
  23.         collapsible: true,
  24.         title: 'Navigation',
  25.         width: 200
  26.         // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
  27.     }, {
  28.         region: 'south',
  29.         title: 'Title for Panel',
  30.         collapsible: true,
  31.         html: 'Information goes here',
  32.         split: true,
  33.         height: 100,
  34.         minHeight: 100
  35.     }, {
  36.         region: 'east',
  37.         title: 'Title for the Grid Panel',
  38.         collapsible: true,
  39.         split: true,
  40.         width: 200,
  41.         xtype: 'grid',
  42.         // remaining grid configuration not shown ...
  43.         // notice that the GridPanel is added directly as the region
  44.         // it is not "overnested" inside another Panel
  45.     }, {
  46.         region: 'center',
  47.         xtype: 'tabpanel', // TabPanel itself has no title
  48.         items: {
  49.             title: 'Default Tab',
  50.             html: 'The first tab's content. Others may be added dynamically'
  51.         }
  52.     }]
  53. });
  54. </code></pre>
  55.  * @constructor
  56.  * Create a new Viewport
  57.  * @param {Object} config The config object
  58.  * @xtype viewport
  59.  */
  60. Ext.Viewport = Ext.extend(Ext.Container, {
  61.     /*
  62.      * Privatize config options which, if used, would interfere with the
  63.      * correct operation of the Viewport as the sole manager of the
  64.      * layout of the document body.
  65.      */
  66.     /**
  67.      * @cfg {Mixed} applyTo @hide
  68.      */
  69.     /**
  70.      * @cfg {Boolean} allowDomMove @hide
  71.      */
  72.     /**
  73.      * @cfg {Boolean} hideParent @hide
  74.      */
  75.     /**
  76.      * @cfg {Mixed} renderTo @hide
  77.      */
  78.     /**
  79.      * @cfg {Boolean} hideParent @hide
  80.      */
  81.     /**
  82.      * @cfg {Number} height @hide
  83.      */
  84.     /**
  85.      * @cfg {Number} width @hide
  86.      */
  87.     /**
  88.      * @cfg {Boolean} autoHeight @hide
  89.      */
  90.     /**
  91.      * @cfg {Boolean} autoWidth @hide
  92.      */
  93.     /**
  94.      * @cfg {Boolean} deferHeight @hide
  95.      */
  96.     /**
  97.      * @cfg {Boolean} monitorResize @hide
  98.      */
  99.     initComponent : function() {
  100.         Ext.Viewport.superclass.initComponent.call(this);
  101.         document.getElementsByTagName('html')[0].className += ' x-viewport';
  102.         this.el = Ext.getBody();
  103.         this.el.setHeight = Ext.emptyFn;
  104.         this.el.setWidth = Ext.emptyFn;
  105.         this.el.setSize = Ext.emptyFn;
  106.         this.el.dom.scroll = 'no';
  107.         this.allowDomMove = false;
  108.         this.autoWidth = true;
  109.         this.autoHeight = true;
  110.         Ext.EventManager.onWindowResize(this.fireResize, this);
  111.         this.renderTo = this.el;
  112.     },
  113.     fireResize : function(w, h){
  114.         this.onResize(w, h, w, h);
  115.     }
  116. });
  117. Ext.reg('viewport', Ext.Viewport);