/hippo/src/main/webapp/ext/src/widgets/layout/ContainerLayout.js

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