/**
* @class Ext.lib.Component
* @extends Ext.util.Observable
* Shared Component class
*/
Ext.lib.Component = Ext.extend(Ext.util.Observable, {
isComponent: true,
/**
* @cfg {Mixed} renderTpl
* An {@link Ext.XTemplate XTemplate} used to create the {@link #getEl Element} which will
* encapsulate this Component.
* You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.Component},
* and {@link Ext.Container}, this defaults to 'div'. The more complex Ext classes use a more complex
* DOM structure.
* This is intended to allow the developer to create application-specific utility Components encapsulated by
* different DOM elements.
*/
renderTpl: null,
/**
* @cfg {Mixed} renderTo
* Specify the id of the element, a DOM element or an existing Element that this component
* will be rendered into.
* - Notes :
* Do not 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.
* When using this config, a call to render() is not required.
*
*
* See {@link #render} also.
*/
/**
* @cfg {String/Object} componentLayout
*
The sizing and positioning of the component Elements is the responsibility of
* the Component's layout manager which creates and manages the type of layout specific to the component.
*
If the {@link #layout} configuration is not explicitly specified for
* a general purpose compopnent the
* {@link Ext.layout.AutoComponentLayout default layout manager} will be used.
*/
/**
* @cfg {Mixed} tpl
* An {@link Ext.Template} , {@link Ext.XTemplate}
* or an array of strings to form an Ext.XTemplate.
* Used in conjunction with the {@link #data} and
* {@link #tplWriteMode} configurations.
*/
/**
* @cfg {Mixed} data
* The initial set of data to apply to the {@link #tpl} to
* update the content area of the Component.
*/
/**
* @cfg {String} tplWriteMode The Ext.(X)Template method to use when
* updating the content area of the Component. Defaults to 'overwrite'
* (see {@link Ext.XTemplate#overwrite}).
*/
tplWriteMode: 'overwrite',
/**
* @cfg {String} baseCls
* The base CSS class to apply to this components's element. This will also be prepended to
* elements within this component like Panel's body will get a class x-panel-body. This means
* that if you create a subclass of Panel, and you want it to get all the Panels styling for the
* element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this
* component.
*/
baseCls: 'x-component',
/**
* @cfg {String} componentCls
* CSS Class to be added to a components root level element to give distinction to it
* via styling.
*/
/**
* @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.
*/
/**
* @cfg {String} disabledCls
* CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
*/
disabledCls: 'x-item-disabled',
/**
* @cfg {String} ui
* A set of predefined ui styles for individual components.
*
* Most components support 'light' and 'dark'.
*
* Extra string added to the baseCls with an extra '-'.
*
new Ext.Panel({
title: 'Some Title',
baseCls: 'x-component'
ui: 'green'
});
* The ui configuration in this example would add 'x-component-green' as an additional class.
*/
/**
* @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}.
*
new Ext.Panel({
title: 'Some Title',
renderTo: Ext.getBody(),
width: 400, height: 300,
layout: 'form',
items: [{
xtype: 'textareafield',
style: {
width: '95%',
marginBottom: '10px'
}
},
new Ext.Button({
text: 'Send',
minWidth: '100',
style: {
marginBottom: '10px'
}
})
]
});
*/
/**
* @cfg {Number} width
* The width of this component in pixels.
*/
/**
* @cfg {Number} height
* The height of this component in pixels.
*/
/**
* @cfg {Number/String} border
* Specifies the border for this component. The border can be a single numeric value to apply to all sides or
* it can be a CSS style specification for each style, for example: '10 5 3 10'.
*/
/**
* @cfg {Number/String} padding
* Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or
* it can be a CSS style specification for each style, for example: '10 5 3 10'.
*/
/**
* @cfg {Number/String} margin
* Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or
* it can be a CSS style specification for each style, for example: '10 5 3 10'.
*/
/**
* @cfg {Boolean} hidden
* Defaults to false.
*/
hidden: false,
/**
* @cfg {Boolean} disabled
* Defaults to false.
*/
disabled: false,
/**
* @cfg {Boolean} draggable
* Allows the component to be dragged via the touch event.
*/
/**
* Read-only property indicating whether or not the component can be dragged
* @property draggable
* @type {Boolean}
*/
draggable: false,
/**
* @cfg {Boolean} floating
* Create the Component as a floating and use absolute positioning.
* Defaults to false.
*/
floating: false,
/**
* @cfg {String} contentEl
* Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content
* for this component.
* {@link Ext.Container#layout layout}
* scheme that the Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.x-hidden or the x-hide-display CSS class to
* prevent a brief flicker of the content before it is rendered to the panel.The minimum value in pixels which this Component will set its height to.
*Warning: This will override any size management applied by layout managers.
*/ /** * @cfg {Number} minWidth *The minimum value in pixels which this Component will set its width to.
*Warning: This will override any size management applied by layout managers.
*/ /** * @cfg {Number} maxHeight *The maximum value in pixels which this Component will set its height to.
*Warning: This will override any size management applied by layout managers.
*/ /** * @cfg {Number} maxWidth *The maximum value in pixels which this Component will set its width to.
*Warning: This will override any size management applied by layout managers.
*/ // @private allowDomMove: true, autoShow: false, autoRender: false, needsLayout: false, /** * @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. */ /** * Read-only property indicating whether or not the component has been rendered. * @property rendered * @type {Boolean} */ rendered: false, constructor : function(config) { config = config || {}; this.initialConfig = config; Ext.apply(this, config); this.addEvents( /** * @event beforeactivate * Fires before a Component has been visually activated. * Returning false from an event listener can prevent the activate * from occurring. * @param {Ext.Component} this */ 'beforeactivate', /** * @event activate * Fires after a Component has been visually activated. * @param {Ext.Component} this */ 'activate', /** * @event beforedeactivate * Fires before a Component has been visually deactivated. * Returning false from an event listener can prevent the deactivate * from occurring. * @param {Ext.Component} this */ 'beforedeactivate', /** * @event deactivate * Fires after a Component has been visually deactivated. * @param {Ext.Component} this */ 'deactivate', /** * @event added * Fires after a Component had been added to a Container. * @param {Ext.Component} this * @param {Ext.Container} container Parent Container * @param {Number} pos position of Component */ 'added', /** * @event disable * Fires after the component is disabled. * @param {Ext.Component} this */ 'disable', /** * @event enable * Fires after the component is enabled. * @param {Ext.Component} this */ 'enable', /** * @event beforeshow * Fires before the component is shown when calling the {@link #show} method. * Return false from an event handler to stop the show. * @param {Ext.Component} this */ 'beforeshow', /** * @event show * Fires after the component is shown when calling the {@link #show} method. * @param {Ext.Component} this */ 'show', /** * @event beforehide * Fires before the component is hidden when calling the {@link #hide} method. * Return false from an event handler to stop the hide. * @param {Ext.Component} this */ 'beforehide', /** * @event hide * Fires after the component is hidden. * Fires after the component is hidden when calling the {@link #hide} method. * @param {Ext.Component} this */ 'hide', /** * @event removed * Fires when a component is removed from an Ext.Container * @param {Ext.Component} this * @param {Ext.Container} ownerCt Container which holds the component */ 'removed', /** * @event beforerender * Fires before the component is {@link #rendered}. Return false from an * event handler to stop the {@link #render}. * @param {Ext.Component} this */ 'beforerender', /** * @event render * Fires after the component markup is {@link #rendered}. * @param {Ext.Component} this */ 'render', /** * @event afterrender *Fires after the component rendering is finished.
*The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed * by any afterRender method defined for the Component, and, if {@link #stateful}, after state * has been restored.
* @param {Ext.Component} this */ 'afterrender', /** * @event beforedestroy * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}. * @param {Ext.Component} this */ 'beforedestroy', /** * @event destroy * Fires after the component is {@link #destroy}ed. * @param {Ext.Component} this */ 'destroy', /** * @event resize * Fires after the component is resized. * @param {Ext.Component} this * @param {Number} adjWidth The box-adjusted width that was set * @param {Number} adjHeight The box-adjusted height that was set * @param {Number} rawWidth The width that was originally specified * @param {Number} rawHeight The height that was originally specified */ 'resize', /** * @event move * Fires after the component is moved. * @param {Ext.Component} this * @param {Number} x The new x position * @param {Number} y The new y position */ 'move', 'beforestaterestore', 'staterestore', 'beforestatesave', 'statesave' ); this.getId(); this.mons = []; this.additionalCls = []; this.renderData = this.renderData || {}; this.renderSelectors = this.renderSelectors || {}; this.initComponent(); // ititComponent gets a chance to change the id property before registering Ext.ComponentMgr.register(this); // Dont pass the config so that it is not applied to 'this' again Ext.lib.Component.superclass.constructor.call(this); // Move this into Observable? if (this.plugins) { this.plugins = [].concat(this.plugins); for (var i = 0, len = this.plugins.length; i < len; i++) { this.plugins[i] = this.initPlugin(this.plugins[i]); } } // This won't work in Touch if (this.applyTo) { this.applyToMarkup(this.applyTo); delete this.applyTo; } else if (this.renderTo) { this.render(this.renderTo); delete this.renderTo; } //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).
*If using your own subclasses, be aware that a Component must register its own xtype * to participate in determination of inherited xtypes.
*For a list of all available xtypes, see the {@link Ext.Component} header.
*Example usage:
*
var t = new Ext.form.Text();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.Field
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.Field instance
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all * available xtypes, see the {@link Ext.Component} header.
*If using your own subclasses, be aware that a Component must register its own xtype * to participate in determination of inherited xtypes.
*Example usage:
*
var t = new Ext.form.Text();
alert(t.getXTypes()); // alerts 'component/field/textfield'
{width:10, height:20}.
* @param {Mixed} width The new width to set. This may be one of:{width: widthValue, height: heightValue}.undefined to leave the width unchanged.undefined to leave the height unchanged.