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

中间件编程

开发平台:

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. /**
  8.  * @class Ext.layout.ContainerLayout
  9.  * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
  10.  * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> is configured into
  11.  * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout
  12.  * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
  13.  * positioning services. To utilize a layout that provides sizing and positioning of child Components,
  14.  * specify an appropriate <tt>{@link Ext.Container#layout layout}</tt>.</p>
  15.  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  16.  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  17.  */
  18. Ext.layout.ContainerLayout = function(config){
  19.     Ext.apply(this, config);
  20. };
  21. Ext.layout.ContainerLayout.prototype = {
  22.     /**
  23.      * @cfg {String} extraCls
  24.      * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
  25.      * customized styles to the container or any of its children using standard CSS rules. See
  26.      * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
  27.      * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
  28.      * which assign a value by default:
  29.      * <div class="mdetail-params"><ul>
  30.      * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
  31.      * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
  32.      * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
  33.      * </ul></div>
  34.      * To configure the above Classes with an extra CSS class append to the default.  For example,
  35.      * for ColumnLayout:<pre><code>
  36.      * extraCls: 'x-column custom-class'
  37.      * </code></pre>
  38.      * </p>
  39.      */
  40.     /**
  41.      * @cfg {Boolean} renderHidden
  42.      * True to hide each contained item on render (defaults to false).
  43.      */
  44.     /**
  45.      * A reference to the {@link Ext.Component} that is active.  For example, <pre><code>
  46.      * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  47.      * </code></pre>
  48.      * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
  49.      * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
  50.      * and {@link Ext.layout.FitLayout}).  Read-only.  Related to {@link Ext.Container#activeItem}.
  51.      * @type {Ext.Component}
  52.      * @property activeItem
  53.      */
  54.     // private
  55.     monitorResize:false,
  56.     // private
  57.     activeItem : null,
  58.     // private
  59.     layout : function(){
  60.         var target = this.container.getLayoutTarget();
  61.         this.onLayout(this.container, target);
  62.         this.container.fireEvent('afterlayout', this.container, this);
  63.     },
  64.     // private
  65.     onLayout : function(ct, target){
  66.         this.renderAll(ct, target);
  67.     },
  68.     // private
  69.     isValidParent : function(c, target){
  70. return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
  71.     },
  72.     // private
  73.     renderAll : function(ct, target){
  74.         var items = ct.items.items;
  75.         for(var i = 0, len = items.length; i < len; i++) {
  76.             var c = items[i];
  77.             if(c && (!c.rendered || !this.isValidParent(c, target))){
  78.                 this.renderItem(c, i, target);
  79.             }
  80.         }
  81.     },
  82.     // private
  83.     renderItem : function(c, position, target){
  84.         if(c && !c.rendered){
  85.             c.render(target, position);
  86.             this.configureItem(c, position);
  87.         }else if(c && !this.isValidParent(c, target)){
  88.             if(typeof position == 'number'){
  89.                 position = target.dom.childNodes[position];
  90.             }
  91.             target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
  92.             c.container = target;
  93.             this.configureItem(c, position);
  94.         }
  95.     },
  96.     
  97.     // private
  98.     configureItem: function(c, position){
  99.         if(this.extraCls){
  100.             var t = c.getPositionEl ? c.getPositionEl() : c;
  101.             t.addClass(this.extraCls);
  102.         }
  103.         if (this.renderHidden && c != this.activeItem) {
  104.             c.hide();
  105.         }
  106.         if(c.doLayout){
  107.             c.doLayout(false, this.forceLayout);
  108.         }
  109.     },
  110.     // private
  111.     onResize: function(){
  112.         if(this.container.collapsed){
  113.             return;
  114.         }
  115.         var b = this.container.bufferResize;
  116.         if(b){
  117.             if(!this.resizeTask){
  118.                 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
  119.                 this.resizeBuffer = typeof b == 'number' ? b : 100;
  120.             }
  121.             this.resizeTask.delay(this.resizeBuffer);
  122.         }else{
  123.             this.runLayout();
  124.         }
  125.     },
  126.     
  127.     // private
  128.     runLayout: function(){
  129.         this.layout();
  130.         this.container.onLayout();
  131.     },
  132.     // private
  133.     setContainer : function(ct){
  134.         if(this.monitorResize && ct != this.container){
  135.             if(this.container){
  136.                 this.container.un('resize', this.onResize, this);
  137.                 this.container.un('bodyresize', this.onResize, this);
  138.             }
  139.             if(ct){
  140.                 ct.on({
  141.                     scope: this,
  142.                     resize: this.onResize,
  143.                     bodyresize: this.onResize
  144.                 });
  145.             }
  146.         }
  147.         this.container = ct;
  148.     },
  149.     // private
  150.     parseMargins : function(v){
  151.         if(typeof v == 'number'){
  152.             v = v.toString();
  153.         }
  154.         var ms = v.split(' ');
  155.         var len = ms.length;
  156.         if(len == 1){
  157.             ms[1] = ms[0];
  158.             ms[2] = ms[0];
  159.             ms[3] = ms[0];
  160.         }
  161.         if(len == 2){
  162.             ms[2] = ms[0];
  163.             ms[3] = ms[1];
  164.         }
  165.         if(len == 3){
  166.             ms[3] = ms[1];
  167.         }
  168.         return {
  169.             top:parseInt(ms[0], 10) || 0,
  170.             right:parseInt(ms[1], 10) || 0,
  171.             bottom:parseInt(ms[2], 10) || 0,
  172.             left:parseInt(ms[3], 10) || 0
  173.         };
  174.     },
  175.     /**
  176.      * The {@link Template Ext.Template} used by Field rendering layout classes (such as
  177.      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
  178.      * labeled and styled form Field. A default Template is supplied, but this may be
  179.      * overriden to create custom field structures. The template processes values returned from
  180.      * {@link Ext.layout.FormLayout#getTemplateArgs}.
  181.      * @property fieldTpl
  182.      * @type Ext.Template
  183.      */
  184.     fieldTpl: (function() {
  185.         var t = new Ext.Template(
  186.             '<div class="x-form-item {itemCls}" tabIndex="-1">',
  187.                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
  188.                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
  189.                 '</div><div class="{clearCls}"></div>',
  190.             '</div>'
  191.         );
  192.         t.disableFormats = true;
  193.         return t.compile();
  194.     })(),
  195.     /*
  196.      * Destroys this layout. This is a template method that is empty by default, but should be implemented
  197.      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
  198.      * @protected
  199.      */
  200.     destroy : Ext.emptyFn
  201. };
  202. Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;