The DomHelper class provides a layer of abstraction from DOM and transparently supports creating * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates * from your DOM building code.
* *DomHelper element specification object
*A specification object is used when creating elements. Attributes of this object * are assumed to be element attributes, except for 4 special attributes: *
Insertion methods
*Commonly used insertion methods: *
Example
*This is an example, where an unordered list with 3 children items is appended to an existing
* element with id 'my-div':
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
'my-div', // the context element 'my-div' can either be the id or the actual node
spec // the specification object
);
Element creation specification parameters in this class may also be passed as an Array of * specification objects. This can be used to insert multiple sibling nodes into an existing * container very efficiently. For example, to add more list items to the example above:
dh.append('my-ul', [
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);
* Templating
*The real power is in the built-in templating. Instead of creating or appending any elements, * {@link #createTemplate} returns a Template object which can be used over and over to * insert new elements. Revisiting the example above, we could utilize templating this time: *
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i < 5, i++){
tpl.append(list, [i]); // use template to append to the actual node
}
* An example using a template:
var html = '{2}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
* The same example using named parameters:
var html = '{text}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.jackslocum.com/',
text: "Jack's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
* Compiling Templates
*Templates are applied using regular expressions. The performance is great, but if * you are adding a bunch of DOM elements using the same template, you can increase * performance even further by {@link Ext.Template#compile "compiling"} the template. * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and * broken up at the different variable points and a dynamic function is created and eval'ed. * The generated function performs string concatenation of these parts and the passed * variables instead of using regular expressions. *
var html = '{text}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();
//... use template like normal
* Performance Boost
*DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead * of DOM can significantly boost performance.
*Element creation specification parameters may also be strings. If {@link #useDom} is false, * then the string is used as innerHTML. If {@link #useDom} is true, a string specification * results in the creation of a text node. Usage:
*
Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
*
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
Employee = Ext.extend(Ext.util.Observable, {
constructor: function(config){
this.name = config.name;
this.addEvents({
"fired" : true,
"quit" : true
});
// Copy configured listeners into *this* object so that the base class's
// constructor will add them.
this.listeners = config.listeners;
// Call our superclass constructor to complete construction process.
Employee.superclass.constructor.call(config)
}
});
var newEmployee = new Employee({
name: employeeName,
listeners: {
quit: function() {
// By default, "this" will be the object that fired the event.
alert(this.name + " has quit!");
}
}
});
A config object containing one or more event handlers to be added to this * object during initialization. This should be a valid listeners config object as specified in the * {@link #addListener} example for attaching multiple handlers at once.
*DOM events from ExtJs {@link Ext.Component Components}
*While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
* is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
* {@link Ext.DataView#click click} event passing the node clicked on. To access DOM
* events directly from a Component's HTMLElement, listeners must be added to the {@link Ext.Component#getEl Element} after the Component
* has been rendered. A plugin can simplify this step:
// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
constructor: function(config) {
this.listeners = config.listeners ? config.listeners : config;
},
// Component passes itself into plugin's init method
init: function(c) {
var p, l = this.listeners;
for (p in l) {
if (Ext.isFunction(l[p])) {
l[p] = this.createHandler(l[p], c);
} else {
l[p].fn = this.createHandler(l[p].fn, c);
}
}
// Add the listeners to the Element immediately following the render call
c.render = c.render.{@link Function#createSequence createSequence}(function() {
var e = c.getEl();
if (e) {
e.on(l);
}
});
},
createHandler: function(fn, c) {
return function(e) {
fn.call(this, e, c);
};
}
});
var combo = new Ext.form.ComboBox({
// Collapse combo when its element is clicked on
plugins: [ new Ext.DomObserver({
click: function(evt, comp) {
comp.collapse();
}
})],
store: myStore,
typeAhead: true,
mode: 'local',
triggerAction: 'all'
});
* Fires the specified event with the passed parameters (minus the event name).
*An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) * by calling {@link #enableBubble}.
* @param {String} eventName The name of the event to fire. * @param {Object...} args Variable number of parameters are passed to handlers. * @return {Boolean} returns false if any of the handlers return false otherwise it returns true. */ fireEvent : function(){ var a = TOARRAY(arguments), ename = toLower(a[0]), me = this, ret = TRUE, ce = me.events[ename], q, c; if (me.eventsSuspended === TRUE) { if (q = me.suspendedEventsQueue) { q.push(a); } } else if(ISOBJECT(ce) && ce.bubble){ if(ce.fire.apply(ce, a.slice(1)) === FALSE) { return FALSE; } c = me.getBubbleTarget && me.getBubbleTarget(); if(c && c.enableBubble) { c.enableBubble(ename); return c.fireEvent.apply(c, a); } } else { if (ISOBJECT(ce)) { a.shift(); ret = ce.fire.apply(ce, a); } } return ret; }, /** * Appends an event handler to this object. * @param {String} eventName The name of the event to listen for. * @param {Function} handler The method the event invokes. * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
* If omitted, defaults to the object which fired the event.
* @param {Object} options (optional) An object containing handler configuration.
* properties. This may contain any of the following properties:this reference) in which the handler function is executed.
* If omitted, defaults to the object which fired the event.
* Combining Options
* Using the options argument, it is possible to combine different types of listeners:
*
* A delayed, one-time listener.
*
myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});
* Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.
*
*
myGridPanel.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
* Or a shorthand syntax:
*
myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});this reference) in which the handler function is executed.
* If omitted, defaults to the object which fired the event.
* @param {Object} options (optional) An object containing handler configuration.
* @method
*/
OBSERVABLE.on = OBSERVABLE.addListener;
/**
* Removes an event handler (shorthand for {@link #removeListener}.)
* @param {String} eventName The type of event the handler was associated with.
* @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
* @param {Object} scope (optional) The scope originally specified for the handler.
* @method
*/
OBSERVABLE.un = OBSERVABLE.removeListener;
/**
* Removes all added captures from the Observable.
* @param {Observable} o The Observable to release
* @static
*/
EXTUTIL.Observable.releaseCapture = function(o){
o.fireEvent = OBSERVABLE.fireEvent;
};
function createTargeted(h, o, scope){
return function(){
if(o.target == arguments[0]){
h.apply(scope, TOARRAY(arguments));
}
};
};
function createBuffered(h, o, scope){
var task = new EXTUTIL.DelayedTask();
return function(){
task.delay(o.buffer, h, scope, TOARRAY(arguments));
};
}
function createSingle(h, e, fn, scope){
return function(){
e.removeListener(fn, scope);
return h.apply(scope, arguments);
};
}
function createDelayed(h, o, scope){
return function(){
var args = TOARRAY(arguments);
(function(){
h.apply(scope, args);
}).defer(o.delay || 10);
};
};
EXTUTIL.Event = function(obj, name){
this.name = name;
this.obj = obj;
this.listeners = [];
};
EXTUTIL.Event.prototype = {
addListener : function(fn, scope, options){
var me = this,
l;
scope = scope || me.obj;
if(!me.isListening(fn, scope)){
l = me.createListener(fn, scope, options);
if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
me.listeners = me.listeners.slice(0);
}
me.listeners.push(l);
}
},
createListener: function(fn, scope, o){
o = o || {}, scope = scope || this.obj;
var l = {
fn: fn,
scope: scope,
options: o
}, h = fn;
if(o.target){
h = createTargeted(h, o, scope);
}
if(o.delay){
h = createDelayed(h, o, scope);
}
if(o.single){
h = createSingle(h, this, fn, scope);
}
if(o.buffer){
h = createBuffered(h, o, scope);
}
l.fireFn = h;
return l;
},
findListener : function(fn, scope){
var s, ret = -1;
EACH(this.listeners, function(l, i) {
s = l.scope;
if(l.fn == fn && (s == scope || s == this.obj)){
ret = i;
return FALSE;
}
},
this);
return ret;
},
isListening : function(fn, scope){
return this.findListener(fn, scope) != -1;
},
removeListener : function(fn, scope){
var index,
me = this,
ret = FALSE;
if((index = me.findListener(fn, scope)) != -1){
if (me.firing) {
me.listeners = me.listeners.slice(0);
}
me.listeners.splice(index, 1);
ret = TRUE;
}
return ret;
},
clearListeners : function(){
this.listeners = [];
},
fire : function(){
var me = this,
args = TOARRAY(arguments),
ret = TRUE;
EACH(me.listeners, function(l) {
me.firing = TRUE;
if (l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
return ret = me.firing = FALSE;
}
});
me.firing = FALSE;
return ret;
}
};
})();/**
* @class Ext.util.Observable
*/
Ext.apply(Ext.util.Observable.prototype, function(){
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// private
function getMethodEvent(method){
var e = (this.methodEvents = this.methodEvents ||
{})[method], returnValue, v, cancel, obj = this;
if (!e) {
this.methodEvents[method] = e = {};
e.originalFn = this[method];
e.methodName = method;
e.before = [];
e.after = [];
var makeCall = function(fn, scope, args){
if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {
if (Ext.isObject(v)) {
returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;
cancel = !!v.cancel;
}
else
if (v === false) {
cancel = true;
}
else {
returnValue = v;
}
}
};
this[method] = function(){
var args = Ext.toArray(arguments);
returnValue = v = undefined;
cancel = false;
Ext.each(e.before, function(b){
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
});
if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {
returnValue = v;
}
Ext.each(e.after, function(a){
makeCall(a.fn, a.scope, args);
if (cancel) {
return returnValue;
}
});
return returnValue;
};
}
return e;
}
return {
// these are considered experimental
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// adds an "interceptor" called before the original method
beforeMethod: function(method, fn, scope){
getMethodEvent.call(this, method).before.push({
fn: fn,
scope: scope
});
},
// adds a "sequence" called after the original method
afterMethod: function(method, fn, scope){
getMethodEvent.call(this, method).after.push({
fn: fn,
scope: scope
});
},
removeMethodListener: function(method, fn, scope){
var e = getMethodEvent.call(this, method), found = false;
Ext.each(e.before, function(b, i, arr){
if (b.fn == fn && b.scope == scope) {
arr.splice(i, 1);
found = true;
return false;
}
});
if (!found) {
Ext.each(e.after, function(a, i, arr){
if (a.fn == fn && a.scope == scope) {
arr.splice(i, 1);
return false;
}
});
}
},
/**
* Relays selected events from the specified Observable as if the events were fired by this.
* @param {Object} o The Observable whose events this object is to relay.
* @param {Array} events Array of event names to relay.
*/
relayEvents: function(o, events){
var me = this;
function createHandler(ename){
return function(){
return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments)));
};
}
Ext.each(events, function(ename){
me.events[ename] = me.events[ename] || true;
o.on(ename, createHandler(ename), me);
});
},
/**
* Used to enable bubbling of events
* @param {Object} events
*/
enableBubble: function(events){
var me = this;
events = Ext.isArray(events) ? events : Ext.toArray(arguments);
Ext.each(events, function(ename){
ename = ename.toLowerCase();
var ce = me.events[ename] || true;
if (typeof ce == "boolean") {
ce = new Ext.util.Event(me, ename);
me.events[ename] = ce;
}
ce.bubble = true;
});
}
};
}());
/**
* Starts capture on the specified Observable. All events will be passed
* to the supplied function with the event name + standard signature of the event
* before the event is fired. If the supplied function returns false,
* the event will not fire.
* @param {Observable} o The Observable to capture
* @param {Function} fn The function to call
* @param {Object} scope (optional) The scope (this object) for the fn
* @static
*/
Ext.util.Observable.capture = function(o, fn, scope){
o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};
/**
* Sets observability on the passed class constructor.*
This makes any event fired on any instance of the passed class also fire a single event through * the class allowing for central handling of events on many instances at once.
*Usage:
Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log("Ajax request made to " + options.url);
});this reference) in which the handler function is executed. Defaults to the Element.
* @param {Object} options (optional) An object containing handler configuration properties.
* This may contain any of the following properties:this reference) in which the handler function is executed. Defaults to the Element.See {@link Ext.Element#addListener} for examples of how to use these options.
*/ addListener : function(element, eventName, fn, scope, options){ if(Ext.isObject(eventName)){ var o = eventName, e, val; for(e in o){ val = o[e]; if(!propRe.test(e)){ if(Ext.isFunction(val)){ // shared options listen(element, e, o, val, o.scope); }else{ // individual options listen(element, e, val); } } } } else { listen(element, eventName, options, fn, scope); } }, /** * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The id or html element from which to remove the event * @param {String} eventName The type of event * @param {Function} fn The handler function to remove */ removeListener : function(element, eventName, fn, scope){ var el = Ext.getDom(element), id = Ext.id(el), wrap; Ext.each((elHash[id] || {})[eventName], function (v,i,a) { if (Ext.isArray(v) && v[0] == fn && (!scope || v[2] == scope)) { E.un(el, eventName, wrap = v[1]); a.splice(i,1); return false; } }); // jQuery workaround that should be removed from Ext Core if(eventName == "mousewheel" && el.addEventListener && wrap){ el.removeEventListener("DOMMouseScroll", wrap, false); } if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); } }, /** * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners} * directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The id or html element from which to remove the event */ removeAll : function(el){ var id = Ext.id(el = Ext.getDom(el)), es = elHash[id], ename; for(ename in es){ if(es.hasOwnProperty(ename)){ Ext.each(es[ename], function(v) { E.un(el, ename, v.wrap); }); } } elHash[id] = null; }, /** * Fires when the document is ready (before onload and before images are loaded). Can be * accessed shorthanded as Ext.onReady(). * @param {Function} fn The method the event invokes * @param {Object} scope (optional) An object that becomes the scope of the handler * @param {boolean} options (optional) An object containing standard {@link #addListener} options */ onDocumentReady : function(fn, scope, options){ if(docReadyState){ // if it already fired docReadyEvent.addListener(fn, scope, options); docReadyEvent.fire(); docReadyEvent.clearListeners(); } else { if(!docReadyEvent) initDocReady(); options = options || {}; options.delay = options.delay || 1; docReadyEvent.addListener(fn, scope, options); } }, elHash : elHash }; /** * Appends an event handler to an element. Shorthand for {@link #addListener}. * @param {String/HTMLElement} el The html element or id to assign the event handler to * @param {String} eventName The type of event to listen for * @param {Function} handler The handler function the event invokes * @param {Object} scope (optional) The scope in which to execute the handler * function (the handler function's "this" context) * @param {Object} options (optional) An object containing standard {@link #addListener} options * @member Ext.EventManager * @method on */ pub.on = pub.addListener; /** * Removes an event handler from an element. Shorthand for {@link #removeListener}. * @param {String/HTMLElement} el The id or html element from which to remove the event * @param {String} eventName The type of event * @param {Function} fn The handler function to remove * @return {Boolean} True if a listener was actually removed, else false * @member Ext.EventManager * @method un */ pub.un = pub.removeListener; pub.stoppedMouseDownEvent = new Ext.util.Event(); return pub; }(); /** * Fires when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. * @param {Function} fn The method the event invokes * @param {Object} scope An object that becomes the scope of the handler * @param {boolean} options (optional) An object containing standard {@link #addListener} options * @member Ext * @method onReady */ Ext.onReady = Ext.EventManager.onDocumentReady; //Initialize doc classes (function(){ var initExtCss = function(){ // find the body element var bd = document.body || document.getElementsByTagName('body')[0]; if(!bd){ return false; } var cls = [' ', Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8')) : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') : Ext.isOpera ? "ext-opera" : Ext.isWebKit ? "ext-webkit" : ""]; if(Ext.isSafari){ cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4'))); }else if(Ext.isChrome){ cls.push("ext-chrome"); } if(Ext.isMac){ cls.push("ext-mac"); } if(Ext.isLinux){ cls.push("ext-linux"); } if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" var p = bd.parentNode; if(p){ p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box'; } } bd.className += cls.join(' '); return true; } if(!initExtCss()){ Ext.onReady(initExtCss); } })(); /** * @class Ext.EventObject * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject * wraps the browser's native event-object normalizing cross-browser differences, * such as which mouse button is clicked, keys pressed, mechanisms to stop * event-propagation along with a method to prevent default actions from taking place. *For example:
*
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
var target = e.getTarget(); // same as t (the target HTMLElement)
...
}
var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}
myDiv.on( // 'on' is shorthand for addListener
"click", // perform an action on click of myDiv
handleClick // reference to the action handler
);
// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
// Handle click on any child of an element
Ext.getBody().on('click', function(e){
if(e.within('some-el')){
alert('Clicked on a child of some-el!');
}
});
// Handle click directly on an element, ignoring clicks on child nodes
Ext.getBody().on('click', function(e,t){
if((t.id == 'some-el') && !e.within(t, true)){
alert('Clicked directly on some-el!');
}
});
Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
*All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.
*Note that the events documented in this class are not Ext events, they encapsulate browser events. To * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.
* Usage:
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
When an element is manipulated, by default there is no animation.
*
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
* Many of the functions for manipulating an element have an optional "animate" parameter. This * parameter can be specified as boolean (true) for default animation effects.
*
// default animation
el.setWidth(100, true);
* To configure the effects, an object literal with animation options to use as the Element animation * configuration object can also be specified. Note that the supported Element animation configuration * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported * Element animation configuration options are:
Option Default Description
--------- -------- ---------------------------------------------
{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds
{@link Ext.Fx#easing easing} easeOut The easing method
{@link Ext.Fx#callback callback} none A function to execute when the anim completes
{@link Ext.Fx#scope scope} this The scope (this) of the callback function
*
*
// Element animation options object
var opt = {
{@link Ext.Fx#duration duration}: 1,
{@link Ext.Fx#easing easing}: 'elasticIn',
{@link Ext.Fx#callback callback}: this.foo,
{@link Ext.Fx#scope scope}: this
};
// animation with some options set
el.setWidth(100, opt);
* The Element animation object being used for the animation will be set on the options * object as "anim", which allows you to stop or manipulate the animation. Here is an example:
*
// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}
* Also see the {@link #animate} method for another animation technique.
*Composite (Collections of) Elements
*For working with collections of Elements, see {@link Ext.CompositeElement}
* @constructor Create a new Element directly. * @param {String/HTMLElement} element * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). */ (function(){ var DOC = document; Ext.Element = function(element, forceNew){ var dom = typeof element == "string" ? DOC.getElementById(element) : element, id; if(!dom) return null; id = dom.id; if(!forceNew && id && Ext.Element.cache[id]){ // element object already exists return Ext.Element.cache[id]; } /** * The DOM element * @type HTMLElement */ this.dom = dom; /** * The DOM element ID * @type String */ this.id = id || Ext.id(dom); }; var D = Ext.lib.Dom, DH = Ext.DomHelper, E = Ext.lib.Event, A = Ext.lib.Anim, El = Ext.Element; El.prototype = { /** * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) * @param {Object} o The object with the attributes * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos. * @return {Ext.Element} this */ set : function(o, useSet){ var el = this.dom, attr, val; for(attr in o){ val = o[attr]; if (attr != "style" && !Ext.isFunction(val)) { if (attr == "cls" ) { el.className = val; } else if (o.hasOwnProperty(attr)) { if (useSet || !!el.setAttribute) el.setAttribute(attr, val); else el[attr] = val; } } } if(o.style){ Ext.DomHelper.applyStyles(el, o.style); } return this; }, // Mouse events /** * @event click * Fires when a mouse click is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event dblclick * Fires when a mouse double click is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mousedown * Fires when a mousedown is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseup * Fires when a mouseup is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseover * Fires when a mouseover is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mousemove * Fires when a mousemove is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseout * Fires when a mouseout is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseenter * Fires when the mouse enters the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseleave * Fires when the mouse leaves the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // Keyboard events /** * @event keypress * Fires when a keypress is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event keydown * Fires when a keydown is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event keyup * Fires when a keyup is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // HTML frame/object events /** * @event load * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event unload * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event abort * Fires when an object/image is stopped from loading before completely loaded. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event error * Fires when an object/image/frame cannot be loaded properly. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event resize * Fires when a document view is resized. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event scroll * Fires when a document view is scrolled. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // Form events /** * @event select * Fires when a user selects some text in a text field, including input and textarea. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event change * Fires when a control loses the input focus and its value has been modified since gaining focus. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event submit * Fires when a form is submitted. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event reset * Fires when a form is reset. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event focus * Fires when an element receives focus either via the pointing device or by tab navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event blur * Fires when an element loses focus either via the pointing device or by tabbing navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // User Interface events /** * @event DOMFocusIn * Where supported. Similar to HTML focus event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMFocusOut * Where supported. Similar to HTML blur event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMActivate * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // DOM Mutation events /** * @event DOMSubtreeModified * Where supported. Fires when the subtree is modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeInserted * Where supported. Fires when a node has been added as a child of another node. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeRemoved * Where supported. Fires when a descendant node of the element is removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeRemovedFromDocument * Where supported. Fires when a node is being removed from a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeInsertedIntoDocument * Where supported. Fires when a node is being inserted into a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMAttrModified * Where supported. Fires when an attribute has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMCharacterDataModified * Where supported. Fires when the character data has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * The default unit to append to CSS values where a unit isn't provided (defaults to px). * @type String */ defaultUnit : "px", /** * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) * @param {String} selector The simple selector to test * @return {Boolean} True if this element matches the selector, else false */ is : function(simpleSelector){ return Ext.DomQuery.is(this.dom, simpleSelector); }, /** * Tries to focus the element. Any exceptions are caught and ignored. * @param {Number} defer (optional) Milliseconds to defer the focus * @return {Ext.Element} this */ focus : function(defer, /* private */ dom) { var me = this, dom = dom || me.dom; try{ if(Number(defer)){ me.focus.defer(defer, null, [null, dom]); }else{ dom.focus(); } }catch(e){} return me; }, /** * Tries to blur the element. Any exceptions are caught and ignored. * @return {Ext.Element} this */ blur : function() { try{ this.dom.blur(); }catch(e){} return this; }, /** * Returns the value of the "value" attribute * @param {Boolean} asNumber true to parse the value as a number * @return {String/Number} */ getValue : function(asNumber){ var val = this.dom.value; return asNumber ? parseInt(val, 10) : val; }, /** * Appends an event handler to this element. The shorthand version {@link #on} is equivalent. * @param {String} eventName The type of event to handle * @param {Function} fn The handler function the event invokes. This function is passed * the following parameters:this reference) in which the handler function is executed.
* If omitted, defaults to this Element..
* @param {Object} options (optional) An object containing handler configuration properties.
* This may contain any of the following properties:this reference) in which the handler function is executed.
* If omitted, defaults to this Element.
* Combining Options
* In the following examples, the shorthand form {@link #on} is used rather than the more verbose
* addListener. The two are equivalent. Using the options argument, it is possible to combine different
* types of listeners:
*
* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
* options object. The options object is available as the third parameter in the handler function.
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
* Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.
* Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
* Or a shorthand syntax:
* Code:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
* delegate
*This is a configuration option that you can pass along when registering a handler for * an event to assist with event delegation. Event delegation is a technique that is used to * reduce memory consumption and prevent exposure to memory-leaks. By registering an event * for a container element as opposed to each element within a container. By setting this * configuration option to a simple selector, the target element will be filtered to look for * a descendant of the target. * For example:
// using this markup:
<div id='elId'>
<p id='p1'>paragraph one</p>
<p id='p2' class='clickable'>paragraph two</p>
<p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
'click',
function(e,t) {
// handle click
console.info(t.id); // 'p2'
},
this,
{
// filter the target element to be a descendant with the class 'clickable'
delegate: '.clickable'
}
);
*
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
Updates the innerHTML of this Element * from a specified URL. Note that this is subject to the Same Origin Policy
*Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.
* @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying * exactly how to request the HTML. * @return {Ext.Element} this */ load : function(url, params, cb){ Ext.Ajax.request(Ext.apply({ params: params, url: url.url || url, callback: cb, el: this.dom, indicatorText: url.indicatorText || '' }, Ext.isObject(url) ? url : {})); return this; }, /** * Tests various css rules/browsers to determine if this element uses a border box * @return {Boolean} */ isBorderBox : function(){ return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; }, /** * Removes this element from the DOM and deletes it from the cache */ remove : function(){ var me = this, dom = me.dom; me.removeAllListeners(); delete El.cache[dom.id]; delete El.dataCache[dom.id] Ext.removeNode(dom); }, /** * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. * @param {Function} overFn The function to call when the mouse enters the Element. * @param {Function} outFn The function to call when the mouse leaves the Element. * @param {Object} scope (optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element. * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}. * @return {Ext.Element} this */ hover : function(overFn, outFn, scope, options){ var me = this; me.on('mouseenter', overFn, scope || me.dom, options); me.on('mouseleave', outFn, scope || me.dom, options); return me; }, /** * Returns true if this element is an ancestor of the passed element * @param {HTMLElement/String} el The element to check * @return {Boolean} True if this element is an ancestor of el, else false */ contains : function(el){ return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el); }, /** * Returns the value of a namespaced attribute from the element's underlying DOM node. * @param {String} namespace The namespace in which to look for the attribute * @param {String} name The attribute name * @return {String} The attribute value * @deprecated */ getAttributeNS : function(ns, name){ return this.getAttribute(name, ns); }, /** * Returns the value of an attribute from the element's underlying DOM node. * @param {String} name The attribute name * @param {String} namespace (optional) The namespace in which to look for the attribute * @return {String} The attribute value */ getAttribute : Ext.isIE ? function(name, ns){ var d = this.dom, type = typeof d[ns + ":" + name]; if(['undefined', 'unknown'].indexOf(type) == -1){ return d[ns + ":" + name]; } return d[name]; } : function(name, ns){ var d = this.dom; return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; }, /** * Update the innerHTML of this element * @param {String} html The new HTML * @return {Ext.Element} this */ update : function(html) { this.dom.innerHTML = html; return this; } }; var ep = El.prototype; El.addMethods = function(o){ Ext.apply(ep, o); }; /** * Appends an event handler (shorthand for {@link #addListener}). * @param {String} eventName The type of event to handle * @param {Function} fn The handler function the event invokes * @param {Object} scope (optional) The scope (this element) of the handler function * @param {Object} options (optional) An object containing standard {@link #addListener} options * @member Ext.Element * @method on */ ep.on = ep.addListener; /** * Removes an event handler from this element (see {@link #removeListener} for additional notes). * @param {String} eventName the type of event to remove * @param {Function} fn the method the event invokes * @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults * to this Element. * @return {Ext.Element} this * @member Ext.Element * @method un */ ep.un = ep.removeListener; /** * true to automatically adjust width and height settings for box-model issues (default to true) */ ep.autoBoxAdjust = true; // private var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i, docEl; /** * @private */ El.cache = {}; El.dataCache = {}; /** * Retrieves Ext.Element objects. *This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link 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.
* @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @static * @member Ext.Element * @method get */ El.get = function(el){ var ex, elm, id; if(!el){ return null; } if (typeof el == "string") { // element id if (!(elm = DOC.getElementById(el))) { return null; } if (ex = El.cache[el]) { ex.dom = elm; } else { ex = El.cache[el] = new El(elm); } return ex; } else if (el.tagName) { // dom element if(!(id = el.id)){ id = Ext.id(el); } if(ex = El.cache[id]){ ex.dom = el; }else{ ex = El.cache[id] = new El(el); } return ex; } else if (el instanceof El) { if(el != docEl){ el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid, // catch case where it hasn't been appended El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it } return el; } else if(el.isComposite) { return el; } else if(Ext.isArray(el)) { return El.select(el); } else if(el == DOC) { // create a bogus element object representing the document object if(!docEl){ var f = function(){}; f.prototype = El.prototype; docEl = new f(); docEl.dom = DOC; } return docEl; } return null; }; // private method for getting and setting element data El.data = function(el, key, value){ var c = El.dataCache[el.id]; if(!c){ c = El.dataCache[el.id] = {}; } if(arguments.length == 2){ return c[key]; }else{ c[key] = value; } }; // private // Garbage collection - uncache elements/purge listeners on orphaned elements // so we don't hold a reference and cause the browser to retain them function garbageCollect(){ if(!Ext.enableGarbageCollector){ clearInterval(El.collectorThread); } else { var eid, el, d; for(eid in El.cache){ el = El.cache[eid]; d = el.dom; // ------------------------------------------------------- // Determining what is garbage: // ------------------------------------------------------- // !d // dom node is null, definitely garbage // ------------------------------------------------------- // !d.parentNode // no parentNode == direct orphan, definitely garbage // ------------------------------------------------------- // !d.offsetParent && !document.getElementById(eid) // display none elements have no offsetParent so we will // also try to look it up by it's id. However, check // offsetParent first so we don't do unneeded lookups. // This enables collection of elements that are not orphans // directly, but somewhere up the line they have an orphan // parent. // ------------------------------------------------------- if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){ delete El.cache[eid]; if(d && Ext.enableListenerCollection){ Ext.EventManager.removeAll(d); } } } } } El.collectorThreadId = setInterval(garbageCollect, 30000); var flyFn = function(){}; flyFn.prototype = El.prototype; // dom is optional El.Flyweight = function(dom){ this.dom = dom; }; El.Flyweight.prototype = new flyFn(); El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; /** *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 {@link Ext.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 {@link Ext#get} * will be more appropriate to take advantage of the caching provided by the Ext.Element class.
* @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext.Element * @method fly */ El.fly = function(el, named){ var ret = null; named = named || '_global'; if (el = Ext.getDom(el)) { (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; ret = El._flyweights[named]; } return ret; }; /** * Retrieves Ext.Element objects. *This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link 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 {@link Ext.Element#get} * @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @member Ext * @method get */ Ext.get = El.get; /** *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 {@link Ext.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 {@link Ext#get} * will be more appropriate to take advantage of the caching provided by the Ext.Element class.
* @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext * @method fly */ Ext.fly = El.fly; // speedy lookup for elements never to box adjust var noBoxAdjust = Ext.isStrict ? { select:1 } : { input:1, select:1, textarea:1 }; if(Ext.isIE || Ext.isGecko){ noBoxAdjust['button'] = 1; } Ext.EventManager.on(window, 'unload', function(){ delete El.cache; delete El.dataCache; delete El._flyweights; }); })(); /** * @class Ext.Element */ Ext.Element.addMethods({ /** * Stops the specified event(s) from bubbling and optionally prevents the default action * @param {String/Array} eventName an event / array of events to stop from bubbling * @param {Boolean} preventDefault (optional) true to prevent the default action too * @return {Ext.Element} this */ swallowEvent : function(eventName, preventDefault){ var me = this; function fn(e){ e.stopPropagation(); if(preventDefault){ e.preventDefault(); } } if(Ext.isArray(eventName)){ Ext.each(eventName, function(e) { me.on(e, fn); }); return me; } me.on(eventName, fn); return me; }, /** * Create an event handler on this element such that when the event fires and is handled by this element, * it will be relayed to another object (i.e., fired again as if it originated from that object instead). * @param {String} eventName The type of event to relay * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context * for firing the relayed event */ relayEvent : function(eventName, observable){ this.on(eventName, function(e){ observable.fireEvent(eventName, e); }); }, /** * Removes worthless text nodes * @param {Boolean} forceReclean (optional) By default the element * keeps track if it has been cleaned already so * you can call this over and over. However, if you update the element and * need to force a reclean, you can pass true. */ clean : function(forceReclean){ var me = this, dom = me.dom, n = dom.firstChild, ni = -1; if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){ return me; } while(n){ var nx = n.nextSibling; if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){ dom.removeChild(n); }else{ n.nodeIndex = ++ni; } n = nx; } Ext.Element.data(dom, 'isCleaned', true); return me; }, /** * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object * parameter as {@link Ext.Updater#update} * @return {Ext.Element} this */ load : function(){ var um = this.getUpdater(); um.update.apply(um, arguments); return this; }, /** * Gets this element's {@link Ext.Updater Updater} * @return {Ext.Updater} The Updater */ getUpdater : function(){ return this.updateManager || (this.updateManager = new Ext.Updater(this)); }, /** * Update the innerHTML of this element, optionally searching for and processing scripts * @param {String} html The new HTML * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false) * @param {Function} callback (optional) For async script loading you can be notified when the update completes * @return {Ext.Element} this */ update : function(html, loadScripts, callback){ html = html || ""; if(loadScripts !== true){ this.dom.innerHTML = html; if(Ext.isFunction(callback)){ callback(); } return this; } var id = Ext.id(), dom = this.dom; html += ''; Ext.lib.Event.onAvailable(id, function(){ var DOC = document, hd = DOC.getElementsByTagName("head")[0], re = /(?:Value Description ----- ----------------------------- tl The top left corner (default) t The center of the top edge tr The top right corner l The center of the left edge c In the center of the element r The center of the right edge bl The bottom left corner b The center of the bottom edge br The bottom right cornerExample Usage:
// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.{@link #update}("finished"); }
});
* Wraps the specified element with a special 9 element markup/CSS block that renders by default as * a gray container with a gradient background, rounded corners and a 4-way shadow.
*This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button}, * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup * is of this form:
*
Ext.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
* Example usage:
*
// Basic box wrap
Ext.get("foo").boxWrap();
// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addClass("x-box-blue");
* {width: widthValue, height: heightValue}.
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
The Animation Control Object enables gradual transitions for any member of an * element's style object that takes a numeric value including but not limited to * these properties:
Each Animation Property is a config object with optional properties:
** do not specify both to and by for an animation property
*The supported animation types:
var el = Ext.get('complexEl');
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'run' // animation type ('run','color','motion','scroll')
);
* Animates transition of background, text, or border colors.
*
el.animate(
// animation control object
{
color: { to: '#06e' },
backgroundColor: { to: '#e06' }
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'color' // animation type ('run','color','motion','scroll')
);
* Animates the motion of an element to/from specific points using optional bezier * way points during transit.
*
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
points: {
to: [50, 100], // go to this point
control: [ // optional bezier way points
[ 600, 800],
[-100, 200]
]
}
},
3000, // animation duration (milliseconds!)
null, // callback
'easeOut', // easing method
'motion' // animation type ('run','color','motion','scroll')
);
* Animate horizontal or vertical scrolling of an overflowing page element.
*
el.animate(
// animation control object
{
scroll: {to: [400, 300]}
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'scroll' // animation type ('run','color','motion','scroll')
);
* A class to provide basic animation and visual effects support. Note: This class is automatically applied * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be * {@link Ext#enableFx included} in order for the Element effects to work.
Method Chaining
*It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that * they return the Element object itself as the method return value, it is not always possible to mix the two in a single * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the * expected results and should be done with care. Also see {@link #callback}.
Anchor Options for Motion Effects
*Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
Value Description ----- ----------------------------- tl The top left corner t The center of the top edge tr The top right corner l The center of the left edge r The center of the right edge bl The bottom left corner b The center of the bottom edge br The bottom right corner* Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options * section below are common options that can be passed to any Fx method unless otherwise noted. * * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together * and called in sequence (see note for Method Chaining above), for example:
* el.slideIn().highlight();
*
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the right with a 2-second duration
el.slideIn('r', { duration: 2 });
// common config options shown with default values
el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
// default: slide the element out to the top
el.slideOut();
// custom: slide the element out to the right with a 2-second duration
el.slideOut('r', { duration: 2 });
// common config options shown with default values
el.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
// default
el.puff();
// common config options shown with default values
el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
// default
el.switchOff();
// all config options shown with default values
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
// default: highlight background to yellow
el.highlight();
// custom: highlight foreground text to blue for 2 seconds
el.highlight("0000ff", { attr: 'color', duration: 2 });
// common config options shown with default values
el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
// default: a single light blue ripple
el.frame();
// custom: 3 red ripples lasting 3 seconds total
el.frame("ff0000", 3, { duration: 3 });
// common config options shown with default values
el.frame("C3DAF9", 1, {
duration: 1 //duration of each individual ripple.
// Note: Easing is not configurable and will be ignored if included
});
el.pause(1);
// default: fade in from opacity 0 to 100%
el.fadeIn();
// custom: fade in from opacity 0 to 75% over 2 seconds
el.fadeIn({ endOpacity: .75, duration: 2});
// common config options shown with default values
el.fadeIn({
endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5
});
// default: fade out from the element's current opacity to 0
el.fadeOut();
// custom: fade out from the element's current opacity to 25% over 2 seconds
el.fadeOut({ endOpacity: .25, duration: 2});
// common config options shown with default values
el.fadeOut({
endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
// change height and width to 100x100 pixels
el.scale(100, 100);
// common config options shown with default values. The height and width will default to
// the element's existing values if passed as null.
el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
}
);
// slide the element horizontally to x position 200 while changing the height and opacity
el.shift({ x: 200, height: 50, opacity: .8 });
// common config options shown with default values.
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
// default: slide the element downward while fading out
el.ghost();
// custom: slide the element out to the right with a 2-second duration
el.ghost('r', { duration: 2 });
// common config options shown with default values
el.ghost('b', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
var els = Ext.select("#some-el div.some-class");
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class');
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
The class encapsulates a connection to the page's originating domain, allowing requests to be made * either to a configured URL, or to a URL specified at request time.
*Requests made by this class are asynchronous, and will return immediately. No data from * the server will be available to the statement immediately following the {@link #request} call. * To process returned data, use a * success callback * in the request options object, * or an {@link #requestcomplete event listener}.
*The server response is parsed by the browser to create the document for the IFRAME. If the * server is using JSON to send the return object, then the * Content-Type header * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
*Characters which are significant to an HTML parser must be sent as HTML entities, so encode * "<" as "<", "&" as "&" etc.
*The response text is retrieved from the document, and a fake XMLHttpRequest object * is created containing a responseText property in order to conform to the * requirements of event handlers and callbacks.
*Be aware that file upload packets are sent with the content type multipart/form * and some server technologies (notably JEE) may require some custom processing in order to * retrieve parameter names and parameter values from the packet content.
* @constructor * @param {Object} config a configuration object. */ Ext.data.Connection = function(config){ Ext.apply(this, config); this.addEvents( /** * @event beforerequest * Fires before a network request is made to retrieve a data object. * @param {Connection} conn This Connection object. * @param {Object} options The options config object passed to the {@link #request} method. */ BEFOREREQUEST, /** * @event requestcomplete * Fires if the request was successfully completed. * @param {Connection} conn This Connection object. * @param {Object} response The XHR object containing the response data. * See The XMLHttpRequest Object * for details. * @param {Object} options The options config object passed to the {@link #request} method. */ REQUESTCOMPLETE, /** * @event requestexception * Fires if an error HTTP status was returned from the server. * See HTTP Status Code Definitions * for details of HTTP status codes. * @param {Connection} conn This Connection object. * @param {Object} response The XHR object containing the response data. * See The XMLHttpRequest Object * for details. * @param {Object} options The options config object passed to the {@link #request} method. */ REQUESTEXCEPTION ); Ext.data.Connection.superclass.constructor.call(this); }; // private function handleResponse(response){ this.transId = false; var options = response.argument.options; response.argument = options ? options.argument : null; this.fireEvent(REQUESTCOMPLETE, this, response, options); if(options.success){ options.success.call(options.scope, response, options); } if(options.callback){ options.callback.call(options.scope, options, true, response); } } // private function handleFailure(response, e){ this.transId = false; var options = response.argument.options; response.argument = options ? options.argument : null; this.fireEvent(REQUESTEXCEPTION, this, response, options, e); if(options.failure){ options.failure.call(options.scope, response, options); } if(options.callback){ options.callback.call(options.scope, options, false, response); } } // private function doFormUpload(o, ps, url){ var id = Ext.id(), doc = document, frame = doc.createElement('iframe'), form = Ext.getDom(o.form), hiddens = [], hd, encoding = 'multipart/form-data', buf = { target: form.target, method: form.method, encoding: form.encoding, enctype: form.enctype, action: form.action }; Ext.apply(frame, { id: id, name: id, className: 'x-hidden', src: Ext.SSL_SECURE_URL // for IE }); doc.body.appendChild(frame); // This is required so that IE doesn't pop the response up in a new window. if(Ext.isIE){ document.frames[id].name = id; } Ext.apply(form, { target: id, method: POST, enctype: encoding, encoding: encoding, action: url || buf.action }); // add dynamic params ps = Ext.urlDecode(ps, false); for(var k in ps){ if(ps.hasOwnProperty(k)){ hd = doc.createElement('input'); hd.type = 'hidden'; hd.value = ps[hd.name = k]; form.appendChild(hd); hiddens.push(hd); } } function cb(){ var me = this, // bogus response object r = {responseText : '', responseXML : null, argument : o.argument}, doc, firstChild; try{ doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document; if(doc){ if(doc.body){ if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea r.responseText = firstChild.value; }else{ r.responseText = doc.body.innerHTML; } } //in IE the document may still have a body even if returns XML. r.responseXML = doc.XMLDocument || doc; } } catch(e) {} Ext.EventManager.removeListener(frame, LOAD, cb, me); me.fireEvent(REQUESTCOMPLETE, me, r, o); function runCallback(fn, scope, args){ if(Ext.isFunction(fn)){ fn.apply(scope, args); } } runCallback(o.success, o.scope, [r, o]); runCallback(o.callback, o.scope, [o, true, r]); if(!me.debugUploads){ setTimeout(function(){Ext.removeNode(frame);}, 100); } } Ext.EventManager.on(frame, LOAD, cb, this); form.submit(); Ext.apply(form, buf); Ext.each(hiddens, function(h) { Ext.removeNode(h); }); } Ext.extend(Ext.data.Connection, Ext.util.Observable, { /** * @cfg {String} url (Optional)The default URL to be used for requests to the server. Defaults to undefined.
*The url config may be a function which returns the URL to use for the Ajax request. The scope
* (this reference) of the function is the scope option passed to the {@link #request} method.
Sends an HTTP request to a remote server.
*Important: Ajax server requests are asynchronous, and this call will * return before the response has been received. Process any returned data * in a callback function.
*
Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
* To execute a callback function in the correct scope, use the scope option.
* @param {Object} options An object which may contain the following properties:True if the form object is a file upload (will be set automatically if the form was * configured with enctype "multipart/form-data").
*File uploads are not performed using normal "Ajax" techniques, that is they are not * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the * DOM <form> element temporarily modified to have its * target set to refer * to a dynamically generated, hidden <iframe> which is inserted into the document * but removed after the return data has been gathered.
*The server response is parsed by the browser to create the document for the IFRAME. If the * server is using JSON to send the return object, then the * Content-Type header * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
*The response text is retrieved from the document, and a fake XMLHttpRequest object * is created containing a responseText property in order to conform to the * requirements of event handlers and callbacks.
*Be aware that file upload packets are sent with the content type multipart/form * and some server technologies (notably JEE) may require some custom processing in order to * retrieve parameter names and parameter values from the packet content.
*The options object may also contain any other property which might be needed to perform * postprocessing in a callback because it is passed to callback functions.
* @return {Number} transactionId The id of the server transaction. This may be used * to cancel the request. */ request : function(o){ var me = this; if(me.fireEvent(BEFOREREQUEST, me, o)){ if (o.el) { if(!Ext.isEmpty(o.indicatorText)){ me.indicatorText = 'The global Ajax request class that provides a simple way to make Ajax requests * with maximum flexibility.
*Since Ext.Ajax is a singleton, you can set common properties/events for it once * and override them at the request function level only if necessary.
*Common Properties you may want to set are:
// Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
'Powered-By': 'Ext'
};
* Common Events you may want to set are:
// Example: show a spinner during all Ajax requests
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);
* An example request:
*
// Basic request
Ext.Ajax.{@link Ext.data.Connection#request request}({
url: 'foo.php',
success: someFn,
failure: otherFn,
headers: {
'my-header': 'foo'
},
params: { foo: 'bar' }
});
// Simple ajax form submission
Ext.Ajax.{@link Ext.data.Connection#request request}({
form: 'some-form',
params: 'foo=bar'
});
*
* var el = Ext.get("foo"); // Get Ext.Element object
* var mgr = el.getUpdater();
* mgr.update({
url: "http://myserver.com/index.php",
params: {
param1: "foo",
param2: "bar"
}
* });
* ...
* mgr.formUpdate("myFormId", "http://myserver.com/index.php");
*
* // or directly (returns the same Updater instance)
* var mgr = new Ext.Updater("myElementId");
* mgr.startAutoRefresh(60, "http://myserver.com/index.php");
* mgr.on("update", myFcnNeedsToKnow);
*
* // short handed call directly from the element object
* Ext.get("foo").load({
url: "bar.php",
scripts: true,
params: "param1=foo¶m2=bar",
text: "Loading Foo..."
* });
* The URL to request or a function which * returns the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).
The HTTP method to * use. Defaults to POST if the params argument is present, otherwise GET.
The * parameters to pass to the server (defaults to none). These may be specified as a url-encoded * string, or as an object containing properties which represent parameters, * or as a function, which returns such an object.
If true * any <script> tags embedded in the response text will be extracted * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified, * the callback will be called after the execution of the scripts.
A function to * be called when the response from the server arrives. The following * parameters are passed:
The Element being updated.
True for success, false for failure.
The XMLHttpRequest which processed the update.
The config object passed to the update call.
The scope in which * to execute the callback (The callback's this reference.) If the * params argument is a function, this scope is used for that function also.
By default, the URL of this request becomes * the default URL for this Updater object, and will be subsequently used in {@link #refresh} * calls. To bypass this behavior, pass discardUrl:true (defaults to false).
The number of seconds to wait for a response before * timing out (defaults to {@link Ext.Updater.defaults#timeout}).
The text to use as the innerHTML of the * {@link Ext.Updater.defaults#indicatorText} div (defaults to 'Loading...'). To replace the entire div, not * just the text, override {@link Ext.Updater.defaults#indicatorText} directly.
Only needed for GET * requests, this option causes an extra, auto-generated parameter to be appended to the request * to defeat caching (defaults to {@link Ext.Updater.defaults#disableCaching}).
* For example:
um.update({
url: "your-url.php",
params: {param1: "foo", param2: "bar"}, // or a URL encoded string
callback: yourFunction,
scope: yourObject, //(optional scope)
discardUrl: true,
nocache: true,
text: "Loading...",
timeout: 60,
scripts: false // Save time by avoiding RegExp execution.
});
Performs an async form post, updating this element with the response. If the form has the attribute * enctype="multipart/form-data", it assumes it's a file upload. * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
*File uploads are not performed using normal "Ajax" techniques, that is they are not * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the * DOM <form> element temporarily modified to have its * target set to refer * to a dynamically generated, hidden <iframe> which is inserted into the document * but removed after the return data has been gathered.
*Be aware that file upload packets, sent with the content type multipart/form-data * and some server technologies (notably JEE) may require some custom processing in order to * retrieve parameter names and parameter values from the packet content.
* @param {String/HTMLElement} form The form Id or form element * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used. * @param {Boolean} reset (optional) Whether to try to reset the form after the update * @param {Function} callback (optional) Callback when transaction is complete. The following * parameters are passed:The Element being updated.
True for success, false for failure.
The XMLHttpRequest which processed the update.
Ext.Updater.updateElement("my-div", "stuff.php");
Format Description Example returned values
------ ----------------------------------------------------------------------- -----------------------
d Day of the month, 2 digits with leading zeros 01 to 31
D A short textual representation of the day of the week Mon to Sun
j Day of the month without leading zeros 1 to 31
l A full textual representation of the day of the week Sunday to Saturday
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
F A full textual representation of a month, such as January or March January to December
m Numeric representation of a month, with leading zeros 01 to 12
M A short textual representation of a month Jan to Dec
n Numeric representation of a month, without leading zeros 1 to 12
t Number of days in the given month 28 to 31
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
belongs to the previous or next year, that year is used instead)
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 to 12
G 24-hour format of an hour without leading zeros 0 to 23
h 12-hour format of an hour with leading zeros 01 to 12
H 24-hour format of an hour with leading zeros 00 to 23
i Minutes, with leading zeros 00 to 59
s Seconds, with leading zeros 00 to 59
u Decimal fraction of a second Examples:
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
999 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
c ISO 8601 date
Notes: Examples:
1) If unspecified, the month / day defaults to the current month / day, 1991 or
the time defaults to midnight, while the timezone defaults to the 1992-10 or
browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or
are optional. 1995-07-18T17:21:28-02:00 or
2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or
least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or
of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or
Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or
date-time granularity which are supported, or see 2000-02-13T21:25:33
http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34
U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463
M$ Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
\/Date(1238606590509+0800)\/
*
* Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
*
// Sample date:
// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
document.write(dt.format('Y-m-d')); // 2007-01-10
document.write(dt.format('F j, Y, g:i a')); // January 10, 2007, 3:05 pm
document.write(dt.format('l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
Date.patterns = {
ISO8601Long:"Y-m-d H:i:s",
ISO8601Short:"Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
var dt = new Date();
document.write(dt.format(Date.patterns.ShortDate));
Developer-written, custom formats may be used by supplying both a formatting and a parsing function * which perform to specialized requirements. The functions are stored in {@link #parseFunctions} and {@link #formatFunctions}.
*/ /* * Most of the date-formatting functions below are the excellent work of Baron Schwartz. * (see http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/) * They generate precompiled functions from format patterns instead of parsing and * processing each pattern every time a date is formatted. These functions are available * on every Date object. */ (function() { /** * Global flag which determines if strict date parsing should be used. * Strict date parsing will not roll-over invalid dates, which is the * default behaviour of javascript Date objects. * (see {@link #parseDate} for more information) * Defaults to false. * @static * @type Boolean */ Date.useStrict = false; // create private copy of Ext's String.format() method // - to remove unnecessary dependency // - to resolve namespace conflict with M$-Ajax's implementation function xf(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/\{(\d+)\}/g, function(m, i) { return args[i]; }); } // private Date.formatCodeToRegex = function(character, currentGroup) { // Note: currentGroup - position in regex result array (see notes for Date.parseCodes below) var p = Date.parseCodes[character]; if (p) { p = typeof p == 'function'? p() : p; Date.parseCodes[character] = p; // reassign function result to prevent repeated execution } return p? Ext.applyIf({ c: p.c? xf(p.c, currentGroup || "{0}") : p.c }, p) : { g:0, c:null, s:Ext.escapeRe(character) // treat unrecognised characters as literals } } // private shorthand for Date.formatCodeToRegex since we'll be using it fairly often var $f = Date.formatCodeToRegex; Ext.apply(Date, { /** *An object hash in which each property is a date parsing function. The property name is the * format string which that function parses.
*This object is automatically populated with date parsing functions as * date formats are requested for Ext standard formatting strings.
*Custom parsing functions may be inserted into this object, keyed by a name which from then on * may be used as a format string to {@link #parseDate}.
*
Example:
Date.parseFunctions['x-date-format'] = myDateParser;
A parsing function should return a Date object, and is passed the following parameters:
date : Stringstrict : BooleanTo enable Dates to also be formatted according to that format, a corresponding * formatting function must be placed into the {@link #formatFunctions} property. * @property parseFunctions * @static * @type Object */ parseFunctions: { "M$": function(input, strict) { // note: the timezone offset is ignored since the M$ Ajax server sends // a UTC milliseconds-since-Unix-epoch value (negative values are allowed) var re = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/'); var r = (input || '').match(re); return r? new Date(((r[1] || '') + r[2]) * 1) : null; } }, parseRegexes: [], /** *
An object hash in which each property is a date formatting function. The property name is the * format string which corresponds to the produced formatted date string.
*This object is automatically populated with date formatting functions as * date formats are requested for Ext standard formatting strings.
*Custom formatting functions may be inserted into this object, keyed by a name which from then on * may be used as a format string to {@link #format}. Example:
Date.formatFunctions['x-date-format'] = myDateFormatter;
A formatting function should return a string repesentation of the passed Date object:
date : DateTo enable date strings to also be parsed according to that format, a corresponding * parsing function must be placed into the {@link #parseFunctions} property. * @property formatFunctions * @static * @type Object */ formatFunctions: { "M$": function() { // UTC milliseconds since Unix epoch (M$-AJAX serialized date format (MRSF)) return '\\/Date(' + this.getTime() + ')\\/'; } }, y2kYear : 50, /** * Date interval constant * @static * @type String */ MILLI : "ms", /** * Date interval constant * @static * @type String */ SECOND : "s", /** * Date interval constant * @static * @type String */ MINUTE : "mi", /** Date interval constant * @static * @type String */ HOUR : "h", /** * Date interval constant * @static * @type String */ DAY : "d", /** * Date interval constant * @static * @type String */ MONTH : "mo", /** * Date interval constant * @static * @type String */ YEAR : "y", /** *
An object hash containing default date values used during date parsing.
*The following properties are available:
y : Numberm : Numberd : Numberh : Numberi : Numbers : Numberms : NumberOverride these properties to customize the default date values used by the {@link #parseDate} method.
*Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s * and ms properties may coincide with the exact time in which DST takes effect. * It is the responsiblity of the developer to account for this.
* Example Usage: *
// set default day value to the first day of the month
Date.defaults.d = 1;
// parse a February date string containing only year and month values.
// setting the default day value to 1 prevents weird date rollover issues
// when attempting to parse the following date string on, for example, March 31st 2009.
Date.parseDate('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
Date.dayNames = [
'SundayInYourLang',
'MondayInYourLang',
...
];
Date.monthNames = [
'JanInYourLang',
'FebInYourLang',
...
];
Date.monthNumbers = {
'ShortJanNameInYourLang':0,
'ShortFebNameInYourLang':1,
...
};
Date.formatCodes.x = "String.leftPad(this.getDate(), 2, '0')";
(new Date()).format("X"); // returns the current day of the month
Example:
//dt = Fri May 25 2007 (current date)
var dt = new Date();
//dt = Thu May 25 2006 (today's month/day in 2006)
dt = Date.parseDate("2006", "Y");
//dt = Sun Jan 15 2006 (all date parts specified)
dt = Date.parseDate("2006-01-15", "Y-m-d");
//dt = Sun Jan 15 2006 15:20:01
dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
//wrong way:
var orig = new Date('10/1/2006');
var copy = orig;
copy.setDate(5);
document.write(orig); //returns 'Thu Oct 05 2006'!
//correct way:
var orig = new Date('10/1/2006');
var copy = orig.clone();
copy.setDate(5);
document.write(orig); //returns 'Thu Oct 01 2006'
// Basic usage:
var dt = new Date('10/29/2006').add(Date.DAY, 5);
document.write(dt); //returns 'Fri Nov 03 2006 00:00:00'
// Negative values will be subtracted:
var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
// You can even chain several calls together in one line:
var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
The DelayedTask class provides a convenient way to "buffer" the execution of a method, * performing setTimeout where a new timeout cancels the old timeout. When called, the * task will wait the specified time period before executing. If durng that time period, * the task is called again, the original call will be cancelled. This continues so that * the function is only called a single time for each iteration.
*This method is especially useful for things like detecting whether a user has finished * typing in a text field. An example would be performing validation on a keypress. You can * use this class to buffer the keypress events for a certain number of milliseconds, and * perform only if they stop for that amount of time. Usage:
var task = new Ext.util.DelayedTask(function(){
alert(Ext.getDom('myInputField').value.length);
});
// Wait 500ms before calling our function. If the user presses another key
// during that 500ms, it will be cancelled and we'll wait another 500ms.
Ext.get('myInputField').on('keypress', function(){
task.{@link #delay}(500);
});
* Note that we are using a DelayedTask here to illustrate a point. The configuration * option buffer for {@link Ext.util.Observable#addListener addListener/on} will * also setup a delayed task for you to buffer events.
* @constructor The parameters to this constructor serve as defaults and are not required. * @param {Function} fn (optional) The default function to timeout * @param {Object} scope (optional) The default scope of that timeout * @param {Array} args (optional) The default Array of arguments */ Ext.util.DelayedTask = function(fn, scope, args){ var me = this, id, call = function(){ clearInterval(id); id = null; fn.apply(scope, args || []); }; /** * Cancels any pending timeout and queues a new one * @param {Number} delay The milliseconds to delay * @param {Function} newFn (optional) Overrides function passed to constructor * @param {Object} newScope (optional) Overrides scope passed to constructor * @param {Array} newArgs (optional) Overrides args passed to constructor */ me.delay = function(delay, newFn, newScope, newArgs){ me.cancel(); fn = newFn || fn; scope = newScope || scope; args = newArgs || args; id = setInterval(call, delay); }; /** * Cancel the last queued timeout */ me.cancel = function(){ if(id){ clearInterval(id); id = null; } }; };/** * @class Ext.util.MixedCollection * @extends Ext.util.Observable * A Collection class that maintains both numeric indexes and keys and exposes events. * @constructor * @param {Boolean} allowFunctions True if the addAll function should add function references to the * collection (defaults to false) * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection * and return the key value for that item. This is used when available to look up the key on items that * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is * equivalent to providing an implementation for the {@link #getKey} method. */ Ext.util.MixedCollection = function(allowFunctions, keyFn){ this.items = []; this.map = {}; this.keys = []; this.length = 0; this.addEvents( /** * @event clear * Fires when the collection is cleared. */ "clear", /** * @event add * Fires when an item is added to the collection. * @param {Number} index The index at which the item was added. * @param {Object} o The item added. * @param {String} key The key associated with the added item. */ "add", /** * @event replace * Fires when an item is replaced in the collection. * @param {String} key he key associated with the new added. * @param {Object} old The item being replaced. * @param {Object} new The new item. */ "replace", /** * @event remove * Fires when an item is removed from the collection. * @param {Object} o The item being removed. * @param {String} key (optional) The key associated with the removed item. */ "remove", "sort" ); this.allowFunctions = allowFunctions === true; if(keyFn){ this.getKey = keyFn; } Ext.util.MixedCollection.superclass.constructor.call(this); }; Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, { allowFunctions : false, /** * Adds an item to the collection. Fires the {@link #add} event when complete. * @param {String} keyThe key to associate with the item, or the new item.
*If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key * of your stored items is in a property called id, then the MixedCollection * will be able to derive the key for the new item. In this case just pass the new item in * this parameter.
* @param {Object} o The item to add. * @return {Object} The item added. */ add: function(key, o){ if(arguments.length == 1){ o = arguments[0]; key = this.getKey(o); } if(typeof key != 'undefined' && key !== null){ var old = this.map[key]; if(typeof old != 'undefined'){ return this.replace(key, o); } this.map[key] = o; } this.length++; this.items.push(o); this.keys.push(key); this.fireEvent('add', this.length-1, o, key); return o; }, /** * MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation * simply returns item.id but you can provide your own implementation * to return a different value as in the following examples:
// normal way
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//and so on
// using getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);
// or via the constructor
var mc = new Ext.util.MixedCollection(false, function(el){
return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);
The key associated with the item to replace, or the replacement item.
*If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key * of your stored items is in a property called id, then the MixedCollection * will be able to derive the key of the replacement item. If you want to replace an item * with one having the same key value, then just pass the replacement item in this parameter.
* @param o {Object} o (optional) If the first parameter passed was a key, the item to associate * with that key. * @return {Object} The new item. */ replace : function(key, o){ if(arguments.length == 1){ o = arguments[0]; key = this.getKey(o); } var old = this.map[key]; if(typeof key == "undefined" || key === null || typeof old == "undefined"){ return this.add(key, o); } var index = this.indexOfKey(key); this.items[index] = o; this.map[key] = o; this.fireEvent("replace", key, old, o); return o; }, /** * Adds all elements of an Array or an Object to the collection. * @param {Object/Array} objs An Object containing properties which will be added to the collection, or * an Array of values, each of which are added to the collection. */ addAll : function(objs){ if(arguments.length > 1 || Ext.isArray(objs)){ var args = arguments.length > 1 ? arguments : objs; for(var i = 0, len = args.length; i < len; i++){ this.add(args[i]); } }else{ for(var key in objs){ if(this.allowFunctions || typeof objs[key] != "function"){ this.add(key, objs[key]); } } } }, /** * Executes the specified function once for every item in the collection, passing the following arguments: *The collection item
The item's index
The total number of items in the collection
* var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
* A template class that supports advanced functionality like autofilling arrays, conditional processing with * basic comparison operators, sub-templates, basic math function support, special built-in template variables, * inline code execution and more. XTemplate also provides the templating mechanism built into {@link Ext.DataView}.
*XTemplate supports many special tags and built-in operators that aren't defined as part of the API, but are * supported in the templates that can be created. The following examples demonstrate all of the supported features. * This is the data object used for reference in each code example:
*
var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
company: 'Ext JS, LLC',
email: 'jack@extjs.com',
address: '4 Red Bulls Drive',
city: 'Cleveland',
state: 'Ohio',
zip: '44102',
drinks: ['Red Bull', 'Coffee', 'Water'],
kids: [{
name: 'Sara Grace',
age:3
},{
name: 'Zachary',
age:2
},{
name: 'John James',
age:0
}]
};
* Auto filling of arrays
The tpl tag and the for operator are used
* to process the provided data object. If for="." is specified, the data object provided
* is examined. If the variable in for is an array, it will auto-fill, repeating the template
* block inside the tpl tag for each item in the array:
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">',
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
* Scope switching
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);
* Access to parent object from within sub-template scope
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">', // <-- Note that the > is encoded
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
Array item index and basic math support
While processing an array, the special variable {#}
* will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators
* + - * and / that can be applied directly on numeric data values:
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);
Auto-rendering of flat arrays
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);
Basic conditional logic
Using the tpl tag and the if
* operator you can provide conditional checks for deciding whether or not to render specific parts of the template.
* Note that there is no else operator — if needed, you should use two opposite if statements.
* Properly-encoded attributes are required as seen in the following 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>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
Ability to execute arbitrary inline code
In an XTemplate, 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);
Template member functions
One or more member functions can be defined directly on the config
* 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>',
'<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>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
tpl.overwrite(panel.body, data);
Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind * navigation keys to function calls that will get called when the keys are pressed, providing an easy * way to implement custom navigation schemes for any UI component.
*The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc, * pageUp, pageDown, del, home, end. Usage:
var nav = new Ext.KeyNav("my-element", {
"left" : function(e){
this.moveLeft(e.ctrlKey);
},
"right" : function(e){
this.moveRight(e.ctrlKey);
},
"enter" : function(e){
this.save();
},
scope : this
});
// map one key by key code
var map = new Ext.KeyMap("my-element", {
key: 13, // or Ext.EventObject.ENTER
fn: myHandler,
scope: myObject
});
// map multiple keys to one action by string
var map = new Ext.KeyMap("my-element", {
key: "a\r\n\t",
fn: myHandler,
scope: myObject
});
// map multiple keys to multiple actions by strings and array of codes
var map = new Ext.KeyMap("my-element", [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}, {
key: "\t",
ctrl:true,
shift:true,
fn: function(){ alert('Control + shift + tab was pressed.'); }
}
]);
Property Type Description ---------- --------------- ---------------------------------------------------------------------- key String/Array A single keycode or an array of keycodes to handle shift Boolean True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined) ctrl Boolean True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined) alt Boolean True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined) handler Function The function to call when KeyMap finds the expected key combination fn Function Alias of handler (for backwards-compatibility) scope Object The scope of the callback function stopEvent Boolean True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)* * Usage: *
// Create a KeyMap
var map = new Ext.KeyMap(document, {
key: Ext.EventObject.ENTER,
fn: handleKey,
scope: this
});
//Add a new binding to the existing KeyMap later
map.addBinding({
key: 'abc',
shift: true,
fn: handleKey,
scope: this
});
get() returns null. The following
* example retrieves the cookie called "valid" and stores the String value
* in the variable validStatus.
*
* var validStatus = Ext.util.Cookies.get("valid");
* A base error class. Future implementations are intended to provide more * robust error handling throughout the framework (in the debug build only) * to check for common errors and problems. The messages issued by this class * will aid error checking. Error checks will be automatically removed in the * production build so that performance is not negatively impacted.
*Some sample messages currently implemented:
"DataProxy attempted to execute an API-action but found an undefined url / function. Please review your Proxy url/api-configuration." *
"Could not locate your "root" property in your server response. Please review your JsonReader config to ensure the config-property "root" matches the property your server-response. See the JsonReader docs for additional assistance." **
An example of the code used for generating error messages:
try {
generateError({
foo: 'bar'
});
}
catch (e) {
console.error(e);
}
function generateError(data) {
throw new Ext.Error('foo-error', data);
}
*