/** + + + +The source code + + + + +/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.Component * @extends Ext.util.Observable *Base class for all Ext components. All subclasses of Component may participate in the automated @@ -74,7 +81,7 @@ menutextitem {@link Ext.menu.TextItem} Form components --------------------------------------- -form {@link Ext.FormPanel} +form {@link Ext.form.FormPanel} checkbox {@link Ext.form.Checkbox} checkboxgroup {@link Ext.form.CheckboxGroup} combo {@link Ext.form.ComboBox} @@ -143,6 +150,14 @@ Ext.Component = function(config){ Ext.apply(this, config); this.addEvents( +
/** + * @event added + * Fires when a component is added to an Ext.Container + * @param {Ext.Component} this + * @param {Ext.Container} ownerCt Container which holds the component + * @param {number} index Position at which the component was added + */ + 'added', /** * @event disable * Fires after the component is disabled. @@ -182,6 +197,13 @@ Ext.Component = function(config){ * @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 @@ -277,7 +299,7 @@ Ext.Component = function(config){ } if(this.stateful !== false){ - this.initState(config); + this.initState(); } if(this.applyTo){ @@ -293,7 +315,7 @@ Ext.Component = function(config){ Ext.Component.AUTO_ID = 1000; Ext.extend(Ext.Component, Ext.util.Observable, { - // Configs below are used for all Components when rendered by FormLayout. + // Configs below are used for all Components when rendered by FormLayout. /** * @cfg {String} fieldLabelThe label text to display next to this Component (defaults to '').
*Note: this config is only used when this Component is rendered by a Container which @@ -392,7 +414,11 @@ new Ext.FormPanel({ *
See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.
*/ /** - * @cfg {String} itemClsAn additional CSS class to apply to the div wrapping the form item + * @cfg {String} itemCls + *
Note: this config is only used when this Component is rendered by a Container which + * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g. + * {@link Ext.form.FormPanel} or specifying layout:'form').
+ *An additional CSS class to apply to the div wrapping the form item * element of this field. If supplied, itemCls at the field level will override * the default itemCls supplied at the container level. The value specified for * itemCls will be added to the default class ('x-form-item').
@@ -402,35 +428,24 @@ new Ext.FormPanel({ * any other element within the markup for the field. *Note: see the note for {@link #fieldLabel}.
* Example use:- */ - - // Configs below are used for all Components when rendered by AnchorLayout. - /** - * @cfg {String} anchor-// Apply a style to the field's label: +// 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' - }] + height: 100, + renderTo: Ext.getBody(), + items: [{ + xtype: 'textfield', + fieldLabel: 'Name', + itemCls: 'required' //this label will be styled + },{ + xtype: 'textfield', + fieldLabel: 'Favorite Color' + }] });Note: this config is only used when this Component is rendered - * by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} - * based layout manager, for example:
- *- *
- {@link Ext.form.FormPanel}
- *- specifying
- *layout: 'anchor' // or 'form', or 'absolute'See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.
*/ /** @@ -761,9 +776,9 @@ new Ext.Panel({ * @property el */ /** - * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when - * the component is added to a container). Read-only. - *Note: to access items within the container see {@link #itemId}.
+ * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when + * this Component is added to a Container). Read-only. + *Note: to access items within the Container see {@link #itemId}.
* @type Ext.Container * @property ownerCt */ @@ -784,6 +799,61 @@ new Ext.Panel({ */ rendered : false, + /** + * @cfg {String} contentEl + *Optional. Specify an existing HTML element, or the
+ *idof 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.{@link #data} and
+ * {@link #tplWriteMode} configurations.
+ */
+
+ /**
+ * @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 {Mixed} data
+ * The initial set of data to apply to the {@link #tpl} to
+ * update the content area of the Component.
+ */
+
+ /**
+ * @cfg {Array} bubbleEvents
+ * An array of events that, when fired, should be bubbled to any parent container. + * See {@link Ext.util.Observable#enableBubble}. + * Defaults to []. + */ + bubbleEvents: [], + + // private ctype : 'Ext.Component', @@ -836,7 +906,22 @@ Ext.Foo = Ext.extend(Ext.Bar, { } */ - initComponent : Ext.emptyFn, + initComponent : function(){ + /* + * this is double processing, however it allows people to be able to do + * Ext.apply(this, { + * listeners: { + * //here + * } + * }); + * MyClass.superclass.initComponent.call(this); + */ + if(this.listeners){ + this.on(this.listeners); + delete this.listeners; + } + this.enableBubble(this.bubbleEvents); + },
/** *Render this Component into the passed HTML element.
@@ -899,7 +984,32 @@ Ext.Foo = Ext.extend(Ext.Bar, { this.el.addClassOnOver(this.overCls); } this.fireEvent('render', this); + + + // Populate content of the component with html, contentEl or + // a tpl. + var contentTarget = this.getContentTarget(); + if (this.html){ + contentTarget.update(Ext.DomHelper.markup(this.html)); + delete this.html; + } + if (this.contentEl){ + var ce = Ext.getDom(this.contentEl); + Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); + contentTarget.appendChild(ce); + } + if (this.tpl) { + if (!this.tpl.compile) { + this.tpl = new Ext.XTemplate(this.tpl); + } + if (this.data) { + this.tpl[this.tplWriteMode](contentTarget, this.data); + delete this.data; + } + } this.afterRender(this.container); + + if(this.hidden){ // call this so we don't fire initial hide events. this.doHide(); @@ -912,17 +1022,70 @@ Ext.Foo = Ext.extend(Ext.Bar, { if(this.stateful !== false){ this.initStateEvents(); } - this.initRef(); this.fireEvent('afterrender', this); } return this; }, - initRef : function(){ + + /** + * Update the content area of a component. + * @param {Mixed} htmlOrData + * If this component has been configured with a template via the tpl config + * then it will use this argument as data to populate the template. + * If this component was not configured with a template, the components + * content area will be updated via Ext.Element update + * @param {Boolean} loadScripts + * (optional) Only legitimate when using the html configuration. Defaults to false + * @param {Function} callback + * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading + */ + update: function(htmlOrData, loadScripts, cb) { + var contentTarget = this.getContentTarget(); + if (this.tpl && typeof htmlOrData !== "string") { + this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {}); + } else { + var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData; + contentTarget.update(html, loadScripts, cb); + } + }, + + + /** + * @private + * Method to manage awareness of when components are added to their + * respective Container, firing an added event. + * References are established at add time rather than at render time. + * @param {Ext.Container} container Container which holds the component + * @param {number} pos Position at which the component was added + */ + onAdded : function(container, pos) { + this.ownerCt = container; + this.initRef(); + this.fireEvent('added', this, container, pos); + }, + + /** + * @private + * Method to manage awareness of when components are removed from their + * respective Container, firing an removed event. References are properly + * cleaned up after removing a component from its owning container. + */ + onRemoved : function() { + this.removeRef(); + this.fireEvent('removed', this, this.ownerCt); + delete this.ownerCt; + }, + + /** + * @private + * Method to establish a reference to a component. + */ + initRef : function() { /** * @cfg {String} ref - *A path specification, relative to the Component's {@link #ownerCt} specifying into which - * ancestor Container to place a named reference to this Component.
+ *A path specification, relative to the Component's {@link #ownerCt}
+ * specifying into which ancestor Container to place a named reference to this Component.
The ancestor axis can be traversed by using '/' characters in the path. * For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:
var myGrid = new Ext.grid.EditorGridPanel({
@@ -943,33 +1106,50 @@ var myGrid = new Ext.grid.EditorGridPanel({
}
});
In the code above, if the ref had been 'saveButton' the reference would
- * have been placed into the Toolbar. Each '/' in the ref moves up one level from the
- * Component's {@link #ownerCt}.
In the code above, if the ref had been 'saveButton'
+ * the reference would have been placed into the Toolbar. Each '/' in the ref
+ * moves up one level from the Component's {@link #ownerCt}.
Also see the {@link #added} and {@link #removed} events.
ref.
+ */
+ this.refOwner = t;
}
- t[levels[--i]] = this;
+ }
+ },
+
+ removeRef : function() {
+ if (this.refOwner && this.refName) {
+ delete this.refOwner[this.refName];
+ delete this.refOwner;
}
},
// private
- initState : function(config){
+ initState : function(){
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.applyState(Ext.apply({}, state));
this.fireEvent('staterestore', this, state);
}
}
@@ -979,7 +1159,7 @@ var myGrid = new Ext.grid.EditorGridPanel({
// private
getStateId : function(){
- return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);
+ return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id);
},
// private
@@ -992,7 +1172,7 @@ var myGrid = new Ext.grid.EditorGridPanel({
},
// private
- applyState : function(state, config){
+ applyState : function(state){
if(state){
Ext.apply(this, state);
}
@@ -1074,6 +1254,10 @@ var myGrid = new Ext.grid.EditorGridPanel({
this.el = Ext.get(this.el);
if(this.allowDomMove !== false){
ct.dom.insertBefore(this.el.dom, position);
+ if (div) {
+ Ext.removeNode(div);
+ div = null;
+ }
}
}
},
@@ -1099,19 +1283,37 @@ var myGrid = new Ext.grid.EditorGridPanel({
*
*/
destroy : function(){
- if(this.fireEvent('beforedestroy', this) !== false){
- this.beforeDestroy();
- if(this.rendered){
- this.el.removeAllListeners();
- this.el.remove();
- if(this.actionMode == 'container' || this.removeMode == 'container'){
- this.container.remove();
+ 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;
}
- this.onDestroy();
- Ext.ComponentMgr.unregister(this);
- this.fireEvent('destroy', this);
- this.purgeListeners();
+ }
+ },
+
+ deleteMembers : function(){
+ var args = arguments;
+ for(var i = 0, len = args.length; i < len; ++i){
+ delete this[args[i]];
}
},
@@ -1146,6 +1348,11 @@ new Ext.Panel({
return this.el;
},
+ // private
+ getContentTarget : function(){
+ return this.el;
+ },
+
/**
* Returns the id of this component or automatically generates and
* returns an id if an id is not defined yet:
@@ -1175,10 +1382,11 @@ new Ext.Panel({
*/
focus : function(selectText, delay){
if(delay){
- this.focus.defer(Ext.isNumber(delay) ? delay : 10, this, [selectText, false]);
+ this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
+ this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
return;
}
- if(this.rendered){
+ if(this.rendered && !this.isDestroyed){
this.el.focus();
if(selectText === true){
this.el.dom.select();
@@ -1266,7 +1474,7 @@ new Ext.Panel({
// private
onShow : function(){
- this.getVisibiltyEl().removeClass('x-hide-' + this.hideMode);
+ this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
},
/**
@@ -1294,11 +1502,11 @@ new Ext.Panel({
// private
onHide : function(){
- this.getVisibiltyEl().addClass('x-hide-' + this.hideMode);
+ this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
},
// private
- getVisibiltyEl : function(){
+ getVisibilityEl : function(){
return this.hideParent ? this.container : this.getActionEl();
},
@@ -1316,7 +1524,7 @@ new Ext.Panel({
* @return {Boolean} True if this component is visible, false otherwise.
*/
isVisible : function(){
- return this.rendered && this.getVisibiltyEl().isVisible();
+ return this.rendered && this.getVisibilityEl().isVisible();
},
/**
@@ -1427,8 +1635,9 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
});
},
- getDomPositionEl : function(){
- return this.getPositionEl ? this.getPositionEl() : this.getEl();
+ // protected
+ getPositionEl : function(){
+ return this.positionEl || this.el;
},
// private
@@ -1447,15 +1656,38 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
this.mons = [];
},
- // internal function for auto removal of assigned event handlers on destruction
- mon : function(item, ename, fn, scope, opt){
+ // private
+ createMons: function(){
if(!this.mons){
this.mons = [];
this.on('beforedestroy', this.clearMons, this, {single: true});
}
+ },
+ /**
+ * Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
+ * is destroyed. Usage:
+myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
+or:
+myGridPanel.mon(myGridPanel.getSelectionModel(), {
+ selectionchange: handleSelectionChange,
+ buffer: 50
+});
+ename parameter was an event name, this
+ * is the handler function.
+ * @param {Object} scope Optional. If the ename parameter was an event name, this
+ * is the scope (this reference) in which the handler function is executed.
+ * @param {Object} opt Optional. If the ename parameter was an event name, this
+ * is the {@link Ext.util.Observable#addListener addListener} options.
+ */
+ mon : function(item, ename, fn, scope, opt){
+ this.createMons();
if(Ext.isObject(ename)){
- var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
+ var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
var o = ename;
for(var e in o){
@@ -1464,31 +1696,39 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
}
if(Ext.isFunction(o[e])){
// shared options
- this.mons.push({
- item: item, ename: e, fn: o[e], scope: o.scope
- });
- item.on(e, o[e], o.scope, o);
+ this.mons.push({
+ item: item, ename: e, fn: o[e], scope: o.scope
+ });
+ item.on(e, o[e], o.scope, o);
}else{
// individual options
- this.mons.push({
- item: item, ename: e, fn: o[e], scope: o.scope
- });
- item.on(e, o[e]);
+ this.mons.push({
+ item: item, ename: e, fn: o[e], scope: o.scope
+ });
+ item.on(e, o[e]);
}
}
return;
}
-
this.mons.push({
item: item, ename: ename, fn: fn, scope: scope
});
item.on(ename, fn, scope, opt);
},
- // protected, opposite of mon
+ /**
+ * Removes listeners that were added by the {@link #mon} method.
+ * @param {Observable|Element} item The item from which to remove a listener/listeners.
+ * @param {Object|String} ename The event name, or an object containing event name properties.
+ * @param {Function} fn Optional. If the ename parameter was an event name, this
+ * is the handler function.
+ * @param {Object} scope Optional. If the ename parameter was an event name, this
+ * is the scope (this reference) in which the handler function is executed.
+ */
mun : function(item, ename, fn, scope){
var found, mon;
+ this.createMons();
for(var i = 0, len = this.mons.length; i < len; ++i){
mon = this.mons[i];
if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
@@ -1538,7 +1778,6 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
}
});
-Ext.reg('component', Ext.Component);
-