- applyToMarkup : function(el){
- this.allowDomMove = false;
- this.el = Ext.get(el);
- this.render(this.el.dom.parentNode);
- },
-
- <div id="method-Ext.Component-addClass"></div>/**
- * Adds a CSS class to the component's underlying element.
- * @param {string} cls The CSS class name to add
- * @return {Ext.Component} this
- */
- addClass : function(cls){
- if(this.el){
- this.el.addClass(cls);
- }else{
- this.cls = this.cls ? this.cls + ' ' + cls : cls;
- }
- return this;
- },
-
- <div id="method-Ext.Component-removeClass"></div>/**
- * Removes a CSS class from the component's underlying element.
- * @param {string} cls The CSS class name to remove
- * @return {Ext.Component} this
- */
- removeClass : function(cls){
- if(this.el){
- this.el.removeClass(cls);
- }else if(this.cls){
- this.cls = this.cls.split(' ').remove(cls).join(' ');
- }
- return this;
- },
-
- // private
- // default function is not really useful
- onRender : function(ct, position){
- if(!this.el && this.autoEl){
- if(Ext.isString(this.autoEl)){
- this.el = document.createElement(this.autoEl);
- }else{
- var div = document.createElement('div');
- Ext.DomHelper.overwrite(div, this.autoEl);
- this.el = div.firstChild;
- }
- if (!this.el.id) {
- this.el.id = this.getId();
- }
- }
- if(this.el){
- this.el = Ext.get(this.el);
- if(this.allowDomMove !== false){
- ct.dom.insertBefore(this.el.dom, position);
- if (div) {
- Ext.removeNode(div);
- div = null;
- }
- }
- }
- },
-
- // private
- getAutoCreate : function(){
- var cfg = Ext.isObject(this.autoCreate) ?
- this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
- if(this.id && !cfg.id){
- cfg.id = this.id;
- }
- return cfg;
- },
-
- // private
- afterRender : Ext.emptyFn,
-
- <div id="method-Ext.Component-destroy"></div>/**
- * Destroys this component by purging any event listeners, removing the component's element from the DOM,
- * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
- * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method
- * should usually not need to be called directly.
- *
- */
- destroy : function(){
- if(!this.isDestroyed){
- if(this.fireEvent('beforedestroy', this) !== false){
- this.destroying = true;
- this.beforeDestroy();
- if(this.ownerCt && this.ownerCt.remove){
- this.ownerCt.remove(this, false);
- }
- if(this.rendered){
- this.el.remove();
- if(this.actionMode == 'container' || this.removeMode == 'container'){
- this.container.remove();
- }
- }
- // Stop any buffered tasks
- if(this.focusTask && this.focusTask.cancel){
- this.focusTask.cancel();
- }
- this.onDestroy();
- Ext.ComponentMgr.unregister(this);
- this.fireEvent('destroy', this);
- this.purgeListeners();
- this.destroying = false;
- this.isDestroyed = true;
- }
- }
- },
-
- deleteMembers : function(){
- var args = arguments;
- for(var i = 0, len = args.length; i < len; ++i){
- delete this[args[i]];
- }
- },
-
- // private
- beforeDestroy : Ext.emptyFn,
-
- // private
- onDestroy : Ext.emptyFn,
-
- <div id="method-Ext.Component-getEl"></div>/**
- * <p>Returns the {@link Ext.Element} which encapsulates this Component.</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 {@link #autoEl} 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 #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>
- * @return {Ext.Element} The Element which encapsulates this Component.
- */
- getEl : function(){
- return this.el;
- },
-
- // private
- getContentTarget : function(){
- return this.el;
- },
-
- <div id="method-Ext.Component-getId"></div>/**
- * Returns the <code>id</code> of this component or automatically generates and
- * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
- * 'ext-comp-' + (++Ext.Component.AUTO_ID)
- * </code></pre>
- * @return {String} id
- */
- getId : function(){
- return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
- },
-
- <div id="method-Ext.Component-getItemId"></div>/**
- * Returns the <code>{@link #itemId}</code> of this component. If an
- * <code>{@link #itemId}</code> was not assigned through configuration the
- * <code>id</code> is returned using <code>{@link #getId}</code>.
- * @return {String}
- */
- getItemId : function(){
- return this.itemId || this.getId();
- },
-
- <div id="method-Ext.Component-focus"></div>/**
- * Try to focus this component.
- * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
- * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
- * @return {Ext.Component} this
- */
- focus : function(selectText, delay){
- if(delay){
- this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
- this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
- return this;
- }
- if(this.rendered && !this.isDestroyed){
- this.el.focus();
- if(selectText === true){
- this.el.dom.select();
- }
- }
- return this;
- },
-
- // private
- blur : function(){
- if(this.rendered){
- this.el.blur();
- }
- return this;
- },
-
- <div id="method-Ext.Component-disable"></div>/**
- * Disable this component and fire the 'disable' event.
- * @return {Ext.Component} this
- */
- disable : function(/* private */ silent){
- if(this.rendered){
- this.onDisable();
- }
- this.disabled = true;
- if(silent !== true){
- this.fireEvent('disable', this);
- }
- return this;
- },
-
- // private
- onDisable : function(){
- this.getActionEl().addClass(this.disabledClass);
- this.el.dom.disabled = true;
- },
-
- <div id="method-Ext.Component-enable"></div>/**
- * Enable this component and fire the 'enable' event.
- * @return {Ext.Component} this
- */
- enable : function(){
- if(this.rendered){
- this.onEnable();
- }
- this.disabled = false;
- this.fireEvent('enable', this);
- return this;
- },
-
- // private
- onEnable : function(){
- this.getActionEl().removeClass(this.disabledClass);
- this.el.dom.disabled = false;
- },
-
- <div id="method-Ext.Component-setDisabled"></div>/**
- * Convenience function for setting disabled/enabled by boolean.
- * @param {Boolean} disabled
- * @return {Ext.Component} this
- */
- setDisabled : function(disabled){
- return this[disabled ? 'disable' : 'enable']();
- },
-
- <div id="method-Ext.Component-show"></div>/**
- * Show this component. Listen to the '{@link #beforeshow}' event and return
- * <tt>false</tt> to cancel showing the component. Fires the '{@link #show}'
- * event after showing the component.
- * @return {Ext.Component} this
- */
- show : function(){
- if(this.fireEvent('beforeshow', this) !== false){
- this.hidden = false;
- if(this.autoRender){
- this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
- }
- if(this.rendered){
- this.onShow();
- }
- this.fireEvent('show', this);
- }
- return this;
- },
-
- // private
- onShow : function(){
- this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
- },
-
- <div id="method-Ext.Component-hide"></div>/**
- * Hide this component. Listen to the '{@link #beforehide}' event and return
- * <tt>false</tt> to cancel hiding the component. Fires the '{@link #hide}'
- * event after hiding the component. Note this method is called internally if
- * the component is configured to be <code>{@link #hidden}</code>.
- * @return {Ext.Component} this
- */
- hide : function(){
- if(this.fireEvent('beforehide', this) !== false){
- this.doHide();
- this.fireEvent('hide', this);
- }
- return this;
- },
-
- // private
- doHide: function(){
- this.hidden = true;
- if(this.rendered){
- this.onHide();
- }
- },
-
- // private
- onHide : function(){
- this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
- },
-
- // private
- getVisibilityEl : function(){
- return this.hideParent ? this.container : this.getActionEl();
- },
-
- <div id="method-Ext.Component-setVisible"></div>/**
- * Convenience function to hide or show this component by boolean.
- * @param {Boolean} visible True to show, false to hide
- * @return {Ext.Component} this
- */
- setVisible : function(visible){
- return this[visible ? 'show' : 'hide']();
- },
-
- <div id="method-Ext.Component-isVisible"></div>/**
- * Returns true if this component is visible.
- * @return {Boolean} True if this component is visible, false otherwise.
- */
- isVisible : function(){
- return this.rendered && this.getVisibilityEl().isVisible();
- },
-
- <div id="method-Ext.Component-cloneConfig"></div>/**
- * Clone the current component using the original config values passed into this instance by default.
- * @param {Object} overrides A new config containing any properties to override in the cloned version.
- * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
- * @return {Ext.Component} clone The cloned copy of this component
- */
- cloneConfig : function(overrides){
- overrides = overrides || {};
- var id = overrides.id || Ext.id();
- var cfg = Ext.applyIf(overrides, this.initialConfig);
- cfg.id = id; // prevent dup id
- return new this.constructor(cfg);
- },
-
- <div id="method-Ext.Component-getXType"></div>/**
- * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
- * available xtypes, see the {@link Ext.Component} header. Example usage:
- * <pre><code>
-var t = new Ext.form.TextField();
-alert(t.getXType()); // alerts 'textfield'
-</code></pre>
- * @return {String} The xtype
- */
- getXType : function(){
- return this.constructor.xtype;
- },
-
- <div id="method-Ext.Component-isXType"></div>/**
- * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
- * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
- * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
- * to participate in determination of inherited xtypes.</b></p>
- * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
- * <p>Example usage:</p>
- * <pre><code>
-var t = new Ext.form.TextField();
-var isText = t.isXType('textfield'); // true
-var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
-</code></pre>
- * @param {String/Ext.Component/Class} xtype The xtype to check for this Component. Note that the the component can either be an instance
- * or a component class:
- * <pre><code>
-var c = new Ext.Component();
-console.log(c.isXType(c));
-console.log(c.isXType(Ext.Component));
-</code></pre>
- * @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 {Boolean} True if this component descends from the specified xtype, false otherwise.
- */
- isXType : function(xtype, shallow){
- //assume a string by default
- if (Ext.isFunction(xtype)){
- xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
- }else if (Ext.isObject(xtype)){
- xtype = xtype.constructor.xtype; //handle being passed an instance
- }
-
- return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
- },
-
- <div id="method-Ext.Component-getXTypes"></div>/**
- * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
- * available xtypes, see the {@link Ext.Component} header.</p>
- * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
- * to participate in determination of inherited xtypes.</b></p>
- * <p>Example usage:</p>
- * <pre><code>
-var t = new Ext.form.TextField();
-alert(t.getXTypes()); // alerts 'component/box/field/textfield'
-</code></pre>
- * @return {String} The xtype hierarchy string
- */
- getXTypes : function(){
- var tc = this.constructor;
- if(!tc.xtypes){
- var c = [], sc = this;
- while(sc && sc.constructor.xtype){
- c.unshift(sc.constructor.xtype);
- sc = sc.constructor.superclass;
- }
- tc.xtypeChain = c;
- tc.xtypes = c.join('/');
- }
- return tc.xtypes;
- },
-
- <div id="method-Ext.Component-findParentBy"></div>/**
- * Find a container above this component at any level by a custom function. If the passed function returns
- * true, the container will be returned.
- * @param {Function} fn The custom function to call with the arguments (container, this component).
- * @return {Ext.Container} The first Container for which the custom function returns true
- */
- findParentBy : function(fn) {
- for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
- return p || null;
- },
-
- <div id="method-Ext.Component-findParentByType"></div>/**
- * Find a container above this component at any level by xtype or class
- * @param {String/Ext.Component/Class} xtype The xtype to check for this Component. Note that the the component can either be an instance
- * or a component class:
- * @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 {Ext.Container} The first Container which matches the given xtype or class
- */
- findParentByType : function(xtype, shallow){
- return this.findParentBy(function(c){
- return c.isXType(xtype, shallow);
- });
- },
-
- <div id="method-Ext.Component-bubble"></div>/**
- * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (<i>this</i>) 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 bubble is stopped.
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function (defaults to current node)
- * @param {Array} args (optional) The args to call the function with (default to passing the current component)
- * @return {Ext.Component} this
- */
- bubble : function(fn, scope, args){
- var p = this;
- while(p){
- if(fn.apply(scope || p, args || [p]) === false){
- break;
- }
- p = p.ownerCt;
- }
- return this;
- },
-
- // protected
- getPositionEl : function(){
- return this.positionEl || this.el;
- },
-
- // private
- purgeListeners : function(){
- Ext.Component.superclass.purgeListeners.call(this);
- if(this.mons){
- this.on('beforedestroy', this.clearMons, this, {single: true});
- }
- },
-
- // private
- clearMons : function(){
- Ext.each(this.mons, function(m){
- m.item.un(m.ename, m.fn, m.scope);
- }, this);
- this.mons = [];
- },
-
- // private
- createMons: function(){
- if(!this.mons){
- this.mons = [];
- this.on('beforedestroy', this.clearMons, this, {single: true});