view release on metacpan or  search on metacpan

share/docs/source/Container.html  view on Meta::CPAN

<span id='Ext-Container-method-add'>    /**
</span>     * &lt;p&gt;Adds {@link Ext.Component Component}(s) to this Container.&lt;/p&gt;
     * &lt;br&gt;&lt;p&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/u&gt; :
     * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
     * &lt;li&gt;Fires the {@link #beforeadd} event before adding&lt;/li&gt;
     * &lt;li&gt;The Container's {@link #defaults default config values} will be applied
     * accordingly (see &lt;code&gt;{@link #defaults}&lt;/code&gt; for details).&lt;/li&gt;
     * &lt;li&gt;Fires the {@link #add} event after the component has been added.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * &lt;br&gt;&lt;p&gt;&lt;b&gt;Notes&lt;/b&gt;&lt;/u&gt; :
     * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
     * &lt;li&gt;If the Container is &lt;i&gt;already rendered&lt;/i&gt; when &lt;code&gt;add&lt;/code&gt;
     * is called, you may need to call {@link #doLayout} to refresh the view which causes
     * any unrendered child Components to be rendered. This is required so that you can
     * &lt;code&gt;add&lt;/code&gt; multiple child components if needed while only refreshing the layout
     * once. For example:&lt;pre&gt;&lt;code&gt;
var tb = new {@link Ext.Toolbar}();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')
tb.add({text:'Button 2'});
tb.{@link #doLayout}();             // refresh the layout
     * &lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;i&gt;Warning:&lt;/i&gt; Containers directly managed by the BorderLayout layout manager
     * may not be removed or added.  See the Notes for {@link Ext.layout.BorderLayout BorderLayout}
     * for more details.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @param {...Object/Array} component
     * &lt;p&gt;Either one or more Components to add or an Array of Components to add.  See
     * &lt;code&gt;{@link #items}&lt;/code&gt; for additional information.&lt;/p&gt;
     * @return {Ext.Component/Array} The Components that were added.
     */
    add : function(comp){
        this.initItems();
        var args = arguments.length &gt; 1;
        if(args || Ext.isArray(comp)){
            var result = [];
            Ext.each(args ? arguments : comp, function(c){
                result.push(this.add(c));
            }, this);
            return result;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));
        var index = this.items.length;
        if(this.fireEvent('beforeadd', this, c, index) !== false &amp;&amp; this.onBeforeAdd(c) !== false){
            this.items.add(c);
            // *onAdded
            c.onAdded(this, index);
            this.onAdd(c);
            this.fireEvent('add', this, c, index);
        }
        return c;
    },

<span id='Ext-Container-method-onAdd'>    onAdd : function(c){
</span>        // Empty template method
    },

<span id='Ext-Container-method-onAdded'>    // private
</span>    onAdded : function(container, pos) {
        //overridden here so we can cascade down, not worth creating a template method.
        this.ownerCt = container;
        this.initRef();
        //initialize references for child items
        this.cascade(function(c){
            c.initRef();
        });
        this.fireEvent('added', this, container, pos);
    },

<span id='Ext-Container-method-insert'>    /**
</span>     * Inserts a Component into this Container at a specified index. Fires the
     * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
     * Component has been inserted.
     * @param {Number} index The index at which the Component will be inserted
     * into the Container's items collection
     * @param {Ext.Component} component The child Component to insert.&lt;br&gt;&lt;br&gt;
     * Ext uses lazy rendering, and will only render the inserted Component should
     * it become necessary.&lt;br&gt;&lt;br&gt;
     * A Component config object may be passed in order to avoid the overhead of
     * constructing a real Component object if lazy rendering might mean that the
     * inserted Component will not be rendered immediately. To take advantage of
     * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
     * property to the registered type of the Component wanted.&lt;br&gt;&lt;br&gt;
     * For a list of all available xtypes, see {@link Ext.Component}.
     * @return {Ext.Component} component The Component (or config object) that was
     * inserted with the Container's default config values applied.
     */
    insert : function(index, comp) {
        var args   = arguments,
            length = args.length,
            result = [],
            i, c;
        
        this.initItems();
        
        if (length &gt; 2) {
            for (i = length - 1; i &gt;= 1; --i) {
                result.push(this.insert(index, args[i]));
            }
            return result;
        }
        
        c = this.lookupComponent(this.applyDefaults(comp));
        index = Math.min(index, this.items.length);
        
        if (this.fireEvent('beforeadd', this, c, index) !== false &amp;&amp; this.onBeforeAdd(c) !== false) {
            if (c.ownerCt == this) {
                this.items.remove(c);
            }
            this.items.insert(index, c);
            c.onAdded(this, index);
            this.onAdd(c);
            this.fireEvent('add', this, c, index);
        }
        
        return c;
    },

<span id='Ext-Container-method-applyDefaults'>    // private
</span>    applyDefaults : function(c){
        var d = this.defaults;
        if(d){
            if(Ext.isFunction(d)){
                d = d.call(this, c);

share/docs/source/Container.html  view on Meta::CPAN

        var hl = this.hasLayout;
        if(this.ownerCt){
            // Only ever buffer if we've laid out the first time and we have one pending.
            return hl ? !this.hasLayoutPending() : false;
        }
        // Never buffer initial layout
        return hl;
    },

<span id='Ext-Container-method-hasLayoutPending'>    // private
</span>    hasLayoutPending: function(){
        // Traverse hierarchy to see if any parent container has a pending layout.
        var pending = false;
        this.ownerCt.bubble(function(c){
            if(c.layoutPending){
                pending = true;
                return false;
            }
        });
        return pending;
    },

<span id='Ext-Container-method-onShow'>    onShow : function(){
</span>        // removes css classes that were added to hide
        Ext.Container.superclass.onShow.call(this);
        // If we were sized during the time we were hidden, layout.
        if(Ext.isDefined(this.deferLayout)){
            delete this.deferLayout;
            this.doLayout(true);
        }
    },

<span id='Ext-Container-method-getLayout'>    /**
</span>     * Returns the layout currently in use by the container.  If the container does not currently have a layout
     * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout.
     * @return {ContainerLayout} layout The container's layout
     */
    getLayout : function(){
        if(!this.layout){
            var layout = new Ext.layout.AutoLayout(this.layoutConfig);
            this.setLayout(layout);
        }
        return this.layout;
    },

<span id='Ext-Container-method-beforeDestroy'>    // private
</span>    beforeDestroy : function(){
        var c;
        if(this.items){
            while(c = this.items.first()){
                this.doRemove(c, true);
            }
        }
        if(this.monitorResize){
            Ext.EventManager.removeResizeListener(this.doLayout, this);
        }
        Ext.destroy(this.layout);
        Ext.Container.superclass.beforeDestroy.call(this);
    },

<span id='Ext-Container-method-cascade'>    /**
</span>     * Cascades down the component/container heirarchy from this component (called first), calling the specified function with
     * each component. The scope (&lt;i&gt;this&lt;/i&gt;) of
     * function call will be the scope provided or the current component. The arguments to the function
     * will be the args provided or the current component. If the function returns false at any point,
     * the cascade is stopped on that branch.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope of the function (defaults to current component)
     * @param {Array} args (optional) The args to call the function with (defaults to passing the current component)
     * @return {Ext.Container} this
     */
    cascade : function(fn, scope, args){
        if(fn.apply(scope || this, args || [this]) !== false){
            if(this.items){
                var cs = this.items.items;
                for(var i = 0, len = cs.length; i &lt; len; i++){
                    if(cs[i].cascade){
                        cs[i].cascade(fn, scope, args);
                    }else{
                        fn.apply(scope || cs[i], args || [cs[i]]);
                    }
                }
            }
        }
        return this;
    },

<span id='Ext-Container-method-findById'>    /**
</span>     * Find a component under this container at any level by id
     * @param {String} id
     * @deprecated Fairly useless method, since you can just use Ext.getCmp. Should be removed for 4.0
     * If you need to test if an id belongs to a container, you can use getCmp and findParent*.
     * @return Ext.Component
     */
    findById : function(id){
        var m = null, 
            ct = this;
        this.cascade(function(c){
            if(ct != c &amp;&amp; c.id === id){
                m = c;
                return false;
            }
        });
        return m;
    },

<span id='Ext-Container-method-findByType'>    /**
</span>     * Find a component under this container at any level by xtype or class
     * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
     * the default), or true to check whether this Component is directly of the specified xtype.
     * @return {Array} Array of Ext.Components
     */
    findByType : function(xtype, shallow){
        return this.findBy(function(c){
            return c.isXType(xtype, shallow);
        });
    },

<span id='Ext-Container-method-find'>    /**
</span>     * Find a component under this container at any level by property
     * @param {String} prop
     * @param {String} value
     * @return {Array} Array of Ext.Components
     */
    find : function(prop, value){
        return this.findBy(function(c){
            return c[prop] === value;
        });
    },

<span id='Ext-Container-method-findBy'>    /**
</span>     * Find a component under this container at any level by a custom function. If the passed function returns
     * true, the component will be included in the results. The passed function is called with the arguments (component, this container).
     * @param {Function} fn The function to call
     * @param {Object} scope (optional)
     * @return {Array} Array of Ext.Components
     */
    findBy : function(fn, scope){
        var m = [], ct = this;
        this.cascade(function(c){
            if(ct != c &amp;&amp; fn.call(scope || c, c, ct) === true){
                m.push(c);
            }
        });
        return m;
    },

<span id='Ext-Container-method-get'>    /**
</span>     * Get a component contained by this container (alias for items.get(key))
     * @param {String/Number} key The index or id of the component
     * @deprecated Should be removed in 4.0, since getComponent does the same thing.
     * @return {Ext.Component} Ext.Component
     */
    get : function(key){
        return this.getComponent(key);
    }
});

Ext.Container.LAYOUTS = {};
Ext.reg('container', Ext.Container);
</pre>
</body>
</html>