📄 container.js
字号:
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/** * @class Ext.Container * @extends Ext.BoxComponent * Base class for any {@link Ext.BoxComponent} that can contain other components. Containers handle the basic * behavior of containing items, namely adding, inserting and removing them. The specific layout logic required * to visually render contained items is delegated to any one of the different {@link #layout} classes available. * This class is intended to be extended and should generally not need to be created directly via the new keyword. */Ext.Container = Ext.extend(Ext.BoxComponent, { /** @cfg {Boolean} monitorResize * True to automatically monitor window resize events to handle anything that is sensitive to the current size * of the viewport. This value is typically managed by the chosen {@link #layout} and should not need to be set manually. */ /** * @cfg {String} layout * The layout type to be used in this container. If not specified, a default {@link Ext.layout.ContainerLayout} * will be created and used. Valid values are: accordion, anchor, border, card, column, fit, form and table. * Specific config values for the chosen layout type can be specified using {@link #layoutConfig}. */ /** * @cfg {Object} layoutConfig * This is a config object containing properties specific to the chosen layout (to be used in conjunction with * the {@link #layout} config value). For complete details regarding the valid config options for each layout * type, see the layout class corresponding to the type specified:<ul class="mdetail-params"> * <li>{@link Ext.layout.Accordion}</li> * <li>{@link Ext.layout.AnchorLayout}</li> * <li>{@link Ext.layout.BorderLayout}</li> * <li>{@link Ext.layout.CardLayout}</li> * <li>{@link Ext.layout.ColumnLayout}</li> * <li>{@link Ext.layout.FitLayout}</li> * <li>{@link Ext.layout.FormLayout}</li> * <li>{@link Ext.layout.TableLayout}</li></ul> */ /** * @cfg {Boolean/Number} bufferResize * When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers * with a large amount of sub components that frequent calls to layout are expensive. */ /** * @cfg {String/Number} activeItem * A string component id or the numeric index of the component that should be initially activated within the * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first * item in the container's collection). activeItem only applies to layout styles that can display * items one at a time (like {@link Ext.layout.Accordion}, {@link Ext.layout.CardLayout} and * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}. */ /** * @cfg {Mixed} items * A single item, or an array of child Components to be added to this container. * Each item can be any type of object based on {@link Ext.Component}.<br><br> * Component config objects may also be specified in order to avoid the overhead * of constructing a real Component object if lazy rendering might mean that the * added 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.<br><br> * For a list of all available xtypes, see {@link Ext.Component}. * If a single item is being passed, it should be passed directly as an object * reference (e.g., items: {...}). Multiple items should be passed as an array * of objects (e.g., items: [{...}, {...}]). */ /** * @cfg {Object} defaults * A config object that will be applied to all components added to this container either via the {@link #items} * config or via the {@link #add} or {@link #insert} methods. The defaults config can contain any number of * name/value property pairs to be added to each item, and should be valid for the types of items * being added to the container. For example, to automatically apply padding to the body of each of a set of * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}. */ /** @cfg {Boolean} autoDestroy * If true the container will automatically destroy any contained component that is removed from it, else * destruction must be handled manually (defaults to true). */ autoDestroy: true, /** @cfg {Boolean} hideBorders * True to hide the borders of each contained component, false to defer to the component's existing * border settings (defaults to false). */ /** @cfg {String} defaultType * The default type of container represented by this object as registered in {@link Ext.ComponentMgr} * (defaults to 'panel'). */ defaultType: 'panel', // private initComponent : function(){ Ext.Container.superclass.initComponent.call(this); this.addEvents( /** * @event afterlayout * Fires when the components in this container are arranged by the associated layout manager. * @param {Ext.Container} this * @param {ContainerLayout} layout The ContainerLayout implementation for this container */ 'afterlayout', /** * @event beforeadd * Fires before any {@link Ext.Component} is added or inserted into the container. * A handler can return false to cancel the add. * @param {Ext.Container} this * @param {Ext.Component} component The component being added * @param {Number} index The index at which the component will be added to the container's items collection */ 'beforeadd', /** * @event beforeremove * Fires before any {@link Ext.Component} is removed from the container. A handler can return * false to cancel the remove. * @param {Ext.Container} this * @param {Ext.Component} component The component being removed */ 'beforeremove', /** * @event add * Fires after any {@link Ext.Component} is added or inserted into the container. * @param {Ext.Container} this * @param {Ext.Component} component The component that was added * @param {Number} index The index at which the component was added to the container's items collection */ 'add', /** * @event remove * Fires after any {@link Ext.Component} is removed from the container. * @param {Ext.Container} this * @param {Ext.Component} component The component that was removed */ 'remove' ); /** * The collection of components in this container as a {@link Ext.util.MixedCollection} * @type MixedCollection * @property items */ var items = this.items; if(items){ delete this.items; if(items instanceof Array){ this.add.apply(this, items); }else{ this.add(items); } } }, // private initItems : function(){ if(!this.items){ this.items = new Ext.util.MixedCollection(false, this.getComponentId); this.getLayout(); // initialize the layout } }, // private setLayout : function(layout){ if(this.layout && this.layout != layout){ this.layout.setContainer(null); } this.initItems(); this.layout = layout; layout.setContainer(this); }, // private render : function(){ Ext.Container.superclass.render.apply(this, arguments); if(this.layout){ if(typeof this.layout == 'string'){ this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); } this.setLayout(this.layout); if(this.activeItem !== undefined){ var item = this.activeItem; delete this.activeItem; this.layout.setActiveItem(item); return; } } if(!this.ownerCt){ this.doLayout(); } if(this.monitorResize === true){ Ext.EventManager.onWindowResize(this.doLayout, this); } }, // protected - should only be called by layouts getLayoutTarget : function(){ return this.el; }, // private - used as the key lookup function for the items collection getComponentId : function(comp){ return comp.itemId || comp.id; }, /** * Adds a Component to this Container. Fires the beforeadd event before adding, * then fires the add event after the component has been added. * @param {Ext.Component/Object} component The component to add.<br><br> * Ext uses lazy rendering, and will only render the added Component should * it become necessary.<br><br> * 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 * added 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.<br><br> * For a list of all available xtypes, see {@link Ext.Component}. * @return {Ext.Component} component The Component (or config object) that was * added with the Container's default config values applied. */ add : function(comp){ if(!this.items){ this.initItems(); } var a = arguments, len = a.length; if(len > 1){ for(var i = 0; i < len; i++) { this.add(a[i]); } return; } var c = this.lookupComponent(this.applyDefaults(comp)); var pos = this.items.length; if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){ this.items.add(c); c.ownerCt = this; this.fireEvent('add', this, c, pos); } return c; }, /** * Inserts a Component into this Container at a specified index. Fires the * beforeadd event before inserting, then fires the 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.<br><br> * Ext uses lazy rendering, and will only render the inserted Component should * it become necessary.<br><br> * 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.<br><br>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -