The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.
Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided as direct properties of the Ext namespace.Also many frequently used methods from other classes are provided as shortcuts within the Ext namespace. For example Ext.getCmp aliases Ext.ComponentMgr.get.
Many applications are initiated with Ext.onReady which is called once the DOM is ready. This ensures all scripts have been loaded, preventing dependency issues. For example
Ext.onReady(function(){
new Ext.Component({
renderTo: document.body,
html: 'DOM ready!'
});
});For more information about how to use the Ext classes, see The Learning Center The FAQ The forums
Ext.addBehaviors({
// add a listener for click on all anchors in element with id foo
'#foo a@click' : function(e, t){
// do something
},
// add the same listener to multiple selectors (separated by comma BEFORE the @)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});example:
ImageComponent = Ext.extend(Ext.Component, {
initComponent: function() {
this.autoEl = { tag: 'img' };
MyComponent.superclass.initComponent.apply(this, arguments);
this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
}
});this reference) in which the function is executed.
If omitted, defaults to the browser window.this reference) in which the passed function is executed.
If omitted, defaults to the scope in which the original function is called or the browser window.Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Shorthand of Ext.core.Element-fly
Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
This method does not retrieve Components. This method retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentMgr-get.
Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.
Shorthand of Ext.core.Element-get// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);
// If we don't know if we are working with an
// Ext.core.Element or a dom node use Ext.getDom
function(el){
var dom = Ext.getDom(el);
// do something with the dom node
}// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]this reference) in which the specified function is executed. Defaults to
the object being iterated.Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes. Usage:
Ext.namespace('Company', 'Company.data');
// equivalent and preferable to the above syntax
Ext.namespace('Company.data');
Company.Widget = function() { ... };
Company.data.CustomStore = function(config) { ... };// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
// Example 2:
Ext.partition(
Ext.query("p"),
function(val){
return val.className == "class1"
}
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.Creates a new store for the given id and config, then registers it with the Store Mananger. Sample usage:
Ext.regStore('AllUsers', {
model: 'User'
});
//the store can now easily be used throughout the application
new Ext.List({
store: 'AllUsers',
... other config
});Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
All DOM event listeners are removed from this element. If Ext.enableNestedListenerRemoval is
true, then DOM event listeners are also removed from all child nodes. The body node
will be ignored if passed in.
Ext.urlDecode("foo=1&bar=2"); // returns {foo: "1", bar: "2"}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); // returns {foo: "1", bar: ["2", "3", "4"]}Utility method for returning a default value if the passed value is empty.
The value is deemed to be empty if it is
Convenient shorthand to create a widget by its xtype, also see Ext.ClassManager-instantiateByAlias
var button = Ext.widget('button'); // Equivalent to Ext.create('widget.button')
var panel = Ext.widget('panel'); // Equivalent to Ext.create('widget.panel')Zips N sets together.
// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
[ "+", "-", "+"],
[ 12, 10, 22],
[ 43, 15, 96],
function(a, b, c){
return "$" + a + "" + b + "." + c
}
); // ["$+12.43", "$-10.15", "$+22.96"]