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
*
* 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
var disabledFields = myFormPanel.query("{isDisabled()}");
// 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
*
// 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 gridpanels and listviews
var gridsAndLists = Ext.ComponentQuery.query('gridpanel, listview');
Returns an array of matched Components from within the passed root object.
*This method filters returned Components in a similar way to how CSS selector based DOM * queries work using a textual selector string.
*See class summary for details.
* @param selector The selector string to filter returned Components * @param rootThe Container within which to perform the query. If omitted, all Components * within the document are included in the search.
*This parameter may also be an array of Components to filter according to the selector.
* @returns {Array} The matched Components. * @member Ext.ComponentQuery * @method query */ query: function(selector, root) { var selectors = selector.split(','), length = selectors.length, i = 0, results = [], noDupResults = [], dupMatcher = {}, query, resultsLn, cmp; for (; i < length; i++) { selector = Ext.String.trim(selectors[i]); query = this.cache[selector]; if (!query) { this.cache[selector] = query = this.parse(selector); } results = results.concat(query.execute(root)); } // multiple selectors, potential to find duplicates // lets filter them out. if (length > 1) { resultsLn = results.length; for (i = 0; i < resultsLn; i++) { cmp = results[i]; if (!dupMatcher[cmp.id]) { noDupResults.push(cmp); dupMatcher[cmp.id] = true; } } results = noDupResults; } return results; }, /** * Tests whether the passed Component matches the selector string. * @param component The Component to test * @param selector The selector string to test against. * @return {Boolean} True if the Component matches the selector. * @member Ext.ComponentQuery * @method query */ is: function(component, selector) { if (!selector) { return true; } var query = this.cache[selector]; if (!query) { this.cache[selector] = query = this.parse(selector); } return query.is(component); }, parse: function(selector) { var operations = [], length = matchers.length, lastSelector, tokenMatch, matchedChar, modeMatch, selectorMatch, i, matcher, method; // We are going to parse the beginning of the selector over and // over again, slicing off the selector any portions we converted into an // operation, until it is an empty string. while (selector && lastSelector !== selector) { lastSelector = selector; // First we check if we are dealing with a token like #, * or an xtype tokenMatch = selector.match(tokenRe); if (tokenMatch) { matchedChar = tokenMatch[1]; // If the token is prefixed with a # we push a filterById operation to our stack if (matchedChar === '#') { operations.push({ method: filterById, args: [Ext.String.trim(tokenMatch[2])] }); } // If the token is prefixed with a . we push a filterByClassName operation to our stack // FIXME: Not enabled yet. just needs \. adding to the tokenRe prefix else if (matchedChar === '.') { operations.push({ method: filterByClassName, args: [Ext.String.trim(tokenMatch[2])] }); } // If the token is a * or an xtype string, we push a filterByXType // operation to the stack. else { operations.push({ method: filterByXType, args: [Ext.String.trim(tokenMatch[2]), Boolean(tokenMatch[3])] }); } // Now we slice of the part we just converted into an operation selector = selector.replace(tokenMatch[0], ''); } // If the next part of the query is not a space or > or ^, it means we // are going to check for more things that our current selection // has to comply to. while (!(modeMatch = selector.match(modeRe))) { // Lets loop over each type of matcher and execute it // on our current selector. for (i = 0; selector && i < length; i++) { matcher = matchers[i]; selectorMatch = selector.match(matcher.re); method = matcher.method; // If we have a match, add an operation with the method // associated with this matcher, and pass the regular // expression matches are arguments to the operation. if (selectorMatch) { operations.push({ method: Ext.isString(matcher.method) // Turn a string method into a function by formatting the string with our selector matche expression // A new method is created for different match expressions, eg {id=='textfield-1024'} // Every expression may be different in different selectors. ? Ext.functionFactory('items', Ext.String.format.apply(Ext.String, [method].concat(selectorMatch.slice(1)))) : matcher.method, args: selectorMatch.slice(1) }); selector = selector.replace(selectorMatch[0], ''); break; // Break on match } // Exhausted all matches: It's an error if (i === (length - 1)) { Ext.Error.raise('Invalid ComponentQuery selector: "' + arguments[0] + '"'); } } } // Now we are going to check for a mode change. This means a space // or a > to determine if we are going to select all the children // of the currently matched items, or a ^ if we are going to use the // ownerCt axis as the candidate source. if (modeMatch[1]) { // Assignment, and test for truthiness! operations.push({ mode: modeMatch[2]||modeMatch[1] }); selector = selector.replace(modeMatch[0], ''); } } // Now that we have all our operations in an array, we are going // to create a new Query using these operations. return new cq.Query({ operations: operations }); } }); }); /** * @class Ext.util.Filter * @extends Object *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, layoutOwner) { this.callParent(arguments); var me = this, owner = me.owner, ownerCt = owner.ownerCt, layout = owner.layout, isVisible = owner.isVisible(true), ownerElChild = owner.el.child, layoutCollection; /** * Do not layout calculatedSized components for fixedLayouts unless the ownerCt == layoutOwner * fixedLayouts means layouts which are never auto/auto in the sizing that comes from their ownerCt. * Currently 3 layouts MAY be auto/auto (Auto, Border, and Box) * The reason for not allowing component layouts is to stop component layouts from things such as Updater and * form Validation. */ if (!isSetSize && !(Ext.isNumber(width) && Ext.isNumber(height)) && ownerCt && ownerCt.layout && ownerCt.layout.fixedLayout && ownerCt != layoutOwner) { 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)) { me.rawWidth = width; me.rawHeight = height; return owner.beforeComponentLayout(width, height, isSetSize, layoutOwner); } 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) { this.lastComponentSize = this.lastComponentSize || { width: -Infinity, height: -Infinity }; return (this.childrenChanged || this.lastComponentSize.width !== width || this.lastComponentSize.height !== height); }, /** * 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; if (!ownerCt) { return; } ownerCtComponentLayout = ownerCt.componentLayout; ownerCtContainerLayout = ownerCt.layout; if (!owner.floating && ownerCtComponentLayout && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) { if (!ownerCt.suspendLayout && ownerCtContainerLayout && !ownerCtContainerLayout.layoutBusy) { // AutoContainer Layout and Dock with auto in some dimension if (ownerCtContainerLayout.bindToOwnerCtComponent === true) { ownerCt.doComponentLayout(); } // Box Layouts 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.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];
if (Constructor == undefined) {
Ext.Error.raise("The '" + type + "' type has not been registered with this manager");
}
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);