CenterLayout.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:2k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. // We are adding these custom layouts to a namespace that does not
  8. // exist by default in Ext, so we have to add the namespace first:
  9. Ext.ns('Ext.ux.layout');
  10. /**
  11.  * @class Ext.ux.layout.CenterLayout
  12.  * @extends Ext.layout.FitLayout
  13.  * <p>This is a very simple layout style used to center contents within a container.  This layout works within
  14.  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
  15.  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
  16.  * the layout.  The layout does not require any config options, although the child panel contained within the
  17.  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
  18.  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
  19.  * Example usage:</p>
  20.  * <pre><code>
  21. // The content panel is centered in the container
  22. var p = new Ext.Panel({
  23.     title: 'Center Layout',
  24.     layout: 'ux.center',
  25.     items: [{
  26.         title: 'Centered Content',
  27.         width: '75%',
  28.         html: 'Some content'
  29.     }]
  30. });
  31. // If you leave the title blank and specify no border
  32. // you'll create a non-visual, structural panel just
  33. // for centering the contents in the main container.
  34. var p = new Ext.Panel({
  35.     layout: 'ux.center',
  36.     border: false,
  37.     items: [{
  38.         title: 'Centered Content',
  39.         width: 300,
  40.         autoHeight: true,
  41.         html: 'Some content'
  42.     }]
  43. });
  44. </code></pre>
  45.  */
  46. Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
  47. // private
  48.     setItemSize : function(item, size){
  49.         this.container.addClass('ux-layout-center');
  50.         item.addClass('ux-layout-center-item');
  51.         if(item && size.height > 0){
  52.             if(item.width){
  53.                 size.width = item.width;
  54.             }
  55.             item.setSize(size);
  56.         }
  57.     }
  58. });
  59. Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;