- this.initComponent();
-
- if(this.plugins){
- if(Ext.isArray(this.plugins)){
- for(var i = 0, len = this.plugins.length; i < len; i++){
- this.plugins[i] = this.initPlugin(this.plugins[i]);
- }
- }else{
- this.plugins = this.initPlugin(this.plugins);
- }
- }
-
- if(this.stateful !== false){
- this.initState(config);
- }
-
- if(this.applyTo){
- this.applyToMarkup(this.applyTo);
- delete this.applyTo;
- }else if(this.renderTo){
- this.render(this.renderTo);
- delete this.renderTo;
- }
-};
-
-// private
-Ext.Component.AUTO_ID = 1000;
-
-Ext.extend(Ext.Component, Ext.util.Observable, {
- // Configs below are used for all Components when rendered by FormLayout.
- <div id="cfg-Ext.Component-fieldLabel"></div>/**
- * @cfg {String} fieldLabel <p>The label text to display next to this Component (defaults to '').</p>
- * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
- * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
- * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
- * <p>Also see <tt>{@link #hideLabel}</tt> and
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
- * Example use:<pre><code>
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name'
- }]
-});
-</code></pre>
- */
- <div id="cfg-Ext.Component-labelStyle"></div>/**
- * @cfg {String} labelStyle <p>A CSS style specification string to apply directly to this field's
- * label. Defaults to the container's labelStyle value if set (e.g.,
- * <tt>{@link Ext.layout.FormLayout#labelStyle}</tt> , or '').</p>
- * <br><p><b>Note</b>: see the note for <code>{@link #clearCls}</code>.</p><br>
- * <p>Also see <code>{@link #hideLabel}</code> and
- * <code>{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</code></p>
- * Example use:<pre><code>
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name',
- labelStyle: 'font-weight:bold;'
- }]
-});
-</code></pre>
- */
- <div id="cfg-Ext.Component-labelSeparator"></div>/**
- * @cfg {String} labelSeparator <p>The separator to display after the text of each
- * <tt>{@link #fieldLabel}</tt>. This property may be configured at various levels.
- * The order of precedence is:
- * <div class="mdetail-params"><ul>
- * <li>field / component level</li>
- * <li>container level</li>
- * <li>{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon <tt>':'</tt>)</li>
- * </ul></div>
- * To display no separator for this field's label specify empty string ''.</p>
- * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
- * <p>Also see <tt>{@link #hideLabel}</tt> and
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
- * Example use:<pre><code>
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- layoutConfig: {
- labelSeparator: '~' // layout config has lowest priority (defaults to ':')
- },
- {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>', // config at container level
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Field 1',
- labelSeparator: '...' // field/component level config supersedes others
- },{
- xtype: 'textfield',
- fieldLabel: 'Field 2' // labelSeparator will be '='
- }]
-});
-</code></pre>
- */
- <div id="cfg-Ext.Component-hideLabel"></div>/**
- * @cfg {Boolean} hideLabel <p><tt>true</tt> to completely hide the label element
- * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to <tt>false</tt>.
- * By default, even if you do not specify a <tt>{@link #fieldLabel}</tt> the space will still be
- * reserved so that the field will line up with other fields that do have labels.
- * Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
- * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
- * Example use:<pre><code>
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield'
- hideLabel: true
- }]
-});
-</code></pre>
- */
- <div id="cfg-Ext.Component-clearCls"></div>/**
- * @cfg {String} clearCls <p>The CSS class used to to apply to the special clearing div rendered
- * directly after each form field wrapper to provide field clearing (defaults to
- * <tt>'x-form-clear-left'</tt>).</p>
- * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
- * which has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout
- * manager (e.g. {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) and either a
- * <tt>{@link #fieldLabel}</tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
- * <p>See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.</p>
- */
- <div id="cfg-Ext.Component-itemCls"></div>/**
- * @cfg {String} itemCls <p>An additional CSS class to apply to the div wrapping the form item
- * element of this field. If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
- * the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
- * <tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
- * <p>Since it is applied to the item wrapper (see
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
- * you to write standard CSS rules that can apply to the field, the label (if specified), or
- * any other element within the markup for the field.</p>
- * <br><p><b>Note</b>: see the note for <tt>{@link #fieldLabel}</tt>.</p><br>
- * Example use:<pre><code>
-// Apply a style to the field's label:
-<style>
- .required .x-form-item-label {font-weight:bold;color:red;}
-</style>
-
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name',
- itemCls: 'required' //this label will be styled
- },{
- xtype: 'textfield',
- fieldLabel: 'Favorite Color'
- }]
-});
-</code></pre>
- */
-
- // Configs below are used for all Components when rendered by AnchorLayout.
- <div id="cfg-Ext.Component-anchor"></div>/**
- * @cfg {String} anchor <p><b>Note</b>: this config is only used when this Component is rendered
- * by a Container which has been configured to use an <b>{@link Ext.layout.AnchorLayout AnchorLayout}</b>
- * based layout manager, for example:<div class="mdetail-params"><ul>
- * <li>{@link Ext.form.FormPanel}</li>
- * <li>specifying <code>layout: 'anchor' // or 'form', or 'absolute'</code></li>
- * </ul></div></p>
- * <p>See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.</p>
- */
-
- <div id="cfg-Ext.Component-id"></div>/**
- * @cfg {String} id
- * <p>The <b>unique</b> id of this component (defaults to an {@link #getId auto-assigned id}).
- * You should assign an id if you need to be able to access the component later and you do
- * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).</p>
- * <p>Note that this id will also be used as the element id for the containing HTML element
- * that is rendered to the page for this component. This allows you to write id-based CSS
- * rules to style the specific instance of this component uniquely, and also to select
- * sub-elements using this component's id as the parent.</p>
- * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
- * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
- * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
- */
- <div id="cfg-Ext.Component-itemId"></div>/**
- * @cfg {String} itemId
- * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
- * when no object reference is available. Instead of using an <code>{@link #id}</code> with
- * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
- * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
- * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
- * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
- * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
- * <code>{@link #id}</code>.</p>
- * <pre><code>
-var c = new Ext.Panel({ //
- {@link Ext.BoxComponent#height height}: 300,
- {@link #renderTo}: document.body,
- {@link Ext.Container#layout layout}: 'auto',
- {@link Ext.Container#items items}: [
- {
- itemId: 'p1',
- {@link Ext.Panel#title title}: 'Panel 1',
- {@link Ext.BoxComponent#height height}: 150
- },
- {
- itemId: 'p2',
- {@link Ext.Panel#title title}: 'Panel 2',
- {@link Ext.BoxComponent#height height}: 150
- }
- ]
-})
-p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
-p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
- * </code></pre>
- * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
- * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
- */
- <div id="cfg-Ext.Component-xtype"></div>/**
- * @cfg {String} xtype
- * The registered <tt>xtype</tt> to create. This config option is not used when passing
- * a config object into a constructor. This config option is used only when
- * lazy instantiation is being used, and a child item of a Container is being
- * specified not as a fully instantiated Component, but as a <i>Component config
- * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
- * type of child Component to create.<br><br>
- * The predefined xtypes are listed {@link Ext.Component here}.
- * <br><br>
- * If you subclass Components to create your own Components, you may register
- * them using {@link Ext.ComponentMgr#registerType} in order to be able to
- * take advantage of lazy instantiation and rendering.
- */
- <div id="cfg-Ext.Component-ptype"></div>/**
- * @cfg {String} ptype
- * The registered <tt>ptype</tt> to create. This config option is not used when passing
- * a config object into a constructor. This config option is used only when
- * lazy instantiation is being used, and a Plugin is being
- * specified not as a fully instantiated Component, but as a <i>Component config
- * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
- * type of Plugin to create.<br><br>
- * If you create your own Plugins, you may register them using
- * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
- * take advantage of lazy instantiation and rendering.
- */
- <div id="cfg-Ext.Component-cls"></div>/**
- * @cfg {String} cls
- * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
- * useful for adding customized styles to the component or any of its children using standard CSS rules.
- */
- <div id="cfg-Ext.Component-overCls"></div>/**
- * @cfg {String} overCls
- * An optional extra CSS class that will be added to this component's Element when the mouse moves
- * over the Element, and removed when the mouse moves out. (defaults to ''). This can be
- * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
- */
- <div id="cfg-Ext.Component-style"></div>/**
- * @cfg {String} style
- * A custom style specification to be applied to this component's Element. Should be a valid argument to
- * {@link Ext.Element#applyStyles}.
- * <pre><code>
-new Ext.Panel({
- title: 'Some Title',
- renderTo: Ext.getBody(),
- width: 400, height: 300,
- layout: 'form',
- items: [{
- xtype: 'textarea',
- style: {
- width: '95%',
- marginBottom: '10px'
- }
- },
- new Ext.Button({
- text: 'Send',
- minWidth: '100',
- style: {
- marginBottom: '10px'
- }
- })
- ]
-});
- * </code></pre>
- */
- <div id="cfg-Ext.Component-ctCls"></div>/**
- * @cfg {String} ctCls
- * <p>An optional extra CSS class that will be added to this component's container. This can be useful for
- * adding customized styles to the container or any of its children using standard CSS rules. See
- * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.</p>
- * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
- * which assigns a value by default:
- * <div class="mdetail-params"><ul>
- * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
- * </ul></div>
- * To configure the above Class with an extra CSS class append to the default. For example,
- * for BoxLayout (Hbox and Vbox):<pre><code>
- * ctCls: 'x-box-layout-ct custom-class'
- * </code></pre>
- * </p>
- */
- <div id="cfg-Ext.Component-disabled"></div>/**
- * @cfg {Boolean} disabled
- * Render this component disabled (default is false).
- */
- disabled : false,
- <div id="cfg-Ext.Component-hidden"></div>/**
- * @cfg {Boolean} hidden
- * Render this component hidden (default is false). If <tt>true</tt>, the
- * {@link #hide} method will be called internally.
- */
- hidden : false,
- <div id="cfg-Ext.Component-plugins"></div>/**
- * @cfg {Object/Array} plugins
- * An object or array of objects that will provide custom functionality for this component. The only
- * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
- * When a component is created, if any plugins are available, the component will call the init method on each
- * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
- * component as needed to provide its functionality.
- */
- <div id="cfg-Ext.Component-applyTo"></div>/**
- * @cfg {Mixed} applyTo
- * <p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
- * that is already present in the document that specifies some structural markup for this
- * component.</p><div><ul>
- * <li><b>Description</b> : <ul>
- * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
- * by id or CSS class name within the main element, and the component being created may attempt
- * to create its subcomponents from that markup if applicable.</div>
- * </ul></li>
- * <li><b>Notes</b> : <ul>
- * <div class="sub-desc">When using this config, a call to render() is not required.</div>
- * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
- * element's parent node will automatically be used as the component's container.</div>
- * </ul></li>
- * </ul></div>
- */
- <div id="cfg-Ext.Component-renderTo"></div>/**
- * @cfg {Mixed} renderTo
- * <p>Specify the id of the element, a DOM element or an existing Element that this component
- * will be rendered into.</p><div><ul>
- * <li><b>Notes</b> : <ul>
- * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
- * a {@link Ext.Container Container}. It is the responsibility of the
- * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
- * to render and manage its child items.</div>
- * <div class="sub-desc">When using this config, a call to render() is not required.</div>
- * </ul></li>
- * </ul></div>
- * <p>See <tt>{@link #render}</tt> also.</p>
- */
- <div id="cfg-Ext.Component-stateful"></div>/**
- * @cfg {Boolean} stateful
- * <p>A flag which causes the Component to attempt to restore the state of
- * internal properties from a saved state on startup. The component must have
- * either a <code>{@link #stateId}</code> or <code>{@link #id}</code> assigned
- * for state to be managed. Auto-generated ids are not guaranteed to be stable
- * across page loads and cannot be relied upon to save and restore the same
- * state for a component.<p>
- * <p>For state saving to work, the state manager's provider must have been
- * set to an implementation of {@link Ext.state.Provider} which overrides the
- * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
- * methods to save and recall name/value pairs. A built-in implementation,
- * {@link Ext.state.CookieProvider} is available.</p>
- * <p>To set the state provider for the current page:</p>
- * <pre><code>
-Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
- expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
-}));
- * </code></pre>
- * <p>A stateful Component attempts to save state when one of the events
- * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
- * <p>To save state, a stateful Component first serializes its state by
- * calling <b><code>getState</code></b>. By default, this function does
- * nothing. The developer must provide an implementation which returns an
- * object hash which represents the Component's restorable state.</p>
- * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
- * which uses the configured {@link Ext.state.Provider} to save the object
- * keyed by the Component's <code>{@link stateId}</code>, or, if that is not
- * specified, its <code>{@link #id}</code>.</p>
- * <p>During construction, a stateful Component attempts to <i>restore</i>
- * its state by calling {@link Ext.state.Manager#get} passing the
- * <code>{@link #stateId}</code>, or, if that is not specified, the
- * <code>{@link #id}</code>.</p>
- * <p>The resulting object is passed to <b><code>applyState</code></b>.
- * The default implementation of <code>applyState</code> simply copies
- * properties into the object, but a developer may override this to support
- * more behaviour.</p>
- * <p>You can perform extra processing on state save and restore by attaching
- * handlers to the {@link #beforestaterestore}, {@link #staterestore},
- * {@link #beforestatesave} and {@link #statesave} events.</p>
- */
- <div id="cfg-Ext.Component-stateId"></div>/**
- * @cfg {String} stateId
- * The unique id for this component to use for state management purposes
- * (defaults to the component id if one was set, otherwise null if the
- * component is using a generated id).
- * <p>See <code>{@link #stateful}</code> for an explanation of saving and
- * restoring Component state.</p>
- */
- <div id="cfg-Ext.Component-stateEvents"></div>/**
- * @cfg {Array} stateEvents
- * <p>An array of events that, when fired, should trigger this component to
- * save its state (defaults to none). <code>stateEvents</code> may be any type
- * of event supported by this component, including browser or custom events
- * (e.g., <tt>['click', 'customerchange']</tt>).</p>
- * <p>See <code>{@link #stateful}</code> for an explanation of saving and
- * restoring Component state.</p>
- */
- <div id="cfg-Ext.Component-autoEl"></div>/**
- * @cfg {Mixed} autoEl
- * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
- * encapsulate this Component.</p>
- * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
- * and {@link Ext.Container}, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
- * DOM structure created by their own onRender methods.</p>
- * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
- * different DOM elements. Example usage:</p><pre><code>
-{
- xtype: 'box',
- autoEl: {
- tag: 'img',
- src: 'http://www.example.com/example.jpg'
- }
-}, {
- xtype: 'box',
- autoEl: {
- tag: 'blockquote',
- html: 'autoEl is cool!'
- }
-}, {
- xtype: 'container',
- autoEl: 'ul',
- cls: 'ux-unordered-list',
- items: {
- xtype: 'box',
- autoEl: 'li',
- html: 'First list item'
- }
-}
-</code></pre>
- */
- autoEl : 'div',
-
- <div id="cfg-Ext.Component-disabledClass"></div>/**
- * @cfg {String} disabledClass
- * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
- */
- disabledClass : 'x-item-disabled',
- <div id="cfg-Ext.Component-allowDomMove"></div>/**
- * @cfg {Boolean} allowDomMove
- * Whether the component can move the Dom node when rendering (defaults to true).
- */
- allowDomMove : true,
- <div id="cfg-Ext.Component-autoShow"></div>/**
- * @cfg {Boolean} autoShow
- * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
- * them on render (defaults to false).
- */
- autoShow : false,
- <div id="cfg-Ext.Component-hideMode"></div>/**
- * @cfg {String} hideMode
- * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
- * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
- * (css display).</p>
- * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
- * since items are automatically laid out when they are first shown (no sizing
- * is done while hidden).</p>
- */
- hideMode : 'display',
- <div id="cfg-Ext.Component-hideParent"></div>/**
- * @cfg {Boolean} hideParent
- * True to hide and show the component's container when hide/show is called on the component, false to hide
- * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide
- * button on a window by setting hide:true on the button when adding it to its parent container.
- */
- hideParent : false,
- <div id="prop-Ext.Component-el"></div>/**
- * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
- * <p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
- * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
- * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
- * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
- * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
- * config for a suggestion, or use a render listener directly:</p><pre><code>
-new Ext.Panel({
- title: 'The Clickable Panel',
- listeners: {
- render: function(p) {
- // Append the Panel to the click handler's argument list.
- p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
- },
- single: true // Remove the listener after first invocation
- }
-});
-</code></pre>
- * <p>See also <tt>{@link #getEl getEl}</p>
- * @type Ext.Element
- * @property el
- */
- <div id="prop-Ext.Component-ownerCt"></div>/**
- * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when
- * the component is added to a container). Read-only.
- * <p><b>Note</b>: to access items within the container see <tt>{@link #itemId}</tt>.</p>
- * @type Ext.Container
- * @property ownerCt
- */
- <div id="prop-Ext.Component-hidden"></div>/**
- * True if this component is hidden. Read-only.
- * @type Boolean
- * @property hidden
- */
- <div id="prop-Ext.Component-disabled"></div>/**
- * True if this component is disabled. Read-only.
- * @type Boolean
- * @property disabled
- */
- <div id="prop-Ext.Component-rendered"></div>/**
- * True if this component has been rendered. Read-only.
- * @type Boolean
- * @property rendered
- */
- rendered : false,
-
- // private
- ctype : 'Ext.Component',
-
- // private
- actionMode : 'el',
-
- // private
- getActionEl : function(){
- return this[this.actionMode];
- },
-
- initPlugin : function(p){
- if(p.ptype && !Ext.isFunction(p.init)){
- p = Ext.ComponentMgr.createPlugin(p);
- }else if(Ext.isString(p)){
- p = Ext.ComponentMgr.createPlugin({
- ptype: p
- });
- }
- p.init(this);
- return p;
- },
-
- /* // protected
- * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
- * <pre><code>
-// Traditional constructor:
-Ext.Foo = function(config){
- // call superclass constructor:
- Ext.Foo.superclass.constructor.call(this, config);
-
- this.addEvents({
- // add events
- });
-};
-Ext.extend(Ext.Foo, Ext.Bar, {
- // class body
-}
-
-// initComponent replaces the constructor:
-Ext.Foo = Ext.extend(Ext.Bar, {
- initComponent : function(){
- // call superclass initComponent
- Ext.Container.superclass.initComponent.call(this);
-
- this.addEvents({
- // add events
- });
- }
-}
-</code></pre>
- */
- initComponent : Ext.emptyFn,
-
- <div id="method-Ext.Component-render"></div>/**
- * <p>Render this Component into the passed HTML element.</p>
- * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
- * do not use the render method.</b></p>
- * <p>A Container's child Components are rendered by that Container's
- * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
- * <p>Certain layout managers allow dynamic addition of child components. Those that do
- * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
- * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>
- * <p>If the Container is already rendered when a new child Component is added, you may need to call
- * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
- * unrendered child Components to be rendered. This is required so that you can add multiple
- * child components if needed while only refreshing the layout once.</p>
- * <p>When creating complex UIs, it is important to remember that sizing and positioning
- * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
- * If you expect child items to be sized in response to user interactions, you must
- * configure the Container with a layout manager which creates and manages the type of layout you
- * have in mind.</p>
- * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
- * layout manager is used which does nothing but render child components sequentially into the
- * Container. No sizing or positioning will be performed in this situation.</b></p>
- * @param {Element/HTMLElement/String} container (optional) The element this Component should be
- * rendered into. If it is being created from existing markup, this should be omitted.
- * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>
- * which this component will be inserted (defaults to appending to the end of the container)
- */
- render : function(container, position){
- if(!this.rendered && this.fireEvent('beforerender', this) !== false){
- if(!container && this.el){
- this.el = Ext.get(this.el);
- container = this.el.dom.parentNode;
- this.allowDomMove = false;
- }
- this.container = Ext.get(container);
- if(this.ctCls){
- this.container.addClass(this.ctCls);
- }
- this.rendered = true;
- if(position !== undefined){
- if(Ext.isNumber(position)){
- position = this.container.dom.childNodes[position];
- }else{
- position = Ext.getDom(position);
- }
- }
- this.onRender(this.container, position || null);
- if(this.autoShow){
- this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
- }
- if(this.cls){
- this.el.addClass(this.cls);
- delete this.cls;
- }
- if(this.style){
- this.el.applyStyles(this.style);
- delete this.style;
- }
- if(this.overCls){
- this.el.addClassOnOver(this.overCls);
- }
- this.fireEvent('render', this);
- this.afterRender(this.container);
- if(this.hidden){
- // call this so we don't fire initial hide events.
- this.doHide();
- }
- if(this.disabled){
- // pass silent so the event doesn't fire the first time.
- this.disable(true);
- }
-
- if(this.stateful !== false){
- this.initStateEvents();
- }
- this.initRef();
- this.fireEvent('afterrender', this);
- }
- return this;
- },
-
- initRef : function(){
- <div id="cfg-Ext.Component-ref"></div>/**
- * @cfg {String} ref
- * <p>A path specification, relative to the Component's {@link #ownerCt} specifying into which
- * ancestor Container to place a named reference to this Component.</p>
- * <p>The ancestor axis can be traversed by using '/' characters in the path.
- * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
-var myGrid = new Ext.grid.EditorGridPanel({
- title: 'My EditorGridPanel',
- store: myStore,
- colModel: myColModel,
- tbar: [{
- text: 'Save',
- handler: saveChanges,
- disabled: true,
- ref: '../saveButton'
- }],
- listeners: {
- afteredit: function() {
-// The button reference is in the GridPanel
- myGrid.saveButton.enable();
- }
- }
-});
-</code></pre>
- * <p>In the code above, if the ref had been <code>'saveButton'</code> the reference would
- * have been placed into the Toolbar. Each '/' in the ref moves up one level from the
- * Component's {@link #ownerCt}.</p>
- */
- if(this.ref){
- var levels = this.ref.split('/');
- var last = levels.length, i = 0;
- var t = this;
- while(i < last){
- if(t.ownerCt){
- t = t.ownerCt;
- }
- i++;
- }
- t[levels[--i]] = this;
- }
- },
-
- // private
- initState : function(config){
- if(Ext.state.Manager){
- var id = this.getStateId();
- if(id){
- var state = Ext.state.Manager.get(id);
- if(state){
- if(this.fireEvent('beforestaterestore', this, state) !== false){
- this.applyState(state);
- this.fireEvent('staterestore', this, state);
- }
- }
- }
- }
- },
-
- // private
- getStateId : function(){
- return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);
- },
-
- // private
- initStateEvents : function(){
- if(this.stateEvents){
- for(var i = 0, e; e = this.stateEvents[i]; i++){
- this.on(e, this.saveState, this, {delay:100});
- }
- }
- },
-
- // private
- applyState : function(state, config){
- if(state){
- Ext.apply(this, state);
- }
- },
-
- // private
- getState : function(){
- return null;
- },
-
- // private
- saveState : function(){
- if(Ext.state.Manager && this.stateful !== false){
- var id = this.getStateId();
- if(id){
- var state = this.getState();
- if(this.fireEvent('beforestatesave', this, state) !== false){
- Ext.state.Manager.set(id, state);
- this.fireEvent('statesave', this, state);
- }
- }
- }
- },
-
- <div id="method-Ext.Component-applyToMarkup"></div>/**
- * Apply this component to existing markup that is valid. With this function, no call to render() is required.
- * @param {String/HTMLElement} el