/*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** + + + +The source code + + + + +/** * @class Ext.Component * @extends Ext.util.Observable *Base class for all Ext components. All subclasses of Component may participate in the automated @@ -80,7 +75,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} @@ -149,6 +144,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. @@ -188,6 +191,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 @@ -283,7 +293,7 @@ Ext.Component = function(config){ } if(this.stateful !== false){ - this.initState(config); + this.initState(); } if(this.applyTo){ @@ -794,6 +804,53 @@ 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.
+ */
+
+
// private
ctype : 'Ext.Component',
@@ -909,7 +966,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();
@@ -922,17 +1004,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({
@@ -953,33 +1088,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);
}
}
@@ -1084,6 +1236,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;
+ }
}
}
},
@@ -1111,9 +1267,12 @@ var myGrid = new Ext.grid.EditorGridPanel({
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.removeAllListeners();
this.el.remove();
if(this.actionMode == 'container' || this.removeMode == 'container'){
this.container.remove();
@@ -1123,11 +1282,19 @@ var myGrid = new Ext.grid.EditorGridPanel({
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,
@@ -1159,6 +1326,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:
@@ -1440,8 +1612,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
@@ -1459,7 +1632,7 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
}, this);
this.mons = [];
},
-
+
// private
createMons: function(){
if(!this.mons){
@@ -1468,7 +1641,26 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
}
},
- // internal function for auto removal of assigned event handlers on destruction
+ /**
+ * 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)){
@@ -1502,7 +1694,15 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
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();
@@ -1555,7 +1755,6 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield'
}
});
-Ext.reg('component', Ext.Component);
-