(function(){ var EXTUTIL = Ext.util, EACH = Ext.each, TRUE = true, FALSE = false; EXTUTIL.Observable = function(){ var me = this, e = me.events; if(me.listeners){ me.on(me.listeners); delete me.listeners; } me.events = e || {}; }; EXTUTIL.Observable.prototype = { filterOptRe : /^(?:scope|delay|buffer|single)$/, fireEvent : function(){ var a = Array.prototype.slice.call(arguments, 0), ename = a[0].toLowerCase(), me = this, ret = TRUE, ce = me.events[ename], cc, q, c; if (me.eventsSuspended === TRUE) { if (q = me.eventQueue) { q.push(a); } } else if(typeof ce == 'object') { if (ce.bubble){ if(ce.fire.apply(ce, a.slice(1)) === FALSE) { return FALSE; } c = me.getBubbleTarget && me.getBubbleTarget(); if(c && c.enableBubble) { cc = c.events[ename]; if(!cc || typeof cc != 'object' || !cc.bubble) { c.enableBubble(ename); } return c.fireEvent.apply(c, a); } } else { a.shift(); ret = ce.fire.apply(ce, a); } } return ret; }, addListener : function(eventName, fn, scope, o){ var me = this, e, oe, ce; if (typeof eventName == 'object') { o = eventName; for (e in o) { oe = o[e]; if (!me.filterOptRe.test(e)) { me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o); } } } else { eventName = eventName.toLowerCase(); ce = me.events[eventName] || TRUE; if (typeof ce == 'boolean') { me.events[eventName] = ce = new EXTUTIL.Event(me, eventName); } ce.addListener(fn, scope, typeof o == 'object' ? o : {}); } }, removeListener : function(eventName, fn, scope){ var ce = this.events[eventName.toLowerCase()]; if (typeof ce == 'object') { ce.removeListener(fn, scope); } }, purgeListeners : function(){ var events = this.events, evt, key; for(key in events){ evt = events[key]; if(typeof evt == 'object'){ evt.clearListeners(); } } }, addEvents : function(o){ var me = this; me.events = me.events || {}; if (typeof o == 'string') { var a = arguments, i = a.length; while(i--) { me.events[a[i]] = me.events[a[i]] || TRUE; } } else { Ext.applyIf(me.events, o); } }, hasListener : function(eventName){ var e = this.events[eventName.toLowerCase()]; return typeof e == 'object' && e.listeners.length > 0; }, suspendEvents : function(queueSuspended){ this.eventsSuspended = TRUE; if(queueSuspended && !this.eventQueue){ this.eventQueue = []; } }, resumeEvents : function(){ var me = this, queued = me.eventQueue || []; me.eventsSuspended = FALSE; delete me.eventQueue; EACH(queued, function(e) { me.fireEvent.apply(me, e); }); } }; var OBSERVABLE = EXTUTIL.Observable.prototype; OBSERVABLE.on = OBSERVABLE.addListener; OBSERVABLE.un = OBSERVABLE.removeListener; EXTUTIL.Observable.releaseCapture = function(o){ o.fireEvent = OBSERVABLE.fireEvent; }; function createTargeted(h, o, scope){ return function(){ if(o.target == arguments[0]){ h.apply(scope, Array.prototype.slice.call(arguments, 0)); } }; }; function createBuffered(h, o, l, scope){ l.task = new EXTUTIL.DelayedTask(); return function(){ l.task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0)); }; }; function createSingle(h, e, fn, scope){ return function(){ e.removeListener(fn, scope); return h.apply(scope, arguments); }; }; function createDelayed(h, o, l, scope){ return function(){ var task = new EXTUTIL.DelayedTask(), args = Array.prototype.slice.call(arguments, 0); if(!l.tasks) { l.tasks = []; } l.tasks.push(task); task.delay(o.delay || 10, function(){ l.tasks.remove(task); h.apply(scope, args); }, scope); }; }; 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){ 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, l, scope); } if(o.single){ h = createSingle(h, this, fn, scope); } if(o.buffer){ h = createBuffered(h, o, l, scope); } l.fireFn = h; return l; }, findListener : function(fn, scope){ var list = this.listeners, i = list.length, l; scope = scope || this.obj; while(i--){ l = list[i]; if(l){ if(l.fn == fn && l.scope == scope){ return i; } } } return -1; }, isListening : function(fn, scope){ return this.findListener(fn, scope) != -1; }, removeListener : function(fn, scope){ var index, l, k, me = this, ret = FALSE; if((index = me.findListener(fn, scope)) != -1){ if (me.firing) { me.listeners = me.listeners.slice(0); } l = me.listeners[index]; if(l.task) { l.task.cancel(); delete l.task; } k = l.tasks && l.tasks.length; if(k) { while(k--) { l.tasks[k].cancel(); } delete l.tasks; } me.listeners.splice(index, 1); ret = TRUE; } return ret; }, clearListeners : function(){ var me = this, l = me.listeners, i = l.length; while(i--) { me.removeListener(l[i].fn, l[i].scope); } }, fire : function(){ var me = this, listeners = me.listeners, len = listeners.length, i = 0, l; if(len > 0){ me.firing = TRUE; var args = Array.prototype.slice.call(arguments, 0); for (; i < len; i++) { l = listeners[i]; if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) { return (me.firing = FALSE); } } } me.firing = FALSE; return TRUE; } }; })(); Ext.DomHelper = function(){ var tempTableEl = null, emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i, tableRe = /^table|tbody|tr|td$/i, confRe = /tag|children|cn|html$/i, tableElRe = /td|tr|tbody/i, cssRe = /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi, endRe = /end/i, pub, afterbegin = 'afterbegin', afterend = 'afterend', beforebegin = 'beforebegin', beforeend = 'beforeend', ts = '
Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed * two parameters:
A filter function returns an Array of DOM elements which conform to the pseudo class.
*In addition to the provided pseudo classes listed above such as first-child
and nth-child
,
* developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.
For example, to filter <a>
elements to only return links to external resources:
Ext.DomQuery.pseudos.external = function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
// Include in result set only if it's a link to an external resource
if(ci.hostname != location.hostname){
r[++ri] = ci;
}
}
return r;
};
* Then external links could be gathered with the following statement:
var externalLinks = Ext.select("a:external");
*/
pseudos : {
"first-child" : function(c){
var r = [], ri = -1, n;
for(var i = 0, ci; ci = n = c[i]; i++){
while((n = n.previousSibling) && n.nodeType != 1);
if(!n){
r[++ri] = ci;
}
}
return r;
},
"last-child" : function(c){
var r = [], ri = -1, n;
for(var i = 0, ci; ci = n = c[i]; i++){
while((n = n.nextSibling) && n.nodeType != 1);
if(!n){
r[++ri] = ci;
}
}
return r;
},
"nth-child" : function(c, a) {
var r = [], ri = -1,
m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
f = (m[1] || 1) - 0, l = m[2] - 0;
for(var i = 0, n; n = c[i]; i++){
var pn = n.parentNode;
if (batch != pn._batch) {
var j = 0;
for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
if(cn.nodeType == 1){
cn.nodeIndex = ++j;
}
}
pn._batch = batch;
}
if (f == 1) {
if (l == 0 || n.nodeIndex == l){
r[++ri] = n;
}
} else if ((n.nodeIndex + l) % f == 0){
r[++ri] = n;
}
}
return r;
},
"only-child" : function(c){
var r = [], ri = -1;;
for(var i = 0, ci; ci = c[i]; i++){
if(!prev(ci) && !next(ci)){
r[++ri] = ci;
}
}
return r;
},
"empty" : function(c){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var cns = ci.childNodes, j = 0, cn, empty = true;
while(cn = cns[j]){
++j;
if(cn.nodeType == 1 || cn.nodeType == 3){
empty = false;
break;
}
}
if(empty){
r[++ri] = ci;
}
}
return r;
},
"contains" : function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
r[++ri] = ci;
}
}
return r;
},
"nodeValue" : function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(ci.firstChild && ci.firstChild.nodeValue == v){
r[++ri] = ci;
}
}
return r;
},
"checked" : function(c){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(ci.checked == true){
r[++ri] = ci;
}
}
return r;
},
"not" : function(c, ss){
return Ext.DomQuery.filter(c, ss, true);
},
"any" : function(c, selectors){
var ss = selectors.split('|'),
r = [], ri = -1, s;
for(var i = 0, ci; ci = c[i]; i++){
for(var j = 0; s = ss[j]; j++){
if(Ext.DomQuery.is(ci, s)){
r[++ri] = ci;
break;
}
}
}
return r;
},
"odd" : function(c){
return this["nth-child"](c, "odd");
},
"even" : function(c){
return this["nth-child"](c, "even");
},
"nth" : function(c, a){
return c[a-1] || [];
},
"first" : function(c){
return c[0] || [];
},
"last" : function(c){
return c[c.length-1] || [];
},
"has" : function(c, ss){
var s = Ext.DomQuery.select,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(s(ss, ci).length > 0){
r[++ri] = ci;
}
}
return r;
},
"next" : function(c, ss){
var is = Ext.DomQuery.is,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var n = next(ci);
if(n && is(n, ss)){
r[++ri] = ci;
}
}
return r;
},
"prev" : function(c, ss){
var is = Ext.DomQuery.is,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var n = prev(ci);
if(n && is(n, ss)){
r[++ri] = ci;
}
}
return r;
}
}
};
}();
/**
* Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}
* @param {String} path The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @return {Array}
* @member Ext
* @method query
*/
Ext.query = Ext.DomQuery.select;
/**
* @class Ext.util.DelayedTask
* 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 call. * @param {Object} scope The default scope (Thethis
reference) in which the
* function is called. If not specified, this
will refer to the browser window.
* @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. Remember that if no scope
* is specified, this
will refer to the browser window.
* @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.Element
* 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);
* AnimationsWhen 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.elCache[id]){ // element object already exists return Ext.elCache[id].el; } /** * The DOM element * @type HTMLElement */ this.dom = dom; /** * The DOM element ID * @type String */ this.id = id || Ext.id(dom); }; var DH = Ext.DomHelper, El = Ext.Element, EC = Ext.elCache; 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, useSet = (useSet !== false) && !!el.setAttribute; for (attr in o) { if (o.hasOwnProperty(attr)) { val = o[attr]; if (attr == 'style') { DH.applyStyles(el, val); } else if (attr == 'cls') { el.className = val; } else if (useSet) { el.setAttribute(attr, val); } else { el[attr] = val; } } } 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 contextmenu * Fires when a right 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 name 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'
}
);
*
* @return {Ext.Element} this
*/
addListener : function(eventName, fn, scope, options){
Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
return this;
},
/**
* Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
* Note: if a scope was explicitly specified when {@link #addListener adding} the
* listener, the same scope must be specified here.
* Example:
*
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
* @param {String} eventName The name of the event from which to remove the handler.
* @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
* @param {Object} scope If a scope (this
reference) was specified when the listener was added,
* then this must refer to the same object.
* @return {Ext.Element} this
*/
removeListener : function(eventName, fn, scope){
Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.Element} this
*/
removeAllListeners : function(){
Ext.EventManager.removeAll(this.dom);
return this;
},
/**
* Recursively removes all previous added listeners from this element and its children
* @return {Ext.Element} this
*/
purgeAllListeners : function() {
Ext.EventManager.purgeElement(this, true);
return this;
},
/**
* @private Test if size has a unit, otherwise appends the default
*/
addUnits : function(size){
if(size === "" || size == "auto" || size === undefined){
size = size || '';
} else if(!isNaN(size) || !unitPattern.test(size)){
size = size + (this.defaultUnit || 'px');
}
return size;
},
/**
* Updates 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; }, isBorderBox : function(){ return Ext.isBorderBox || Ext.isForcedBorderBox || noBoxAdjust[(this.dom.tagName || "").toLowerCase()]; }, remove : function(){ var me = this, dom = me.dom; if (dom) { delete me.dom; Ext.removeNode(dom); } }, 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; }, contains : function(el){ return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el); }, getAttributeNS : function(ns, name){ return this.getAttribute(name, ns); }, getAttribute: (function(){ var test = document.createElement('table'), isBrokenOnTable = false, hasGetAttribute = 'getAttribute' in test, unknownRe = /undefined|unknown/; if (hasGetAttribute) { try { test.getAttribute('ext:qtip'); } catch (e) { isBrokenOnTable = true; } return function(name, ns) { var el = this.dom, value; if (el.getAttributeNS) { value = el.getAttributeNS(ns, name) || null; } if (value == null) { if (ns) { if (isBrokenOnTable && el.tagName.toUpperCase() == 'TABLE') { try { value = el.getAttribute(ns + ':' + name); } catch (e) { value = ''; } } else { value = el.getAttribute(ns + ':' + name); } } else { value = el.getAttribute(name) || el[name]; } } return value || ''; }; } else { return function(name, ns) { var el = this.om, value, attribute; if (ns) { attribute = el[ns + ':' + name]; value = unknownRe.test(typeof attribute) ? undefined : attribute; } else { value = el[name]; } return value || ''; }; } test = null; })(), update : function(html) { if (this.dom) { this.dom.innerHTML = html; } return this; } }; var ep = El.prototype; El.addMethods = function(o){ Ext.apply(ep, o); }; ep.on = ep.addListener; ep.un = ep.removeListener; ep.autoBoxAdjust = true; var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i, docEl; El.get = function(el){ var ex, elm, id; if(!el){ return null; } if (typeof el == "string") { if (!(elm = DOC.getElementById(el))) { return null; } if (EC[el] && EC[el].el) { ex = EC[el].el; ex.dom = elm; } else { ex = El.addToCache(new El(elm)); } return ex; } else if (el.tagName) { if(!(id = el.id)){ id = Ext.id(el); } if (EC[id] && EC[id].el) { ex = EC[id].el; ex.dom = el; } else { ex = El.addToCache(new El(el)); } return ex; } else if (el instanceof El) { if(el != docEl){ if (Ext.isIE && (el.id == undefined || el.id == '')) { el.dom = el.dom; } else { el.dom = DOC.getElementById(el.id) || el.dom; } } return el; } else if(el.isComposite) { return el; } else if(Ext.isArray(el)) { return El.select(el); } else if(el == DOC) { if(!docEl){ var f = function(){}; f.prototype = El.prototype; docEl = new f(); docEl.dom = DOC; } return docEl; } return null; }; El.addToCache = function(el, id){ id = id || el.id; EC[id] = { el: el, data: {}, events: {} }; return el; }; El.data = function(el, key, value){ el = El.get(el); if (!el) { return null; } var c = EC[el.id].data; if(arguments.length == 2){ return c[key]; }else{ return (c[key] = value); } }; function garbageCollect(){ if(!Ext.enableGarbageCollector){ clearInterval(El.collectorThreadId); } else { var eid, el, d, o; for(eid in EC){ o = EC[eid]; if(o.skipGC){ continue; } el = o.el; d = el.dom; if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){ if(Ext.enableListenerCollection){ Ext.EventManager.removeAll(d); } delete EC[eid]; } } if (Ext.isIE) { var t = {}; for (eid in EC) { t[eid] = EC[eid]; } EC = Ext.elCache = t; } } } El.collectorThreadId = setInterval(garbageCollect, 30000); var flyFn = function(){}; flyFn.prototype = El.prototype; El.Flyweight = function(dom){ this.dom = dom; }; El.Flyweight.prototype = new flyFn(); El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; 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; }; Ext.get = El.get; Ext.fly = El.fly; var noBoxAdjust = Ext.isStrict ? { select:1 } : { input:1, select:1, textarea:1 }; if(Ext.isIE || Ext.isGecko){ noBoxAdjust['button'] = 1; } })(); Ext.Element.addMethods(function(){ var PARENTNODE = 'parentNode', NEXTSIBLING = 'nextSibling', PREVIOUSSIBLING = 'previousSibling', DQ = Ext.DomQuery, GET = Ext.get; return { findParent : function(simpleSelector, maxDepth, returnEl){ var p = this.dom, b = document.body, depth = 0, stopEl; if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') { return null; } maxDepth = maxDepth || 50; if (isNaN(maxDepth)) { stopEl = Ext.getDom(maxDepth); maxDepth = Number.MAX_VALUE; } while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){ if(DQ.is(p, simpleSelector)){ return returnEl ? GET(p) : p; } depth++; p = p.parentNode; } return null; }, findParentNode : function(simpleSelector, maxDepth, returnEl){ var p = Ext.fly(this.dom.parentNode, '_internal'); return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null; }, up : function(simpleSelector, maxDepth){ return this.findParentNode(simpleSelector, maxDepth, true); }, select : function(selector){ return Ext.Element.select(selector, this.dom); }, query : function(selector){ return DQ.select(selector, this.dom); }, child : function(selector, returnDom){ var n = DQ.selectNode(selector, this.dom); return returnDom ? n : GET(n); }, down : function(selector, returnDom){ var n = DQ.selectNode(" > " + selector, this.dom); return returnDom ? n : GET(n); }, parent : function(selector, returnDom){ return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom); }, next : function(selector, returnDom){ return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom); }, prev : function(selector, returnDom){ return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom); }, first : function(selector, returnDom){ return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom); }, last : function(selector, returnDom){ return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom); }, matchNode : function(dir, start, selector, returnDom){ var n = this.dom[start]; while(n){ if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){ return !returnDom ? GET(n) : n; } n = n[dir]; } return null; } }; }()); Ext.Element.addMethods( function() { var GETDOM = Ext.getDom, GET = Ext.get, DH = Ext.DomHelper; return { appendChild: function(el){ return GET(el).appendTo(this); }, appendTo: function(el){ GETDOM(el).appendChild(this.dom); return this; }, insertBefore: function(el){ (el = GETDOM(el)).parentNode.insertBefore(this.dom, el); return this; }, insertAfter: function(el){ (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling); return this; }, insertFirst: function(el, returnDom){ el = el || {}; if(el.nodeType || el.dom || typeof el == 'string'){ el = GETDOM(el); this.dom.insertBefore(el, this.dom.firstChild); return !returnDom ? GET(el) : el; }else{ return this.createChild(el, this.dom.firstChild, returnDom); } }, replace: function(el){ el = GET(el); this.insertBefore(el); el.remove(); return this; }, replaceWith: function(el){ var me = this; if(el.nodeType || el.dom || typeof el == 'string'){ el = GETDOM(el); me.dom.parentNode.insertBefore(el, me.dom); }else{ el = DH.insertBefore(me.dom, el); } delete Ext.elCache[me.id]; Ext.removeNode(me.dom); me.id = Ext.id(me.dom = el); Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me); return me; }, createChild: function(config, insertBefore, returnDom){ config = config || {tag:'div'}; return insertBefore ? DH.insertBefore(insertBefore, config, returnDom !== true) : DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true); }, wrap: function(config, returnDom){ var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom); newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom); return newEl; }, insertHtml : function(where, html, returnEl){ var el = DH.insertHtml(where, this.dom, html); return returnEl ? Ext.get(el) : el; } }; }()); Ext.Element.addMethods(function(){ var supports = Ext.supports, propCache = {}, camelRe = /(-[a-z])/gi, view = document.defaultView, opacityRe = /alpha\(opacity=(.*)\)/i, trimRe = /^\s+|\s+$/g, EL = Ext.Element, spacesRe = /\s+/, wordsRe = /\w/g, PADDING = "padding", MARGIN = "margin", BORDER = "border", LEFT = "-left", RIGHT = "-right", TOP = "-top", BOTTOM = "-bottom", WIDTH = "-width", MATH = Math, HIDDEN = 'hidden', ISCLIPPED = 'isClipped', OVERFLOW = 'overflow', OVERFLOWX = 'overflow-x', OVERFLOWY = 'overflow-y', ORIGINALCLIP = 'originalClip', borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH}, paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM}, margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM}, data = Ext.Element.data; function camelFn(m, a) { return a.charAt(1).toUpperCase(); } function chkCache(prop) { return propCache[prop] || (propCache[prop] = prop == 'float' ? (supports.cssFloat ? 'cssFloat' : 'styleFloat') : prop.replace(camelRe, camelFn)); } return { adjustWidth : function(width) { var me = this; var isNum = (typeof width == "number"); if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ width -= (me.getBorderWidth("lr") + me.getPadding("lr")); } return (isNum && width < 0) ? 0 : width; }, adjustHeight : function(height) { var me = this; var isNum = (typeof height == "number"); if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ height -= (me.getBorderWidth("tb") + me.getPadding("tb")); } return (isNum && height < 0) ? 0 : height; }, addClass : function(className){ var me = this, i, len, v, cls = []; if (!Ext.isArray(className)) { if (typeof className == 'string' && !this.hasClass(className)) { me.dom.className += " " + className; } } else { for (i = 0, len = className.length; i < len; i++) { v = className[i]; if (typeof v == 'string' && (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) { cls.push(v); } } if (cls.length) { me.dom.className += " " + cls.join(" "); } } return me; }, removeClass : function(className){ var me = this, i, idx, len, cls, elClasses; if (!Ext.isArray(className)){ className = [className]; } if (me.dom && me.dom.className) { elClasses = me.dom.className.replace(trimRe, '').split(spacesRe); for (i = 0, len = className.length; i < len; i++) { cls = className[i]; if (typeof cls == 'string') { cls = cls.replace(trimRe, ''); idx = elClasses.indexOf(cls); if (idx != -1) { elClasses.splice(idx, 1); } } } me.dom.className = elClasses.join(" "); } return me; }, radioClass : function(className){ var cn = this.dom.parentNode.childNodes, v, i, len; className = Ext.isArray(className) ? className : [className]; for (i = 0, len = cn.length; i < len; i++) { v = cn[i]; if (v && v.nodeType == 1) { Ext.fly(v, '_internal').removeClass(className); } }; return this.addClass(className); }, toggleClass : function(className){ return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); }, hasClass : function(className){ return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; }, replaceClass : function(oldClassName, newClassName){ return this.removeClass(oldClassName).addClass(newClassName); }, isStyle : function(style, val) { return this.getStyle(style) == val; }, getStyle : function(){ return view && view.getComputedStyle ? function(prop){ var el = this.dom, v, cs, out, display; if(el == document){ return null; } prop = chkCache(prop); out = (v = el.style[prop]) ? v : (cs = view.getComputedStyle(el, "")) ? cs[prop] : null; if(prop == 'marginRight' && out != '0px' && !supports.correctRightMargin){ display = el.style.display; el.style.display = 'inline-block'; out = view.getComputedStyle(el, '').marginRight; el.style.display = display; } if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.correctTransparentColor){ out = 'transparent'; } return out; } : function(prop){ var el = this.dom, m, cs; if(el == document) return null; if (prop == 'opacity') { if (el.style.filter.match) { if(m = el.style.filter.match(opacityRe)){ var fv = parseFloat(m[1]); if(!isNaN(fv)){ return fv ? fv / 100 : 0; } } } return 1; } prop = chkCache(prop); return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null); }; }(), getColor : function(attr, defaultValue, prefix){ var v = this.getStyle(attr), color = (typeof prefix != 'undefined') ? prefix : '#', h; if(!v || (/transparent|inherit/.test(v))) { return defaultValue; } if(/^r/.test(v)){ Ext.each(v.slice(4, v.length -1).split(','), function(s){ h = parseInt(s, 10); color += (h < 16 ? '0' : '') + h.toString(16); }); }else{ v = v.replace('#', ''); color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v; } return(color.length > 5 ? color.toLowerCase() : defaultValue); }, setStyle : function(prop, value){ var tmp, style; if (typeof prop != 'object') { tmp = {}; tmp[prop] = value; prop = tmp; } for (style in prop) { value = prop[style]; style == 'opacity' ? this.setOpacity(value) : this.dom.style[chkCache(style)] = value; } return this; }, setOpacity : function(opacity, animate){ var me = this, s = me.dom.style; if(!animate || !me.anim){ if(Ext.isIE){ var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', val = s.filter.replace(opacityRe, '').replace(trimRe, ''); s.zoom = 1; s.filter = val + (val.length > 0 ? ' ' : '') + opac; }else{ s.opacity = opacity; } }else{ me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn'); } return me; }, clearOpacity : function(){ var style = this.dom.style; if(Ext.isIE){ if(!Ext.isEmpty(style.filter)){ style.filter = style.filter.replace(opacityRe, '').replace(trimRe, ''); } }else{ style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = ''; } return this; }, getHeight : function(contentHeight){ var me = this, dom = me.dom, hidden = Ext.isIE && me.isStyle('display', 'none'), h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0; h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb"); return h < 0 ? 0 : h; }, getWidth : function(contentWidth){ var me = this, dom = me.dom, hidden = Ext.isIE && me.isStyle('display', 'none'), w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0; w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr"); return w < 0 ? 0 : w; }, setWidth : function(width, animate){ var me = this; width = me.adjustWidth(width); !animate || !me.anim ? me.dom.style.width = me.addUnits(width) : me.anim({width : {to : width}}, me.preanim(arguments, 1)); return me; }, setHeight : function(height, animate){ var me = this; height = me.adjustHeight(height); !animate || !me.anim ? me.dom.style.height = me.addUnits(height) : me.anim({height : {to : height}}, me.preanim(arguments, 1)); return me; }, getBorderWidth : function(side){ return this.addStyles(side, borders); }, getPadding : function(side){ return this.addStyles(side, paddings); }, clip : function(){ var me = this, dom = me.dom; if(!data(dom, ISCLIPPED)){ data(dom, ISCLIPPED, true); data(dom, ORIGINALCLIP, { o: me.getStyle(OVERFLOW), x: me.getStyle(OVERFLOWX), y: me.getStyle(OVERFLOWY) }); me.setStyle(OVERFLOW, HIDDEN); me.setStyle(OVERFLOWX, HIDDEN); me.setStyle(OVERFLOWY, HIDDEN); } return me; }, unclip : function(){ var me = this, dom = me.dom; if(data(dom, ISCLIPPED)){ data(dom, ISCLIPPED, false); var o = data(dom, ORIGINALCLIP); if(o.o){ me.setStyle(OVERFLOW, o.o); } if(o.x){ me.setStyle(OVERFLOWX, o.x); } if(o.y){ me.setStyle(OVERFLOWY, o.y); } } return me; }, addStyles : function(sides, styles){ var ttlSize = 0, sidesArr = sides.match(wordsRe), side, size, i, len = sidesArr.length; for (i = 0; i < len; i++) { side = sidesArr[i]; size = side && parseInt(this.getStyle(styles[side]), 10); if (size) { ttlSize += MATH.abs(size); } } return ttlSize; }, margins : margins }; }() ); (function(){ var D = Ext.lib.Dom, LEFT = "left", RIGHT = "right", TOP = "top", BOTTOM = "bottom", POSITION = "position", STATIC = "static", RELATIVE = "relative", AUTO = "auto", ZINDEX = "z-index"; Ext.Element.addMethods({ getX : function(){ return D.getX(this.dom); }, getY : function(){ return D.getY(this.dom); }, getXY : function(){ return D.getXY(this.dom); }, getOffsetsTo : function(el){ var o = this.getXY(), e = Ext.fly(el, '_internal').getXY(); return [o[0]-e[0],o[1]-e[1]]; }, setX : function(x, animate){ return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1)); }, setY : function(y, animate){ return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1)); }, setLeft : function(left){ this.setStyle(LEFT, this.addUnits(left)); return this; }, setTop : function(top){ this.setStyle(TOP, this.addUnits(top)); return this; }, setRight : function(right){ this.setStyle(RIGHT, this.addUnits(right)); return this; }, setBottom : function(bottom){ this.setStyle(BOTTOM, this.addUnits(bottom)); return this; }, setXY : function(pos, animate){ var me = this; if(!animate || !me.anim){ D.setXY(me.dom, pos); }else{ me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion'); } return me; }, setLocation : function(x, y, animate){ return this.setXY([x, y], this.animTest(arguments, animate, 2)); }, moveTo : function(x, y, animate){ return this.setXY([x, y], this.animTest(arguments, animate, 2)); }, getLeft : function(local){ return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0; }, getRight : function(local){ var me = this; return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0; }, getTop : function(local) { return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0; }, getBottom : function(local){ var me = this; return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0; }, position : function(pos, zIndex, x, y){ var me = this; if(!pos && me.isStyle(POSITION, STATIC)){ me.setStyle(POSITION, RELATIVE); } else if(pos) { me.setStyle(POSITION, pos); } if(zIndex){ me.setStyle(ZINDEX, zIndex); } if(x || y) me.setXY([x || false, y || false]); }, clearPositioning : function(value){ value = value || ''; this.setStyle({ left : value, right : value, top : value, bottom : value, "z-index" : "", position : STATIC }); return this; }, getPositioning : function(){ var l = this.getStyle(LEFT); var t = this.getStyle(TOP); return { "position" : this.getStyle(POSITION), "left" : l, "right" : l ? "" : this.getStyle(RIGHT), "top" : t, "bottom" : t ? "" : this.getStyle(BOTTOM), "z-index" : this.getStyle(ZINDEX) }; }, setPositioning : function(pc){ var me = this, style = me.dom.style; me.setStyle(pc); if(pc.right == AUTO){ style.right = ""; } if(pc.bottom == AUTO){ style.bottom = ""; } return me; }, translatePoints : function(x, y){ y = isNaN(x[1]) ? y : x[1]; x = isNaN(x[0]) ? x : x[0]; var me = this, relative = me.isStyle(POSITION, RELATIVE), o = me.getXY(), l = parseInt(me.getStyle(LEFT), 10), t = parseInt(me.getStyle(TOP), 10); l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft); t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); return {left: (x - o[0] + l), top: (y - o[1] + t)}; }, animTest : function(args, animate, i) { return !!animate && this.preanim ? this.preanim(args, i) : false; } }); })(); Ext.Element.addMethods({ isScrollable : function(){ var dom = this.dom; return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth; }, scrollTo : function(side, value){ this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value; return this; }, getScroll : function(){ var d = this.dom, doc = document, body = doc.body, docElement = doc.documentElement, l, t, ret; if(d == doc || d == body){ if(Ext.isIE && Ext.isStrict){ l = docElement.scrollLeft; t = docElement.scrollTop; }else{ l = window.pageXOffset; t = window.pageYOffset; } ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)}; }else{ ret = {left: d.scrollLeft, top: d.scrollTop}; } return ret; } }); Ext.Element.VISIBILITY = 1; Ext.Element.DISPLAY = 2; Ext.Element.OFFSETS = 3; Ext.Element.ASCLASS = 4; Ext.Element.visibilityCls = 'x-hide-nosize'; Ext.Element.addMethods(function(){ var El = Ext.Element, OPACITY = "opacity", VISIBILITY = "visibility", DISPLAY = "display", HIDDEN = "hidden", OFFSETS = "offsets", ASCLASS = "asclass", NONE = "none", NOSIZE = 'nosize', ORIGINALDISPLAY = 'originalDisplay', VISMODE = 'visibilityMode', ISVISIBLE = 'isVisible', data = El.data, getDisplay = function(dom){ var d = data(dom, ORIGINALDISPLAY); if(d === undefined){ data(dom, ORIGINALDISPLAY, d = ''); } return d; }, getVisMode = function(dom){ var m = data(dom, VISMODE); if(m === undefined){ data(dom, VISMODE, m = 1); } return m; }; return { originalDisplay : "", visibilityMode : 1, setVisibilityMode : function(visMode){ data(this.dom, VISMODE, visMode); return this; }, animate : function(args, duration, onComplete, easing, animType){ this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType); return this; }, anim : function(args, opt, animType, defaultDur, defaultEase, cb){ animType = animType || 'run'; opt = opt || {}; var me = this, anim = Ext.lib.Anim[animType]( me.dom, args, (opt.duration || defaultDur) || .35, (opt.easing || defaultEase) || 'easeOut', function(){ if(cb) cb.call(me); if(opt.callback) opt.callback.call(opt.scope || me, me, opt); }, me ); opt.anim = anim; return anim; }, preanim : function(a, i){ return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]}); }, isVisible : function() { var me = this, dom = me.dom, visible = data(dom, ISVISIBLE); if(typeof visible == 'boolean'){ return visible; } visible = !me.isStyle(VISIBILITY, HIDDEN) && !me.isStyle(DISPLAY, NONE) && !((getVisMode(dom) == El.ASCLASS) && me.hasClass(me.visibilityCls || El.visibilityCls)); data(dom, ISVISIBLE, visible); return visible; }, setVisible : function(visible, animate){ var me = this, isDisplay, isVisibility, isOffsets, isNosize, dom = me.dom, visMode = getVisMode(dom); if (typeof animate == 'string'){ switch (animate) { case DISPLAY: visMode = El.DISPLAY; break; case VISIBILITY: visMode = El.VISIBILITY; break; case OFFSETS: visMode = El.OFFSETS; break; case NOSIZE: case ASCLASS: visMode = El.ASCLASS; break; } me.setVisibilityMode(visMode); animate = false; } if (!animate || !me.anim) { if(visMode == El.ASCLASS ){ me[visible?'removeClass':'addClass'](me.visibilityCls || El.visibilityCls); } else if (visMode == El.DISPLAY){ return me.setDisplayed(visible); } else if (visMode == El.OFFSETS){ if (!visible){ me.hideModeStyles = { position: me.getStyle('position'), top: me.getStyle('top'), left: me.getStyle('left') }; me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'}); } else { me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''}); delete me.hideModeStyles; } }else{ me.fixDisplay(); dom.style.visibility = visible ? "visible" : HIDDEN; } }else{ if(visible){ me.setOpacity(.01); me.setVisible(true); } me.anim({opacity: { to: (visible?1:0) }}, me.preanim(arguments, 1), null, .35, 'easeIn', function(){ visible || me.setVisible(false).setOpacity(1); }); } data(dom, ISVISIBLE, visible); return me; }, hasMetrics : function(){ var dom = this.dom; return this.isVisible() || (getVisMode(dom) == El.VISIBILITY); }, toggle : function(animate){ var me = this; me.setVisible(!me.isVisible(), me.preanim(arguments, 0)); return me; }, setDisplayed : function(value) { if(typeof value == "boolean"){ value = value ? getDisplay(this.dom) : NONE; } this.setStyle(DISPLAY, value); return this; }, fixDisplay : function(){ var me = this; if(me.isStyle(DISPLAY, NONE)){ me.setStyle(VISIBILITY, HIDDEN); me.setStyle(DISPLAY, getDisplay(this.dom)); if(me.isStyle(DISPLAY, NONE)){ me.setStyle(DISPLAY, "block"); } } }, hide : function(animate){ if (typeof animate == 'string'){ this.setVisible(false, animate); return this; } this.setVisible(false, this.preanim(arguments, 0)); return this; }, show : function(animate){ if (typeof animate == 'string'){ this.setVisible(true, animate); return this; } this.setVisible(true, this.preanim(arguments, 0)); return this; } }; }());(function(){ var NULL = null, UNDEFINED = undefined, TRUE = true, FALSE = false, SETX = "setX", SETY = "setY", SETXY = "setXY", LEFT = "left", BOTTOM = "bottom", TOP = "top", RIGHT = "right", HEIGHT = "height", WIDTH = "width", POINTS = "points", HIDDEN = "hidden", ABSOLUTE = "absolute", VISIBLE = "visible", MOTION = "motion", POSITION = "position", EASEOUT = "easeOut", flyEl = new Ext.Element.Flyweight(), queues = {}, getObject = function(o){ return o || {}; }, fly = function(dom){ flyEl.dom = dom; flyEl.id = Ext.id(dom); return flyEl; }, getQueue = function(id){ if(!queues[id]){ queues[id] = []; } return queues[id]; }, setQueue = function(id, value){ queues[id] = value; }; Ext.enableFx = TRUE; Ext.Fx = { switchStatements : function(key, fn, argHash){ return fn.apply(this, argHash[key]); }, slideIn : function(anchor, o){ o = getObject(o); var me = this, dom = me.dom, st = dom.style, xy, r, b, wrap, after, st, args, pt, bw, bh; anchor = anchor || "t"; me.queueFx(o, function(){ xy = fly(dom).getXY(); fly(dom).fixDisplay(); r = fly(dom).getFxRestore(); b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; b.right = b.x + b.width; b.bottom = b.y + b.height; fly(dom).setWidth(b.width).setHeight(b.height); wrap = fly(dom).fxWrap(r.pos, o, HIDDEN); st.visibility = VISIBLE; st.position = ABSOLUTE; function after(){ fly(dom).fxUnwrap(wrap, r.pos, o); st.width = r.width; st.height = r.height; fly(dom).afterFx(o); } pt = {to: [b.x, b.y]}; bw = {to: b.width}; bh = {to: b.height}; function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ var ret = {}; fly(wrap).setWidth(ww).setHeight(wh); if(fly(wrap)[sXY]){ fly(wrap)[sXY](sXYval); } style[s1] = style[s2] = "0"; if(w){ ret.width = w; } if(h){ ret.height = h; } if(p){ ret.points = p; } return ret; }; args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL], l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL], r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt], b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt], tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt], bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt], br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt], tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt] }); st.visibility = VISIBLE; fly(wrap).show(); arguments.callee.anim = fly(wrap).fxanim(args, o, MOTION, .5, EASEOUT, after); }); return me; }, slideOut : function(anchor, o){ o = getObject(o); var me = this, dom = me.dom, st = dom.style, xy = me.getXY(), wrap, r, b, a, zero = {to: 0}; anchor = anchor || "t"; me.queueFx(o, function(){ r = fly(dom).getFxRestore(); b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; b.right = b.x + b.width; b.bottom = b.y + b.height; fly(dom).setWidth(b.width).setHeight(b.height); wrap = fly(dom).fxWrap(r.pos, o, VISIBLE); st.visibility = VISIBLE; st.position = ABSOLUTE; fly(wrap).setWidth(b.width).setHeight(b.height); function after(){ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); fly(dom).fxUnwrap(wrap, r.pos, o); st.width = r.width; st.height = r.height; fly(dom).afterFx(o); } function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ var ret = {}; style[s1] = style[s2] = "0"; ret[p1] = v1; if(p2){ ret[p2] = v2; } if(p3){ ret[p3] = v3; } return ret; }; a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { t : [st, LEFT, BOTTOM, HEIGHT, zero], l : [st, RIGHT, TOP, WIDTH, zero], r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}], b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero], bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}], tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}] }); arguments.callee.anim = fly(wrap).fxanim(a, o, MOTION, .5, EASEOUT, after); }); return me; }, puff : function(o){ o = getObject(o); var me = this, dom = me.dom, st = dom.style, width, height, r; me.queueFx(o, function(){ width = fly(dom).getWidth(); height = fly(dom).getHeight(); fly(dom).clearOpacity(); fly(dom).show(); r = fly(dom).getFxRestore(); function after(){ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); fly(dom).clearOpacity(); fly(dom).setPositioning(r.pos); st.width = r.width; st.height = r.height; st.fontSize = ''; fly(dom).afterFx(o); } arguments.callee.anim = fly(dom).fxanim({ width : {to : fly(dom).adjustWidth(width * 2)}, height : {to : fly(dom).adjustHeight(height * 2)}, points : {by : [-width * .5, -height * .5]}, opacity : {to : 0}, fontSize: {to : 200, unit: "%"} }, o, MOTION, .5, EASEOUT, after); }); return me; }, switchOff : function(o){ o = getObject(o); var me = this, dom = me.dom, st = dom.style, r; me.queueFx(o, function(){ fly(dom).clearOpacity(); fly(dom).clip(); r = fly(dom).getFxRestore(); function after(){ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); fly(dom).clearOpacity(); fly(dom).setPositioning(r.pos); st.width = r.width; st.height = r.height; fly(dom).afterFx(o); }; fly(dom).fxanim({opacity : {to : 0.3}}, NULL, NULL, .1, NULL, function(){ fly(dom).clearOpacity(); (function(){ fly(dom).fxanim({ height : {to : 1}, points : {by : [0, fly(dom).getHeight() * .5]} }, o, MOTION, 0.3, 'easeIn', after); }).defer(100); }); }); return me; }, highlight : function(color, o){ o = getObject(o); var me = this, dom = me.dom, attr = o.attr || "backgroundColor", a = {}, restore; me.queueFx(o, function(){ fly(dom).clearOpacity(); fly(dom).show(); function after(){ dom.style[attr] = restore; fly(dom).afterFx(o); } restore = dom.style[attr]; a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"}; arguments.callee.anim = fly(dom).fxanim(a, o, 'color', 1, 'easeIn', after); }); return me; }, frame : function(color, count, o){ o = getObject(o); var me = this, dom = me.dom, proxy, active; me.queueFx(o, function(){ color = color || '#C3DAF9'; if(color.length == 6){ color = '#' + color; } count = count || 1; fly(dom).show(); var xy = fly(dom).getXY(), b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}, queue = function(){ proxy = fly(document.body || document.documentElement).createChild({ style:{ position : ABSOLUTE, 'z-index': 35000, border : '0px solid ' + color } }); return proxy.queueFx({}, animFn); }; arguments.callee.anim = { isAnimated: true, stop: function() { count = 0; proxy.stopFx(); } }; function animFn(){ var scale = Ext.isBorderBox ? 2 : 1; active = proxy.anim({ top : {from : b.y, to : b.y - 20}, left : {from : b.x, to : b.x - 20}, borderWidth : {from : 0, to : 10}, opacity : {from : 1, to : 0}, height : {from : b.height, to : b.height + 20 * scale}, width : {from : b.width, to : b.width + 20 * scale} },{ duration: o.duration || 1, callback: function() { proxy.remove(); --count > 0 ? queue() : fly(dom).afterFx(o); } }); arguments.callee.anim = { isAnimated: true, stop: function(){ active.stop(); } }; }; queue(); }); return me; }, pause : function(seconds){ var dom = this.dom, t; this.queueFx({}, function(){ t = setTimeout(function(){ fly(dom).afterFx({}); }, seconds * 1000); arguments.callee.anim = { isAnimated: true, stop: function(){ clearTimeout(t); fly(dom).afterFx({}); } }; }); return this; }, fadeIn : function(o){ o = getObject(o); var me = this, dom = me.dom, to = o.endOpacity || 1; me.queueFx(o, function(){ fly(dom).setOpacity(0); fly(dom).fixDisplay(); dom.style.visibility = VISIBLE; arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}}, o, NULL, .5, EASEOUT, function(){ if(to == 1){ fly(dom).clearOpacity(); } fly(dom).afterFx(o); }); }); return me; }, fadeOut : function(o){ o = getObject(o); var me = this, dom = me.dom, style = dom.style, to = o.endOpacity || 0; me.queueFx(o, function(){ arguments.callee.anim = fly(dom).fxanim({ opacity : {to : to}}, o, NULL, .5, EASEOUT, function(){ if(to == 0){ Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? style.display = "none" : style.visibility = HIDDEN; fly(dom).clearOpacity(); } fly(dom).afterFx(o); }); }); return me; }, scale : function(w, h, o){ this.shift(Ext.apply({}, o, { width: w, height: h })); return this; }, shift : function(o){ o = getObject(o); var dom = this.dom, a = {}; this.queueFx(o, function(){ for (var prop in o) { if (o[prop] != UNDEFINED) { a[prop] = {to : o[prop]}; } } a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a; a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; if (a.x || a.y || a.xy) { a.points = a.xy || {to : [ a.x ? a.x.to : fly(dom).getX(), a.y ? a.y.to : fly(dom).getY()]}; } arguments.callee.anim = fly(dom).fxanim(a, o, MOTION, .35, EASEOUT, function(){ fly(dom).afterFx(o); }); }); return this; }, ghost : function(anchor, o){ o = getObject(o); var me = this, dom = me.dom, st = dom.style, a = {opacity: {to: 0}, points: {}}, pt = a.points, r, w, h; anchor = anchor || "b"; me.queueFx(o, function(){ r = fly(dom).getFxRestore(); w = fly(dom).getWidth(); h = fly(dom).getHeight(); function after(){ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); fly(dom).clearOpacity(); fly(dom).setPositioning(r.pos); st.width = r.width; st.height = r.height; fly(dom).afterFx(o); } pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, { t : [0, -h], l : [-w, 0], r : [w, 0], b : [0, h], tl : [-w, -h], bl : [-w, h], br : [w, h], tr : [w, -h] }); arguments.callee.anim = fly(dom).fxanim(a, o, MOTION, .5, EASEOUT, after); }); return me; }, syncFx : function(){ var me = this; me.fxDefaults = Ext.apply(me.fxDefaults || {}, { block : FALSE, concurrent : TRUE, stopFx : FALSE }); return me; }, sequenceFx : function(){ var me = this; me.fxDefaults = Ext.apply(me.fxDefaults || {}, { block : FALSE, concurrent : FALSE, stopFx : FALSE }); return me; }, nextFx : function(){ var ef = getQueue(this.dom.id)[0]; if(ef){ ef.call(this); } }, hasActiveFx : function(){ return getQueue(this.dom.id)[0]; }, stopFx : function(finish){ var me = this, id = me.dom.id; if(me.hasActiveFx()){ var cur = getQueue(id)[0]; if(cur && cur.anim){ if(cur.anim.isAnimated){ setQueue(id, [cur]); cur.anim.stop(finish !== undefined ? finish : TRUE); }else{ setQueue(id, []); } } } return me; }, beforeFx : function(o){ if(this.hasActiveFx() && !o.concurrent){ if(o.stopFx){ this.stopFx(); return TRUE; } return FALSE; } return TRUE; }, hasFxBlock : function(){ var q = getQueue(this.dom.id); return q && q[0] && q[0].block; }, queueFx : function(o, fn){ var me = fly(this.dom); if(!me.hasFxBlock()){ Ext.applyIf(o, me.fxDefaults); if(!o.concurrent){ var run = me.beforeFx(o); fn.block = o.block; getQueue(me.dom.id).push(fn); if(run){ me.nextFx(); } }else{ fn.call(me); } } return me; }, fxWrap : function(pos, o, vis){ var dom = this.dom, wrap, wrapXY; if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ if(o.fixPosition){ wrapXY = fly(dom).getXY(); } var div = document.createElement("div"); div.style.visibility = vis; wrap = dom.parentNode.insertBefore(div, dom); fly(wrap).setPositioning(pos); if(fly(wrap).isStyle(POSITION, "static")){ fly(wrap).position("relative"); } fly(dom).clearPositioning('auto'); fly(wrap).clip(); wrap.appendChild(dom); if(wrapXY){ fly(wrap).setXY(wrapXY); } } return wrap; }, fxUnwrap : function(wrap, pos, o){ var dom = this.dom; fly(dom).clearPositioning(); fly(dom).setPositioning(pos); if(!o.wrap){ var pn = fly(wrap).dom.parentNode; pn.insertBefore(dom, wrap); fly(wrap).remove(); } }, getFxRestore : function(){ var st = this.dom.style; return {pos: this.getPositioning(), width: st.width, height : st.height}; }, afterFx : function(o){ var dom = this.dom, id = dom.id; if(o.afterStyle){ fly(dom).setStyle(o.afterStyle); } if(o.afterCls){ fly(dom).addClass(o.afterCls); } if(o.remove == TRUE){ fly(dom).remove(); } if(o.callback){ o.callback.call(o.scope, fly(dom)); } if(!o.concurrent){ getQueue(id).shift(); fly(dom).nextFx(); } }, fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){ animType = animType || 'run'; opt = opt || {}; var anim = Ext.lib.Anim[animType]( this.dom, args, (opt.duration || defaultDur) || .35, (opt.easing || defaultEase) || EASEOUT, cb, this ); opt.anim = anim; return anim; } }; Ext.Fx.resize = Ext.Fx.scale; Ext.Element.addMethods(Ext.Fx); })(); Ext.CompositeElementLite = function(els, root){ this.elements = []; this.add(els, root); this.el = new Ext.Element.Flyweight(); }; Ext.CompositeElementLite.prototype = { isComposite: true, getElement : function(el){ var e = this.el; e.dom = el; e.id = el.id; return e; }, transformElement : function(el){ return Ext.getDom(el); }, getCount : function(){ return this.elements.length; }, add : function(els, root){ var me = this, elements = me.elements; if(!els){ return this; } if(typeof els == "string"){ els = Ext.Element.selectorFunction(els, root); }else if(els.isComposite){ els = els.elements; }else if(!Ext.isIterable(els)){ els = [els]; } for(var i = 0, len = els.length; i < len; ++i){ elements.push(me.transformElement(els[i])); } return me; }, invoke : function(fn, args){ var me = this, els = me.elements, len = els.length, e, i; for(i = 0; i < len; i++) { e = els[i]; if(e){ Ext.Element.prototype[fn].apply(me.getElement(e), args); } } return me; }, item : function(index){ var me = this, el = me.elements[index], out = null; if(el){ out = me.getElement(el); } return out; }, addListener : function(eventName, handler, scope, opt){ var els = this.elements, len = els.length, i, e; for(i = 0; i
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = Ext.createInterceptor(sayHi, function(name){
return name == 'Brian';
});
sayHiToFriend('Fred'); // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"
* @param {Function} origFn The original function.
* @param {Function} newFn The function to call before the original
* @param {Object} scope (optional) The scope (this
reference) in which the passed function is executed.
* If omitted, defaults to the scope in which the original function is called or the browser window.
* @return {Function} The new function
*/
createInterceptor: function(origFn, newFn, scope) {
var method = origFn;
if (!Ext.isFunction(newFn)) {
return origFn;
}
else {
return function() {
var me = this,
args = arguments;
newFn.target = me;
newFn.method = origFn;
return (newFn.apply(scope || me || window, args) !== false) ?
origFn.apply(me || window, args) :
null;
};
}
},
/**
* Creates a delegate (callback) that sets the scope to obj.
* Call directly on any function. Example: Ext.createDelegate(this.myFunction, this, [arg1, arg2])
* Will create a function that is automatically scoped to obj so that the this variable inside the
* callback points to obj. Example usage:
*
var sayHi = function(name){
// Note this use of "this.text" here. This function expects to
// execute within a scope that contains a text property. In this
// example, the "this" variable is pointing to the btn object that
// was passed in createDelegate below.
alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}
var btn = new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody()
});
// This callback will execute in the scope of the
// button instance. Clicking the button alerts
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', Ext.createDelegate(sayHi, btn, ['Fred']));
* @param {Function} fn The function to delegate.
* @param {Object} scope (optional) The scope (this
reference) in which the function is executed.
* If omitted, defaults to the browser window.
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Function} The new function
*/
createDelegate: function(fn, obj, args, appendArgs) {
if (!Ext.isFunction(fn)) {
return fn;
}
return function() {
var callArgs = args || arguments;
if (appendArgs === true) {
callArgs = Array.prototype.slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}
else if (Ext.isNumber(appendArgs)) {
callArgs = Array.prototype.slice.call(arguments, 0);
// copy arguments first
var applyArgs = [appendArgs, 0].concat(args);
// create method call params
Array.prototype.splice.apply(callArgs, applyArgs);
// splice them in
}
return fn.apply(obj || window, callArgs);
};
},
/**
* Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:
*
var sayHi = function(name){
alert('Hi, ' + name);
}
// executes immediately:
sayHi('Fred');
// executes after 2 seconds:
Ext.defer(sayHi, 2000, this, ['Fred']);
// this syntax is sometimes useful for deferring
// execution of an anonymous function:
Ext.defer(function(){
alert('Anonymous');
}, 100);
* @param {Function} fn The function to defer.
* @param {Number} millis The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately)
* @param {Object} scope (optional) The scope (this
reference) in which the function is executed.
* If omitted, defaults to the browser window.
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Number} The timeout id that can be used with clearTimeout
*/
defer: function(fn, millis, obj, args, appendArgs) {
fn = Ext.util.Functions.createDelegate(fn, obj, args, appendArgs);
if (millis > 0) {
return setTimeout(fn, millis);
}
fn();
return 0;
},
/**
* Create a combined function call sequence of the original function + the passed function.
* The resulting function returns the results of the original function.
* The passed fcn is called with the parameters of the original function. Example usage:
*
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
var sayGoodbye = Ext.createSequence(sayHi, function(name){
alert('Bye, ' + name);
});
sayGoodbye('Fred'); // both alerts show
* @param {Function} origFn The original function.
* @param {Function} newFn The function to sequence
* @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
* If omitted, defaults to the scope in which the original function is called or the browser window.
* @return {Function} The new function
*/
createSequence: function(origFn, newFn, scope) {
if (!Ext.isFunction(newFn)) {
return origFn;
}
else {
return function() {
var retval = origFn.apply(this || window, arguments);
newFn.apply(scope || this || window, arguments);
return retval;
};
}
}
};
/**
* Shorthand for {@link Ext.util.Functions#defer}
* @param {Function} fn The function to defer.
* @param {Number} millis The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately)
* @param {Object} scope (optional) The scope (this
reference) in which the function is executed.
* If omitted, defaults to the browser window.
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Number} The timeout id that can be used with clearTimeout
* @member Ext
* @method defer
*/
Ext.defer = Ext.util.Functions.defer;
/**
* Shorthand for {@link Ext.util.Functions#createInterceptor}
* @param {Function} origFn The original function.
* @param {Function} newFn The function to call before the original
* @param {Object} scope (optional) The scope (this
reference) in which the passed function is executed.
* If omitted, defaults to the scope in which the original function is called or the browser window.
* @return {Function} The new function
* @member Ext
* @method defer
*/
Ext.createInterceptor = Ext.util.Functions.createInterceptor;
/**
* Shorthand for {@link Ext.util.Functions#createSequence}
* @param {Function} origFn The original function.
* @param {Function} newFn The function to sequence
* @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
* If omitted, defaults to the scope in which the original function is called or the browser window.
* @return {Function} The new function
* @member Ext
* @method defer
*/
Ext.createSequence = Ext.util.Functions.createSequence;
/**
* Shorthand for {@link Ext.util.Functions#createDelegate}
* @param {Function} fn The function to delegate.
* @param {Object} scope (optional) The scope (this
reference) in which the function is executed.
* If omitted, defaults to the browser window.
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Function} The new function
* @member Ext
* @method defer
*/
Ext.createDelegate = Ext.util.Functions.createDelegate;
/**
* @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((v = fn.apply(scope || obj, args)) !== undefined){
if (typeof v == 'object') {
if(v.returnValue !== undefined){
returnValue = v.returnValue;
}else{
returnValue = v;
}
cancel = !!v.cancel;
}
else
if (v === false) {
cancel = true;
}
else {
returnValue = v;
}
}
};
this[method] = function(){
var args = Array.prototype.slice.call(arguments, 0),
b;
returnValue = v = undefined;
cancel = false;
for(var i = 0, len = e.before.length; i < len; i++){
b = e.before[i];
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
}
if((v = e.originalFn.apply(obj, args)) !== undefined){
returnValue = v;
}
for(var i = 0, len = e.after.length; i < len; i++){
b = e.after[i];
makeCall(b.fn, b.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 = this.getMethodEvent(method);
for(var i = 0, len = e.before.length; i < len; i++){
if(e.before[i].fn == fn && e.before[i].scope == scope){
e.before.splice(i, 1);
return;
}
}
for(var i = 0, len = e.after.length; i < len; i++){
if(e.after[i].fn == fn && e.after[i].scope == scope){
e.after.splice(i, 1);
return;
}
}
},
/**
* 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(Array.prototype.slice.call(arguments, 0)));
};
}
for(var i = 0, len = events.length; i < len; i++){
var ename = events[i];
me.events[ename] = me.events[ename] || true;
o.on(ename, createHandler(ename), me);
}
},
/**
* Enables events fired by this Observable to bubble up an owner hierarchy by calling
* this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to * access the required target more quickly.
*Example:
Ext.override(Ext.form.Field, {
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
myForm.header.setStyle('color', 'red');
}
}
});
* @param {String/Array} events The event name to bubble, or an Array of event names.
*/
enableBubble : function(events){
var me = this;
if(!Ext.isEmpty(events)){
events = Ext.isArray(events) ? events : Array.prototype.slice.call(arguments, 0);
for(var i = 0, len = events.length; i < len; i++){
var ename = events[i];
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;
}
}
}
};
}());
Ext.util.Observable.capture = function(o, fn, scope){
o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};
Ext.util.Observable.observeClass = function(c, listeners){
if(c){
if(!c.fireEvent){
Ext.apply(c, new Ext.util.Observable());
Ext.util.Observable.capture(c.prototype, c.fireEvent, c);
}
if(typeof listeners == 'object'){
c.on(listeners);
}
return c;
}
};
Ext.apply(Ext.EventManager, function(){
var resizeEvent,
resizeTask,
textEvent,
textSize,
D = Ext.lib.Dom,
propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
unload = Ext.EventManager._unload,
curWidth = 0,
curHeight = 0,
useKeydown = Ext.isWebKit ?
Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
!((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
return {
_unload: function(){
Ext.EventManager.un(window, "resize", this.fireWindowResize, this);
unload.call(Ext.EventManager);
},
doResizeEvent: function(){
var h = D.getViewHeight(),
w = D.getViewWidth();
if(curHeight != h || curWidth != w){
resizeEvent.fire(curWidth = w, curHeight = h);
}
},
onWindowResize : function(fn, scope, options){
if(!resizeEvent){
resizeEvent = new Ext.util.Event();
resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
}
resizeEvent.addListener(fn, scope, options);
},
fireWindowResize : function(){
if(resizeEvent){
resizeTask.delay(100);
}
},
onTextResize : function(fn, scope, options){
if(!textEvent){
textEvent = new Ext.util.Event();
var textEl = new Ext.Element(document.createElement('div'));
textEl.dom.className = 'x-text-resize';
textEl.dom.innerHTML = 'X';
textEl.appendTo(document.body);
textSize = textEl.dom.offsetHeight;
setInterval(function(){
if(textEl.dom.offsetHeight != textSize){
textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
}
}, this.textResizeInterval);
}
textEvent.addListener(fn, scope, options);
},
removeResizeListener : function(fn, scope){
if(resizeEvent){
resizeEvent.removeListener(fn, scope);
}
},
fireResize : function(){
if(resizeEvent){
resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
}
},
textResizeInterval : 50,
ieDeferSrc : false,
getKeyEvent : function(){
return useKeydown ? 'keydown' : 'keypress';
},
useKeydown: useKeydown
};
}());
Ext.EventManager.on = Ext.EventManager.addListener;
Ext.apply(Ext.EventObjectImpl.prototype, {
BACKSPACE: 8,
TAB: 9,
NUM_CENTER: 12,
ENTER: 13,
RETURN: 13,
SHIFT: 16,
CTRL: 17,
CONTROL : 17,
ALT: 18,
PAUSE: 19,
CAPS_LOCK: 20,
ESC: 27,
SPACE: 32,
PAGE_UP: 33,
PAGEUP : 33,
PAGE_DOWN: 34,
PAGEDOWN : 34,
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
PRINT_SCREEN: 44,
INSERT: 45,
DELETE: 46,
ZERO: 48,
ONE: 49,
TWO: 50,
THREE: 51,
FOUR: 52,
FIVE: 53,
SIX: 54,
SEVEN: 55,
EIGHT: 56,
NINE: 57,
A: 65,
B: 66,
C: 67,
D: 68,
E: 69,
F: 70,
G: 71,
H: 72,
I: 73,
J: 74,
K: 75,
L: 76,
M: 77,
N: 78,
O: 79,
P: 80,
Q: 81,
R: 82,
S: 83,
T: 84,
U: 85,
V: 86,
W: 87,
X: 88,
Y: 89,
Z: 90,
CONTEXT_MENU: 93,
NUM_ZERO: 96,
NUM_ONE: 97,
NUM_TWO: 98,
NUM_THREE: 99,
NUM_FOUR: 100,
NUM_FIVE: 101,
NUM_SIX: 102,
NUM_SEVEN: 103,
NUM_EIGHT: 104,
NUM_NINE: 105,
NUM_MULTIPLY: 106,
NUM_PLUS: 107,
NUM_MINUS: 109,
NUM_PERIOD: 110,
NUM_DIVISION: 111,
F1: 112,
F2: 113,
F3: 114,
F4: 115,
F5: 116,
F6: 117,
F7: 118,
F8: 119,
F9: 120,
F10: 121,
F11: 122,
F12: 123,
isNavKeyPress : function(){
var me = this,
k = this.normalizeKey(me.keyCode);
return (k >= 33 && k <= 40) ||
k == me.RETURN ||
k == me.TAB ||
k == me.ESC;
},
isSpecialKey : function(){
var k = this.normalizeKey(this.keyCode);
return (this.type == 'keypress' && this.ctrlKey) ||
this.isNavKeyPress() ||
(k == this.BACKSPACE) ||
(k >= 16 && k <= 20) ||
(k >= 44 && k <= 46);
},
getPoint : function(){
return new Ext.lib.Point(this.xy[0], this.xy[1]);
},
hasModifier : function(){
return ((this.ctrlKey || this.altKey) || this.shiftKey);
}
});
Ext.Element.addMethods({
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;
},
relayEvent : function(eventName, observable) {
this.on(eventName, function(e) {
observable.fireEvent(eventName, e);
});
},
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;
},
load : function() {
var updateManager = this.getUpdater();
updateManager.update.apply(updateManager, arguments);
return this;
},
getUpdater : function() {
return this.updateManager || (this.updateManager = new Ext.Updater(this));
},
update : function(html, loadScripts, callback) {
if (!this.dom) {
return this;
}
html = html || "";
if (loadScripts !== true) {
this.dom.innerHTML = html;
if (typeof callback == 'function') {
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 = /(?: