Base class for all Ext components. All subclasses of Component can automatically participate in the standard - * Ext component lifecycle of creation, rendering and destruction. They also have automatic support for basic hide/show - * and enable/disable behavior. Component allows any subclass to be lazy-rendered into any {@link Ext.Container} and - * to be automatically registered with the {@link Ext.ComponentMgr} so that it can be referenced at any time via - * {@link Ext#getCmp}. All visual widgets that require rendering into a layout should subclass Component (or - * {@link Ext.BoxComponent} if managed box model handling is required).
- *Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the - * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:
- *-xtype Class -------------- ------------------ -box Ext.BoxComponent -button Ext.Button -colorpalette Ext.ColorPalette -component Ext.Component -container Ext.Container -cycle Ext.CycleButton -dataview Ext.DataView -datepicker Ext.DatePicker -editor Ext.Editor -editorgrid Ext.grid.EditorGridPanel -grid Ext.grid.GridPanel -paging Ext.PagingToolbar -panel Ext.Panel -progress Ext.ProgressBar -propertygrid Ext.grid.PropertyGrid -slider Ext.Slider -splitbutton Ext.SplitButton -statusbar Ext.StatusBar -tabpanel Ext.TabPanel -treepanel Ext.tree.TreePanel -viewport Ext.Viewport -window Ext.Window - -Toolbar components ---------------------------------------- -toolbar Ext.Toolbar -tbbutton Ext.Toolbar.Button -tbfill Ext.Toolbar.Fill -tbitem Ext.Toolbar.Item -tbseparator Ext.Toolbar.Separator -tbspacer Ext.Toolbar.Spacer -tbsplit Ext.Toolbar.SplitButton -tbtext Ext.Toolbar.TextItem - -Form components ---------------------------------------- -form Ext.FormPanel -checkbox Ext.form.Checkbox -combo Ext.form.ComboBox -datefield Ext.form.DateField -field Ext.form.Field -fieldset Ext.form.FieldSet -hidden Ext.form.Hidden -htmleditor Ext.form.HtmlEditor -label Ext.form.Label -numberfield Ext.form.NumberField -radio Ext.form.Radio -textarea Ext.form.TextArea -textfield Ext.form.TextField -timefield Ext.form.TimeField -trigger Ext.form.TriggerField -- * @constructor - * @param {Ext.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal - * element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element - * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component. - */ -Ext.Component = function(config){ - config = config || {}; - if(config.initialConfig){ - if(config.isAction){ // actions - this.baseAction = config; - } - config = config.initialConfig; // component cloning / action set up - }else if(config.tagName || config.dom || typeof config == "string"){ // element object - config = {applyTo: config, id: config.id || config}; - } - - /** - * This Component's initial configuration specification. Read-only. - * @type Object - * @property initialConfig - */ - this.initialConfig = config; - - Ext.apply(this, config); - this.addEvents( - /** - * @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. Return false to stop the show. - * @param {Ext.Component} this - */ - 'beforeshow', - /** - * @event show - * Fires after the component is shown. - * @param {Ext.Component} this - */ - 'show', - /** - * @event beforehide - * Fires before the component is hidden. Return false to stop the hide. - * @param {Ext.Component} this - */ - 'beforehide', - /** - * @event hide - * Fires after the component is hidden. - * @param {Ext.Component} this - */ - 'hide', - /** - * @event beforerender - * Fires before the component is rendered. Return false to stop the render. - * @param {Ext.Component} this - */ - 'beforerender', - /** - * @event render - * Fires after the component is rendered. - * @param {Ext.Component} this - */ - 'render', - /** - * @event beforedestroy - * Fires before the component is destroyed. Return false to stop the destroy. - * @param {Ext.Component} this - */ - 'beforedestroy', - /** - * @event destroy - * Fires after the component is destroyed. - * @param {Ext.Component} this - */ - 'destroy', - /** - * @event beforestaterestore - * Fires before the state of the component is restored. Return false to stop the restore. - * @param {Ext.Component} this - * @param {Object} state The hash of state values - */ - 'beforestaterestore', - /** - * @event staterestore - * Fires after the state of the component is restored. - * @param {Ext.Component} this - * @param {Object} state The hash of state values - */ - 'staterestore', - /** - * @event beforestatesave - * Fires before the state of the component is saved to the configured state provider. Return false to stop the save. - * @param {Ext.Component} this - * @param {Object} state The hash of state values - */ - 'beforestatesave', - /** - * @event statesave - * Fires after the state of the component is saved to the configured state provider. - * @param {Ext.Component} this - * @param {Object} state The hash of state values - */ - 'statesave' - ); - this.getId(); - Ext.ComponentMgr.register(this); - Ext.Component.superclass.constructor.call(this); - - if(this.baseAction){ - this.baseAction.addComponent(this); - } - - 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. - /** - * @cfg {String} fieldLabel The label text to display next to this Component (defaults to '') - *
This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- * Example use:
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name'
- }]
-});
-This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- * Example use:
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name',
- labelStyle: 'font-weight:bold;'
- }]
-});
-This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- * Example use:
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name',
- labelSeparator: '...'
- }]
-});
-This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- * Example use:
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield'
- hideLabel: true
- }]
-});
-This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- */ - /** - * @cfg {String} itemCls An additional CSS class to apply to the wrapper's form item element of this field (defaults - * to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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. - *This config is only used when this Component is rendered by a Container which has been - * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.
- * Example use:
-// 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'
- }]
-});
-
-{xtype:'box', autoEl: 'div', cls:'my-class'}
-{xtype:'box', autoEl: {tag:'blockquote', html:'autoEl is cool!'}} // with DomHelper
-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 {@link #stateId} or {@link #id} - * 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.
- * 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.
- *To set the state provider for the current page:
- *
-Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
-Components attempt to save state when one of the events listed in the {@link #stateEvents} - * configuration fires.
- *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
- */ - /** - * @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). - *See {@link #stateful} for an explanation of saving and restoring Component state.
- */ - /* //internal - to be set by subclasses - * @cfg {Array} stateEvents - * An array of events that, when fired, should trigger this component to save its state (defaults to none). - * These can be any types of events supported by this component, including browser or custom events (e.g., - * ['click', 'customerchange']). - *See {@link #stateful} for an explanation of saving and restoring Component state.
- */ - - /** - * @cfg {String} disabledClass - * CSS class added to the component when it is disabled (defaults to "x-item-disabled"). - */ - disabledClass : "x-item-disabled", - /** - * @cfg {Boolean} allowDomMove - * Whether the component can move the Dom node when rendering (defaults to true). - */ - allowDomMove : true, - /** - * @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, - /** - * @cfg {String} hideMode - *How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative - * offset position) and "display" (css display) - defaults to "display".
- *For Containers which may be hidden and shown as part of a {@link Ext.layout.CardLayout card layout} Container such as a - * {@link Ext.TabPanel TabPanel}, it is recommended that hideMode is configured as "offsets". This ensures - * that hidden Components still have height and width so that layout managers can perform measurements when - * calculating layouts.
- */ - hideMode: 'display', - /** - * @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, - - /** - * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when - * the component is added to a container). Read-only. - * @type Ext.Container - * @property ownerCt - */ - /** - * True if this component is hidden. Read-only. - * @type Boolean - * @property - */ - hidden : false, - /** - * True if this component is disabled. Read-only. - * @type Boolean - * @property - */ - disabled : false, - /** - * True if this component has been rendered. Read-only. - * @type Boolean - * @property - */ - rendered : false, - - // private - ctype : "Ext.Component", - - // private - actionMode : "el", - - // private - getActionEl : function(){ - return this[this.actionMode]; - }, - - initPlugin : function(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). - *
-// 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
- });
- }
-}
-Render this Component into the passed HTML element.
- *If you are using a {@link Ext.Container Container} object to house this Component, then - * do not use the render method.
- *A Container's child Components are rendered by that Container's - * {@link Ext.Container#layout layout} manager when the Container is first rendered.
- *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}.
- *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.
- *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.
- *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.
- * @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 before - * 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(typeof position == 'number'){ - 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){ - this.hide(); - } - if(this.disabled){ - this.disable(); - } - - if(this.stateful !== false){ - this.initStateEvents(); - } - } - return 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){ - 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); - } - } - } - }, - - /** - * Apply this component to existing markup that is valid. With this function, no call to render() is required. - * @param {String/HTMLElement} el - */ - applyToMarkup : function(el){ - this.allowDomMove = false; - this.el = Ext.get(el); - this.render(this.el.dom.parentNode); - }, - - /** - * Adds a CSS class to the component's underlying element. - * @param {string} cls The CSS class name to add - */ - addClass : function(cls){ - if(this.el){ - this.el.addClass(cls); - }else{ - this.cls = this.cls ? this.cls + ' ' + cls : cls; - } - }, - - /** - * Removes a CSS class from the component's underlying element. - * @param {string} cls The CSS class name to remove - */ - removeClass : function(cls){ - if(this.el){ - this.el.removeClass(cls); - }else if(this.cls){ - this.cls = this.cls.split(' ').remove(cls).join(' '); - } - }, - - // private - // default function is not really useful - onRender : function(ct, position){ - if(this.autoEl){ - if(typeof this.autoEl == 'string'){ - 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); - } - } - }, - - // private - getAutoCreate : function(){ - var cfg = typeof this.autoCreate == "object" ? - this.autoCreate : Ext.apply({}, this.defaultAutoCreate); - if(this.id && !cfg.id){ - cfg.id = this.id; - } - return cfg; - }, - - // private - afterRender : Ext.emptyFn, - - /** - * 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.fireEvent("beforedestroy", this) !== false){ - this.beforeDestroy(); - if(this.rendered){ - this.el.removeAllListeners(); - this.el.remove(); - if(this.actionMode == "container"){ - this.container.remove(); - } - } - this.onDestroy(); - Ext.ComponentMgr.unregister(this); - this.fireEvent("destroy", this); - this.purgeListeners(); - } - }, - - // private - beforeDestroy : Ext.emptyFn, - - // private - onDestroy : Ext.emptyFn, - - /** - * Returns the underlying {@link Ext.Element}. - * @return {Ext.Element} The element - */ - getEl : function(){ - return this.el; - }, - - /** - * Returns the id of this component. - * @return {String} - */ - getId : function(){ - return this.id || (this.id = "ext-comp-" + (++Ext.Component.AUTO_ID)); - }, - - /** - * Returns the item id of this component. - * @return {String} - */ - getItemId : function(){ - return this.itemId || this.getId(); - }, - - /** - * 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.focus.defer(typeof delay == 'number' ? delay : 10, this, [selectText, false]); - return; - } - if(this.rendered){ - this.el.focus(); - if(selectText === true){ - this.el.dom.select(); - } - } - return this; - }, - - // private - blur : function(){ - if(this.rendered){ - this.el.blur(); - } - return this; - }, - - /** - * Disable this component. - * @return {Ext.Component} this - */ - disable : function(){ - if(this.rendered){ - this.onDisable(); - } - this.disabled = true; - this.fireEvent("disable", this); - return this; - }, - - // private - onDisable : function(){ - this.getActionEl().addClass(this.disabledClass); - this.el.dom.disabled = true; - }, - - /** - * Enable this component. - * @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; - }, - - /** - * Convenience function for setting disabled/enabled by boolean. - * @param {Boolean} disabled - */ - setDisabled : function(disabled){ - this[disabled ? "disable" : "enable"](); - }, - - /** - * Show this component. - * @return {Ext.Component} this - */ - show: function(){ - if(this.fireEvent("beforeshow", this) !== false){ - this.hidden = false; - if(this.autoRender){ - this.render(typeof this.autoRender == 'boolean' ? Ext.getBody() : this.autoRender); - } - if(this.rendered){ - this.onShow(); - } - this.fireEvent("show", this); - } - return this; - }, - - // private - onShow : function(){ - if(this.hideParent){ - this.container.removeClass('x-hide-' + this.hideMode); - }else{ - this.getActionEl().removeClass('x-hide-' + this.hideMode); - } - - }, - - /** - * Hide this component. - * @return {Ext.Component} this - */ - hide: function(){ - if(this.fireEvent("beforehide", this) !== false){ - this.hidden = true; - if(this.rendered){ - this.onHide(); - } - this.fireEvent("hide", this); - } - return this; - }, - - // private - onHide : function(){ - if(this.hideParent){ - this.container.addClass('x-hide-' + this.hideMode); - }else{ - this.getActionEl().addClass('x-hide-' + this.hideMode); - } - }, - - /** - * 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){ - if(visible) { - this.show(); - }else{ - this.hide(); - } - return this; - }, - - /** - * Returns true if this component is visible. - */ - isVisible : function(){ - return this.rendered && this.getActionEl().isVisible(); - }, - - /** - * 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); - }, - - /** - * 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: - *
-var t = new Ext.form.TextField();
-alert(t.getXType()); // alerts 'textfield'
-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.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
-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.TextField();
-alert(t.getXTypes()); // alerts 'component/box/field/textfield'
-