values to the template and appends
* the new node(s) to the specified el.
* For example usage {@link #Template see the constructor}.
* @param {Mixed} el The context element * @param {Object/Array} values * The template values. Can be an array if the params are numeric (i.e.{0})
* or an object (i.e. {foo: 'bar'}).
* @param {Boolean} returnElement (optional) true to return an Ext.core.Element (defaults to undefined)
* @return {HTMLElement/Ext.core.Element} The new node or Element
*/
append: function(el, values, returnElement) {
return this.doInsert('beforeEnd', el, values, returnElement);
},
doInsert: function(where, el, values, returnEl) {
el = Ext.getDom(el);
var newNode = Ext.core.DomHelper.insertHtml(where, el, this.applyTemplate(values));
return returnEl ? Ext.get(newNode, true) : newNode;
},
/**
* Applies the supplied values to the template and overwrites the content of el with the new node(s).
* @param {Mixed} el The context element
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
* @return {HTMLElement/Ext.core.Element} The new node or Element
*/
overwrite: function(el, values, returnElement) {
el = Ext.getDom(el);
el.innerHTML = this.applyTemplate(values);
return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
}
}, function() {
/**
* Alias for {@link #applyTemplate}
* Returns an HTML fragment of this template with the specified values applied.
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. {0})
* or an object (i.e. {foo: 'bar'}).
* @return {String} The HTML fragment
* @member Ext.Template
* @method apply
*/
this.createAlias('apply', 'applyTemplate');
});
/**
* @class Ext.ComponentQuery
* @extends Object
* @singleton
*
* Provides searching of Components within Ext.ComponentManager (globally) or a specific
* Ext.container.Container on the document with a similar syntax to a CSS selector.
*
* Components can be retrieved by using their {@link Ext.Component xtype} with an optional . prefix
*
* - `component` or `.component`
* - `gridpanel` or `.gridpanel`
*
* An itemId or id must be prefixed with a #
*
* - `#myContainer`
*
* Attributes must be wrapped in brackets
*
* - `component[autoScroll]`
* - `panel[title="Test"]`
*
* Member expressions from candidate Components may be tested. If the expression returns a *truthy* value,
* the candidate Component will be included in the query:
*
* var disabledFields = myFormPanel.query("{isDisabled()}");
*
* Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:
*
* // Function receives array and returns a filtered array.
* Ext.ComponentQuery.pseudos.invalid = function(items) {
* var i = 0, l = items.length, c, result = [];
* for (; i < l; i++) {
* if (!(c = items[i]).isValid()) {
* result.push(c);
* }
* }
* return result;
* };
*
* var invalidFields = myFormPanel.query('field:invalid');
* if (invalidFields.length) {
* invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
* for (var i = 0, l = invalidFields.length; i < l; i++) {
* invalidFields[i].getEl().frame("red");
* }
* }
*
* Default pseudos include:
*
* - not
*
* Queries return an array of components.
* Here are some example queries.
*
* // retrieve all Ext.Panels in the document by xtype
* var panelsArray = Ext.ComponentQuery.query('panel');
*
* // retrieve all Ext.Panels within the container with an id myCt
* var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
*
* // retrieve all direct children which are Ext.Panels within myCt
* var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
*
* // retrieve all grids and trees
* var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
*
* For easy access to queries based from a particular Container see the {@link Ext.container.Container#query},
* {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
* {@link Ext.Component#up}.
*/
Ext.define('Ext.ComponentQuery', {
singleton: true,
uses: ['Ext.ComponentManager']
}, function() {
var cq = this,
// A function source code pattern with a placeholder which accepts an expression which yields a truth value when applied
// as a member on each item in the passed array.
filterFnPattern = [
'var r = [],',
'i = 0,',
'it = items,',
'l = it.length,',
'c;',
'for (; i < l; i++) {',
'c = it[i];',
'if (c.{0}) {',
'r.push(c);',
'}',
'}',
'return r;'
].join(''),
filterItems = function(items, operation) {
// Argument list for the operation is [ itemsArray, operationArg1, operationArg2...]
// The operation's method loops over each item in the candidate array and
// returns an array of items which match its criteria
return operation.method.apply(this, [ items ].concat(operation.args));
},
getItems = function(items, mode) {
var result = [],
i = 0,
length = items.length,
candidate,
deep = mode !== '>';
for (; i < length; i++) {
candidate = items[i];
if (candidate.getRefItems) {
result = result.concat(candidate.getRefItems(deep));
}
}
return result;
},
getAncestors = function(items) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
while (!!(candidate = (candidate.ownerCt || candidate.floatParent))) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which match the passed xtype
filterByXType = function(items, xtype, shallow) {
if (xtype === '*') {
return items.slice();
}
else {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.isXType(xtype, shallow)) {
result.push(candidate);
}
}
return result;
}
},
// Filters the passed candidate array and returns only items which have the passed className
filterByClassName = function(items, className) {
var EA = Ext.Array,
result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.el ? candidate.el.hasCls(className) : EA.contains(candidate.initCls(), className)) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified property match
filterByAttribute = function(items, property, operator, value) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (!value ? !!candidate[property] : (String(candidate[property]) === value)) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified itemId or id
filterById = function(items, id) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.getItemId() === id) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which the named pseudo class matcher filters in
filterByPseudo = function(items, name, value) {
return cq.pseudos[name](items, value);
},
// Determines leading mode
// > for direct child, and ^ to switch to ownerCt axis
modeRe = /^(\s?([>\^])\s?|\s|$)/,
// Matches a token with possibly (true|false) appended for the "shallow" parameter
tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
matchers = [{
// Checks for .xtype with possibly (true|false) appended for the "shallow" parameter
re: /^\.([\w\-]+)(?:\((true|false)\))?/,
method: filterByXType
},{
// checks for [attribute=value]
re: /^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/,
method: filterByAttribute
}, {
// checks for #cmpItemId
re: /^#([\w\-]+)/,
method: filterById
}, {
// checks for :Represents a filter that can be applied to a {@link Ext.util.MixedCollection MixedCollection}. Can either simply * filter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the context * of MixedCollections, though {@link Ext.data.Store Store}s frequently create them when filtering and searching on their * records. Example usage:
//set up a fictional MixedCollection containing a few people to filter on
var allNames = new Ext.util.MixedCollection();
allNames.addAll([
{id: 1, name: 'Ed', age: 25},
{id: 2, name: 'Jamie', age: 37},
{id: 3, name: 'Abe', age: 32},
{id: 4, name: 'Aaron', age: 26},
{id: 5, name: 'David', age: 32}
]);
var ageFilter = new Ext.util.Filter({
property: 'age',
value : 32
});
var longNameFilter = new Ext.util.Filter({
filterFn: function(item) {
return item.name.length > 4;
}
});
//a new MixedCollection with the 3 names longer than 4 characters
var longNames = allNames.filter(longNameFilter);
//a new MixedCollection with the 2 people of age 24:
var youngFolk = allNames.filter(ageFilter);
Ext.get('el').load({
url: 'myPage.php',
scripts: true,
params: {
id: 1
}
});
* * In general this class will not be instanced directly, rather the {@link Ext.core.Element#load} method * will be used. *
*/ Ext.define('Ext.ElementLoader', { /* Begin Definitions */ mixins: { observable: 'Ext.util.Observable' }, uses: [ 'Ext.data.Connection', 'Ext.Ajax' ], statics: { Renderer: { Html: function(loader, response, active){ loader.getTarget().update(response.responseText, active.scripts === true); return true; } } }, /* End Definitions */ /** * @cfg {String} url The url to retrieve the content from. Defaults to null. */ url: null, /** * @cfg {Object} params Any params to be attached to the Ajax request. These parameters will * be overridden by any params in the load options. Defaults to null. */ params: null, /** * @cfg {Object} baseParams Params that will be attached to every request. These parameters * will not be overridden by any params in the load options. Defaults to null. */ baseParams: null, /** * @cfg {Boolean/Object} autoLoad True to have the loader make a request as soon as it is created. Defaults to false. * This argument can also be a set of options that will be passed to {@link #load} is called. */ autoLoad: false, /** * @cfg {Mixed} target The target element for the loader. It can be the DOM element, the id or an Ext.Element. */ target: null, /** * @cfg {Mixed} loadMask True or a string to show when the element is loading. */ loadMask: false, /** * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to null. */ ajaxOptions: null, /** * @cfg {Boolean} scripts True to parse any inline script tags in the response. */ scripts: false, /** * @cfg {Function} success A function to be called when a load request is successful. */ /** * @cfg {Function} failure A function to be called when a load request fails. */ /** * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in. */ /** * @cfg {Function} renderer A custom function to render the content to the element. The passed parameters * are *This class is intended to be extended or created via the {@link Ext.Component#componentLayout layout} * configuration property. See {@link Ext.Component#componentLayout} for additional details.
*/ Ext.define('Ext.layout.component.Component', { /* Begin Definitions */ extend: 'Ext.layout.Layout', /* End Definitions */ type: 'component', monitorChildren: true, initLayout : function() { var me = this, owner = me.owner, ownerEl = owner.el; if (!me.initialized) { if (owner.frameSize) { me.frameSize = owner.frameSize; } else { owner.frameSize = me.frameSize = { top: 0, left: 0, bottom: 0, right: 0 }; } } me.callParent(arguments); }, beforeLayout : function(width, height, isSetSize, callingContainer) { this.callParent(arguments); var me = this, owner = me.owner, ownerCt = owner.ownerCt, layout = owner.layout, isVisible = owner.isVisible(true), ownerElChild = owner.el.child, layoutCollection; // Cache the size we began with so we can see if there has been any effect. me.previousComponentSize = me.lastComponentSize; //Do not allow autoing of any dimensions which are fixed, unless we are being told to do so by the ownerCt's layout. if (!isSetSize && ((!Ext.isNumber(width) && owner.isFixedWidth()) || (!Ext.isNumber(height) && owner.isFixedHeight())) && callingContainer !== ownerCt) { me.doContainerLayout(); return false; } // If an ownerCt is hidden, add my reference onto the layoutOnShow stack. Set the needsLayout flag. // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown. if (!isVisible && (owner.hiddenAncestor || owner.floating)) { if (owner.hiddenAncestor) { layoutCollection = owner.hiddenAncestor.layoutOnShow; layoutCollection.remove(owner); layoutCollection.add(owner); } owner.needsLayout = { width: width, height: height, isSetSize: false }; } if (isVisible && this.needsLayout(width, height)) { return owner.beforeComponentLayout(width, height, isSetSize, callingContainer); } else { return false; } }, /** * Check if the new size is different from the current size and only * trigger a layout if it is necessary. * @param {Mixed} width The new width to set. * @param {Mixed} height The new height to set. */ needsLayout : function(width, height) { var me = this, widthBeingChanged, heightBeingChanged; me.lastComponentSize = me.lastComponentSize || { width: -Infinity, height: -Infinity }; // If autoWidthing, or an explicitly different width is passed, then the width is being changed. widthBeingChanged = !Ext.isDefined(width) || me.lastComponentSize.width !== width; // If autoHeighting, or an explicitly different height is passed, then the height is being changed. heightBeingChanged = !Ext.isDefined(height) || me.lastComponentSize.height !== height; // isSizing flag added to prevent redundant layouts when going up the layout chain return !me.isSizing && (me.childrenChanged || widthBeingChanged || heightBeingChanged); }, /** * Set the size of any element supporting undefined, null, and values. * @param {Mixed} width The new width to set. * @param {Mixed} height The new height to set. */ setElementSize: function(el, width, height) { if (width !== undefined && height !== undefined) { el.setSize(width, height); } else if (height !== undefined) { el.setHeight(height); } else if (width !== undefined) { el.setWidth(width); } }, /** * Returns the owner component's resize element. * @return {Ext.core.Element} */ getTarget : function() { return this.owner.el; }, /** *Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.
* May be overridden in Component layout managers which implement an inner element. * @return {Ext.core.Element} */ getRenderTarget : function() { return this.owner.el; }, /** * Set the size of the target element. * @param {Mixed} width The new width to set. * @param {Mixed} height The new height to set. */ setTargetSize : function(width, height) { var me = this; me.setElementSize(me.owner.el, width, height); if (me.owner.frameBody) { var targetInfo = me.getTargetInfo(), padding = targetInfo.padding, border = targetInfo.border, frameSize = me.frameSize; me.setElementSize(me.owner.frameBody, Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width, Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height ); } me.autoSized = { width: !Ext.isNumber(width), height: !Ext.isNumber(height) }; me.lastComponentSize = { width: width, height: height }; }, getTargetInfo : function() { if (!this.targetInfo) { var target = this.getTarget(), body = this.owner.getTargetEl(); this.targetInfo = { padding: { top: target.getPadding('t'), right: target.getPadding('r'), bottom: target.getPadding('b'), left: target.getPadding('l') }, border: { top: target.getBorderWidth('t'), right: target.getBorderWidth('r'), bottom: target.getBorderWidth('b'), left: target.getBorderWidth('l') }, bodyMargin: { top: body.getMargin('t'), right: body.getMargin('r'), bottom: body.getMargin('b'), left: body.getMargin('l') } }; } return this.targetInfo; }, // Start laying out UP the ownerCt's layout when flagged to do so. doOwnerCtLayouts: function() { var owner = this.owner, ownerCt = owner.ownerCt, ownerCtComponentLayout, ownerCtContainerLayout, curSize = this.lastComponentSize, prevSize = this.previousComponentSize, widthChange = (prevSize && curSize && curSize.width) ? curSize.width !== prevSize.width : true, heightChange = (prevSize && curSize && curSize.height) ? curSize.height !== prevSize.height : true; // If size has not changed, do not inform upstream layouts if (!ownerCt || (!widthChange && !heightChange)) { return; } ownerCtComponentLayout = ownerCt.componentLayout; ownerCtContainerLayout = ownerCt.layout; if (!owner.floating && ownerCtComponentLayout && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) { if (!ownerCt.suspendLayout && ownerCtContainerLayout && !ownerCtContainerLayout.layoutBusy) { // If the owning Container may be adjusted in any of the the dimension which have changed, perform its Component layout if (((widthChange && !ownerCt.isFixedWidth()) || (heightChange && !ownerCt.isFixedHeight()))) { // Set the isSizing flag so that the upstream Container layout (called after a Component layout) can omit this component from sizing operations this.isSizing = true; ownerCt.doComponentLayout(); this.isSizing = false; } // Execute upstream Container layout else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) { ownerCtContainerLayout.layout(); } } } }, doContainerLayout: function() { var me = this, owner = me.owner, ownerCt = owner.ownerCt, layout = owner.layout, ownerCtComponentLayout; // Run the container layout if it exists (layout for child items) // **Unless automatic laying out is suspended, or the layout is currently running** if (!owner.suspendLayout && layout && layout.isLayout && !layout.layoutBusy && !layout.isAutoDock) { layout.layout(); } // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache. if (ownerCt && ownerCt.componentLayout) { ownerCtComponentLayout = ownerCt.componentLayout; if (!owner.floating && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) { ownerCtComponentLayout.childrenChanged = true; } } }, afterLayout : function(width, height, isSetSize, layoutOwner) { this.doContainerLayout(); this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner); } }); /** * @class Ext.state.Manager * This is the global state manager. By default all components that are "state aware" check this class * for state information if you don't pass them a custom state provider. In order for this class * to be useful, it must be initialized with a provider when your application initializes. Example usage:
// in your initialization function
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var win = new Window(...);
win.restoreState();
}
A flag which causes the object to attempt to restore the state of
* internal properties from a saved state on startup. The object must have
* a {@link #stateId} 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 object.
*
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({
expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
* A stateful object attempts to save state when one of the events
* listed in the {@link #stateEvents} configuration fires.
To save state, a stateful object first serializes its state by
* calling {@link #getState}. By default, this function does
* nothing. The developer must provide an implementation which returns an
* object hash which represents the restorable state of the object.
The value yielded by getState is passed to {@link Ext.state.Manager#set}
* which uses the configured {@link Ext.state.Provider} to save the object
* keyed by the {@link #stateId}
During construction, a stateful object attempts to restore
* its state by calling {@link Ext.state.Manager#get} passing the
* {@link #stateId}
The resulting object is passed to {@link #applyState}.
* The default implementation of {@link #applyState} simply copies
* properties into the object, but a developer may override this to support
* more behaviour.
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.
*/ stateful: true, /** * @cfg {String} stateId * The unique id for this object to use for state management purposes. *See {@link #stateful} for an explanation of saving and restoring state.
*/ /** * @cfg {Array} stateEvents *An array of events that, when fired, should trigger this object to
* save its state (defaults to none). stateEvents may be any type
* of event supported by this object, including browser or custom events
* (e.g., ['click', 'customerchange']).
See {@link #stateful} for an explanation of saving and
* restoring object state.
undefined if not found.
*/
get : function(id) {
return this.all.get(id);
},
/**
* Registers an item to be managed
* @param {Mixed} item The item to register
*/
register: function(item) {
this.all.add(item);
},
/**
* Unregisters an item by removing it from this manager
* @param {Mixed} item The item to unregister
*/
unregister: function(item) {
this.all.remove(item);
},
/**
* Registers a new item constructor, keyed by a type key.
* @param {String} type The mnemonic string by which the class may be looked up.
* @param {Constructor} cls The new instance class.
*/
registerType : function(type, cls) {
this.types[type] = cls;
cls[this.typeName] = type;
},
/**
* Checks if an item type is registered.
* @param {String} type The mnemonic string by which the class may be looked up
* @return {Boolean} Whether the type is registered.
*/
isRegistered : function(type){
return this.types[type] !== undefined;
},
/**
* Creates and returns an instance of whatever this manager manages, based on the supplied type and config object
* @param {Object} config The config object
* @param {String} defaultType If no type is discovered in the config object, we fall back to this type
* @return {Mixed} The instance of whatever this manager is managing
*/
create: function(config, defaultType) {
var type = config[this.typeName] || config.type || defaultType,
Constructor = this.types[type];
return new Constructor(config);
},
/**
* Registers a function that will be called when an item with the specified id is added to the manager. This will happen on instantiation.
* @param {String} id The item id
* @param {Function} fn The callback function. Called with a single parameter, the item.
* @param {Object} scope The scope (this reference) in which the callback is executed. Defaults to the item.
*/
onAvailable : function(id, fn, scope){
var all = this.all,
item;
if (all.containsKey(id)) {
item = all.get(id);
fn.call(scope || item, item);
} else {
all.on('add', function(map, key, item){
if (key == id) {
fn.call(scope || item, item);
all.un('add', fn, scope);
}
});
}
},
/**
* Executes the specified function once for each item in the collection.
* Returning false from the function will cease iteration.
*
* The paramaters passed to the function are:
*
The key of the item
The value of the item
The total number of items in the collection
Provides a registry of available Plugin classes indexed by a mnemonic code known as the Plugin's ptype.
* The {@link Ext.Component#xtype xtype} provides a way to avoid instantiating child Components
* when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
* as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
* needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
ptype. (Optional if the config contains a ptype).
* @return {Ext.Component} The newly instantiated Plugin.
*/
//create: function(plugin, defaultType) {
// if (plugin instanceof this) {
// return plugin;
// } else {
// var type, config = {};
//
// if (Ext.isString(plugin)) {
// type = plugin;
// }
// else {
// type = plugin[this.typeName] || defaultType;
// config = plugin;
// }
//
// return Ext.createByAlias('plugin.' + type, config);
// }
//},
create : function(config, defaultType){
if (config.init) {
return config;
} else {
return Ext.createByAlias('plugin.' + (config.ptype || defaultType), config);
}
// Prior system supported Singleton plugins.
//var PluginCls = this.types[config.ptype || defaultType];
//if (PluginCls.init) {
// return PluginCls;
//} else {
// return new PluginCls(config);
//}
},
/**
* Returns all plugins registered with the given type. Here, 'type' refers to the type of plugin, not its ptype.
* @param {String} type The type to search for
* @param {Boolean} defaultsOnly True to only return plugins of this type where the plugin's isDefault property is truthy
* @return {Array} All matching plugins
*/
findByType: function(type, defaultsOnly) {
var matches = [],
types = this.types;
for (var name in types) {
if (!types.hasOwnProperty(name)) {
continue;
}
var item = types[name];
if (item.type == type && (!defaultsOnly || (defaultsOnly === true && item.isDefault))) {
matches.push(item);
}
}
return matches;
}
}, function() {
/**
* Shorthand for {@link Ext.PluginManager#registerType}
* @param {String} ptype The ptype mnemonic string by which the Plugin class
* may be looked up.
* @param {Constructor} cls The new Plugin class.
* @member Ext
* @method preg
*/
Ext.preg = function() {
return Ext.PluginManager.registerType.apply(Ext.PluginManager, arguments);
};
});
/**
* @class Ext.ComponentManager
* @extends Ext.AbstractManager
* Provides a registry of all Components (instances of {@link Ext.Component} or any subclass * thereof) on a page so that they can be easily accessed by {@link Ext.Component component} * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).
*This object also provides a registry of available Component classes
* indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
* The xtype provides a way to avoid instantiating child Components
* when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
* as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
* needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
xtype. (Optional if the config contains a xtype).
* @return {Ext.Component} The newly instantiated Component.
*/
create: function(component, defaultType){
if (component instanceof Ext.AbstractComponent) {
return component;
}
else if (Ext.isString(component)) {
return Ext.createByAlias('widget.' + component);
}
else {
var type = component.xtype || defaultType,
config = component;
return Ext.createByAlias('widget.' + type, config);
}
},
registerType: function(type, cls) {
this.types[type] = cls;
cls[this.typeName] = type;
cls.prototype[this.typeName] = type;
}
});
/**
* @class Ext.XTemplate
* @extends Ext.Template
* A template class that supports advanced functionality like:
XTemplate provides the templating mechanism built into:
This is the data object used for reference in each code example:
*
var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Sencha Inc.',
email: 'tommy@sencha.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'],
kids: [{
name: 'Joshua',
age:3
},{
name: 'Matthew',
age:2
},{
name: 'Solomon',
age:0
}]
};
The tpl tag and the for operator are used * to process the provided data object: *
<tpl for=".">...</tpl> // loop through array at root node
<tpl for="foo">...</tpl> // loop through array at foo node
<tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}</p>', // use current array index to autonumber
'</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
An example illustrating how the for property can be leveraged * to access specified members of the provided data object to populate the template:
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">', // interrogate the kids property within the data
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data); // pass the root node of the data object
Flat arrays that contain values (and not objects) can be auto-rendered * using the special {.} variable inside a loop. This variable * will represent the value of the array at the current index:
*
var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
When processing a sub-template, for example while looping through a child array, * you can access the parent object's members via the parent object:
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
The tpl tag and the if operator are used * to provide conditional checks for deciding whether or not to render specific * parts of the template. Notes:
<tpl if="age > 1 && age < 10">Child</tpl>
<tpl if="age >= 10 && age < 18">Teenager</tpl>
<tpl if="this.isGirl(name)">...</tpl>
<tpl if="id==\'download\'">...</tpl>
<tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
// no good:
<tpl if="name == "Tommy"">Hello</tpl>
// encode " if it is part of the condition, e.g.
<tpl if="name == "Tommy"">Hello</tpl>
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
The following basic math operators may be applied directly on numeric * data values:
* + - * / ** For example: *
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">', // <-- Note that the > is encoded
'<p>{#}: {name}</p>', // <-- Auto-number each item
'<p>In 5 Years: {age+5}</p>', // <-- Basic math
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
Anything between {[ ... ]} is considered code to be executed
* in the scope of the template. There are some special variables available in that code:
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
One or more member functions can be specified in a configuration * object passed into the XTemplate constructor for more complex processing:
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
// use opposite if statement to simulate 'else' processing:
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate configuration:
compiled: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);
tpl.overwrite(panel.body, data);