/*!
- * Ext JS Library 3.0.3
+ * Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
if(Ext.isString(o)){\r
b = o;\r
} else if (Ext.isArray(o)) {\r
- Ext.each(o, function(v) {\r
- b += createHtml(v);\r
- });\r
+ for (var i=0; i < o.length; i++) {\r
+ if(o[i]) {\r
+ b += createHtml(o[i]);\r
+ }\r
+ };\r
} else {\r
b += '<' + (o.tag = o.tag || 'div');\r
Ext.iterate(o, function(attr, val){\r
// IE runs the same speed using setAttribute, however FF slows way down\r
// and Safari completely fails so they need to continue to use expandos.\r
isIE = window.ActiveXObject ? true : false,\r
- isOpera = Ext.isOpera,\r
key = 30803;\r
\r
// this eval is stop the compressor from\r
}else if(mode == "/" || mode == ">"){\r
var utag = tagName.toUpperCase();\r
for(var i = 0, ni, cn; ni = ns[i]; i++){\r
- cn = isOpera ? ni.childNodes : (ni.children || ni.childNodes);\r
+ cn = ni.childNodes;\r
for(var j = 0, cj; cj = cn[j]; j++){\r
if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){\r
result[++ri] = cj;\r
if(!len1){\r
return c2;\r
}\r
- if(isIE && c1[0].selectSingleNode){\r
+ if(isIE && typeof c1[0].selectSingleNode != "undefined"){\r
return quickDiffIEXml(c1, c2);\r
} \r
for(var i = 0; i < len1; i++){\r
if(!valueCache[path]){\r
valueCache[path] = Ext.DomQuery.compile(path, "select");\r
}\r
- var n = valueCache[path](root),\r
- v;\r
+ var n = valueCache[path](root), v;\r
n = n[0] ? n[0] : n;\r
+ \r
+ if (typeof n.normalize == 'function') n.normalize();\r
+ \r
v = (n && n.firstChild ? n.firstChild.nodeValue : null);\r
return ((v === null||v === undefined||v==='') ? defaultValue : v);\r
},\r
* @method query\r
*/\r
Ext.query = Ext.DomQuery.select;\r
-(function(){
+/**
+ * @class Ext.util.DelayedTask
+ * <p> 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.</p>
+ * <p>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:</p><pre><code>
+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);
+});
+ * </code></pre>
+ * <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
+ * option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
+ * also setup a delayed task for you to buffer events.</p>
+ * @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 (The <code><b>this</b></code> reference) in which the
+ * function is called. If not specified, <code>this</code> 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, <code>this</code> 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;
+ }
+ };
+};(function(){
var EXTUTIL = Ext.util,
TOARRAY = Ext.toArray,
var me = this;
me.events = me.events || {};
if (Ext.isString(o)) {
- EACH(arguments, function(a) {
- me.events[a] = me.events[a] || TRUE;
- });
+ var a = arguments,
+ i = a.length;
+ while(i--) {
+ me.events[a[i]] = me.events[a[i]] || TRUE;
+ }
} else {
Ext.applyIf(me.events, o);
}
};
};
-function createBuffered(h, o, scope){
- var task = new EXTUTIL.DelayedTask();
+function createBuffered(h, o, fn, scope){
+ fn.task = new EXTUTIL.DelayedTask();
return function(){
- task.delay(o.buffer, h, scope, TOARRAY(arguments));
+ fn.task.delay(o.buffer, h, scope, TOARRAY(arguments));
};
}
};
}
-function createDelayed(h, o, scope){
+function createDelayed(h, o, fn, scope){
return function(){
- var args = TOARRAY(arguments);
- (function(){
- h.apply(scope, args);
- }).defer(o.delay || 10);
+ var task = new EXTUTIL.DelayedTask();
+ if(!fn.tasks) {
+ fn.tasks = [];
+ }
+ fn.tasks.push(task);
+ task.delay(o.delay || 10, h, scope, TOARRAY(arguments));
};
};
h = createTargeted(h, o, scope);
}
if(o.delay){
- h = createDelayed(h, o, scope);
+ h = createDelayed(h, o, fn, scope);
}
if(o.single){
h = createSingle(h, this, fn, scope);
}
if(o.buffer){
- h = createBuffered(h, o, scope);
+ h = createBuffered(h, o, fn, 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;
+ var list = this.listeners,
+ i = list.length,
+ l,
+ s;
+ while(i--) {
+ l = list[i];
+ if(l) {
+ s = l.scope;
+ if(l.fn == fn && (s == scope || s == this.obj)){
+ return i;
+ }
}
- },
- this);
- return ret;
+ }
+ return -1;
},
isListening : function(fn, scope){
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].fn;
+ // Cancel buffered tasks
+ if(l.task) {
+ l.task.cancel();
+ delete l.task;
+ }
+ // Cancel delayed tasks
+ 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;
},
+ // Iterate to stop any buffered/delayed events
clearListeners : function(){
- this.listeners = [];
+ var me = this,
+ l = me.listeners,
+ i = l.length;
+ while(i--) {
+ me.removeListener(l[i].fn, l[i].scope);
+ }
},
fire : function(){
var me = this,
args = TOARRAY(arguments),
- ret = TRUE;
+ listeners = me.listeners,
+ len = listeners.length,
+ i = 0,
+ l;
- EACH(me.listeners, function(l) {
+ if(len > 0){
me.firing = TRUE;
- if (l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
- return ret = me.firing = FALSE;
+ 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 ret;
+ return TRUE;
}
};
})();/**\r
* @class Ext.util.Observable\r
*/\r
-Ext.apply(Ext.util.Observable.prototype, function(){ \r
+Ext.apply(Ext.util.Observable.prototype, function(){\r
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)\r
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
// private\r
function getMethodEvent(method){\r
var e = (this.methodEvents = this.methodEvents ||\r
{})[method], returnValue, v, cancel, obj = this;\r
- \r
+\r
if (!e) {\r
this.methodEvents[method] = e = {};\r
e.originalFn = this[method];\r
e.methodName = method;\r
e.before = [];\r
e.after = [];\r
- \r
+\r
var makeCall = function(fn, scope, args){\r
if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {\r
if (Ext.isObject(v)) {\r
returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;\r
cancel = !!v.cancel;\r
}\r
- else \r
+ else\r
if (v === false) {\r
cancel = true;\r
}\r
}\r
}\r
};\r
- \r
+\r
this[method] = function(){\r
var args = Ext.toArray(arguments);\r
returnValue = v = undefined;\r
cancel = false;\r
- \r
+\r
Ext.each(e.before, function(b){\r
makeCall(b.fn, b.scope, args);\r
if (cancel) {\r
return returnValue;\r
}\r
});\r
- \r
+\r
if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {\r
returnValue = v;\r
}\r
}\r
return e;\r
}\r
- \r
+\r
return {\r
// these are considered experimental\r
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
- // adds an "interceptor" called before the original method\r
- beforeMethod: function(method, fn, scope){\r
+ // adds an 'interceptor' called before the original method\r
+ beforeMethod : function(method, fn, scope){\r
getMethodEvent.call(this, method).before.push({\r
fn: fn,\r
scope: scope\r
});\r
},\r
- \r
- // adds a "sequence" called after the original method\r
- afterMethod: function(method, fn, scope){\r
+\r
+ // adds a 'sequence' called after the original method\r
+ afterMethod : function(method, fn, scope){\r
getMethodEvent.call(this, method).after.push({\r
fn: fn,\r
scope: scope\r
});\r
},\r
- \r
+\r
removeMethodListener: function(method, fn, scope){\r
var e = getMethodEvent.call(this, method), found = false;\r
Ext.each(e.before, function(b, i, arr){\r
});\r
}\r
},\r
- \r
+\r
/**\r
* Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.\r
* @param {Object} o The Observable whose events this object is to relay.\r
* @param {Array} events Array of event names to relay.\r
*/\r
- relayEvents: function(o, events){\r
+ relayEvents : function(o, events){\r
var me = this;\r
function createHandler(ename){\r
return function(){\r
o.on(ename, createHandler(ename), me);\r
});\r
},\r
- \r
+\r
/**\r
* <p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
* <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
* access the required target more quickly.</p>\r
* <p>Example:</p><pre><code>\r
Ext.override(Ext.form.Field, {\r
-// Add functionality to Field's initComponent to enable the change event to bubble\r
- initComponent: Ext.form.Field.prototype.initComponent.createSequence(function() {\r
+ // Add functionality to Field's initComponent to enable the change event to bubble\r
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\r
this.enableBubble('change');\r
}),\r
\r
-// We know that we want Field's events to bubble directly to the FormPanel.\r
- getBubbleTarget: function() {\r
+ // We know that we want Field's events to bubble directly to the FormPanel.\r
+ getBubbleTarget : function() {\r
if (!this.formPanel) {\r
this.formPanel = this.findParentByType('form');\r
}\r
}],\r
listeners: {\r
change: function() {\r
-// Title goes red if form has been modified.\r
- myForm.header.setStyle("color", "red");\r
+ // Title goes red if form has been modified.\r
+ myForm.header.setStyle('color', 'red');\r
}\r
}\r
});\r
</code></pre>\r
- * @param {Object} events The event name to bubble, or an Array of event names.\r
+ * @param {String/Array} events The event name to bubble, or an Array of event names.\r
*/\r
- enableBubble: function(events){\r
+ enableBubble : function(events){\r
var me = this;\r
if(!Ext.isEmpty(events)){\r
events = Ext.isArray(events) ? events : Ext.toArray(arguments);\r
* to the supplied function with the event name + standard signature of the event\r
* <b>before</b> the event is fired. If the supplied function returns false,\r
* the event will not fire.\r
- * @param {Observable} o The Observable to capture\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (this object) for the fn\r
+ * @param {Observable} o The Observable to capture events from.\r
+ * @param {Function} fn The function to call when an event is fired.\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Observable firing the event.\r
* @static\r
*/\r
Ext.util.Observable.capture = function(o, fn, scope){\r
* <p>Usage:</p><pre><code>\r
Ext.util.Observable.observeClass(Ext.data.Connection);\r
Ext.data.Connection.on('beforerequest', function(con, options) {\r
- console.log("Ajax request made to " + options.url);\r
+ console.log('Ajax request made to ' + options.url);\r
});</code></pre>\r
* @param {Function} c The class constructor to make observable.\r
+ * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}. \r
* @static\r
*/\r
-Ext.util.Observable.observeClass = function(c){\r
- Ext.apply(c, new Ext.util.Observable());\r
- c.prototype.fireEvent = function(){\r
- return (c.fireEvent.apply(c, arguments) !== false) &&\r
- (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);\r
+Ext.util.Observable.observeClass = function(c, listeners){\r
+ if(c){\r
+ if(!c.fireEvent){\r
+ Ext.apply(c, new Ext.util.Observable());\r
+ Ext.util.Observable.capture(c.prototype, c.fireEvent, c);\r
+ }\r
+ if(Ext.isObject(listeners)){\r
+ c.on(listeners);\r
+ }\r
+ return c;\r
+ }\r
+};/**\r
+ * @class Ext.EventManager\r
+ * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides\r
+ * several useful events directly.\r
+ * See {@link Ext.EventObject} for more details on normalized event objects.\r
+ * @singleton\r
+ */\r
+Ext.EventManager = function(){\r
+ var docReadyEvent,\r
+ docReadyProcId,\r
+ docReadyState = false,\r
+ E = Ext.lib.Event,\r
+ D = Ext.lib.Dom,\r
+ DOC = document,\r
+ WINDOW = window,\r
+ IEDEFERED = "ie-deferred-loader",\r
+ DOMCONTENTLOADED = "DOMContentLoaded",\r
+ propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,\r
+ /*\r
+ * This cache is used to hold special js objects, the document and window, that don't have an id. We need to keep\r
+ * a reference to them so we can look them up at a later point.\r
+ */\r
+ specialElCache = [];\r
+\r
+ function getId(el){\r
+ var id = false,\r
+ i = 0,\r
+ len = specialElCache.length,\r
+ id = false,\r
+ skip = false,\r
+ o;\r
+ if(el){\r
+ if(el.getElementById || el.navigator){\r
+ // look up the id\r
+ for(; i < len; ++i){\r
+ o = specialElCache[i];\r
+ if(o.el === el){\r
+ id = o.id;\r
+ break;\r
+ }\r
+ }\r
+ if(!id){\r
+ // for browsers that support it, ensure that give the el the same id\r
+ id = Ext.id(el);\r
+ specialElCache.push({\r
+ id: id,\r
+ el: el\r
+ });\r
+ skip = true;\r
+ }\r
+ }else{\r
+ id = Ext.id(el);\r
+ }\r
+ if(!Ext.elCache[id]){\r
+ Ext.Element.addToCache(new Ext.Element(el), id);\r
+ if(skip){\r
+ Ext.elCache[id].skipGC = true;\r
+ }\r
+ }\r
+ }\r
+ return id;\r
+ };\r
+\r
+ /// There is some jquery work around stuff here that isn't needed in Ext Core.\r
+ function addListener(el, ename, fn, wrap, scope){\r
+ el = Ext.getDom(el);\r
+ var id = getId(el),\r
+ es = Ext.elCache[id].events,\r
+ wfn;\r
+\r
+ wfn = E.on(el, ename, wrap);\r
+ es[ename] = es[ename] || [];\r
+ es[ename].push([fn, wrap, scope, wfn]);\r
+\r
+ // this is a workaround for jQuery and should somehow be removed from Ext Core in the future\r
+ // without breaking ExtJS.\r
+ if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery\r
+ var args = ["DOMMouseScroll", wrap, false];\r
+ el.addEventListener.apply(el, args);\r
+ Ext.EventManager.addListener(WINDOW, 'unload', function(){\r
+ el.removeEventListener.apply(el, args);\r
+ });\r
+ }\r
+ if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document\r
+ Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);\r
+ }\r
};\r
-};/**
- * @class Ext.EventManager
- * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
- * several useful events directly.
- * See {@link Ext.EventObject} for more details on normalized event objects.
- * @singleton
- */
-Ext.EventManager = function(){
- var docReadyEvent,
- docReadyProcId,
- docReadyState = false,
- E = Ext.lib.Event,
- D = Ext.lib.Dom,
- DOC = document,
- WINDOW = window,
- IEDEFERED = "ie-deferred-loader",
- DOMCONTENTLOADED = "DOMContentLoaded",
- elHash = {},
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
-
- /// There is some jquery work around stuff here that isn't needed in Ext Core.
- function addListener(el, ename, fn, wrap, scope){
- var id = Ext.id(el),
- es = elHash[id] = elHash[id] || {};
-
- (es[ename] = es[ename] || []).push([fn, wrap, scope]);
- E.on(el, ename, wrap);
-
- // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
- // without breaking ExtJS.
- if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
- var args = ["DOMMouseScroll", wrap, false];
- el.addEventListener.apply(el, args);
- E.on(window, 'unload', function(){
- el.removeEventListener.apply(el, args);
- });
- }
- if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
- Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
- }
- };
-
- function fireDocReady(){
- if(!docReadyState){
- Ext.isReady = docReadyState = true;
- if(docReadyProcId){
- clearInterval(docReadyProcId);
- }
- if(Ext.isGecko || Ext.isOpera) {
- DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
- }
- if(Ext.isIE){
- var defer = DOC.getElementById(IEDEFERED);
- if(defer){
- defer.onreadystatechange = null;
- defer.parentNode.removeChild(defer);
- }
- }
- if(docReadyEvent){
- docReadyEvent.fire();
- docReadyEvent.clearListeners();
- }
- }
- };
-
- function initDocReady(){
- var COMPLETE = "complete";
-
- docReadyEvent = new Ext.util.Event();
- if (Ext.isGecko || Ext.isOpera) {
- DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
- } else if (Ext.isIE){
- DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");
- DOC.getElementById(IEDEFERED).onreadystatechange = function(){
- if(this.readyState == COMPLETE){
- fireDocReady();
- }
- };
- } else if (Ext.isWebKit){
- docReadyProcId = setInterval(function(){
- if(DOC.readyState == COMPLETE) {
- fireDocReady();
- }
- }, 10);
- }
- // no matter what, make sure it fires on load
- E.on(WINDOW, "load", fireDocReady);
- };
-
- function createTargeted(h, o){
- return function(){
- var args = Ext.toArray(arguments);
- if(o.target == Ext.EventObject.setEvent(args[0]).target){
- h.apply(this, args);
- }
- };
- };
-
- function createBuffered(h, o){
- var task = new Ext.util.DelayedTask(h);
- return function(e){
- // create new event object impl so new events don't wipe out properties
- task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);
- };
- };
-
- function createSingle(h, el, ename, fn, scope){
- return function(e){
- Ext.EventManager.removeListener(el, ename, fn, scope);
- h(e);
- };
- };
-
- function createDelayed(h, o){
- return function(e){
- // create new event object impl so new events don't wipe out properties
- e = new Ext.EventObjectImpl(e);
- setTimeout(function(){
- h(e);
- }, o.delay || 10);
- };
- };
-
- function listen(element, ename, opt, fn, scope){
- var o = !Ext.isObject(opt) ? {} : opt,
- el = Ext.getDom(element);
-
- fn = fn || o.fn;
- scope = scope || o.scope;
-
- if(!el){
- throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
- }
- function h(e){
- // prevent errors while unload occurring
- if(!Ext){// !window[xname]){ ==> can't we do this?
- return;
- }
- e = Ext.EventObject.setEvent(e);
- var t;
- if (o.delegate) {
- if(!(t = e.getTarget(o.delegate, el))){
- return;
- }
- } else {
- t = e.target;
- }
- if (o.stopEvent) {
- e.stopEvent();
- }
- if (o.preventDefault) {
- e.preventDefault();
- }
- if (o.stopPropagation) {
- e.stopPropagation();
- }
- if (o.normalized) {
- e = e.browserEvent;
- }
-
- fn.call(scope || el, e, t, o);
- };
- if(o.target){
- h = createTargeted(h, o);
- }
- if(o.delay){
- h = createDelayed(h, o);
- }
- if(o.single){
- h = createSingle(h, el, ename, fn, scope);
- }
- if(o.buffer){
- h = createBuffered(h, o);
- }
-
- addListener(el, ename, fn, h, scope);
- return h;
- };
-
- var pub = {
- /**
- * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will
- * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
- * @param {String/HTMLElement} el The html element or id to assign the event handler to.
- * @param {String} eventName The name of the event to listen for.
- * @param {Function} handler The handler function the event invokes. This function is passed
- * the following parameters:<ul>
- * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
- * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
- * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
- * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>
- * </ul>
- * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:<ul>
- * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>
- * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>
- * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
- * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>
- * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>
- * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
- * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>
- * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
- * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
- * by the specified number of milliseconds. If the event fires again within that time, the original
- * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
- * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
- * </ul><br>
- * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>
- */
- 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 listener.
- * @param {String} eventName The name of the event.
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
- * then this must refer to the same object.
- */
- 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 all event handlers.
- */
- 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;
- },
-
- /**
- * Adds a listener to be notified 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) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
- * <code>{single: true}</code> be used so that the handler is removed on first invocation.
- */
- 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 name of the event to listen for.
- * @param {Function} handler The handler function the event invokes.
- * @param {Object} scope (optional) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.
- * @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 listener.
- * @param {String} eventName The name of the event.
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @member Ext.EventManager
- * @method un
- */
- pub.un = pub.removeListener;
-
- pub.stoppedMouseDownEvent = new Ext.util.Event();
- return pub;
-}();
-/**
- * Adds a listener to be notified 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 (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
- * <code>{single: true}</code> be used so that the handler is removed on first invocation.
- * @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.
- * <p>For example:</p>
- * <pre><code>
-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);
- </code></pre>
- * @singleton
- */
-Ext.EventObject = function(){
- var E = Ext.lib.Event,
- // safari keypress events for special keys return bad keycodes
- safariKeys = {
- 3 : 13, // enter
- 63234 : 37, // left
- 63235 : 39, // right
- 63232 : 38, // up
- 63233 : 40, // down
- 63276 : 33, // page up
- 63277 : 34, // page down
- 63272 : 46, // delete
- 63273 : 36, // home
- 63275 : 35 // end
- },
- // normalize button clicks
- btnMap = Ext.isIE ? {1:0,4:1,2:2} :
- (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
-
- Ext.EventObjectImpl = function(e){
- if(e){
- this.setEvent(e.browserEvent || e);
- }
- };
-
- Ext.EventObjectImpl.prototype = {
- /** @private */
- setEvent : function(e){
- var me = this;
- if(e == me || (e && e.browserEvent)){ // already wrapped
- return e;
- }
- me.browserEvent = e;
- if(e){
- // normalize buttons
- me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
- if(e.type == 'click' && me.button == -1){
- me.button = 0;
- }
- me.type = e.type;
- me.shiftKey = e.shiftKey;
- // mac metaKey behaves like ctrlKey
- me.ctrlKey = e.ctrlKey || e.metaKey || false;
- me.altKey = e.altKey;
- // in getKey these will be normalized for the mac
- me.keyCode = e.keyCode;
- me.charCode = e.charCode;
- // cache the target for the delayed and or buffered events
- me.target = E.getTarget(e);
- // same for XY
- me.xy = E.getXY(e);
- }else{
- me.button = -1;
- me.shiftKey = false;
- me.ctrlKey = false;
- me.altKey = false;
- me.keyCode = 0;
- me.charCode = 0;
- me.target = null;
- me.xy = [0, 0];
- }
- return me;
- },
-
- /**
- * Stop the event (preventDefault and stopPropagation)
- */
- stopEvent : function(){
- var me = this;
- if(me.browserEvent){
- if(me.browserEvent.type == 'mousedown'){
- Ext.EventManager.stoppedMouseDownEvent.fire(me);
- }
- E.stopEvent(me.browserEvent);
- }
- },
-
- /**
- * Prevents the browsers default handling of the event.
- */
- preventDefault : function(){
- if(this.browserEvent){
- E.preventDefault(this.browserEvent);
- }
- },
-
- /**
- * Cancels bubbling of the event.
- */
- stopPropagation : function(){
- var me = this;
- if(me.browserEvent){
- if(me.browserEvent.type == 'mousedown'){
- Ext.EventManager.stoppedMouseDownEvent.fire(me);
- }
- E.stopPropagation(me.browserEvent);
- }
- },
-
- /**
- * Gets the character code for the event.
- * @return {Number}
- */
- getCharCode : function(){
- return this.charCode || this.keyCode;
- },
-
- /**
- * Returns a normalized keyCode for the event.
- * @return {Number} The key code
- */
- getKey : function(){
- return this.normalizeKey(this.keyCode || this.charCode)
- },
-
- // private
- normalizeKey: function(k){
- return Ext.isSafari ? (safariKeys[k] || k) : k;
- },
-
- /**
- * Gets the x coordinate of the event.
- * @return {Number}
- */
- getPageX : function(){
- return this.xy[0];
- },
-
- /**
- * Gets the y coordinate of the event.
- * @return {Number}
- */
- getPageY : function(){
- return this.xy[1];
- },
-
- /**
- * Gets the page coordinates of the event.
- * @return {Array} The xy values like [x, y]
- */
- getXY : function(){
- return this.xy;
- },
-
- /**
- * Gets the target for the event.
- * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
- * @param {Number/Mixed} maxDepth (optional) The max depth to
- search as a number or element (defaults to 10 || document.body)
- * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
- * @return {HTMLelement}
- */
- getTarget : function(selector, maxDepth, returnEl){
- return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
- },
-
- /**
- * Gets the related target.
- * @return {HTMLElement}
- */
- getRelatedTarget : function(){
- return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
- },
-
- /**
- * Normalizes mouse wheel delta across browsers
- * @return {Number} The delta
- */
- getWheelDelta : function(){
- var e = this.browserEvent;
- var delta = 0;
- if(e.wheelDelta){ /* IE/Opera. */
- delta = e.wheelDelta/120;
- }else if(e.detail){ /* Mozilla case. */
- delta = -e.detail/3;
- }
- return delta;
- },
-
- /**
- * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
- * Example usage:<pre><code>
- // 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!');
- }
- });
- </code></pre>
- * @param {Mixed} el The id, DOM element or Ext.Element to check
- * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
- * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
- * @return {Boolean}
- */
- within : function(el, related, allowEl){
- if(el){
- var t = this[related ? "getRelatedTarget" : "getTarget"]();
- return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
- }
- return false;
- }
- };
-
- return new Ext.EventObjectImpl();
-}();/**\r
- * @class Ext.EventManager\r
- */\r
-Ext.apply(Ext.EventManager, function(){\r
- var resizeEvent, \r
- resizeTask, \r
- textEvent, \r
- textSize,\r
- D = Ext.lib.Dom,\r
- E = Ext.lib.Event,\r
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,\r
- curWidth = 0,\r
- curHeight = 0,\r
- // note 1: IE fires ONLY the keydown event on specialkey autorepeat\r
- // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat\r
- // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)\r
- useKeydown = Ext.isWebKit ? \r
- Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :\r
- !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);\r
- \r
- return { \r
- // private\r
- doResizeEvent: function(){\r
- var h = D.getViewHeight(),\r
- w = D.getViewWidth();\r
- \r
- //whacky problem in IE where the resize event will fire even though the w/h are the same.\r
- if(curHeight != h || curWidth != w){\r
- resizeEvent.fire(curWidth = w, curHeight = h);\r
+\r
+ function fireDocReady(){\r
+ if(!docReadyState){\r
+ Ext.isReady = docReadyState = true;\r
+ if(docReadyProcId){\r
+ clearInterval(docReadyProcId);\r
}\r
- },\r
- \r
- /**\r
- * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.\r
- * @param {Function} fn The method the event invokes\r
- * @param {Object} scope An object that becomes the scope of the handler\r
- * @param {boolean} options\r
- */\r
- onWindowResize : function(fn, scope, options){\r
- if(!resizeEvent){\r
- resizeEvent = new Ext.util.Event();\r
- resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);\r
- E.on(window, "resize", this.fireWindowResize, this);\r
- }\r
- resizeEvent.addListener(fn, scope, options);\r
- },\r
- \r
- // exposed only to allow manual firing\r
- fireWindowResize : function(){\r
- if(resizeEvent){\r
- if((Ext.isIE||Ext.isAir) && resizeTask){\r
- resizeTask.delay(50);\r
- }else{\r
- resizeEvent.fire(D.getViewWidth(), D.getViewHeight());\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.\r
- * @param {Function} fn The method the event invokes\r
- * @param {Object} scope An object that becomes the scope of the handler\r
- * @param {boolean} options\r
- */\r
- onTextResize : function(fn, scope, options){\r
- if(!textEvent){\r
- textEvent = new Ext.util.Event();\r
- var textEl = new Ext.Element(document.createElement('div'));\r
- textEl.dom.className = 'x-text-resize';\r
- textEl.dom.innerHTML = 'X';\r
- textEl.appendTo(document.body);\r
- textSize = textEl.dom.offsetHeight;\r
- setInterval(function(){\r
- if(textEl.dom.offsetHeight != textSize){\r
- textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);\r
- }\r
- }, this.textResizeInterval);\r
- }\r
- textEvent.addListener(fn, scope, options);\r
- },\r
- \r
- /**\r
- * Removes the passed window resize listener.\r
- * @param {Function} fn The method the event invokes\r
- * @param {Object} scope The scope of handler\r
- */\r
- removeResizeListener : function(fn, scope){\r
- if(resizeEvent){\r
- resizeEvent.removeListener(fn, scope);\r
- }\r
- },\r
- \r
- // private\r
- fireResize : function(){\r
- if(resizeEvent){\r
- resizeEvent.fire(D.getViewWidth(), D.getViewHeight());\r
- }\r
- },\r
- \r
- /**\r
- * The frequency, in milliseconds, to check for text resize events (defaults to 50)\r
- */\r
- textResizeInterval : 50,\r
- \r
- /**\r
- * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)\r
- */\r
- ieDeferSrc : false,\r
- \r
- // protected for use inside the framework\r
- // detects whether we should use keydown or keypress based on the browser.\r
- useKeydown: useKeydown\r
+ if(Ext.isGecko || Ext.isOpera) {\r
+ DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);\r
+ }\r
+ if(Ext.isIE){\r
+ var defer = DOC.getElementById(IEDEFERED);\r
+ if(defer){\r
+ defer.onreadystatechange = null;\r
+ defer.parentNode.removeChild(defer);\r
+ }\r
+ }\r
+ if(docReadyEvent){\r
+ docReadyEvent.fire();\r
+ docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true?\r
+ }\r
+ }\r
};\r
-}());\r
-\r
-Ext.EventManager.on = Ext.EventManager.addListener;\r
-\r
-\r
-Ext.apply(Ext.EventObjectImpl.prototype, {\r
- /** Key constant @type Number */\r
- BACKSPACE: 8,\r
- /** Key constant @type Number */\r
- TAB: 9,\r
- /** Key constant @type Number */\r
- NUM_CENTER: 12,\r
- /** Key constant @type Number */\r
- ENTER: 13,\r
- /** Key constant @type Number */\r
- RETURN: 13,\r
- /** Key constant @type Number */\r
- SHIFT: 16,\r
- /** Key constant @type Number */\r
- CTRL: 17,\r
- CONTROL : 17, // legacy\r
- /** Key constant @type Number */\r
- ALT: 18,\r
- /** Key constant @type Number */\r
- PAUSE: 19,\r
- /** Key constant @type Number */\r
- CAPS_LOCK: 20,\r
- /** Key constant @type Number */\r
- ESC: 27,\r
- /** Key constant @type Number */\r
- SPACE: 32,\r
- /** Key constant @type Number */\r
- PAGE_UP: 33,\r
- PAGEUP : 33, // legacy\r
- /** Key constant @type Number */\r
- PAGE_DOWN: 34,\r
- PAGEDOWN : 34, // legacy\r
- /** Key constant @type Number */\r
- END: 35,\r
- /** Key constant @type Number */\r
- HOME: 36,\r
- /** Key constant @type Number */\r
- LEFT: 37,\r
- /** Key constant @type Number */\r
- UP: 38,\r
- /** Key constant @type Number */\r
- RIGHT: 39,\r
- /** Key constant @type Number */\r
- DOWN: 40,\r
- /** Key constant @type Number */\r
- PRINT_SCREEN: 44,\r
- /** Key constant @type Number */\r
- INSERT: 45,\r
- /** Key constant @type Number */\r
- DELETE: 46,\r
- /** Key constant @type Number */\r
- ZERO: 48,\r
- /** Key constant @type Number */\r
- ONE: 49,\r
- /** Key constant @type Number */\r
- TWO: 50,\r
- /** Key constant @type Number */\r
- THREE: 51,\r
- /** Key constant @type Number */\r
- FOUR: 52,\r
- /** Key constant @type Number */\r
- FIVE: 53,\r
- /** Key constant @type Number */\r
- SIX: 54,\r
- /** Key constant @type Number */\r
- SEVEN: 55,\r
- /** Key constant @type Number */\r
- EIGHT: 56,\r
- /** Key constant @type Number */\r
- NINE: 57,\r
- /** Key constant @type Number */\r
- A: 65,\r
- /** Key constant @type Number */\r
- B: 66,\r
- /** Key constant @type Number */\r
- C: 67,\r
- /** Key constant @type Number */\r
- D: 68,\r
- /** Key constant @type Number */\r
- E: 69,\r
- /** Key constant @type Number */\r
- F: 70,\r
- /** Key constant @type Number */\r
- G: 71,\r
- /** Key constant @type Number */\r
- H: 72,\r
- /** Key constant @type Number */\r
- I: 73,\r
- /** Key constant @type Number */\r
- J: 74,\r
- /** Key constant @type Number */\r
- K: 75,\r
- /** Key constant @type Number */\r
- L: 76,\r
- /** Key constant @type Number */\r
- M: 77,\r
- /** Key constant @type Number */\r
- N: 78,\r
- /** Key constant @type Number */\r
- O: 79,\r
- /** Key constant @type Number */\r
- P: 80,\r
- /** Key constant @type Number */\r
- Q: 81,\r
- /** Key constant @type Number */\r
- R: 82,\r
- /** Key constant @type Number */\r
- S: 83,\r
- /** Key constant @type Number */\r
- T: 84,\r
- /** Key constant @type Number */\r
- U: 85,\r
- /** Key constant @type Number */\r
- V: 86,\r
- /** Key constant @type Number */\r
- W: 87,\r
- /** Key constant @type Number */\r
- X: 88,\r
- /** Key constant @type Number */\r
- Y: 89,\r
- /** Key constant @type Number */\r
- Z: 90,\r
- /** Key constant @type Number */\r
- CONTEXT_MENU: 93,\r
- /** Key constant @type Number */\r
- NUM_ZERO: 96,\r
- /** Key constant @type Number */\r
- NUM_ONE: 97,\r
- /** Key constant @type Number */\r
- NUM_TWO: 98,\r
- /** Key constant @type Number */\r
- NUM_THREE: 99,\r
- /** Key constant @type Number */\r
- NUM_FOUR: 100,\r
- /** Key constant @type Number */\r
- NUM_FIVE: 101,\r
- /** Key constant @type Number */\r
- NUM_SIX: 102,\r
- /** Key constant @type Number */\r
- NUM_SEVEN: 103,\r
- /** Key constant @type Number */\r
- NUM_EIGHT: 104,\r
- /** Key constant @type Number */\r
- NUM_NINE: 105,\r
- /** Key constant @type Number */\r
- NUM_MULTIPLY: 106,\r
- /** Key constant @type Number */\r
- NUM_PLUS: 107,\r
- /** Key constant @type Number */\r
- NUM_MINUS: 109,\r
- /** Key constant @type Number */\r
- NUM_PERIOD: 110,\r
- /** Key constant @type Number */\r
- NUM_DIVISION: 111,\r
- /** Key constant @type Number */\r
- F1: 112,\r
- /** Key constant @type Number */\r
- F2: 113,\r
- /** Key constant @type Number */\r
- F3: 114,\r
- /** Key constant @type Number */\r
- F4: 115,\r
- /** Key constant @type Number */\r
- F5: 116,\r
- /** Key constant @type Number */\r
- F6: 117,\r
- /** Key constant @type Number */\r
- F7: 118,\r
- /** Key constant @type Number */\r
- F8: 119,\r
- /** Key constant @type Number */\r
- F9: 120,\r
- /** Key constant @type Number */\r
- F10: 121,\r
- /** Key constant @type Number */\r
- F11: 122,\r
- /** Key constant @type Number */\r
- F12: 123, \r
- \r
- /** @private */\r
- isNavKeyPress : function(){\r
- var me = this,\r
- k = this.normalizeKey(me.keyCode); \r
- return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down\r
- k == me.RETURN ||\r
- k == me.TAB ||\r
- k == me.ESC;\r
- },\r
\r
- isSpecialKey : function(){\r
- var k = this.normalizeKey(this.keyCode);\r
- return (this.type == 'keypress' && this.ctrlKey) ||\r
- this.isNavKeyPress() ||\r
- (k == this.BACKSPACE) || // Backspace\r
- (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock\r
- (k >= 44 && k <= 45); // Print Screen, Insert\r
- },\r
- \r
- getPoint : function(){\r
- return new Ext.lib.Point(this.xy[0], this.xy[1]);\r
- },\r
+ function initDocReady(){\r
+ var COMPLETE = "complete";\r
+\r
+ docReadyEvent = new Ext.util.Event();\r
+ if (Ext.isGecko || Ext.isOpera) {\r
+ DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);\r
+ } else if (Ext.isIE){\r
+ DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");\r
+ DOC.getElementById(IEDEFERED).onreadystatechange = function(){\r
+ if(this.readyState == COMPLETE){\r
+ fireDocReady();\r
+ }\r
+ };\r
+ } else if (Ext.isWebKit){\r
+ docReadyProcId = setInterval(function(){\r
+ if(DOC.readyState == COMPLETE) {\r
+ fireDocReady();\r
+ }\r
+ }, 10);\r
+ }\r
+ // no matter what, make sure it fires on load\r
+ E.on(WINDOW, "load", fireDocReady);\r
+ };\r
\r
- /**\r
- * Returns true if the control, meta, shift or alt key was pressed during this event.\r
- * @return {Boolean}\r
- */\r
- hasModifier : function(){\r
- return ((this.ctrlKey || this.altKey) || this.shiftKey);\r
- }\r
-});/**\r
- * @class Ext.Element\r
- * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>\r
- * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>\r
- * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To\r
- * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older\r
- * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>\r
- * Usage:<br>\r
-<pre><code>\r
-// by id\r
-var el = Ext.get("my-div");\r
+ function createTargeted(h, o){\r
+ return function(){\r
+ var args = Ext.toArray(arguments);\r
+ if(o.target == Ext.EventObject.setEvent(args[0]).target){\r
+ h.apply(this, args);\r
+ }\r
+ };\r
+ };\r
\r
-// by DOM element reference\r
-var el = Ext.get(myDivElement);\r
-</code></pre>\r
- * <b>Animations</b><br />\r
- * <p>When an element is manipulated, by default there is no animation.</p>\r
- * <pre><code>\r
-var el = Ext.get("my-div");\r
+ function createBuffered(h, o, fn){\r
+ fn.task = new Ext.util.DelayedTask(h);\r
+ var w = function(e){\r
+ // create new event object impl so new events don't wipe out properties\r
+ fn.task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);\r
+ };\r
+ return w;\r
+ };\r
\r
-// no animation\r
-el.setWidth(100);\r
- * </code></pre>\r
- * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This\r
- * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>\r
- * <pre><code>\r
-// default animation\r
-el.setWidth(100, true);\r
- * </code></pre>\r
- * \r
- * <p>To configure the effects, an object literal with animation options to use as the Element animation\r
- * configuration object can also be specified. Note that the supported Element animation configuration\r
- * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported\r
- * Element animation configuration options are:</p>\r
-<pre>\r
-Option Default Description\r
---------- -------- ---------------------------------------------\r
-{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds\r
-{@link Ext.Fx#easing easing} easeOut The easing method\r
-{@link Ext.Fx#callback callback} none A function to execute when the anim completes\r
-{@link Ext.Fx#scope scope} this The scope (this) of the callback function\r
-</pre>\r
- * \r
- * <pre><code>\r
-// Element animation options object\r
-var opt = {\r
- {@link Ext.Fx#duration duration}: 1,\r
- {@link Ext.Fx#easing easing}: 'elasticIn',\r
- {@link Ext.Fx#callback callback}: this.foo,\r
- {@link Ext.Fx#scope scope}: this\r
-};\r
-// animation with some options set\r
-el.setWidth(100, opt);\r
- * </code></pre>\r
- * <p>The Element animation object being used for the animation will be set on the options\r
- * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>\r
- * <pre><code>\r
-// using the "anim" property to get the Anim object\r
-if(opt.anim.isAnimated()){\r
- opt.anim.stop();\r
-}\r
- * </code></pre>\r
- * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>\r
- * <p><b> Composite (Collections of) Elements</b></p>\r
- * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>\r
- * @constructor Create a new Element directly.\r
- * @param {String/HTMLElement} element\r
- * @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).\r
- */\r
-(function(){\r
-var DOC = document;\r
+ function createSingle(h, el, ename, fn, scope){\r
+ return function(e){\r
+ Ext.EventManager.removeListener(el, ename, fn, scope);\r
+ h(e);\r
+ };\r
+ };\r
\r
-Ext.Element = function(element, forceNew){\r
- var dom = typeof element == "string" ?\r
- DOC.getElementById(element) : element,\r
- id;\r
+ function createDelayed(h, o, fn){\r
+ return function(e){\r
+ var task = new Ext.util.DelayedTask(h);\r
+ if(!fn.tasks) {\r
+ fn.tasks = [];\r
+ }\r
+ fn.tasks.push(task);\r
+ task.delay(o.delay || 10, h, null, [new Ext.EventObjectImpl(e)]);\r
+ };\r
+ };\r
\r
- if(!dom) return null;\r
+ function listen(element, ename, opt, fn, scope){\r
+ var o = !Ext.isObject(opt) ? {} : opt,\r
+ el = Ext.getDom(element);\r
\r
- id = dom.id;\r
+ fn = fn || o.fn;\r
+ scope = scope || o.scope;\r
\r
- if(!forceNew && id && Ext.Element.cache[id]){ // element object already exists\r
- return Ext.Element.cache[id];\r
- }\r
+ if(!el){\r
+ throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';\r
+ }\r
+ function h(e){\r
+ // prevent errors while unload occurring\r
+ if(!Ext){// !window[xname]){ ==> can't we do this?\r
+ return;\r
+ }\r
+ e = Ext.EventObject.setEvent(e);\r
+ var t;\r
+ if (o.delegate) {\r
+ if(!(t = e.getTarget(o.delegate, el))){\r
+ return;\r
+ }\r
+ } else {\r
+ t = e.target;\r
+ }\r
+ if (o.stopEvent) {\r
+ e.stopEvent();\r
+ }\r
+ if (o.preventDefault) {\r
+ e.preventDefault();\r
+ }\r
+ if (o.stopPropagation) {\r
+ e.stopPropagation();\r
+ }\r
+ if (o.normalized) {\r
+ e = e.browserEvent;\r
+ }\r
\r
- /**\r
- * The DOM element\r
- * @type HTMLElement\r
- */\r
- this.dom = dom;\r
+ fn.call(scope || el, e, t, o);\r
+ };\r
+ if(o.target){\r
+ h = createTargeted(h, o);\r
+ }\r
+ if(o.delay){\r
+ h = createDelayed(h, o, fn);\r
+ }\r
+ if(o.single){\r
+ h = createSingle(h, el, ename, fn, scope);\r
+ }\r
+ if(o.buffer){\r
+ h = createBuffered(h, o, fn);\r
+ }\r
\r
- /**\r
- * The DOM element ID\r
- * @type String\r
- */\r
- this.id = id || Ext.id(dom);\r
-};\r
+ addListener(el, ename, fn, h, scope);\r
+ return h;\r
+ };\r
\r
-var D = Ext.lib.Dom,\r
- DH = Ext.DomHelper,\r
- E = Ext.lib.Event,\r
- A = Ext.lib.Anim,\r
- El = Ext.Element;\r
+ var pub = {\r
+ /**\r
+ * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will\r
+ * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.\r
+ * @param {String/HTMLElement} el The html element or id to assign the event handler to.\r
+ * @param {String} eventName The name of the event to listen for.\r
+ * @param {Function} handler The handler function the event invokes. This function is passed\r
+ * the following parameters:<ul>\r
+ * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>\r
+ * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.\r
+ * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>\r
+ * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>\r
+ * </ul>\r
+ * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.\r
+ * @param {Object} options (optional) An object containing handler configuration properties.\r
+ * This may contain any of the following properties:<ul>\r
+ * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>\r
+ * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>\r
+ * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>\r
+ * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>\r
+ * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>\r
+ * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>\r
+ * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>\r
+ * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>\r
+ * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed\r
+ * by the specified number of milliseconds. If the event fires again within that time, the original\r
+ * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>\r
+ * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>\r
+ * </ul><br>\r
+ * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>\r
+ */\r
+ addListener : function(element, eventName, fn, scope, options){\r
+ if(Ext.isObject(eventName)){\r
+ var o = eventName, e, val;\r
+ for(e in o){\r
+ val = o[e];\r
+ if(!propRe.test(e)){\r
+ if(Ext.isFunction(val)){\r
+ // shared options\r
+ listen(element, e, o, val, o.scope);\r
+ }else{\r
+ // individual options\r
+ listen(element, e, val);\r
+ }\r
+ }\r
+ }\r
+ } else {\r
+ listen(element, eventName, options, fn, scope);\r
+ }\r
+ },\r
\r
-El.prototype = {\r
- /**\r
- * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)\r
- * @param {Object} o The object with the attributes\r
- * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.\r
- * @return {Ext.Element} this\r
- */\r
- set : function(o, useSet){\r
- var el = this.dom,\r
- attr,\r
- val; \r
- \r
- for(attr in o){\r
- val = o[attr];\r
- if (attr != "style" && !Ext.isFunction(val)) {\r
- if (attr == "cls" ) {\r
- el.className = val;\r
- } else if (o.hasOwnProperty(attr)) {\r
- if (useSet || !!el.setAttribute) el.setAttribute(attr, val);\r
- else el[attr] = val;\r
+ /**\r
+ * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically\r
+ * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.\r
+ * @param {String/HTMLElement} el The id or html element from which to remove the listener.\r
+ * @param {String} eventName The name of the event.\r
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>\r
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,\r
+ * then this must refer to the same object.\r
+ */\r
+ removeListener : function(el, eventName, fn, scope){\r
+ el = Ext.getDom(el);\r
+ var id = getId(el),\r
+ f = el && (Ext.elCache[id].events)[eventName] || [],\r
+ wrap, i, l, k, wf;\r
+\r
+ for (i = 0, len = f.length; i < len; i++) {\r
+ if (Ext.isArray(f[i]) && f[i][0] == fn && (!scope || f[i][2] == scope)) {\r
+ if(fn.task) {\r
+ fn.task.cancel();\r
+ delete fn.task;\r
+ }\r
+ k = fn.tasks && fn.tasks.length;\r
+ if(k) {\r
+ while(k--) {\r
+ fn.tasks[k].cancel();\r
+ }\r
+ delete fn.tasks;\r
+ }\r
+ wf = wrap = f[i][1];\r
+ if (E.extAdapter) {\r
+ wf = f[i][3];\r
+ }\r
+ E.un(el, eventName, wf);\r
+ f.splice(i,1);\r
+ if (f.length === 0) {\r
+ delete Ext.elCache[id].events[eventName];\r
+ }\r
+ for (k in Ext.elCache[id].events) {\r
+ return false;\r
+ }\r
+ Ext.elCache[id].events = {};\r
+ return false;\r
}\r
}\r
- }\r
- if(o.style){\r
- DH.applyStyles(el, o.style);\r
- }\r
- return this;\r
- },\r
- \r
-// Mouse events\r
- /**\r
- * @event click\r
- * Fires when a mouse click is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event contextmenu\r
- * Fires when a right click is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event dblclick\r
- * Fires when a mouse double click is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mousedown\r
- * Fires when a mousedown is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mouseup\r
- * Fires when a mouseup is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mouseover\r
- * Fires when a mouseover is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mousemove\r
- * Fires when a mousemove is detected with the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mouseout\r
- * Fires when a mouseout is detected with the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mouseenter\r
- * Fires when the mouse enters the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event mouseleave\r
- * Fires when the mouse leaves the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- \r
-// Keyboard events\r
- /**\r
- * @event keypress\r
- * Fires when a keypress is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event keydown\r
- * Fires when a keydown is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event keyup\r
- * Fires when a keyup is detected within the element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
\r
+ // jQuery workaround that should be removed from Ext Core\r
+ if(eventName == "mousewheel" && el.addEventListener && wrap){\r
+ el.removeEventListener("DOMMouseScroll", wrap, false);\r
+ }\r
\r
-// HTML frame/object events\r
- /**\r
- * @event load\r
- * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event unload\r
- * 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.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event abort\r
- * Fires when an object/image is stopped from loading before completely loaded.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event error\r
- * Fires when an object/image/frame cannot be loaded properly.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event resize\r
- * Fires when a document view is resized.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event scroll\r
- * Fires when a document view is scrolled.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
+ if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document\r
+ Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);\r
+ }\r
+ },\r
\r
-// Form events\r
- /**\r
- * @event select\r
- * Fires when a user selects some text in a text field, including input and textarea.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event change\r
- * Fires when a control loses the input focus and its value has been modified since gaining focus.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event submit\r
- * Fires when a form is submitted.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event reset\r
- * Fires when a form is reset.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event focus\r
- * Fires when an element receives focus either via the pointing device or by tab navigation.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event blur\r
- * Fires when an element loses focus either via the pointing device or by tabbing navigation.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
-\r
-// User Interface events\r
- /**\r
- * @event DOMFocusIn\r
- * Where supported. Similar to HTML focus event, but can be applied to any focusable element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMFocusOut\r
- * Where supported. Similar to HTML blur event, but can be applied to any focusable element.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMActivate\r
- * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
-\r
-// DOM Mutation events\r
- /**\r
- * @event DOMSubtreeModified\r
- * Where supported. Fires when the subtree is modified.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMNodeInserted\r
- * Where supported. Fires when a node has been added as a child of another node.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMNodeRemoved\r
- * Where supported. Fires when a descendant node of the element is removed.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMNodeRemovedFromDocument\r
- * Where supported. Fires when a node is being removed from a document.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMNodeInsertedIntoDocument\r
- * Where supported. Fires when a node is being inserted into a document.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMAttrModified\r
- * Where supported. Fires when an attribute has been modified.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
- /**\r
- * @event DOMCharacterDataModified\r
- * Where supported. Fires when the character data has been modified.\r
- * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.\r
- * @param {HtmlElement} t The target of the event.\r
- * @param {Object} o The options configuration passed to the {@link #addListener} call.\r
- */\r
-\r
- /**\r
- * The default unit to append to CSS values where a unit isn't provided (defaults to px).\r
- * @type String\r
- */\r
- defaultUnit : "px",\r
-\r
- /**\r
- * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)\r
- * @param {String} selector The simple selector to test\r
- * @return {Boolean} True if this element matches the selector, else false\r
- */\r
- is : function(simpleSelector){\r
- return Ext.DomQuery.is(this.dom, simpleSelector);\r
- },\r
-\r
- /**\r
- * Tries to focus the element. Any exceptions are caught and ignored.\r
- * @param {Number} defer (optional) Milliseconds to defer the focus\r
- * @return {Ext.Element} this\r
- */\r
- focus : function(defer, /* private */ dom) {\r
- var me = this,\r
- dom = dom || me.dom;\r
- try{\r
- if(Number(defer)){\r
- me.focus.defer(defer, null, [null, dom]);\r
- }else{\r
- dom.focus();\r
+ /**\r
+ * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}\r
+ * directly on an Element in favor of calling this version.\r
+ * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.\r
+ */\r
+ removeAll : function(el){\r
+ el = Ext.getDom(el);\r
+ var id = getId(el),\r
+ ec = Ext.elCache[id] || {},\r
+ es = ec.events || {},\r
+ f, i, len, ename, fn, k;\r
+\r
+ for(ename in es){\r
+ if(es.hasOwnProperty(ename)){\r
+ f = es[ename];\r
+ for (i = 0, len = f.length; i < len; i++) {\r
+ fn = f[i][0];\r
+ if(fn.task) {\r
+ fn.task.cancel();\r
+ delete fn.task;\r
+ }\r
+ if(fn.tasks && (k = fn.tasks.length)) {\r
+ while(k--) {\r
+ fn.tasks[k].cancel();\r
+ }\r
+ delete fn.tasks;\r
+ }\r
+ E.un(el, ename, E.extAdapter ? f[i][3] : f[i][1]);\r
+ }\r
+ }\r
}\r
- }catch(e){}\r
- return me;\r
- },\r
-\r
- /**\r
- * Tries to blur the element. Any exceptions are caught and ignored.\r
- * @return {Ext.Element} this\r
- */\r
- blur : function() {\r
- try{\r
- this.dom.blur();\r
- }catch(e){}\r
- return this;\r
- },\r
+ if (Ext.elCache[id]) {\r
+ Ext.elCache[id].events = {};\r
+ }\r
+ },\r
\r
- /**\r
- * Returns the value of the "value" attribute\r
- * @param {Boolean} asNumber true to parse the value as a number\r
- * @return {String/Number}\r
- */\r
- getValue : function(asNumber){\r
- var val = this.dom.value;\r
- return asNumber ? parseInt(val, 10) : val;\r
- },\r
+ getListeners : function(el, eventName) {\r
+ el = Ext.getDom(el);\r
+ var id = getId(el),\r
+ ec = Ext.elCache[id] || {},\r
+ es = ec.events || {},\r
+ results = [];\r
+ if (es && es[eventName]) {\r
+ return es[eventName];\r
+ } else {\r
+ return null;\r
+ }\r
+ },\r
\r
- /**\r
- * Appends an event handler to this element. The shorthand version {@link #on} is equivalent.\r
- * @param {String} eventName The name of event to handle.\r
- * @param {Function} fn The handler function the event invokes. This function is passed\r
- * the following parameters:<ul>\r
- * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>\r
- * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.\r
- * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>\r
- * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>\r
- * </ul>\r
- * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
- * <b>If omitted, defaults to this Element.</b>.\r
- * @param {Object} options (optional) An object containing handler configuration properties.\r
- * This may contain any of the following properties:<ul>\r
- * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
- * <b>If omitted, defaults to this Element.</b></div></li>\r
- * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>\r
- * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>\r
- * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>\r
- * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>\r
- * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>\r
- * <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>\r
- * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>\r
- * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>\r
- * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed\r
- * by the specified number of milliseconds. If the event fires again within that time, the original\r
- * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>\r
- * </ul><br>\r
- * <p>\r
- * <b>Combining Options</b><br>\r
- * In the following examples, the shorthand form {@link #on} is used rather than the more verbose\r
- * addListener. The two are equivalent. Using the options argument, it is possible to combine different\r
- * types of listeners:<br>\r
- * <br>\r
- * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the\r
- * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">\r
- * Code:<pre><code>\r
-el.on('click', this.onClick, this, {\r
- single: true,\r
- delay: 100,\r
- stopEvent : true,\r
- forumId: 4\r
-});</code></pre></p>\r
- * <p>\r
- * <b>Attaching multiple handlers in 1 call</b><br>\r
- * The method also allows for a single argument to be passed which is a config object containing properties\r
- * which specify multiple handlers.</p>\r
- * <p>\r
- * Code:<pre><code>\r
-el.on({\r
- 'click' : {\r
- fn: this.onClick,\r
- scope: this,\r
- delay: 100\r
- },\r
- 'mouseover' : {\r
- fn: this.onMouseOver,\r
- scope: this\r
- },\r
- 'mouseout' : {\r
- fn: this.onMouseOut,\r
- scope: this\r
- }\r
-});</code></pre>\r
- * <p>\r
- * Or a shorthand syntax:<br>\r
- * Code:<pre><code></p>\r
-el.on({\r
- 'click' : this.onClick,\r
- 'mouseover' : this.onMouseOver,\r
- 'mouseout' : this.onMouseOut,\r
- scope: this\r
-});\r
- * </code></pre></p>\r
- * <p><b>delegate</b></p>\r
- * <p>This is a configuration option that you can pass along when registering a handler for\r
- * an event to assist with event delegation. Event delegation is a technique that is used to\r
- * reduce memory consumption and prevent exposure to memory-leaks. By registering an event\r
- * for a container element as opposed to each element within a container. By setting this\r
- * configuration option to a simple selector, the target element will be filtered to look for\r
- * a descendant of the target.\r
- * For example:<pre><code>\r
-// using this markup:\r
-<div id='elId'>\r
- <p id='p1'>paragraph one</p>\r
- <p id='p2' class='clickable'>paragraph two</p>\r
- <p id='p3'>paragraph three</p>\r
-</div>\r
-// utilize event delegation to registering just one handler on the container element: \r
-el = Ext.get('elId');\r
-el.on(\r
- 'click',\r
- function(e,t) {\r
- // handle click\r
- console.info(t.id); // 'p2'\r
- },\r
- this,\r
- {\r
- // filter the target element to be a descendant with the class 'clickable'\r
- delegate: '.clickable' \r
- }\r
-);\r
- * </code></pre></p>\r
- * @return {Ext.Element} this\r
- */\r
- addListener : function(eventName, fn, scope, options){\r
- Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);\r
- return this;\r
- },\r
+ purgeElement : function(el, recurse, eventName) {\r
+ el = Ext.getDom(el);\r
+ var id = getId(el),\r
+ ec = Ext.elCache[id] || {},\r
+ es = ec.events || {},\r
+ i, f, len;\r
+ if (eventName) {\r
+ if (es && es.hasOwnProperty(eventName)) {\r
+ f = es[eventName];\r
+ for (i = 0, len = f.length; i < len; i++) {\r
+ Ext.EventManager.removeListener(el, eventName, f[i][0]);\r
+ }\r
+ }\r
+ } else {\r
+ Ext.EventManager.removeAll(el);\r
+ }\r
+ if (recurse && el && el.childNodes) {\r
+ for (i = 0, len = el.childNodes.length; i < len; i++) {\r
+ Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName);\r
+ }\r
+ }\r
+ },\r
\r
- /**\r
- * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.\r
- * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the\r
- * listener, the same scope must be specified here.\r
- * Example:\r
- * <pre><code>\r
-el.removeListener('click', this.handlerFn);\r
-// or\r
-el.un('click', this.handlerFn);\r
-</code></pre>\r
- * @param {String} eventName The name of the event from which to remove the handler.\r
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>\r
+ _unload : function() {\r
+ var el;\r
+ for (el in Ext.elCache) {\r
+ Ext.EventManager.removeAll(el);\r
+ }\r
+ },\r
+ /**\r
+ * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be\r
+ * accessed shorthanded as Ext.onReady().\r
+ * @param {Function} fn The method the event invokes.\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.\r
+ * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options\r
+ * <code>{single: true}</code> be used so that the handler is removed on first invocation.\r
+ */\r
+ onDocumentReady : function(fn, scope, options){\r
+ if(docReadyState){ // if it already fired\r
+ docReadyEvent.addListener(fn, scope, options);\r
+ docReadyEvent.fire();\r
+ docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true?\r
+ } else {\r
+ if(!docReadyEvent) initDocReady();\r
+ options = options || {};\r
+ options.delay = options.delay || 1;\r
+ docReadyEvent.addListener(fn, scope, options);\r
+ }\r
+ }\r
+ };\r
+ /**\r
+ * Appends an event handler to an element. Shorthand for {@link #addListener}.\r
+ * @param {String/HTMLElement} el The html element or id to assign the event handler to\r
+ * @param {String} eventName The name of the event to listen for.\r
+ * @param {Function} handler The handler function the event invokes.\r
+ * @param {Object} scope (optional) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.\r
+ * @param {Object} options (optional) An object containing standard {@link #addListener} options\r
+ * @member Ext.EventManager\r
+ * @method on\r
+ */\r
+ pub.on = pub.addListener;\r
+ /**\r
+ * Removes an event handler from an element. Shorthand for {@link #removeListener}.\r
+ * @param {String/HTMLElement} el The id or html element from which to remove the listener.\r
+ * @param {String} eventName The name of the event.\r
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>\r
* @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,\r
* then this must refer to the same object.\r
- * @return {Ext.Element} this\r
+ * @member Ext.EventManager\r
+ * @method un\r
*/\r
- removeListener : function(eventName, fn, scope){\r
- Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);\r
- return this;\r
- },\r
+ pub.un = pub.removeListener;\r
\r
- /**\r
- * Removes all previous added listeners from this element\r
- * @return {Ext.Element} this\r
- */\r
- removeAllListeners : function(){\r
- Ext.EventManager.removeAll(this.dom);\r
- return this;\r
- },\r
+ pub.stoppedMouseDownEvent = new Ext.util.Event();\r
+ return pub;\r
+}();\r
+/**\r
+ * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.\r
+ * @param {Function} fn The method the event invokes.\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.\r
+ * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options\r
+ * <code>{single: true}</code> be used so that the handler is removed on first invocation.\r
+ * @member Ext\r
+ * @method onReady\r
+ */\r
+Ext.onReady = Ext.EventManager.onDocumentReady;\r
\r
- /**\r
- * @private Test if size has a unit, otherwise appends the default\r
- */\r
- addUnits : function(size){\r
- if(size === "" || size == "auto" || size === undefined){\r
- size = size || '';\r
- } else if(!isNaN(size) || !unitPattern.test(size)){\r
- size = size + (this.defaultUnit || 'px');\r
- }\r
- return size;\r
- },\r
\r
- /**\r
- * <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element\r
- * from a specified URL. Note that this is subject to the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin Policy</a></p>\r
- * <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt><script></tt> elements. This is a browser restriction.</p>\r
- * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying\r
- * exactly how to request the HTML.\r
- * @return {Ext.Element} this\r
- */\r
- load : function(url, params, cb){\r
- Ext.Ajax.request(Ext.apply({\r
- params: params,\r
- url: url.url || url,\r
- callback: cb,\r
- el: this.dom,\r
- indicatorText: url.indicatorText || ''\r
- }, Ext.isObject(url) ? url : {}));\r
- return this;\r
- },\r
+//Initialize doc classes\r
+(function(){\r
\r
- /**\r
- * Tests various css rules/browsers to determine if this element uses a border box\r
- * @return {Boolean}\r
- */\r
- isBorderBox : function(){\r
- return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;\r
- },\r
+ var initExtCss = function(){\r
+ // find the body element\r
+ var bd = document.body || document.getElementsByTagName('body')[0];\r
+ if(!bd){ return false; }\r
+ var cls = [' ',\r
+ Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))\r
+ : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')\r
+ : Ext.isOpera ? "ext-opera"\r
+ : Ext.isWebKit ? "ext-webkit" : ""];\r
\r
- /**\r
- * Removes this element from the DOM and deletes it from the cache\r
- */\r
- remove : function(){\r
- var me = this,\r
- dom = me.dom;\r
- \r
- me.removeAllListeners();\r
- if (dom) {\r
- delete me.dom;\r
- delete El.cache[dom.id];\r
- delete El.dataCache[dom.id];\r
- Ext.removeNode(dom);\r
+ if(Ext.isSafari){\r
+ cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));\r
+ }else if(Ext.isChrome){\r
+ cls.push("ext-chrome");\r
}\r
- },\r
-\r
- /**\r
- * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.\r
- * @param {Function} overFn The function to call when the mouse enters the Element.\r
- * @param {Function} outFn The function to call when the mouse leaves the Element.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the functions are executed. Defaults to the Element's DOM element.\r
- * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.\r
- * @return {Ext.Element} this\r
- */\r
- hover : function(overFn, outFn, scope, options){\r
- var me = this;\r
- me.on('mouseenter', overFn, scope || me.dom, options);\r
- me.on('mouseleave', outFn, scope || me.dom, options);\r
- return me;\r
- },\r
-\r
- /**\r
- * Returns true if this element is an ancestor of the passed element\r
- * @param {HTMLElement/String} el The element to check\r
- * @return {Boolean} True if this element is an ancestor of el, else false\r
- */\r
- contains : function(el){\r
- return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);\r
- },\r
-\r
- /**\r
- * Returns the value of a namespaced attribute from the element's underlying DOM node.\r
- * @param {String} namespace The namespace in which to look for the attribute\r
- * @param {String} name The attribute name\r
- * @return {String} The attribute value\r
- * @deprecated\r
- */\r
- getAttributeNS : function(ns, name){\r
- return this.getAttribute(name, ns); \r
- },\r
- \r
- /**\r
- * Returns the value of an attribute from the element's underlying DOM node.\r
- * @param {String} name The attribute name\r
- * @param {String} namespace (optional) The namespace in which to look for the attribute\r
- * @return {String} The attribute value\r
- */\r
- getAttribute : Ext.isIE ? function(name, ns){\r
- var d = this.dom,\r
- type = typeof d[ns + ":" + name];\r
\r
- if(['undefined', 'unknown'].indexOf(type) == -1){\r
- return d[ns + ":" + name];\r
+ if(Ext.isMac){\r
+ cls.push("ext-mac");\r
}\r
- return d[name];\r
- } : function(name, ns){\r
- var d = this.dom;\r
- return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];\r
- },\r
- \r
- /**\r
- * Update the innerHTML of this element\r
- * @param {String} html The new HTML\r
- * @return {Ext.Element} this\r
- */\r
- update : function(html) {\r
- if (this.dom) {\r
- this.dom.innerHTML = html;\r
+ if(Ext.isLinux){\r
+ cls.push("ext-linux");\r
}\r
- return this;\r
- }\r
-};\r
-\r
-var ep = El.prototype;\r
-\r
-El.addMethods = function(o){\r
- Ext.apply(ep, o);\r
-};\r
\r
-/**\r
- * Appends an event handler (shorthand for {@link #addListener}).\r
- * @param {String} eventName The name of event to handle.\r
- * @param {Function} fn The handler function the event invokes.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.\r
- * @param {Object} options (optional) An object containing standard {@link #addListener} options\r
- * @member Ext.Element\r
- * @method on\r
- */\r
-ep.on = ep.addListener;\r
-\r
-/**\r
- * Removes an event handler from this element (see {@link #removeListener} for additional notes).\r
- * @param {String} eventName The name of the event from which to remove the handler.\r
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>\r
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,\r
- * then this must refer to the same object.\r
- * @return {Ext.Element} this\r
- * @member Ext.Element\r
- * @method un\r
- */\r
-ep.un = ep.removeListener;\r
+ if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"\r
+ var p = bd.parentNode;\r
+ if(p){\r
+ p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';\r
+ }\r
+ }\r
+ bd.className += cls.join(' ');\r
+ return true;\r
+ }\r
\r
-/**\r
- * true to automatically adjust width and height settings for box-model issues (default to true)\r
- */\r
-ep.autoBoxAdjust = true;\r
+ if(!initExtCss()){\r
+ Ext.onReady(initExtCss);\r
+ }\r
+})();\r
\r
-// private\r
-var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,\r
- docEl;\r
\r
/**\r
- * @private\r
+ * @class Ext.EventObject\r
+ * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject\r
+ * wraps the browser's native event-object normalizing cross-browser differences,\r
+ * such as which mouse button is clicked, keys pressed, mechanisms to stop\r
+ * event-propagation along with a method to prevent default actions from taking place.\r
+ * <p>For example:</p>\r
+ * <pre><code>\r
+function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject\r
+ e.preventDefault();\r
+ var target = e.getTarget(); // same as t (the target HTMLElement)\r
+ ...\r
+}\r
+var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}\r
+myDiv.on( // 'on' is shorthand for addListener\r
+ "click", // perform an action on click of myDiv\r
+ handleClick // reference to the action handler\r
+);\r
+// other methods to do the same:\r
+Ext.EventManager.on("myDiv", 'click', handleClick);\r
+Ext.EventManager.addListener("myDiv", 'click', handleClick);\r
+ </code></pre>\r
+ * @singleton\r
*/\r
-El.cache = {};\r
-El.dataCache = {};\r
+Ext.EventObject = function(){\r
+ var E = Ext.lib.Event,\r
+ // safari keypress events for special keys return bad keycodes\r
+ safariKeys = {\r
+ 3 : 13, // enter\r
+ 63234 : 37, // left\r
+ 63235 : 39, // right\r
+ 63232 : 38, // up\r
+ 63233 : 40, // down\r
+ 63276 : 33, // page up\r
+ 63277 : 34, // page down\r
+ 63272 : 46, // delete\r
+ 63273 : 36, // home\r
+ 63275 : 35 // end\r
+ },\r
+ // normalize button clicks\r
+ btnMap = Ext.isIE ? {1:0,4:1,2:2} :\r
+ (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});\r
\r
-/**\r
- * Retrieves Ext.Element objects.\r
- * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method\r
- * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by\r
- * its ID, use {@link Ext.ComponentMgr#get}.</p>\r
- * <p>Uses simple caching to consistently return the same object. Automatically fixes if an\r
- * object was recreated with the same id via AJAX or DOM.</p>\r
- * @param {Mixed} el The id of the node, a DOM Node or an existing Element.\r
- * @return {Element} The Element object (or null if no matching element was found)\r
- * @static\r
- * @member Ext.Element\r
- * @method get\r
- */\r
-El.get = function(el){\r
- var ex,\r
- elm,\r
- id;\r
- if(!el){ return null; }\r
- if (typeof el == "string") { // element id\r
- if (!(elm = DOC.getElementById(el))) {\r
- return null;\r
- }\r
- if (ex = El.cache[el]) {\r
- ex.dom = elm;\r
- } else {\r
- ex = El.cache[el] = new El(elm);\r
- }\r
- return ex;\r
- } else if (el.tagName) { // dom element\r
- if(!(id = el.id)){\r
- id = Ext.id(el);\r
- }\r
- if(ex = El.cache[id]){\r
- ex.dom = el;\r
- }else{\r
- ex = El.cache[id] = new El(el);\r
- }\r
- return ex;\r
- } else if (el instanceof El) {\r
- if(el != docEl){\r
- el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,\r
- // catch case where it hasn't been appended\r
- El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it\r
+ Ext.EventObjectImpl = function(e){\r
+ if(e){\r
+ this.setEvent(e.browserEvent || e);\r
}\r
- return el;\r
- } else if(el.isComposite) {\r
- return el;\r
- } else if(Ext.isArray(el)) {\r
- return El.select(el);\r
- } else if(el == DOC) {\r
- // create a bogus element object representing the document object\r
- if(!docEl){\r
- var f = function(){};\r
- f.prototype = El.prototype;\r
- docEl = new f();\r
- docEl.dom = DOC;\r
- }\r
- return docEl;\r
- }\r
- return null;\r
-};\r
-\r
-// private method for getting and setting element data\r
-El.data = function(el, key, value){\r
- var c = El.dataCache[el.id];\r
- if(!c){\r
- c = El.dataCache[el.id] = {};\r
- }\r
- if(arguments.length == 2){\r
- return c[key]; \r
- }else{\r
- return (c[key] = value);\r
- }\r
-};\r
-\r
-// private\r
-// Garbage collection - uncache elements/purge listeners on orphaned elements\r
-// so we don't hold a reference and cause the browser to retain them\r
-function garbageCollect(){\r
- if(!Ext.enableGarbageCollector){\r
- clearInterval(El.collectorThread);\r
- } else {\r
- var eid,\r
- el,\r
- d;\r
+ };\r
\r
- for(eid in El.cache){\r
- el = El.cache[eid];\r
- d = el.dom;\r
- // -------------------------------------------------------\r
- // Determining what is garbage:\r
- // -------------------------------------------------------\r
- // !d\r
- // dom node is null, definitely garbage\r
- // -------------------------------------------------------\r
- // !d.parentNode\r
- // no parentNode == direct orphan, definitely garbage\r
- // -------------------------------------------------------\r
- // !d.offsetParent && !document.getElementById(eid)\r
- // display none elements have no offsetParent so we will\r
- // also try to look it up by it's id. However, check\r
- // offsetParent first so we don't do unneeded lookups.\r
- // This enables collection of elements that are not orphans\r
- // directly, but somewhere up the line they have an orphan\r
- // parent.\r
- // -------------------------------------------------------\r
- if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){\r
- delete El.cache[eid];\r
- if(d && Ext.enableListenerCollection){\r
- Ext.EventManager.removeAll(d);\r
+ Ext.EventObjectImpl.prototype = {\r
+ /** @private */\r
+ setEvent : function(e){\r
+ var me = this;\r
+ if(e == me || (e && e.browserEvent)){ // already wrapped\r
+ return e;\r
+ }\r
+ me.browserEvent = e;\r
+ if(e){\r
+ // normalize buttons\r
+ me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);\r
+ if(e.type == 'click' && me.button == -1){\r
+ me.button = 0;\r
}\r
+ me.type = e.type;\r
+ me.shiftKey = e.shiftKey;\r
+ // mac metaKey behaves like ctrlKey\r
+ me.ctrlKey = e.ctrlKey || e.metaKey || false;\r
+ me.altKey = e.altKey;\r
+ // in getKey these will be normalized for the mac\r
+ me.keyCode = e.keyCode;\r
+ me.charCode = e.charCode;\r
+ // cache the target for the delayed and or buffered events\r
+ me.target = E.getTarget(e);\r
+ // same for XY\r
+ me.xy = E.getXY(e);\r
+ }else{\r
+ me.button = -1;\r
+ me.shiftKey = false;\r
+ me.ctrlKey = false;\r
+ me.altKey = false;\r
+ me.keyCode = 0;\r
+ me.charCode = 0;\r
+ me.target = null;\r
+ me.xy = [0, 0];\r
}\r
- }\r
- }\r
-}\r
-El.collectorThreadId = setInterval(garbageCollect, 30000);\r
+ return me;\r
+ },\r
\r
-var flyFn = function(){};\r
-flyFn.prototype = El.prototype;\r
+ /**\r
+ * Stop the event (preventDefault and stopPropagation)\r
+ */\r
+ stopEvent : function(){\r
+ var me = this;\r
+ if(me.browserEvent){\r
+ if(me.browserEvent.type == 'mousedown'){\r
+ Ext.EventManager.stoppedMouseDownEvent.fire(me);\r
+ }\r
+ E.stopEvent(me.browserEvent);\r
+ }\r
+ },\r
\r
-// dom is optional\r
-El.Flyweight = function(dom){\r
- this.dom = dom;\r
-};\r
+ /**\r
+ * Prevents the browsers default handling of the event.\r
+ */\r
+ preventDefault : function(){\r
+ if(this.browserEvent){\r
+ E.preventDefault(this.browserEvent);\r
+ }\r
+ },\r
\r
-El.Flyweight.prototype = new flyFn();\r
-El.Flyweight.prototype.isFlyweight = true;\r
-El._flyweights = {};\r
+ /**\r
+ * Cancels bubbling of the event.\r
+ */\r
+ stopPropagation : function(){\r
+ var me = this;\r
+ if(me.browserEvent){\r
+ if(me.browserEvent.type == 'mousedown'){\r
+ Ext.EventManager.stoppedMouseDownEvent.fire(me);\r
+ }\r
+ E.stopPropagation(me.browserEvent);\r
+ }\r
+ },\r
\r
-/**\r
- * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -\r
- * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>\r
- * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by\r
- * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}\r
- * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>\r
- * @param {String/HTMLElement} el The dom node or id\r
- * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts\r
- * (e.g. internally Ext uses "_global")\r
- * @return {Element} The shared Element object (or null if no matching element was found)\r
- * @member Ext.Element\r
- * @method fly\r
- */\r
-El.fly = function(el, named){\r
- var ret = null;\r
- named = named || '_global';\r
+ /**\r
+ * Gets the character code for the event.\r
+ * @return {Number}\r
+ */\r
+ getCharCode : function(){\r
+ return this.charCode || this.keyCode;\r
+ },\r
\r
- if (el = Ext.getDom(el)) {\r
- (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;\r
- ret = El._flyweights[named];\r
- }\r
- return ret;\r
-};\r
+ /**\r
+ * Returns a normalized keyCode for the event.\r
+ * @return {Number} The key code\r
+ */\r
+ getKey : function(){\r
+ return this.normalizeKey(this.keyCode || this.charCode)\r
+ },\r
\r
-/**\r
- * Retrieves Ext.Element objects.\r
- * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method\r
- * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by\r
- * its ID, use {@link Ext.ComponentMgr#get}.</p>\r
- * <p>Uses simple caching to consistently return the same object. Automatically fixes if an\r
- * object was recreated with the same id via AJAX or DOM.</p>\r
- * Shorthand of {@link Ext.Element#get}\r
- * @param {Mixed} el The id of the node, a DOM Node or an existing Element.\r
- * @return {Element} The Element object (or null if no matching element was found)\r
- * @member Ext\r
- * @method get\r
- */\r
-Ext.get = El.get;\r
+ // private\r
+ normalizeKey: function(k){\r
+ return Ext.isSafari ? (safariKeys[k] || k) : k;\r
+ },\r
\r
-/**\r
- * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -\r
- * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>\r
- * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by\r
- * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}\r
- * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>\r
- * @param {String/HTMLElement} el The dom node or id\r
- * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts\r
- * (e.g. internally Ext uses "_global")\r
- * @return {Element} The shared Element object (or null if no matching element was found)\r
- * @member Ext\r
- * @method fly\r
- */\r
-Ext.fly = El.fly;\r
-\r
-// speedy lookup for elements never to box adjust\r
-var noBoxAdjust = Ext.isStrict ? {\r
- select:1\r
-} : {\r
- input:1, select:1, textarea:1\r
-};\r
-if(Ext.isIE || Ext.isGecko){\r
- noBoxAdjust['button'] = 1;\r
-}\r
-\r
-\r
-Ext.EventManager.on(window, 'unload', function(){\r
- delete El.cache;\r
- delete El.dataCache;\r
- delete El._flyweights;\r
-});\r
-})();\r
-/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({ \r
- /**\r
- * Stops the specified event(s) from bubbling and optionally prevents the default action\r
- * @param {String/Array} eventName an event / array of events to stop from bubbling\r
- * @param {Boolean} preventDefault (optional) true to prevent the default action too\r
- * @return {Ext.Element} this\r
- */\r
- swallowEvent : function(eventName, preventDefault){\r
- var me = this;\r
- function fn(e){\r
- e.stopPropagation();\r
- if(preventDefault){\r
- e.preventDefault();\r
- }\r
- }\r
- if(Ext.isArray(eventName)){ \r
- Ext.each(eventName, function(e) {\r
- me.on(e, fn);\r
- });\r
- return me;\r
- }\r
- me.on(eventName, fn);\r
- return me;\r
- },\r
- \r
- /**\r
- * Create an event handler on this element such that when the event fires and is handled by this element,\r
- * it will be relayed to another object (i.e., fired again as if it originated from that object instead).\r
- * @param {String} eventName The type of event to relay\r
- * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context\r
- * for firing the relayed event\r
- */\r
- relayEvent : function(eventName, observable){\r
- this.on(eventName, function(e){\r
- observable.fireEvent(eventName, e);\r
- });\r
- },\r
- \r
- /**\r
- * Removes worthless text nodes\r
- * @param {Boolean} forceReclean (optional) By default the element\r
- * keeps track if it has been cleaned already so\r
- * you can call this over and over. However, if you update the element and\r
- * need to force a reclean, you can pass true.\r
- */\r
- clean : function(forceReclean){\r
- var me = this, \r
- dom = me.dom,\r
- n = dom.firstChild, \r
- ni = -1;\r
- \r
- if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){\r
- return me;\r
- } \r
- \r
- while(n){\r
- var nx = n.nextSibling;\r
- if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){\r
- dom.removeChild(n);\r
- }else{\r
- n.nodeIndex = ++ni;\r
- }\r
- n = nx;\r
- }\r
- Ext.Element.data(dom, 'isCleaned', true);\r
- return me;\r
- },\r
- \r
- /**\r
- * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object\r
- * parameter as {@link Ext.Updater#update}\r
- * @return {Ext.Element} this\r
- */\r
- load : function(){\r
- var um = this.getUpdater();\r
- um.update.apply(um, arguments);\r
- return this;\r
- },\r
-\r
- /**\r
- * Gets this element's {@link Ext.Updater Updater}\r
- * @return {Ext.Updater} The Updater\r
- */\r
- getUpdater : function(){\r
- return this.updateManager || (this.updateManager = new Ext.Updater(this));\r
- },\r
- \r
- /**\r
- * Update the innerHTML of this element, optionally searching for and processing scripts\r
- * @param {String} html The new HTML\r
- * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)\r
- * @param {Function} callback (optional) For async script loading you can be notified when the update completes\r
- * @return {Ext.Element} this\r
- */\r
- update : function(html, loadScripts, callback){\r
- html = html || "";\r
- \r
- if(loadScripts !== true){\r
- this.dom.innerHTML = html;\r
- if(Ext.isFunction(callback)){\r
- callback();\r
- }\r
- return this;\r
- }\r
- \r
- var id = Ext.id(),\r
- dom = this.dom;\r
-\r
- html += '<span id="' + id + '"></span>';\r
-\r
- Ext.lib.Event.onAvailable(id, function(){\r
- var DOC = document,\r
- hd = DOC.getElementsByTagName("head")[0],\r
- re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,\r
- srcRe = /\ssrc=([\'\"])(.*?)\1/i,\r
- typeRe = /\stype=([\'\"])(.*?)\1/i,\r
- match,\r
- attrs,\r
- srcMatch,\r
- typeMatch,\r
- el,\r
- s;\r
-\r
- while((match = re.exec(html))){\r
- attrs = match[1];\r
- srcMatch = attrs ? attrs.match(srcRe) : false;\r
- if(srcMatch && srcMatch[2]){\r
- s = DOC.createElement("script");\r
- s.src = srcMatch[2];\r
- typeMatch = attrs.match(typeRe);\r
- if(typeMatch && typeMatch[2]){\r
- s.type = typeMatch[2];\r
- }\r
- hd.appendChild(s);\r
- }else if(match[2] && match[2].length > 0){\r
- if(window.execScript) {\r
- window.execScript(match[2]);\r
- } else {\r
- window.eval(match[2]);\r
- }\r
- }\r
- }\r
- el = DOC.getElementById(id);\r
- if(el){Ext.removeNode(el);}\r
- if(Ext.isFunction(callback)){\r
- callback();\r
- }\r
- });\r
- dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");\r
- return this;\r
- },\r
- \r
- /**\r
- * Creates a proxy element of this element\r
- * @param {String/Object} config The class name of the proxy element or a DomHelper config object\r
- * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)\r
- * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)\r
- * @return {Ext.Element} The new proxy element\r
- */\r
- createProxy : function(config, renderTo, matchBox){\r
- config = Ext.isObject(config) ? config : {tag : "div", cls: config};\r
+ /**\r
+ * Gets the x coordinate of the event.\r
+ * @return {Number}\r
+ */\r
+ getPageX : function(){\r
+ return this.xy[0];\r
+ },\r
\r
- var me = this,\r
- proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :\r
- Ext.DomHelper.insertBefore(me.dom, config, true); \r
- \r
- if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded\r
- proxy.setBox(me.getBox());\r
- }\r
- return proxy;\r
- }\r
-});\r
+ /**\r
+ * Gets the y coordinate of the event.\r
+ * @return {Number}\r
+ */\r
+ getPageY : function(){\r
+ return this.xy[1];\r
+ },\r
\r
-Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;\r
+ /**\r
+ * Gets the page coordinates of the event.\r
+ * @return {Array} The xy values like [x, y]\r
+ */\r
+ getXY : function(){\r
+ return this.xy;\r
+ },\r
\r
-// private\r
-Ext.Element.uncache = function(el){\r
- for(var i = 0, a = arguments, len = a.length; i < len; i++) {\r
- if(a[i]){\r
- delete Ext.Element.cache[a[i].id || a[i]];\r
- }\r
- }\r
-};/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Gets the x,y coordinates specified by the anchor position on the element.\r
- * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}\r
- * for details on supported anchor positions.\r
- * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead\r
- * of page coordinates\r
- * @param {Object} size (optional) An object containing the size to use for calculating anchor position\r
- * {width: (target width), height: (target height)} (defaults to the element's current size)\r
- * @return {Array} [x, y] An array containing the element's x and y coordinates\r
- */\r
- getAnchorXY : function(anchor, local, s){\r
- //Passing a different size is useful for pre-calculating anchors,\r
- //especially for anchored animations that change the el size.\r
- anchor = (anchor || "tl").toLowerCase();\r
- s = s || {};\r
- \r
- var me = this, \r
- vp = me.dom == document.body || me.dom == document,\r
- w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),\r
- h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(), \r
- xy, \r
- r = Math.round,\r
- o = me.getXY(),\r
- scroll = me.getScroll(),\r
- extraX = vp ? scroll.left : !local ? o[0] : 0,\r
- extraY = vp ? scroll.top : !local ? o[1] : 0,\r
- hash = {\r
- c : [r(w * 0.5), r(h * 0.5)],\r
- t : [r(w * 0.5), 0],\r
- l : [0, r(h * 0.5)],\r
- r : [w, r(h * 0.5)],\r
- b : [r(w * 0.5), h],\r
- tl : [0, 0], \r
- bl : [0, h],\r
- br : [w, h],\r
- tr : [w, 0]\r
- };\r
- \r
- xy = hash[anchor]; \r
- return [xy[0] + extraX, xy[1] + extraY]; \r
- },\r
+ /**\r
+ * Gets the target for the event.\r
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target\r
+ * @param {Number/Mixed} maxDepth (optional) The max depth to\r
+ search as a number or element (defaults to 10 || document.body)\r
+ * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node\r
+ * @return {HTMLelement}\r
+ */\r
+ getTarget : function(selector, maxDepth, returnEl){\r
+ return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);\r
+ },\r
\r
- /**\r
- * Anchors an element to another element and realigns it when the window is resized.\r
- * @param {Mixed} element The element to align to.\r
- * @param {String} position The position to align to.\r
- * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
- * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object\r
- * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter\r
- * is a number, it is used as the buffer delay (defaults to 50ms).\r
- * @param {Function} callback The function to call after the animation finishes\r
- * @return {Ext.Element} this\r
- */\r
- anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){ \r
- var me = this,\r
- dom = me.dom;\r
- \r
- function action(){\r
- Ext.fly(dom).alignTo(el, alignment, offsets, animate);\r
- Ext.callback(callback, Ext.fly(dom));\r
- }\r
- \r
- Ext.EventManager.onWindowResize(action, me);\r
- \r
- if(!Ext.isEmpty(monitorScroll)){\r
- Ext.EventManager.on(window, 'scroll', action, me,\r
- {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});\r
- }\r
- action.call(me); // align immediately\r
- return me;\r
- },\r
+ /**\r
+ * Gets the related target.\r
+ * @return {HTMLElement}\r
+ */\r
+ getRelatedTarget : function(){\r
+ return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;\r
+ },\r
\r
- /**\r
- * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the\r
- * supported position values.\r
- * @param {Mixed} element The element to align to.\r
- * @param {String} position The position to align to.\r
- * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
- * @return {Array} [x, y]\r
- */\r
- getAlignToXY : function(el, p, o){ \r
- el = Ext.get(el);\r
- \r
- if(!el || !el.dom){\r
- throw "Element.alignToXY with an element that doesn't exist";\r
- }\r
- \r
- o = o || [0,0];\r
- p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase(); \r
- \r
- var me = this,\r
- d = me.dom,\r
- a1,\r
- a2,\r
- x,\r
- y,\r
- //constrain the aligned el to viewport if necessary\r
- w,\r
- h,\r
- r,\r
- dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie\r
- dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie\r
- p1y,\r
- p1x, \r
- p2y,\r
- p2x,\r
- swapY,\r
- swapX,\r
- doc = document,\r
- docElement = doc.documentElement,\r
- docBody = doc.body,\r
- scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,\r
- scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,\r
- c = false, //constrain to viewport\r
- p1 = "", \r
- p2 = "",\r
- m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
- \r
- if(!m){\r
- throw "Element.alignTo with an invalid alignment " + p;\r
- }\r
- \r
- p1 = m[1]; \r
- p2 = m[2]; \r
- c = !!m[3];\r
-\r
- //Subtract the aligned el's internal xy from the target's offset xy\r
- //plus custom offset to get the aligned el's new offset xy\r
- a1 = me.getAnchorXY(p1, true);\r
- a2 = el.getAnchorXY(p2, false);\r
-\r
- x = a2[0] - a1[0] + o[0];\r
- y = a2[1] - a1[1] + o[1];\r
-\r
- if(c){ \r
- w = me.getWidth();\r
- h = me.getHeight();\r
- r = el.getRegion(); \r
- //If we are at a viewport boundary and the aligned el is anchored on a target border that is\r
- //perpendicular to the vp border, allow the aligned el to slide on that border,\r
- //otherwise swap the aligned el to the opposite border of the target.\r
- p1y = p1.charAt(0);\r
- p1x = p1.charAt(p1.length-1);\r
- p2y = p2.charAt(0);\r
- p2x = p2.charAt(p2.length-1);\r
- swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));\r
- swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r")); \r
- \r
-\r
- if (x + w > dw + scrollX) {\r
- x = swapX ? r.left-w : dw+scrollX-w;\r
- }\r
- if (x < scrollX) {\r
- x = swapX ? r.right : scrollX;\r
- }\r
- if (y + h > dh + scrollY) {\r
- y = swapY ? r.top-h : dh+scrollY-h;\r
+ /**\r
+ * Normalizes mouse wheel delta across browsers\r
+ * @return {Number} The delta\r
+ */\r
+ getWheelDelta : function(){\r
+ var e = this.browserEvent;\r
+ var delta = 0;\r
+ if(e.wheelDelta){ /* IE/Opera. */\r
+ delta = e.wheelDelta/120;\r
+ }else if(e.detail){ /* Mozilla case. */\r
+ delta = -e.detail/3;\r
}\r
- if (y < scrollY){\r
- y = swapY ? r.bottom : scrollY;\r
- }\r
- }\r
- return [x,y];\r
- },\r
-\r
- /**\r
- * Aligns this element with another element relative to the specified anchor points. If the other element is the\r
- * document it aligns it to the viewport.\r
- * The position parameter is optional, and can be specified in any one of the following formats:\r
- * <ul>\r
- * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>\r
- * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.\r
- * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been\r
- * deprecated in favor of the newer two anchor syntax below</i>.</li>\r
- * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the\r
- * element's anchor point, and the second value is used as the target's anchor point.</li>\r
- * </ul>\r
- * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of\r
- * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to\r
- * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than\r
- * that specified in order to enforce the viewport constraints.\r
- * Following are all of the supported anchor positions:\r
-<pre>\r
-Value Description\r
------ -----------------------------\r
-tl The top left corner (default)\r
-t The center of the top edge\r
-tr The top right corner\r
-l The center of the left edge\r
-c In the center of the element\r
-r The center of the right edge\r
-bl The bottom left corner\r
-b The center of the bottom edge\r
-br The bottom right corner\r
-</pre>\r
-Example Usage:\r
-<pre><code>\r
-// align el to other-el using the default positioning ("tl-bl", non-constrained)\r
-el.alignTo("other-el");\r
-\r
-// align the top left corner of el with the top right corner of other-el (constrained to viewport)\r
-el.alignTo("other-el", "tr?");\r
-\r
-// align the bottom right corner of el with the center left edge of other-el\r
-el.alignTo("other-el", "br-l?");\r
-\r
-// align the center of el with the bottom left corner of other-el and\r
-// adjust the x position by -6 pixels (and the y position by 0)\r
-el.alignTo("other-el", "c-bl", [-6, 0]);\r
-</code></pre>\r
- * @param {Mixed} element The element to align to.\r
- * @param {String} position The position to align to.\r
- * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- alignTo : function(element, position, offsets, animate){\r
- var me = this;\r
- return me.setXY(me.getAlignToXY(element, position, offsets),\r
- me.preanim && !!animate ? me.preanim(arguments, 3) : false);\r
- },\r
- \r
- // private ==> used outside of core\r
- adjustForConstraints : function(xy, parent, offsets){\r
- return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;\r
- },\r
-\r
- // private ==> used outside of core\r
- getConstrainToXY : function(el, local, offsets, proposedXY){ \r
- var os = {top:0, left:0, bottom:0, right: 0};\r
-\r
- return function(el, local, offsets, proposedXY){\r
- el = Ext.get(el);\r
- offsets = offsets ? Ext.applyIf(offsets, os) : os;\r
+ return delta;\r
+ },\r
\r
- var vw, vh, vx = 0, vy = 0;\r
- if(el.dom == document.body || el.dom == document){\r
- vw =Ext.lib.Dom.getViewWidth();\r
- vh = Ext.lib.Dom.getViewHeight();\r
- }else{\r
- vw = el.dom.clientWidth;\r
- vh = el.dom.clientHeight;\r
- if(!local){\r
- var vxy = el.getXY();\r
- vx = vxy[0];\r
- vy = vxy[1];\r
- }\r
+ /**\r
+ * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.\r
+ * Example usage:<pre><code>\r
+ // Handle click on any child of an element\r
+ Ext.getBody().on('click', function(e){\r
+ if(e.within('some-el')){\r
+ alert('Clicked on a child of some-el!');\r
}\r
+ });\r
\r
- var s = el.getScroll();\r
-\r
- vx += offsets.left + s.left;\r
- vy += offsets.top + s.top;\r
-\r
- vw -= offsets.right;\r
- vh -= offsets.bottom;\r
-\r
- var vr = vx+vw;\r
- var vb = vy+vh;\r
-\r
- var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);\r
- var x = xy[0], y = xy[1];\r
- var w = this.dom.offsetWidth, h = this.dom.offsetHeight;\r
-\r
- // only move it if it needs it\r
- var moved = false;\r
-\r
- // first validate right/bottom\r
- if((x + w) > vr){\r
- x = vr - w;\r
- moved = true;\r
- }\r
- if((y + h) > vb){\r
- y = vb - h;\r
- moved = true;\r
+ // Handle click directly on an element, ignoring clicks on child nodes\r
+ Ext.getBody().on('click', function(e,t){\r
+ if((t.id == 'some-el') && !e.within(t, true)){\r
+ alert('Clicked directly on some-el!');\r
}\r
- // then make sure top/left isn't negative\r
- if(x < vx){\r
- x = vx;\r
- moved = true;\r
- }\r
- if(y < vy){\r
- y = vy;\r
- moved = true;\r
+ });\r
+ </code></pre>\r
+ * @param {Mixed} el The id, DOM element or Ext.Element to check\r
+ * @param {Boolean} related (optional) true to test if the related target is within el instead of the target\r
+ * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target\r
+ * @return {Boolean}\r
+ */\r
+ within : function(el, related, allowEl){\r
+ if(el){\r
+ var t = this[related ? "getRelatedTarget" : "getTarget"]();\r
+ return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));\r
}\r
- return moved ? [x, y] : false;\r
- };\r
- }(),\r
- \r
- \r
- \r
-// el = Ext.get(el);\r
-// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});\r
-\r
-// var me = this,\r
-// doc = document,\r
-// s = el.getScroll(),\r
-// vxy = el.getXY(),\r
-// vx = offsets.left + s.left, \r
-// vy = offsets.top + s.top, \r
-// vw = -offsets.right, \r
-// vh = -offsets.bottom, \r
-// vr,\r
-// vb,\r
-// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),\r
-// x = xy[0],\r
-// y = xy[1],\r
-// w = me.dom.offsetWidth, h = me.dom.offsetHeight,\r
-// moved = false; // only move it if it needs it\r
-// \r
-// \r
-// if(el.dom == doc.body || el.dom == doc){\r
-// vw += Ext.lib.Dom.getViewWidth();\r
-// vh += Ext.lib.Dom.getViewHeight();\r
-// }else{\r
-// vw += el.dom.clientWidth;\r
-// vh += el.dom.clientHeight;\r
-// if(!local){ \r
-// vx += vxy[0];\r
-// vy += vxy[1];\r
-// }\r
-// }\r
-\r
-// // first validate right/bottom\r
-// if(x + w > vx + vw){\r
-// x = vx + vw - w;\r
-// moved = true;\r
-// }\r
-// if(y + h > vy + vh){\r
-// y = vy + vh - h;\r
-// moved = true;\r
-// }\r
-// // then make sure top/left isn't negative\r
-// if(x < vx){\r
-// x = vx;\r
-// moved = true;\r
-// }\r
-// if(y < vy){\r
-// y = vy;\r
-// moved = true;\r
-// }\r
-// return moved ? [x, y] : false;\r
-// },\r
- \r
- /**\r
- * Calculates the x, y to center this element on the screen\r
- * @return {Array} The x, y values [x, y]\r
- */\r
- getCenterXY : function(){\r
- return this.getAlignToXY(document, 'c-c');\r
- },\r
+ return false;\r
+ }\r
+ };\r
\r
- /**\r
- * Centers the Element in either the viewport, or another Element.\r
- * @param {Mixed} centerIn (optional) The element in which to center the element.\r
- */\r
- center : function(centerIn){\r
- return this.alignTo(centerIn || document, 'c-c'); \r
- } \r
-});\r
+ return new Ext.EventObjectImpl();\r
+}();\r
+\r
+/**
+* @class Ext.EventManager
+*/
+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)$/,
+ curWidth = 0,
+ curHeight = 0,
+ // note 1: IE fires ONLY the keydown event on specialkey autorepeat
+ // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
+ // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
+ useKeydown = Ext.isWebKit ?
+ Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
+ !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
+
+ return {
+ // private
+ doResizeEvent: function(){
+ var h = D.getViewHeight(),
+ w = D.getViewWidth();
+
+ //whacky problem in IE where the resize event will fire even though the w/h are the same.
+ if(curHeight != h || curWidth != w){
+ resizeEvent.fire(curWidth = w, curHeight = h);
+ }
+ },
+
+ /**
+ * Adds a listener to be notified when the browser window is resized and provides resize event buffering (50 milliseconds),
+ * passes new viewport width and height to handlers.
+ * @param {Function} fn The handler function the window resize event invokes.
+ * @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
+ */
+ 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);
+ },
+
+ // exposed only to allow manual firing
+ fireWindowResize : function(){
+ if(resizeEvent){
+ if((Ext.isIE||Ext.isAir) && resizeTask){
+ resizeTask.delay(50);
+ }else{
+ resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
+ }
+ }
+ },
+
+ /**
+ * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
+ * @param {Function} fn The function the event invokes.
+ * @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
+ */
+ 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);
+ },
+
+ /**
+ * Removes the passed window resize listener.
+ * @param {Function} fn The method the event invokes
+ * @param {Object} scope The scope of handler
+ */
+ removeResizeListener : function(fn, scope){
+ if(resizeEvent){
+ resizeEvent.removeListener(fn, scope);
+ }
+ },
+
+ // private
+ fireResize : function(){
+ if(resizeEvent){
+ resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
+ }
+ },
+
+ /**
+ * The frequency, in milliseconds, to check for text resize events (defaults to 50)
+ */
+ textResizeInterval : 50,
+
+ /**
+ * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
+ */
+ ieDeferSrc : false,
+
+ // protected for use inside the framework
+ // detects whether we should use keydown or keypress based on the browser.
+ useKeydown: useKeydown
+ };
+}());
+
+Ext.EventManager.on = Ext.EventManager.addListener;
+
+
+Ext.apply(Ext.EventObjectImpl.prototype, {
+ /** Key constant @type Number */
+ BACKSPACE: 8,
+ /** Key constant @type Number */
+ TAB: 9,
+ /** Key constant @type Number */
+ NUM_CENTER: 12,
+ /** Key constant @type Number */
+ ENTER: 13,
+ /** Key constant @type Number */
+ RETURN: 13,
+ /** Key constant @type Number */
+ SHIFT: 16,
+ /** Key constant @type Number */
+ CTRL: 17,
+ CONTROL : 17, // legacy
+ /** Key constant @type Number */
+ ALT: 18,
+ /** Key constant @type Number */
+ PAUSE: 19,
+ /** Key constant @type Number */
+ CAPS_LOCK: 20,
+ /** Key constant @type Number */
+ ESC: 27,
+ /** Key constant @type Number */
+ SPACE: 32,
+ /** Key constant @type Number */
+ PAGE_UP: 33,
+ PAGEUP : 33, // legacy
+ /** Key constant @type Number */
+ PAGE_DOWN: 34,
+ PAGEDOWN : 34, // legacy
+ /** Key constant @type Number */
+ END: 35,
+ /** Key constant @type Number */
+ HOME: 36,
+ /** Key constant @type Number */
+ LEFT: 37,
+ /** Key constant @type Number */
+ UP: 38,
+ /** Key constant @type Number */
+ RIGHT: 39,
+ /** Key constant @type Number */
+ DOWN: 40,
+ /** Key constant @type Number */
+ PRINT_SCREEN: 44,
+ /** Key constant @type Number */
+ INSERT: 45,
+ /** Key constant @type Number */
+ DELETE: 46,
+ /** Key constant @type Number */
+ ZERO: 48,
+ /** Key constant @type Number */
+ ONE: 49,
+ /** Key constant @type Number */
+ TWO: 50,
+ /** Key constant @type Number */
+ THREE: 51,
+ /** Key constant @type Number */
+ FOUR: 52,
+ /** Key constant @type Number */
+ FIVE: 53,
+ /** Key constant @type Number */
+ SIX: 54,
+ /** Key constant @type Number */
+ SEVEN: 55,
+ /** Key constant @type Number */
+ EIGHT: 56,
+ /** Key constant @type Number */
+ NINE: 57,
+ /** Key constant @type Number */
+ A: 65,
+ /** Key constant @type Number */
+ B: 66,
+ /** Key constant @type Number */
+ C: 67,
+ /** Key constant @type Number */
+ D: 68,
+ /** Key constant @type Number */
+ E: 69,
+ /** Key constant @type Number */
+ F: 70,
+ /** Key constant @type Number */
+ G: 71,
+ /** Key constant @type Number */
+ H: 72,
+ /** Key constant @type Number */
+ I: 73,
+ /** Key constant @type Number */
+ J: 74,
+ /** Key constant @type Number */
+ K: 75,
+ /** Key constant @type Number */
+ L: 76,
+ /** Key constant @type Number */
+ M: 77,
+ /** Key constant @type Number */
+ N: 78,
+ /** Key constant @type Number */
+ O: 79,
+ /** Key constant @type Number */
+ P: 80,
+ /** Key constant @type Number */
+ Q: 81,
+ /** Key constant @type Number */
+ R: 82,
+ /** Key constant @type Number */
+ S: 83,
+ /** Key constant @type Number */
+ T: 84,
+ /** Key constant @type Number */
+ U: 85,
+ /** Key constant @type Number */
+ V: 86,
+ /** Key constant @type Number */
+ W: 87,
+ /** Key constant @type Number */
+ X: 88,
+ /** Key constant @type Number */
+ Y: 89,
+ /** Key constant @type Number */
+ Z: 90,
+ /** Key constant @type Number */
+ CONTEXT_MENU: 93,
+ /** Key constant @type Number */
+ NUM_ZERO: 96,
+ /** Key constant @type Number */
+ NUM_ONE: 97,
+ /** Key constant @type Number */
+ NUM_TWO: 98,
+ /** Key constant @type Number */
+ NUM_THREE: 99,
+ /** Key constant @type Number */
+ NUM_FOUR: 100,
+ /** Key constant @type Number */
+ NUM_FIVE: 101,
+ /** Key constant @type Number */
+ NUM_SIX: 102,
+ /** Key constant @type Number */
+ NUM_SEVEN: 103,
+ /** Key constant @type Number */
+ NUM_EIGHT: 104,
+ /** Key constant @type Number */
+ NUM_NINE: 105,
+ /** Key constant @type Number */
+ NUM_MULTIPLY: 106,
+ /** Key constant @type Number */
+ NUM_PLUS: 107,
+ /** Key constant @type Number */
+ NUM_MINUS: 109,
+ /** Key constant @type Number */
+ NUM_PERIOD: 110,
+ /** Key constant @type Number */
+ NUM_DIVISION: 111,
+ /** Key constant @type Number */
+ F1: 112,
+ /** Key constant @type Number */
+ F2: 113,
+ /** Key constant @type Number */
+ F3: 114,
+ /** Key constant @type Number */
+ F4: 115,
+ /** Key constant @type Number */
+ F5: 116,
+ /** Key constant @type Number */
+ F6: 117,
+ /** Key constant @type Number */
+ F7: 118,
+ /** Key constant @type Number */
+ F8: 119,
+ /** Key constant @type Number */
+ F9: 120,
+ /** Key constant @type Number */
+ F10: 121,
+ /** Key constant @type Number */
+ F11: 122,
+ /** Key constant @type Number */
+ F12: 123,
+
+ /** @private */
+ isNavKeyPress : function(){
+ var me = this,
+ k = this.normalizeKey(me.keyCode);
+ return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down
+ 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) || // Backspace
+ (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
+ (k >= 44 && k <= 45); // Print Screen, Insert
+ },
+
+ getPoint : function(){
+ return new Ext.lib.Point(this.xy[0], this.xy[1]);
+ },
+
+ /**
+ * Returns true if the control, meta, shift or alt key was pressed during this event.
+ * @return {Boolean}
+ */
+ hasModifier : function(){
+ return ((this.ctrlKey || this.altKey) || this.shiftKey);
+ }
+});/**
+ * @class Ext.Element
+ * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
+ * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
+ * <p>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.</p>
+ * Usage:<br>
+<pre><code>
+// by id
+var el = Ext.get("my-div");
+
+// by DOM element reference
+var el = Ext.get(myDivElement);
+</code></pre>
+ * <b>Animations</b><br />
+ * <p>When an element is manipulated, by default there is no animation.</p>
+ * <pre><code>
+var el = Ext.get("my-div");
+
+// no animation
+el.setWidth(100);
+ * </code></pre>
+ * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
+ * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
+ * <pre><code>
+// default animation
+el.setWidth(100, true);
+ * </code></pre>
+ *
+ * <p>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:</p>
+<pre>
+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
+</pre>
+ *
+ * <pre><code>
+// 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);
+ * </code></pre>
+ * <p>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:</p>
+ * <pre><code>
+// using the "anim" property to get the Anim object
+if(opt.anim.isAnimated()){
+ opt.anim.stop();
+}
+ * </code></pre>
+ * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
+ * <p><b> Composite (Collections of) Elements</b></p>
+ * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
+ * @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 D = Ext.lib.Dom,
+ DH = Ext.DomHelper,
+ E = Ext.lib.Event,
+ A = Ext.lib.Anim,
+ 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:<ul>
+ * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
+ * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
+ * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
+ * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
+ * </ul>
+ * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to this Element.</b>.
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:<ul>
+ * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to this Element.</b></div></li>
+ * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
+ * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
+ * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
+ * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
+ * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
+ * <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
+ * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+ * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+ * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
+ * by the specified number of milliseconds. If the event fires again within that time, the original
+ * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+ * </ul><br>
+ * <p>
+ * <b>Combining Options</b><br>
+ * 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:<br>
+ * <br>
+ * 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.<div style="margin: 5px 20px 20px;">
+ * Code:<pre><code>
+el.on('click', this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});</code></pre></p>
+ * <p>
+ * <b>Attaching multiple handlers in 1 call</b><br>
+ * The method also allows for a single argument to be passed which is a config object containing properties
+ * which specify multiple handlers.</p>
+ * <p>
+ * Code:<pre><code>
+el.on({
+ 'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ 'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ 'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});</code></pre>
+ * <p>
+ * Or a shorthand syntax:<br>
+ * Code:<pre><code></p>
+el.on({
+ 'click' : this.onClick,
+ 'mouseover' : this.onMouseOver,
+ 'mouseout' : this.onMouseOut,
+ scope: this
+});
+ * </code></pre></p>
+ * <p><b>delegate</b></p>
+ * <p>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:<pre><code>
+// 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'
+ }
+);
+ * </code></pre></p>
+ * @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.
+ * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
+ * listener, the same scope must be specified here.
+ * Example:
+ * <pre><code>
+el.removeListener('click', this.handlerFn);
+// or
+el.un('click', this.handlerFn);
+</code></pre>
+ * @param {String} eventName The name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> 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;
+ },
+
+ /**
+ * <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element
+ * from a specified URL. Note that this is subject to the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin Policy</a></p>
+ * <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt><script></tt> elements. This is a browser restriction.</p>
+ * @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;
+ },
+
+ /**
+ * <p>Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode}</p>
+ */
+ remove : function(){
+ var me = this,
+ dom = me.dom;
+
+ if (dom) {
+ delete me.dom;
+ 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 (<code>this</code> 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 <tt>options</tt> 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) {
+ if (this.dom) {
+ 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 name of event to handle.
+ * @param {Function} fn The handler function the event invokes.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
+ * @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 name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @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
+ */
+
+/**
+ * Retrieves Ext.Element objects.
+ * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
+ * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
+ * its ID, use {@link Ext.ComponentMgr#get}.</p>
+ * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
+ * object was recreated with the same id via AJAX or DOM.</p>
+ * @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 (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) { // dom element
+ 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){
+ el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
+ // catch case where it hasn't been appended
+ }
+ 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;
+};
+
+El.addToCache = function(el, id){
+ id = id || el.id;
+ EC[id] = {
+ el: el,
+ data: {},
+ events: {}
+ };
+ return el;
+};
+
+// private method for getting and setting element data
+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);
+ }
+};
+
+// 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.collectorThreadId);
+ } else {
+ var eid,
+ el,
+ d,
+ o;
+
+ for(eid in EC){
+ o = EC[eid];
+ if(o.skipGC){
+ continue;
+ }
+ el = o.el;
+ 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))){
+ if(Ext.enableListenerCollection){
+ Ext.EventManager.removeAll(d);
+ }
+ delete EC[eid];
+ }
+ }
+ // Cleanup IE Object leaks
+ 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;
+
+// dom is optional
+El.Flyweight = function(dom){
+ this.dom = dom;
+};
+
+El.Flyweight.prototype = new flyFn();
+El.Flyweight.prototype.isFlyweight = true;
+El._flyweights = {};
+
+/**
+ * <p>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}</p>
+ * <p>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.</p>
+ * @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.
+ * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
+ * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
+ * its ID, use {@link Ext.ComponentMgr#get}.</p>
+ * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
+ * object was recreated with the same id via AJAX or DOM.</p>
+ * 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;
+
+/**
+ * <p>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}</p>
+ * <p>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.</p>
+ * @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 EC;
+ 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){
+ if (!this.dom) {
+ return this;
+ }
+ html = html || "";
+
+ if(loadScripts !== true){
+ this.dom.innerHTML = html;
+ if(Ext.isFunction(callback)){
+ callback();
+ }
+ return this;
+ }
+
+ var id = Ext.id(),
+ dom = this.dom;
+
+ html += '<span id="' + id + '"></span>';
+
+ Ext.lib.Event.onAvailable(id, function(){
+ var DOC = document,
+ hd = DOC.getElementsByTagName("head")[0],
+ re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
+ srcRe = /\ssrc=([\'\"])(.*?)\1/i,
+ typeRe = /\stype=([\'\"])(.*?)\1/i,
+ match,
+ attrs,
+ srcMatch,
+ typeMatch,
+ el,
+ s;
+
+ while((match = re.exec(html))){
+ attrs = match[1];
+ srcMatch = attrs ? attrs.match(srcRe) : false;
+ if(srcMatch && srcMatch[2]){
+ s = DOC.createElement("script");
+ s.src = srcMatch[2];
+ typeMatch = attrs.match(typeRe);
+ if(typeMatch && typeMatch[2]){
+ s.type = typeMatch[2];
+ }
+ hd.appendChild(s);
+ }else if(match[2] && match[2].length > 0){
+ if(window.execScript) {
+ window.execScript(match[2]);
+ } else {
+ window.eval(match[2]);
+ }
+ }
+ }
+ el = DOC.getElementById(id);
+ if(el){Ext.removeNode(el);}
+ if(Ext.isFunction(callback)){
+ callback();
+ }
+ });
+ dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
+ return this;
+ },
+
+ // inherit docs, overridden so we can add removeAnchor
+ removeAllListeners : function(){
+ this.removeAnchor();
+ Ext.EventManager.removeAll(this.dom);
+ return this;
+ },
+
+ /**
+ * Creates a proxy element of this element
+ * @param {String/Object} config The class name of the proxy element or a DomHelper config object
+ * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
+ * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
+ * @return {Ext.Element} The new proxy element
+ */
+ createProxy : function(config, renderTo, matchBox){
+ config = Ext.isObject(config) ? config : {tag : "div", cls: config};
+
+ var me = this,
+ proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
+ Ext.DomHelper.insertBefore(me.dom, config, true);
+
+ if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
+ proxy.setBox(me.getBox());
+ }
+ return proxy;
+ }
+});
+
+Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Gets the x,y coordinates specified by the anchor position on the element.
+ * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
+ * for details on supported anchor positions.
+ * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
+ * of page coordinates
+ * @param {Object} size (optional) An object containing the size to use for calculating anchor position
+ * {width: (target width), height: (target height)} (defaults to the element's current size)
+ * @return {Array} [x, y] An array containing the element's x and y coordinates
+ */
+ getAnchorXY : function(anchor, local, s){
+ //Passing a different size is useful for pre-calculating anchors,
+ //especially for anchored animations that change the el size.
+ anchor = (anchor || "tl").toLowerCase();
+ s = s || {};
+
+ var me = this,
+ vp = me.dom == document.body || me.dom == document,
+ w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
+ h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
+ xy,
+ r = Math.round,
+ o = me.getXY(),
+ scroll = me.getScroll(),
+ extraX = vp ? scroll.left : !local ? o[0] : 0,
+ extraY = vp ? scroll.top : !local ? o[1] : 0,
+ hash = {
+ c : [r(w * 0.5), r(h * 0.5)],
+ t : [r(w * 0.5), 0],
+ l : [0, r(h * 0.5)],
+ r : [w, r(h * 0.5)],
+ b : [r(w * 0.5), h],
+ tl : [0, 0],
+ bl : [0, h],
+ br : [w, h],
+ tr : [w, 0]
+ };
+
+ xy = hash[anchor];
+ return [xy[0] + extraX, xy[1] + extraY];
+ },
+
+ /**
+ * Anchors an element to another element and realigns it when the window is resized.
+ * @param {Mixed} element The element to align to.
+ * @param {String} position The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
+ * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
+ * is a number, it is used as the buffer delay (defaults to 50ms).
+ * @param {Function} callback The function to call after the animation finishes
+ * @return {Ext.Element} this
+ */
+ anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
+ var me = this,
+ dom = me.dom,
+ scroll = !Ext.isEmpty(monitorScroll),
+ action = function(){
+ Ext.fly(dom).alignTo(el, alignment, offsets, animate);
+ Ext.callback(callback, Ext.fly(dom));
+ },
+ anchor = this.getAnchor();
+
+ // previous listener anchor, remove it
+ this.removeAnchor();
+ Ext.apply(anchor, {
+ fn: action,
+ scroll: scroll
+ });
+
+ Ext.EventManager.onWindowResize(action, null);
+
+ if(scroll){
+ Ext.EventManager.on(window, 'scroll', action, null,
+ {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
+ }
+ action.call(me); // align immediately
+ return me;
+ },
+
+ /**
+ * Remove any anchor to this element. See {@link #anchorTo}.
+ * @return {Ext.Element} this
+ */
+ removeAnchor : function(){
+ var me = this,
+ anchor = this.getAnchor();
+
+ if(anchor && anchor.fn){
+ Ext.EventManager.removeResizeListener(anchor.fn);
+ if(anchor.scroll){
+ Ext.EventManager.un(window, 'scroll', anchor.fn);
+ }
+ delete anchor.fn;
+ }
+ return me;
+ },
+
+ // private
+ getAnchor : function(){
+ var data = Ext.Element.data,
+ dom = this.dom;
+ if (!dom) {
+ return;
+ }
+ var anchor = data(dom, '_anchor');
+
+ if(!anchor){
+ anchor = data(dom, '_anchor', {});
+ }
+ return anchor;
+ },
+
+ /**
+ * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
+ * supported position values.
+ * @param {Mixed} element The element to align to.
+ * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @return {Array} [x, y]
+ */
+ getAlignToXY : function(el, p, o){
+ el = Ext.get(el);
+
+ if(!el || !el.dom){
+ throw "Element.alignToXY with an element that doesn't exist";
+ }
+
+ o = o || [0,0];
+ p = (!p || p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
+
+ var me = this,
+ d = me.dom,
+ a1,
+ a2,
+ x,
+ y,
+ //constrain the aligned el to viewport if necessary
+ w,
+ h,
+ r,
+ dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
+ dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
+ p1y,
+ p1x,
+ p2y,
+ p2x,
+ swapY,
+ swapX,
+ doc = document,
+ docElement = doc.documentElement,
+ docBody = doc.body,
+ scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
+ scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
+ c = false, //constrain to viewport
+ p1 = "",
+ p2 = "",
+ m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
+
+ if(!m){
+ throw "Element.alignTo with an invalid alignment " + p;
+ }
+
+ p1 = m[1];
+ p2 = m[2];
+ c = !!m[3];
+
+ //Subtract the aligned el's internal xy from the target's offset xy
+ //plus custom offset to get the aligned el's new offset xy
+ a1 = me.getAnchorXY(p1, true);
+ a2 = el.getAnchorXY(p2, false);
+
+ x = a2[0] - a1[0] + o[0];
+ y = a2[1] - a1[1] + o[1];
+
+ if(c){
+ w = me.getWidth();
+ h = me.getHeight();
+ r = el.getRegion();
+ //If we are at a viewport boundary and the aligned el is anchored on a target border that is
+ //perpendicular to the vp border, allow the aligned el to slide on that border,
+ //otherwise swap the aligned el to the opposite border of the target.
+ p1y = p1.charAt(0);
+ p1x = p1.charAt(p1.length-1);
+ p2y = p2.charAt(0);
+ p2x = p2.charAt(p2.length-1);
+ swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
+ swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
+
+
+ if (x + w > dw + scrollX) {
+ x = swapX ? r.left-w : dw+scrollX-w;
+ }
+ if (x < scrollX) {
+ x = swapX ? r.right : scrollX;
+ }
+ if (y + h > dh + scrollY) {
+ y = swapY ? r.top-h : dh+scrollY-h;
+ }
+ if (y < scrollY){
+ y = swapY ? r.bottom : scrollY;
+ }
+ }
+ return [x,y];
+ },
+
+ /**
+ * Aligns this element with another element relative to the specified anchor points. If the other element is the
+ * document it aligns it to the viewport.
+ * The position parameter is optional, and can be specified in any one of the following formats:
+ * <ul>
+ * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
+ * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
+ * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
+ * deprecated in favor of the newer two anchor syntax below</i>.</li>
+ * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
+ * element's anchor point, and the second value is used as the target's anchor point.</li>
+ * </ul>
+ * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
+ * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
+ * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
+ * that specified in order to enforce the viewport constraints.
+ * Following are all of the supported anchor positions:
+<pre>
+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 corner
+</pre>
+Example Usage:
+<pre><code>
+// 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]);
+</code></pre>
+ * @param {Mixed} element The element to align to.
+ * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ alignTo : function(element, position, offsets, animate){
+ var me = this;
+ return me.setXY(me.getAlignToXY(element, position, offsets),
+ me.preanim && !!animate ? me.preanim(arguments, 3) : false);
+ },
+
+ // private ==> used outside of core
+ adjustForConstraints : function(xy, parent, offsets){
+ return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
+ },
+
+ // private ==> used outside of core
+ getConstrainToXY : function(el, local, offsets, proposedXY){
+ var os = {top:0, left:0, bottom:0, right: 0};
+
+ return function(el, local, offsets, proposedXY){
+ el = Ext.get(el);
+ offsets = offsets ? Ext.applyIf(offsets, os) : os;
+
+ var vw, vh, vx = 0, vy = 0;
+ if(el.dom == document.body || el.dom == document){
+ vw =Ext.lib.Dom.getViewWidth();
+ vh = Ext.lib.Dom.getViewHeight();
+ }else{
+ vw = el.dom.clientWidth;
+ vh = el.dom.clientHeight;
+ if(!local){
+ var vxy = el.getXY();
+ vx = vxy[0];
+ vy = vxy[1];
+ }
+ }
+
+ var s = el.getScroll();
+
+ vx += offsets.left + s.left;
+ vy += offsets.top + s.top;
+
+ vw -= offsets.right;
+ vh -= offsets.bottom;
+
+ var vr = vx+vw;
+ var vb = vy+vh;
+
+ var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
+ var x = xy[0], y = xy[1];
+ var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
+
+ // only move it if it needs it
+ var moved = false;
+
+ // first validate right/bottom
+ if((x + w) > vr){
+ x = vr - w;
+ moved = true;
+ }
+ if((y + h) > vb){
+ y = vb - h;
+ moved = true;
+ }
+ // then make sure top/left isn't negative
+ if(x < vx){
+ x = vx;
+ moved = true;
+ }
+ if(y < vy){
+ y = vy;
+ moved = true;
+ }
+ return moved ? [x, y] : false;
+ };
+ }(),
+
+
+
+// el = Ext.get(el);
+// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
+
+// var me = this,
+// doc = document,
+// s = el.getScroll(),
+// vxy = el.getXY(),
+// vx = offsets.left + s.left,
+// vy = offsets.top + s.top,
+// vw = -offsets.right,
+// vh = -offsets.bottom,
+// vr,
+// vb,
+// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
+// x = xy[0],
+// y = xy[1],
+// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
+// moved = false; // only move it if it needs it
+//
+//
+// if(el.dom == doc.body || el.dom == doc){
+// vw += Ext.lib.Dom.getViewWidth();
+// vh += Ext.lib.Dom.getViewHeight();
+// }else{
+// vw += el.dom.clientWidth;
+// vh += el.dom.clientHeight;
+// if(!local){
+// vx += vxy[0];
+// vy += vxy[1];
+// }
+// }
+
+// // first validate right/bottom
+// if(x + w > vx + vw){
+// x = vx + vw - w;
+// moved = true;
+// }
+// if(y + h > vy + vh){
+// y = vy + vh - h;
+// moved = true;
+// }
+// // then make sure top/left isn't negative
+// if(x < vx){
+// x = vx;
+// moved = true;
+// }
+// if(y < vy){
+// y = vy;
+// moved = true;
+// }
+// return moved ? [x, y] : false;
+// },
+
+ /**
+ * Calculates the x, y to center this element on the screen
+ * @return {Array} The x, y values [x, y]
+ */
+ getCenterXY : function(){
+ return this.getAlignToXY(document, 'c-c');
+ },
+
+ /**
+ * Centers the Element in either the viewport, or another Element.
+ * @param {Mixed} centerIn (optional) The element in which to center the element.
+ */
+ center : function(centerIn){
+ return this.alignTo(centerIn || document, 'c-c');
+ }
+});
/**\r
* @class Ext.Element\r
*/\r
/**\r
* Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).\r
* @param {String} selector The CSS selector\r
- * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)\r
* @return {CompositeElement/CompositeElementLite} The composite element\r
*/\r
- select : function(selector, unique){\r
- return Ext.Element.select(selector, unique, this.dom);\r
+ select : function(selector){\r
+ return Ext.Element.select(selector, this.dom);\r
},\r
\r
/**\r
* @param {String} selector The CSS selector\r
* @return {Array} An array of the matched nodes\r
*/\r
- query : function(selector, unique){\r
+ query : function(selector){\r
return DQ.select(selector, this.dom);\r
},\r
\r
}());/**\r
* @class Ext.Element\r
*/\r
+Ext.Element.addMethods({\r
+ /**\r
+ * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).\r
+ * @param {String} selector The CSS selector\r
+ * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)\r
+ * @return {CompositeElement/CompositeElementLite} The composite element\r
+ */\r
+ select : function(selector, unique){\r
+ return Ext.Element.select(selector, unique, this.dom);\r
+ }\r
+});/**\r
+ * @class Ext.Element\r
+ */\r
Ext.Element.addMethods(\r
function() {\r
var GETDOM = Ext.getDom,\r
* @return {Ext.Element} this\r
*/\r
replaceWith: function(el){\r
- var me = this,\r
- Element = Ext.Element;\r
+ var me = this;\r
+ \r
if(el.nodeType || el.dom || typeof el == 'string'){\r
el = GETDOM(el);\r
me.dom.parentNode.insertBefore(el, me.dom);\r
el = DH.insertBefore(me.dom, el);\r
}\r
\r
- delete Element.cache[me.id];\r
+ delete Ext.elCache[me.id];\r
Ext.removeNode(me.dom); \r
me.id = Ext.id(me.dom = el);\r
- return Element.cache[me.id] = me; \r
+ Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me); \r
+ return me;\r
},\r
\r
/**\r
* @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.\r
* @param {String} where (optional) 'before' or 'after' defaults to before\r
* @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element\r
- * @return {Ext.Element} the inserted Element\r
+ * @return {Ext.Element} The inserted Element. If an array is passed, the last inserted element is returned.\r
*/\r
insertSibling: function(el, where, returnDom){\r
var me = this,\r
- rt;\r
+ rt,\r
+ isAfter = (where || 'before').toLowerCase() == 'after',\r
+ insertEl;\r
\r
- if(Ext.isArray(el)){ \r
+ if(Ext.isArray(el)){\r
+ insertEl = me;\r
Ext.each(el, function(e) {\r
- rt = me.insertSibling(e, where, returnDom);\r
+ rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);\r
+ if(isAfter){\r
+ insertEl = rt;\r
+ }\r
});\r
return rt;\r
}\r
\r
- where = (where || 'before').toLowerCase();\r
el = el || {};\r
\r
if(el.nodeType || el.dom){\r
- rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling);\r
+ rt = me.dom.parentNode.insertBefore(GETDOM(el), isAfter ? me.dom.nextSibling : me.dom);\r
if (!returnDom) {\r
rt = GET(rt);\r
}\r
}else{\r
- if (where == 'after' && !me.dom.nextSibling) {\r
+ if (isAfter && !me.dom.nextSibling) {\r
rt = DH.append(me.dom.parentNode, el, !returnDom);\r
} else { \r
- rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);\r
+ rt = DH[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);\r
}\r
}\r
return rt;\r
}());/**
* @class Ext.Element
*/
-Ext.Element.addMethods(function(){
+Ext.Element.addMethods(function(){
// local style camelizing for speed
var propCache = {},
camelRe = /(-[a-z])/gi,
propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
opacityRe = /alpha\(opacity=(.*)\)/i,
trimRe = /^\s+|\s+$/g,
- EL = Ext.Element,
+ EL = Ext.Element,
PADDING = "padding",
MARGIN = "margin",
BORDER = "border",
RIGHT = "-right",
TOP = "-top",
BOTTOM = "-bottom",
- WIDTH = "-width",
+ WIDTH = "-width",
MATH = Math,
HIDDEN = 'hidden',
ISCLIPPED = 'isClipped',
OVERFLOWX = 'overflow-x',
OVERFLOWY = 'overflow-y',
ORIGINALCLIP = 'originalClip',
- // special markup used throughout Ext when box wrapping elements
+ // special markup used throughout Ext when box wrapping elements
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;
-
-
- // private
+
+
+ // private
function camelFn(m, a) {
return a.charAt(1).toUpperCase();
}
-
+
function chkCache(prop) {
return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
}
-
+
return {
- // private ==> used by Fx
+ // private ==> used by Fx
adjustWidth : function(width) {
var me = this;
var isNum = Ext.isNumber(width);
}
return (isNum && width < 0) ? 0 : width;
},
-
- // private ==> used by Fx
+
+ // private ==> used by Fx
adjustHeight : function(height) {
var me = this;
var isNum = Ext.isNumber(height);
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
- height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
+ height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
return (isNum && height < 0) ? 0 : height;
},
-
-
+
+
/**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
* @param {String/Array} className The CSS class to add, or an array of classes
* @return {Ext.Element} this
*/
addClass : function(className){
- var me = this;
- Ext.each(className, function(v) {
- me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
- });
+ var me = this, i, len, v;
+ className = Ext.isArray(className) ? className : [className];
+ for (i=0, len = className.length; i < len; i++) {
+ v = className[i];
+ if (v) {
+ me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
+ };
+ };
return me;
},
-
+
/**
* Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
* @param {String/Array} className The CSS class to add, or an array of classes
* @return {Ext.Element} this
*/
radioClass : function(className){
- Ext.each(this.dom.parentNode.childNodes, function(v) {
- if(v.nodeType == 1) {
- Ext.fly(v, '_internal').removeClass(className);
+ var cn = this.dom.parentNode.childNodes, v;
+ className = Ext.isArray(className) ? className : [className];
+ for (var 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);
},
-
+
/**
* Removes one or more CSS classes from the element.
* @param {String/Array} className The CSS class to remove, or an array of classes
* @return {Ext.Element} this
*/
removeClass : function(className){
- var me = this;
+ var me = this, v;
+ className = Ext.isArray(className) ? className : [className];
if (me.dom && me.dom.className) {
- Ext.each(className, function(v) {
- me.dom.className = me.dom.className.replace(
- classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"),
- " ");
- });
+ for (var i=0, len=className.length; i < len; i++) {
+ v = className[i];
+ if(v) {
+ me.dom.className = me.dom.className.replace(
+ classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " "
+ );
+ }
+ };
}
return me;
},
-
+
/**
* Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
* @param {String} className The CSS class to toggle
toggleClass : function(className){
return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
},
-
+
/**
* Checks if the specified CSS class exists on this element's DOM node.
* @param {String} className The CSS class to check for
hasClass : function(className){
return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
},
-
+
/**
* Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
* @param {String} oldClassName The CSS class to replace
replaceClass : function(oldClassName, newClassName){
return this.removeClass(oldClassName).addClass(newClassName);
},
-
+
isStyle : function(style, val) {
- return this.getStyle(style) == val;
+ return this.getStyle(style) == val;
},
-
+
/**
* Normalizes currentStyle and computedStyle.
* @param {String} property The style property whose value is returned.
* @return {String} The current value of the style property for this element.
*/
- getStyle : function(){
+ getStyle : function(){
return view && view.getComputedStyle ?
function(prop){
var el = this.dom,
- v,
+ v,
cs,
- out;
- if(el == document) return null;
+ out,
+ display,
+ wk = Ext.isWebKit,
+ display;
+
+ if(el == document){
+ return null;
+ }
prop = chkCache(prop);
- out = (v = el.style[prop]) ? v :
+ // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
+ if(wk && /marginRight/.test(prop)){
+ display = this.getStyle('display');
+ el.style.display = 'inline-block';
+ }
+ out = (v = el.style[prop]) ? v :
(cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
-
+
// Webkit returns rgb values for transparent.
- if(Ext.isWebKit && out == 'rgba(0, 0, 0, 0)'){
- out = 'transparent';
+ if(wk){
+ if(out == 'rgba(0, 0, 0, 0)'){
+ out = 'transparent';
+ }else if(display){
+ el.style.display = display;
+ }
}
return out;
} :
- function(prop){
- var el = this.dom,
- m,
- cs;
-
- if(el == document) return null;
+ function(prop){
+ var el = this.dom,
+ m,
+ cs;
+
+ if(el == document) return null;
if (prop == 'opacity') {
- if (el.style.filter.match) {
+ if (el.style.filter.match) {
if(m = el.style.filter.match(opacityRe)){
var fv = parseFloat(m[1]);
if(!isNaN(fv)){
}
return 1;
}
- prop = chkCache(prop);
+ prop = chkCache(prop);
return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
};
}(),
var v = this.getStyle(attr),
color = Ext.isDefined(prefix) ? 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);
+ color += (h < 16 ? '0' : '') + h.toString(16);
});
}else{
v = v.replace('#', '');
}
return(color.length > 5 ? color.toLowerCase() : defaultValue);
},
-
+
/**
* Wrapper for setting style properties, also takes single object parameter of multiple styles.
* @param {String/Object} property The style property to be set, or an object of multiple styles.
* @return {Ext.Element} this
*/
setStyle : function(prop, value){
- var tmp,
+ var tmp,
style,
camel;
if (!Ext.isObject(prop)) {
tmp = {};
- tmp[prop] = value;
+ tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
- value = prop[style];
- style == 'opacity' ?
- this.setOpacity(value) :
+ value = prop[style];
+ style == 'opacity' ?
+ this.setOpacity(value) :
this.dom.style[chkCache(style)] = value;
}
return this;
},
-
+
/**
* Set the opacity of the element
* @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
setOpacity : function(opacity, animate){
var me = this,
s = me.dom.style;
-
- if(!animate || !me.anim){
+
+ if(!animate || !me.anim){
if(Ext.isIE){
- var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
+ var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
val = s.filter.replace(opacityRe, '').replace(trimRe, '');
s.zoom = 1;
}
return me;
},
-
+
/**
* Clears any opacity settings from this element. Required in some cases for IE.
* @return {Ext.Element} this
}
return this;
},
-
+
/**
* Returns the offset height of the element
* @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
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;
},
-
+
/**
* Returns the offset width of the element
* @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
return w < 0 ? 0 : w;
},
-
+
/**
* Set the width of this Element.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
- !animate || !me.anim ?
+ !animate || !me.anim ?
me.dom.style.width = me.addUnits(width) :
me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
},
-
+
/**
* Set the height of this Element.
* <pre><code>
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"); }
+ callback: function(){ this.{@link #update}("finished"); }
});
* </code></pre>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
setHeight : function(height, animate){
var me = this;
height = me.adjustHeight(height);
- !animate || !me.anim ?
+ !animate || !me.anim ?
me.dom.style.height = me.addUnits(height) :
me.anim({height : {to : height}}, me.preanim(arguments, 1));
return me;
},
-
+
/**
* Gets the width of the border(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
getBorderWidth : function(side){
return this.addStyles(side, borders);
},
-
+
/**
* Gets the width of the padding(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
getPadding : function(side){
return this.addStyles(side, paddings);
},
-
+
/**
* Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
* @return {Ext.Element} this
clip : function(){
var me = this,
dom = me.dom;
-
+
if(!data(dom, ISCLIPPED)){
data(dom, ISCLIPPED, true);
data(dom, ORIGINALCLIP, {
}
return me;
},
-
+
/**
* Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
* @return {Ext.Element} this
unclip : function(){
var me = this,
dom = me.dom;
-
+
if(data(dom, ISCLIPPED)){
data(dom, ISCLIPPED, false);
var o = data(dom, ORIGINALCLIP);
// private
addStyles : function(sides, styles){
- var val = 0;
-
- Ext.each(sides.match(/\w/g), function(s) {
- if (s = parseInt(this.getStyle(styles[s]), 10)) {
+ var val = 0,
+ m = sides.match(/\w/g),
+ s;
+ for (var i=0, len=m.length; i<len; i++) {
+ s = m[i] && parseInt(this.getStyle(styles[m[i]]), 10);
+ if (s) {
val += MATH.abs(s);
}
- },
- this);
+ }
return val;
},
margins : margins
}
-}()
+}()
);
/**\r
* @class Ext.Element\r
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>';\r
\r
Ext.Element.addMethods(function(){\r
- var INTERNAL = "_internal";\r
- return {\r
- /**\r
- * More flexible version of {@link #setStyle} for setting style properties.\r
- * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
- * a function which returns such a specification.\r
- * @return {Ext.Element} this\r
- */\r
- applyStyles : function(style){\r
- Ext.DomHelper.applyStyles(this.dom, style);\r
- return this;\r
- },\r
+ var INTERNAL = "_internal",\r
+ pxMatch = /(\d+)px/;\r
+ return {\r
+ /**\r
+ * More flexible version of {@link #setStyle} for setting style properties.\r
+ * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
+ * a function which returns such a specification.\r
+ * @return {Ext.Element} this\r
+ */\r
+ applyStyles : function(style){\r
+ Ext.DomHelper.applyStyles(this.dom, style);\r
+ return this;\r
+ },\r
\r
- /**\r
- * Returns an object with properties matching the styles requested.\r
- * For example, el.getStyles('color', 'font-size', 'width') might return\r
- * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
- * @param {String} style1 A style name\r
- * @param {String} style2 A style name\r
- * @param {String} etc.\r
- * @return {Object} The style object\r
- */\r
- getStyles : function(){\r
- var ret = {};\r
- Ext.each(arguments, function(v) {\r
- ret[v] = this.getStyle(v);\r
- },\r
- this);\r
- return ret;\r
- },\r
+ /**\r
+ * Returns an object with properties matching the styles requested.\r
+ * For example, el.getStyles('color', 'font-size', 'width') might return\r
+ * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
+ * @param {String} style1 A style name\r
+ * @param {String} style2 A style name\r
+ * @param {String} etc.\r
+ * @return {Object} The style object\r
+ */\r
+ getStyles : function(){\r
+ var ret = {};\r
+ Ext.each(arguments, function(v) {\r
+ ret[v] = this.getStyle(v);\r
+ },\r
+ this);\r
+ return ret;\r
+ },\r
\r
- getStyleSize : function(){\r
- var me = this,\r
- w,\r
- h,\r
- d = this.dom,\r
- s = d.style;\r
- if(s.width && s.width != 'auto'){\r
- w = parseInt(s.width, 10);\r
- if(me.isBorderBox()){\r
- w -= me.getFrameWidth('lr');\r
- }\r
- }\r
- if(s.height && s.height != 'auto'){\r
- h = parseInt(s.height, 10);\r
- if(me.isBorderBox()){\r
- h -= me.getFrameWidth('tb');\r
- }\r
- }\r
- return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
- },\r
+ // deprecated\r
+ getStyleSize : function(){\r
+ var me = this,\r
+ w,\r
+ h,\r
+ d = this.dom,\r
+ s = d.style;\r
+ if(s.width && s.width != 'auto'){\r
+ w = parseInt(s.width, 10);\r
+ if(me.isBorderBox()){\r
+ w -= me.getFrameWidth('lr');\r
+ }\r
+ }\r
+ if(s.height && s.height != 'auto'){\r
+ h = parseInt(s.height, 10);\r
+ if(me.isBorderBox()){\r
+ h -= me.getFrameWidth('tb');\r
+ }\r
+ }\r
+ return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
+ },\r
\r
- // private ==> used by ext full\r
- setOverflow : function(v){\r
- var dom = this.dom;\r
- if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
- dom.style.overflow = 'hidden';\r
- (function(){dom.style.overflow = 'auto';}).defer(1);\r
- }else{\r
- dom.style.overflow = v;\r
- }\r
- },\r
+ // private ==> used by ext full\r
+ setOverflow : function(v){\r
+ var dom = this.dom;\r
+ if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
+ dom.style.overflow = 'hidden';\r
+ (function(){dom.style.overflow = 'auto';}).defer(1);\r
+ }else{\r
+ dom.style.overflow = v;\r
+ }\r
+ },\r
\r
- /**\r
-
* <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
\r- * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
-
* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
\r- * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup\r
- * is of this form:</p>\r
-Ext.Element.boxMarkup =\r
+ /**\r
+ * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
+ * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
+ * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
+ * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup\r
+ * is of this form:</p>\r
+ * <pre><code>\r
+ Ext.Element.boxMarkup =\r
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>\r
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>\r
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
- * </code></pre>\r
-
* <p>Example usage:</p>
\r-// Basic box wrap\r
-Ext.get("foo").boxWrap();\r
-\r
-// You can also add a custom class and use CSS inheritance rules to customize the box look.\r
-// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
-// for how to create a custom box wrap style.\r
-Ext.get("foo").boxWrap().addClass("x-box-blue");\r
- * </code></pre>\r
- * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
- * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
- * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
- * also supply all of the necessary rules.\r
- * @return {Ext.Element} this\r
- */\r
- boxWrap : function(cls){\r
- cls = cls || 'x-box';\r
-
var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
\r- Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
- return el;\r
- },\r
+ * </code></pre>\r
+ * <p>Example usage:</p>\r
+ * <pre><code>\r
+ // Basic box wrap\r
+ Ext.get("foo").boxWrap();\r
+\r
+ // You can also add a custom class and use CSS inheritance rules to customize the box look.\r
+ // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
+ // for how to create a custom box wrap style.\r
+ Ext.get("foo").boxWrap().addClass("x-box-blue");\r
+ * </code></pre>\r
+ * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
+ * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
+ * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
+ * also supply all of the necessary rules.\r
+ * @return {Ext.Element} The outermost wrapping element of the created box structure.\r
+ */\r
+ boxWrap : function(cls){\r
+ cls = cls || 'x-box';\r
+ var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));\r
+ Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
+ return el;\r
+ },\r
\r
/**\r
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
* @return {Ext.Element} this\r
*/\r
- setSize : function(width, height, animate){\r
- var me = this;\r
- if(Ext.isObject(width)){ // in case of object from getSize()\r
- height = width.height;\r
- width = width.width;\r
- }\r
- width = me.adjustWidth(width);\r
- height = me.adjustHeight(height);\r
- if(!animate || !me.anim){\r
- me.dom.style.width = me.addUnits(width);\r
- me.dom.style.height = me.addUnits(height);\r
- }else{\r
- me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
- }\r
- return me;\r
- },\r
+ setSize : function(width, height, animate){\r
+ var me = this;\r
+ if(Ext.isObject(width)){ // in case of object from getSize()\r
+ height = width.height;\r
+ width = width.width;\r
+ }\r
+ width = me.adjustWidth(width);\r
+ height = me.adjustHeight(height);\r
+ if(!animate || !me.anim){\r
+ me.dom.style.width = me.addUnits(width);\r
+ me.dom.style.height = me.addUnits(height);\r
+ }else{\r
+ me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
+ }\r
+ return me;\r
+ },\r
\r
- /**\r
- * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
- * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
- * if a height has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedHeight : function(){\r
- var me = this,\r
- h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
- if(!h){\r
- h = parseInt(me.getStyle('height'), 10) || 0;\r
- if(!me.isBorderBox()){\r
- h += me.getFrameWidth('tb');\r
- }\r
- }\r
- return h;\r
- },\r
+ /**\r
+ * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
+ * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
+ * if a height has not been set using CSS.\r
+ * @return {Number}\r
+ */\r
+ getComputedHeight : function(){\r
+ var me = this,\r
+ h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
+ if(!h){\r
+ h = parseInt(me.getStyle('height'), 10) || 0;\r
+ if(!me.isBorderBox()){\r
+ h += me.getFrameWidth('tb');\r
+ }\r
+ }\r
+ return h;\r
+ },\r
\r
- /**\r
- * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
- * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
- * if a width has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedWidth : function(){\r
- var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
- if(!w){\r
- w = parseInt(this.getStyle('width'), 10) || 0;\r
- if(!this.isBorderBox()){\r
- w += this.getFrameWidth('lr');\r
- }\r
- }\r
- return w;\r
- },\r
+ /**\r
+ * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
+ * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
+ * if a width has not been set using CSS.\r
+ * @return {Number}\r
+ */\r
+ getComputedWidth : function(){\r
+ var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
+ if(!w){\r
+ w = parseInt(this.getStyle('width'), 10) || 0;\r
+ if(!this.isBorderBox()){\r
+ w += this.getFrameWidth('lr');\r
+ }\r
+ }\r
+ return w;\r
+ },\r
\r
- /**\r
- * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
- for more information about the sides.\r
- * @param {String} sides\r
- * @return {Number}\r
- */\r
- getFrameWidth : function(sides, onlyContentBox){\r
- return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
- },\r
+ /**\r
+ * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
+ for more information about the sides.\r
+ * @param {String} sides\r
+ * @return {Number}\r
+ */\r
+ getFrameWidth : function(sides, onlyContentBox){\r
+ return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
+ },\r
\r
- /**\r
- * Sets up event handlers to add and remove a css class when the mouse is over this element\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnOver : function(className){\r
- this.hover(\r
- function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- },\r
- function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }\r
- );\r
- return this;\r
- },\r
+ /**\r
+ * Sets up event handlers to add and remove a css class when the mouse is over this element\r
+ * @param {String} className\r
+ * @return {Ext.Element} this\r
+ */\r
+ addClassOnOver : function(className){\r
+ this.hover(\r
+ function(){\r
+ Ext.fly(this, INTERNAL).addClass(className);\r
+ },\r
+ function(){\r
+ Ext.fly(this, INTERNAL).removeClass(className);\r
+ }\r
+ );\r
+ return this;\r
+ },\r
\r
- /**\r
- * Sets up event handlers to add and remove a css class when this element has the focus\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnFocus : function(className){\r
- this.on("focus", function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- }, this.dom);\r
- this.on("blur", function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }, this.dom);\r
- return this;\r
- },\r
+ /**\r
+ * Sets up event handlers to add and remove a css class when this element has the focus\r
+ * @param {String} className\r
+ * @return {Ext.Element} this\r
+ */\r
+ addClassOnFocus : function(className){\r
+ this.on("focus", function(){\r
+ Ext.fly(this, INTERNAL).addClass(className);\r
+ }, this.dom);\r
+ this.on("blur", function(){\r
+ Ext.fly(this, INTERNAL).removeClass(className);\r
+ }, this.dom);\r
+ return this;\r
+ },\r
\r
- /**\r
- * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnClick : function(className){\r
- var dom = this.dom;\r
- this.on("mousedown", function(){\r
- Ext.fly(dom, INTERNAL).addClass(className);\r
- var d = Ext.getDoc(),\r
- fn = function(){\r
- Ext.fly(dom, INTERNAL).removeClass(className);\r
- d.removeListener("mouseup", fn);\r
- };\r
- d.on("mouseup", fn);\r
- });\r
- return this;\r
- },\r
+ /**\r
+ * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)\r
+ * @param {String} className\r
+ * @return {Ext.Element} this\r
+ */\r
+ addClassOnClick : function(className){\r
+ var dom = this.dom;\r
+ this.on("mousedown", function(){\r
+ Ext.fly(dom, INTERNAL).addClass(className);\r
+ var d = Ext.getDoc(),\r
+ fn = function(){\r
+ Ext.fly(dom, INTERNAL).removeClass(className);\r
+ d.removeListener("mouseup", fn);\r
+ };\r
+ d.on("mouseup", fn);\r
+ });\r
+ return this;\r
+ },\r
\r
- /**\r
- * Returns the width and height of the viewport.\r
- * <pre><code>\r
+ /**\r
+ * <p>Returns the dimensions of the element available to lay content out in.<p>\r
+ * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>\r
+ * example:<pre><code>\r
var vpSize = Ext.getBody().getViewSize();\r
\r
// all Windows created afterwards will have a default value of 90% height and 95% width\r
});\r
// To handle window resizing you would have to hook onto onWindowResize.\r
</code></pre>\r
- * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}\r
- */\r
- getViewSize : function(){\r
- var doc = document,\r
- d = this.dom,\r
- extdom = Ext.lib.Dom,\r
- isDoc = (d == doc || d == doc.body);\r
- return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),\r
- height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };\r
- },\r
+ * @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False\r
+ * or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>\r
+ * @return {Object} An object containing the elements's area: <code>{width: <element width>, height: <element height>}</code>\r
+ */\r
+ getViewSize : function(contentBox){\r
+ var doc = document,\r
+ me = this,\r
+ d = me.dom,\r
+ extdom = Ext.lib.Dom,\r
+ isDoc = (d == doc || d == doc.body),\r
+ isBB, w, h, tbBorder = 0, lrBorder = 0,\r
+ tbPadding = 0, lrPadding = 0;\r
+ if (isDoc) {\r
+ return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };\r
+ }\r
+ isBB = me.isBorderBox();\r
+ tbBorder = me.getBorderWidth('tb');\r
+ lrBorder = me.getBorderWidth('lr');\r
+ tbPadding = me.getPadding('tb');\r
+ lrPadding = me.getPadding('lr');\r
+\r
+ // Width calcs\r
+ // Try the style first, then clientWidth, then offsetWidth\r
+ if (w = me.getStyle('width').match(pxMatch)){\r
+ if ((w = parseInt(w[1], 10)) && isBB){\r
+ // Style includes the padding and border if isBB\r
+ w -= (lrBorder + lrPadding);\r
+ }\r
+ if (!contentBox){\r
+ w += lrPadding;\r
+ }\r
+ } else {\r
+ if (!(w = d.clientWidth) && (w = d.offsetWidth)){\r
+ w -= lrBorder;\r
+ }\r
+ if (w && contentBox){\r
+ w -= lrPadding;\r
+ }\r
+ }\r
\r
- /**\r
- * Returns the size of the element.\r
- * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
- * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
- */\r
- getSize : function(contentSize){\r
- return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
- },\r
+ // Height calcs\r
+ // Try the style first, then clientHeight, then offsetHeight\r
+ if (h = me.getStyle('height').match(pxMatch)){\r
+ if ((h = parseInt(h[1], 10)) && isBB){\r
+ // Style includes the padding and border if isBB\r
+ h -= (tbBorder + tbPadding);\r
+ }\r
+ if (!contentBox){\r
+ h += tbPadding;\r
+ }\r
+ } else {\r
+ if (!(h = d.clientHeight) && (h = d.offsetHeight)){\r
+ h -= tbBorder;\r
+ }\r
+ if (h && contentBox){\r
+ h -= tbPadding;\r
+ }\r
+ }\r
\r
- /**\r
- * Forces the browser to repaint this element\r
- * @return {Ext.Element} this\r
- */\r
- repaint : function(){\r
- var dom = this.dom;\r
- this.addClass("x-repaint");\r
- setTimeout(function(){\r
- Ext.fly(dom).removeClass("x-repaint");\r
- }, 1);\r
- return this;\r
- },\r
+ return {\r
+ width : w,\r
+ height : h\r
+ };\r
+ },\r
\r
- /**\r
- * Disables text selection for this element (normalized across browsers)\r
- * @return {Ext.Element} this\r
- */\r
- unselectable : function(){\r
- this.dom.unselectable = "on";\r
- return this.swallowEvent("selectstart", true).\r
- applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
- addClass("x-unselectable");\r
- },\r
+ /**\r
+ * Returns the size of the element.\r
+ * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
+ * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
+ */\r
+ getSize : function(contentSize){\r
+ return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
+ },\r
\r
- /**\r
- * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
- * then it returns the calculated width of the sides (see getPadding)\r
- * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
- * @return {Object/Number}\r
- */\r
- getMargins : function(side){\r
- var me = this,\r
- key,\r
- hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
- o = {};\r
+ /**\r
+ * Forces the browser to repaint this element\r
+ * @return {Ext.Element} this\r
+ */\r
+ repaint : function(){\r
+ var dom = this.dom;\r
+ this.addClass("x-repaint");\r
+ setTimeout(function(){\r
+ Ext.fly(dom).removeClass("x-repaint");\r
+ }, 1);\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Disables text selection for this element (normalized across browsers)\r
+ * @return {Ext.Element} this\r
+ */\r
+ unselectable : function(){\r
+ this.dom.unselectable = "on";\r
+ return this.swallowEvent("selectstart", true).\r
+ applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
+ addClass("x-unselectable");\r
+ },\r
+\r
+ /**\r
+ * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
+ * then it returns the calculated width of the sides (see getPadding)\r
+ * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
+ * @return {Object/Number}\r
+ */\r
+ getMargins : function(side){\r
+ var me = this,\r
+ key,\r
+ hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
+ o = {};\r
\r
- if (!side) {\r
- for (key in me.margins){\r
- o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;\r
+ if (!side) {\r
+ for (key in me.margins){\r
+ o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;\r
}\r
- return o;\r
- } else {\r
- return me.addStyles.call(me, side, me.margins);\r
- }\r
- }\r
+ return o;\r
+ } else {\r
+ return me.addStyles.call(me, side, me.margins);\r
+ }\r
+ }\r
};\r
-}());/**\r
+}());\r
+/**\r
* @class Ext.Element\r
*/\r
(function(){\r
me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));\r
return me;\r
},\r
- \r
+\r
/**\r
- * Return a box {x, y, width, height} that can be used to set another elements\r
- * size/location to match this element.\r
+ * Return an object defining the area of this Element which can be passed to {@link #setBox} to\r
+ * set another Element's size/location to match this element.\r
* @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.\r
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.\r
- * @return {Object} box An object in the format {x, y, width, height}\r
+ * @return {Object} box An object in the format<pre><code>\r
+{\r
+ x: <Element's X position>,\r
+ y: <Element's Y position>,\r
+ width: <Element's width>,\r
+ height: <Element's height>,\r
+ bottom: <Element's lower bound>,\r
+ right: <Element's rightmost bound>\r
+}\r
+</code></pre>\r
+ * The returned object may also be addressed as an Array where index 0 contains the X position\r
+ * and index 1 contains the Y position. So the result may also be used for {@link #setXY}\r
*/\r
getBox : function(contentBox, local) { \r
var me = this,\r
*/\r
scrollTo : function(side, value, animate){\r
var top = /top/i.test(side), //check if we're scrolling top or left\r
- prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop\r
- me = this,\r
- dom = me.dom;\r
+ me = this,\r
+ dom = me.dom,\r
+ prop;\r
if (!animate || !me.anim) {\r
+ prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction\r
dom[prop] = value;\r
- } else {\r
+ }else{\r
+ prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop\r
me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},\r
- me.preanim(arguments, 2), 'scroll');\r
+ me.preanim(arguments, 2), 'scroll');\r
}\r
return me;\r
},\r
/**\r
* Convenience method for constructing a KeyMap\r
* @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:\r
- * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}\r
+ * <code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code>\r
* @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope of the function\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.\r
* @return {Ext.KeyMap} The KeyMap created\r
*/\r
addKeyListener : function(key, fn, scope){\r
active;\r
\r
me.queueFx(o, function(){\r
- color = color || '#C3DAF9'\r
+ color = color || '#C3DAF9';\r
if(color.length == 6){\r
color = '#' + color;\r
} \r
\r
Ext.CompositeElementLite.prototype = {\r
isComposite: true, \r
+ \r
+ // private\r
+ getElement : function(el){\r
+ // Set the shared flyweight dom property to the current element\r
+ var e = this.el;\r
+ e.dom = el;\r
+ e.id = el.id;\r
+ return e;\r
+ },\r
+ \r
+ // private\r
+ transformElement : function(el){\r
+ return Ext.getDom(el);\r
+ },\r
+ \r
/**\r
* Returns the number of elements in this Composite.\r
* @return Number\r
* @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.\r
* @return {CompositeElement} This Composite object.\r
*/\r
- add : function(els){\r
- if(els){\r
- if (Ext.isArray(els)) {\r
- this.elements = this.elements.concat(els);\r
- } else {\r
- var yels = this.elements; \r
- Ext.each(els, function(e) {\r
- yels.push(e);\r
- });\r
- }\r
+ add : function(els, root){\r
+ var me = this,\r
+ elements = me.elements;\r
+ if(!els){\r
+ return this;\r
}\r
- return this;\r
+ if(Ext.isString(els)){\r
+ els = Ext.Element.selectorFunction(els, root);\r
+ }else if(els.isComposite){\r
+ els = els.elements;\r
+ }else if(!Ext.isIterable(els)){\r
+ els = [els];\r
+ }\r
+ \r
+ for(var i = 0, len = els.length; i < len; ++i){\r
+ elements.push(me.transformElement(els[i]));\r
+ }\r
+ return me;\r
},\r
+ \r
invoke : function(fn, args){\r
- var els = this.elements,\r
- el = this.el; \r
- Ext.each(els, function(e) { \r
- el.dom = e;\r
- Ext.Element.prototype[fn].apply(el, args);\r
- });\r
- return this;\r
+ var me = this,\r
+ els = me.elements,\r
+ len = els.length, \r
+ e;\r
+ \r
+ for(i = 0; i<len; i++) {\r
+ e = els[i];\r
+ if(e){\r
+ Ext.Element.prototype[fn].apply(me.getElement(e), args);\r
+ }\r
+ }\r
+ return me;\r
},\r
/**\r
* Returns a flyweight Element of the dom element object at the specified index\r
* @return {Ext.Element}\r
*/\r
item : function(index){\r
- var me = this;\r
- if(!me.elements[index]){\r
- return null;\r
+ var me = this,\r
+ el = me.elements[index],\r
+ out = null;\r
+\r
+ if(el){\r
+ out = me.getElement(el);\r
}\r
- me.el.dom = me.elements[index];\r
- return me.el;\r
+ return out;\r
},\r
\r
// fixes scope with flyweight\r
addListener : function(eventName, handler, scope, opt){\r
- Ext.each(this.elements, function(e) {\r
- Ext.EventManager.on(e, eventName, handler, scope || e, opt);\r
- });\r
+ var els = this.elements,\r
+ len = els.length,\r
+ i, e;\r
+ \r
+ for(i = 0; i<len; i++) {\r
+ e = els[i];\r
+ if(e) {\r
+ Ext.EventManager.on(e, eventName, handler, scope || e, opt);\r
+ }\r
+ }\r
return this;\r
},\r
/**\r
*/\r
each : function(fn, scope){ \r
var me = this,\r
- el = me.el;\r
- \r
- Ext.each(me.elements, function(e,i) { \r
- el.dom = e;\r
- return fn.call(scope || el, el, me, i);\r
- });\r
+ els = me.elements,\r
+ len = els.length,\r
+ i, e;\r
+ \r
+ for(i = 0; i<len; i++) {\r
+ e = els[i];\r
+ if(e){\r
+ e = this.getElement(e);\r
+ if(fn.call(scope || e, e, me, i)){\r
+ break;\r
+ }\r
+ }\r
+ }\r
return me;\r
},\r
\r
filter : function(selector){\r
var els = [],\r
me = this,\r
+ elements = me.elements,\r
fn = Ext.isFunction(selector) ? selector\r
: function(el){\r
return el.is(selector);\r
- }\r
+ };\r
+ \r
+ \r
me.each(function(el, self, i){\r
if(fn(el, i) !== false){\r
- els[els.length] = el.dom;\r
+ els[els.length] = me.transformElement(el);\r
}\r
});\r
- me.fill(els);\r
+ me.elements = els;\r
return me;\r
},\r
\r
* @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.\r
*/\r
indexOf : function(el){\r
- return this.elements.indexOf(Ext.getDom(el));\r
+ return this.elements.indexOf(this.transformElement(el));\r
},\r
\r
/**\r
* to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
* {@link Ext.CompositeElementLite CompositeElementLite} object.\r
* @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) <b>Not supported in core</b>\r
* @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
* @return {CompositeElementLite/CompositeElement}\r
* @member Ext.Element\r
* @method select\r
*/\r
-Ext.Element.select = function(selector, unique, root){\r
+Ext.Element.select = function(selector, root){\r
var els;\r
if(typeof selector == "string"){\r
els = Ext.Element.selectorFunction(selector, root);\r
* to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
* {@link Ext.CompositeElementLite CompositeElementLite} object.\r
* @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
* @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
* @return {CompositeElementLite/CompositeElement}\r
* @member Ext\r
/**\r
* @class Ext.CompositeElement\r
* @extends Ext.CompositeElementLite\r
- * Standard composite class. Creates a Ext.Element for every element in the collection.\r
- * <br><br>\r
- * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element\r
- * actions will be performed on all the elements in this collection.</b>\r
- * <br><br>\r
- * All methods return <i>this</i> and can be chained.\r
- var els = Ext.select("#some-el div.some-class", true);\r
- // or select directly from an existing element\r
- var el = Ext.get('some-el');\r
- el.select('div.some-class', true);\r
-\r
- els.setWidth(100); // all elements become 100 width\r
- els.hide(true); // all elements fade out and hide\r
- // or\r
- els.setWidth(100).hide(true);\r
- </code></pre>\r
+ * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter\r
+ * members, or to perform collective actions upon the whole set.</p>\r
+ * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and\r
+ * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>\r
+ * <p>All methods return <i>this</i> and can be chained.</p>\r
+ * Usage:\r
+<pre><code>\r
+var els = Ext.select("#some-el div.some-class", true);\r
+// or select directly from an existing element\r
+var el = Ext.get('some-el');\r
+el.select('div.some-class', true);\r
+\r
+els.setWidth(100); // all elements become 100 width\r
+els.hide(true); // all elements fade out and hide\r
+// or\r
+els.setWidth(100).hide(true);\r
+</code></pre>\r
*/\r
Ext.CompositeElement = function(els, root){\r
this.elements = [];\r
};\r
\r
Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {\r
- invoke : function(fn, args){\r
- Ext.each(this.elements, function(e) {\r
- Ext.Element.prototype[fn].apply(e, args);\r
- });\r
- return this;\r
+ \r
+ // private\r
+ getElement : function(el){\r
+ // In this case just return it, since we already have a reference to it\r
+ return el;\r
},\r
+ \r
+ // private\r
+ transformElement : function(el){\r
+ return Ext.get(el);\r
+ }\r
\r
/**\r
* Adds elements to this composite.\r
* @param {String/Array} els A string CSS selector, an array of elements or an element\r
* @return {CompositeElement} this\r
*/\r
- add : function(els, root){\r
- if(!els){\r
- return this;\r
- }\r
- if(typeof els == "string"){\r
- els = Ext.Element.selectorFunction(els, root);\r
- }\r
- var yels = this.elements;\r
- Ext.each(els, function(e) {\r
- yels.push(Ext.get(e));\r
- });\r
- return this;\r
- },\r
\r
/**\r
* Returns the Element object at the specified index\r
* @param {Number} index\r
* @return {Ext.Element}\r
*/\r
- item : function(index){\r
- return this.elements[index] || null;\r
- },\r
-\r
-\r
- indexOf : function(el){\r
- return this.elements.indexOf(Ext.get(el));\r
- },\r
-\r
- filter : function(selector){\r
- var me = this,\r
- out = [];\r
-\r
- Ext.each(me.elements, function(el) {\r
- if(el.is(selector)){\r
- out.push(Ext.get(el));\r
- }\r
- });\r
- me.elements = out;\r
- return me;\r
- },\r
\r
/**\r
* Iterates each <code>element</code> in this <code>composite</code>\r
* <code>element</code>. If the supplied function returns <tt>false</tt>,\r
* iteration stops. This function is called with the following arguments:\r
* <div class="mdetail-params"><ul>\r
- * <li><code>element</code> : <i>Object</i>\r
- * <div class="sub-desc">The element at the current <code>index</code>\r
+ * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>\r
* in the <code>composite</code></div></li>\r
- * <li><code>composite</code> : <i>Object</i>\r
- * <div class="sub-desc">This composite.</div></li>\r
- * <li><code>index</code> : <i>Number</i>\r
- * <div class="sub-desc">The current index within the <code>composite</code>\r
- * </div></li>\r
+ * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>\r
+ * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>\r
* </ul></div>\r
- * @param {Object} scope (optional) The scope to call the specified function.\r
+ * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.\r
* Defaults to the <code>element</code> at the current <code>index</code>\r
* within the composite.\r
* @return {CompositeElement} this\r
*/\r
- each : function(fn, scope){\r
- Ext.each(this.elements, function(e, i){\r
- return fn.call(scope || e, e, this, i);\r
- }, this);\r
- return this;\r
- }\r
});\r
\r
/**\r
* If params are specified it uses POST, otherwise it uses GET.<br><br>
* <b>Note:</b> Due to the asynchronous nature of remote server requests, the Element
* will not have been fully updated when the function returns. To post-process the returned
- * data, use the callback option, or an <b><tt>update</tt></b> event handler.
+ * data, use the callback option, or an <b><code>update</code></b> event handler.
* @param {Object} options A config object containing any of the following options:<ul>
* <li>url : <b>String/Function</b><p class="sub-desc">The URL to request or a function which
* <i>returns</i> the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).</p></li>
* <li>method : <b>String</b><p class="sub-desc">The HTTP method to
- * use. Defaults to POST if the <tt>params</tt> argument is present, otherwise GET.</p></li>
+ * use. Defaults to POST if the <code>params</code> argument is present, otherwise GET.</p></li>
* <li>params : <b>String/Object/Function</b><p class="sub-desc">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.</p></li>
- * <li>scripts : <b>Boolean</b><p class="sub-desc">If <tt>true</tt>
+ * <li>scripts : <b>Boolean</b><p class="sub-desc">If <code>true</code>
* 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 <i>after</i> the execution of the scripts.</p></li>
* <li><b>options</b> : Object<p class="sub-desc">The config object passed to the update call.</p></li></ul>
* </p></li>
* <li>scope : <b>Object</b><p class="sub-desc">The scope in which
- * to execute the callback (The callback's <tt>this</tt> reference.) If the
- * <tt>params</tt> argument is a function, this scope is used for that function also.</p></li>
+ * to execute the callback (The callback's <code>this</code> reference.) If the
+ * <code>params</code> argument is a function, this scope is used for that function also.</p></li>
* <li>discardUrl : <b>Boolean</b><p class="sub-desc">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 <tt>discardUrl:true</tt> (defaults to false).</p></li>
+ * calls. To bypass this behavior, pass <code>discardUrl:true</code> (defaults to false).</p></li>
* <li>timeout : <b>Number</b><p class="sub-desc">The number of seconds to wait for a response before
* timing out (defaults to {@link Ext.Updater.defaults#timeout}).</p></li>
* <li>text : <b>String</b><p class="sub-desc">The text to use as the innerHTML of the
},
/**
- * <p>Performs an async form post, updating this element with the response. If the form has the attribute
+ * <p>Performs an asynchronous form post, updating this element with the response. If the form has the attribute
* enctype="<a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>", it assumes it's a file upload.
* Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.</p>
* <p>File uploads are not performed using normal "Ajax" techniques, that is they are <b>not</b>
* performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
- * DOM <tt><form></tt> element temporarily modified to have its
+ * DOM <code><form></code> element temporarily modified to have its
* <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
- * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
+ * to a dynamically generated, hidden <code><iframe></code> which is inserted into the document
* but removed after the return data has been gathered.</p>
* <p>Be aware that file upload packets, sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>
* and some server technologies (notably JEE) may require some custom processing in order to
/**
* @class Ext.Updater.BasicRenderer
- * Default Content renderer. Updates the elements innerHTML with the responseText.
+ * <p>This class is a base class implementing a simple render method which updates an element using results from an Ajax request.</p>
+ * <p>The BasicRenderer updates the element's innerHTML with the responseText. To perform a custom render (i.e. XML or JSON processing),
+ * create an object with a conforming {@link #render} method and pass it to setRenderer on the Updater.</p>
*/
Ext.Updater.BasicRenderer = function(){};
Ext.Updater.BasicRenderer.prototype = {
/**
- * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
- * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
- * create an object with a "render(el, response)" method and pass it to setRenderer on the Updater.
+ * This method is called when an Ajax response is received, and an Element needs updating.
* @param {Ext.Element} el The element being rendered
- * @param {Object} response The XMLHttpRequest object
+ * @param {Object} xhr The XMLHttpRequest object
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
*/
console.groupEnd();
//*//**
- * @class Ext.util.DelayedTask
- * <p> 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.</p>
- * <p>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:</p><pre><code>
-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);
-});
- * </code></pre>
- * <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
- * option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
- * also setup a delayed task for you to buffer events.</p>
- * @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 (The <code><b>this</b></code> reference) in which the
- * function is called. If not specified, <code>this</code> will refer to the browser window.
- * @param {Array} args (optional) The default Array of arguments.
+ * @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 Specify <tt>true</tt> if the {@link #addAll}
+ * function should add function references to the collection. Defaults to
+ * <tt>false</tt>.
+ * @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.DelayedTask = function(fn, scope, args){
- var me = this,
- id,
- call = function(){
- clearInterval(id);
- id = null;
- fn.apply(scope, args || []);
- };
-
+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, {
+
+ /**
+ * @cfg {Boolean} allowFunctions Specify <tt>true</tt> if the {@link #addAll}
+ * function should add function references to the collection. Defaults to
+ * <tt>false</tt>.
+ */
+ allowFunctions : false,
+
+ /**
+ * Adds an item to the collection. Fires the {@link #add} event when complete.
+ * @param {String} key <p>The key to associate with the item, or the new item.</p>
+ * <p>If a {@link #getKey} implementation was specified for this MixedCollection,
+ * or if the key of the stored items is in a property called <tt><b>id</b></tt>,
+ * the MixedCollection will be able to <i>derive</i> the key for the new item.
+ * In this case just pass the new item in this parameter.</p>
+ * @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 <b><code>item.id</code></b> but you can provide your own implementation
+ * to return a different value as in the following examples:<pre><code>
+// 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);
+ * </code></pre>
+ * @param {Object} item The item for which to find the key.
+ * @return {Object} The key for the passed item.
+ */
+ getKey : function(o){
+ return o.id;
+ },
+
+ /**
+ * Replaces an item in the collection. Fires the {@link #replace} event when complete.
+ * @param {String} key <p>The key associated with the item to replace, or the replacement item.</p>
+ * <p>If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key
+ * of your stored items is in a property called <tt><b>id</b></tt>, then the MixedCollection
+ * will be able to <i>derive</i> 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.</p>
+ * @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.
+ * Functions references will be added to the collection if <code>{@link #allowFunctions}</code>
+ * has been set to <tt>true</tt>.
+ */
+ 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:
+ * <div class="mdetail-params"><ul>
+ * <li><b>item</b> : Mixed<p class="sub-desc">The collection item</p></li>
+ * <li><b>index</b> : Number<p class="sub-desc">The item's index</p></li>
+ * <li><b>length</b> : Number<p class="sub-desc">The total number of items in the collection</p></li>
+ * </ul></div>
+ * The function should return a boolean value. Returning false from the function will stop the iteration.
+ * @param {Function} fn The function to execute for each item.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current item in the iteration.
+ */
+ each : function(fn, scope){
+ var items = [].concat(this.items); // each safe for removal
+ for(var i = 0, len = items.length; i < len; i++){
+ if(fn.call(scope || items[i], items[i], i, len) === false){
+ break;
+ }
+ }
+ },
+
+ /**
+ * Executes the specified function once for every key in the collection, passing each
+ * key, and its associated item as the first two parameters.
+ * @param {Function} fn The function to execute for each item.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.
+ */
+ eachKey : function(fn, scope){
+ for(var i = 0, len = this.keys.length; i < len; i++){
+ fn.call(scope || window, this.keys[i], this.items[i], i, len);
+ }
+ },
+
+ /**
+ * Returns the first item in the collection which elicits a true return value from the
+ * passed selection function.
+ * @param {Function} fn The selection function to execute for each item.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.
+ * @return {Object} The first item in the collection which returned true from the selection function.
+ */
+ find : function(fn, scope){
+ for(var i = 0, len = this.items.length; i < len; i++){
+ if(fn.call(scope || window, this.items[i], this.keys[i])){
+ return this.items[i];
+ }
+ }
+ return null;
+ },
+
+ /**
+ * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete.
+ * @param {Number} index The index to insert the item at.
+ * @param {String} key The key to associate with the new item, or the item itself.
+ * @param {Object} o (optional) If the second parameter was a key, the new item.
+ * @return {Object} The item inserted.
+ */
+ insert : function(index, key, o){
+ if(arguments.length == 2){
+ o = arguments[1];
+ key = this.getKey(o);
+ }
+ if(this.containsKey(key)){
+ this.suspendEvents();
+ this.removeKey(key);
+ this.resumeEvents();
+ }
+ if(index >= this.length){
+ return this.add(key, o);
+ }
+ this.length++;
+ this.items.splice(index, 0, o);
+ if(typeof key != 'undefined' && key !== null){
+ this.map[key] = o;
+ }
+ this.keys.splice(index, 0, key);
+ this.fireEvent('add', index, o, key);
+ return o;
+ },
+
+ /**
+ * Remove an item from the collection.
+ * @param {Object} o The item to remove.
+ * @return {Object} The item removed or false if no item was removed.
+ */
+ remove : function(o){
+ return this.removeAt(this.indexOf(o));
+ },
+
+ /**
+ * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete.
+ * @param {Number} index The index within the collection of the item to remove.
+ * @return {Object} The item removed or false if no item was removed.
+ */
+ removeAt : function(index){
+ if(index < this.length && index >= 0){
+ this.length--;
+ var o = this.items[index];
+ this.items.splice(index, 1);
+ var key = this.keys[index];
+ if(typeof key != 'undefined'){
+ delete this.map[key];
+ }
+ this.keys.splice(index, 1);
+ this.fireEvent('remove', o, key);
+ return o;
+ }
+ return false;
+ },
+
+ /**
+ * Removed an item associated with the passed key fom the collection.
+ * @param {String} key The key of the item to remove.
+ * @return {Object} The item removed or false if no item was removed.
+ */
+ removeKey : function(key){
+ return this.removeAt(this.indexOfKey(key));
+ },
+
+ /**
+ * Returns the number of items in the collection.
+ * @return {Number} the number of items in the collection.
+ */
+ getCount : function(){
+ return this.length;
+ },
+
+ /**
+ * Returns index within the collection of the passed Object.
+ * @param {Object} o The item to find the index of.
+ * @return {Number} index of the item. Returns -1 if not found.
+ */
+ indexOf : function(o){
+ return this.items.indexOf(o);
+ },
+
+ /**
+ * Returns index within the collection of the passed key.
+ * @param {String} key The key to find the index of.
+ * @return {Number} index of the key.
+ */
+ indexOfKey : function(key){
+ return this.keys.indexOf(key);
+ },
+
+ /**
+ * Returns the item associated with the passed key OR index.
+ * Key has priority over index. This is the equivalent
+ * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}.
+ * @param {String/Number} key The key or index of the item.
+ * @return {Object} If the item is found, returns the item. If the item was not found, returns <tt>undefined</tt>.
+ * If an item was found, but is a Class, returns <tt>null</tt>.
+ */
+ item : function(key){
+ var mk = this.map[key],
+ item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined;
+ return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype!
+ },
+
+ /**
+ * Returns the item at the specified index.
+ * @param {Number} index The index of the item.
+ * @return {Object} The item at the specified index.
+ */
+ itemAt : function(index){
+ return this.items[index];
+ },
+
+ /**
+ * Returns the item associated with the passed key.
+ * @param {String/Number} key The key of the item.
+ * @return {Object} The item associated with the passed key.
+ */
+ key : function(key){
+ return this.map[key];
+ },
+
+ /**
+ * Returns true if the collection contains the passed Object as an item.
+ * @param {Object} o The Object to look for in the collection.
+ * @return {Boolean} True if the collection contains the Object as an item.
+ */
+ contains : function(o){
+ return this.indexOf(o) != -1;
+ },
+
+ /**
+ * Returns true if the collection contains the passed Object as a key.
+ * @param {String} key The key to look for in the collection.
+ * @return {Boolean} True if the collection contains the Object as a key.
+ */
+ containsKey : function(key){
+ return typeof this.map[key] != 'undefined';
+ },
+
+ /**
+ * Removes all items from the collection. Fires the {@link #clear} event when complete.
+ */
+ clear : function(){
+ this.length = 0;
+ this.items = [];
+ this.keys = [];
+ this.map = {};
+ this.fireEvent('clear');
+ },
+
+ /**
+ * Returns the first item in the collection.
+ * @return {Object} the first item in the collection..
+ */
+ first : function(){
+ return this.items[0];
+ },
+
+ /**
+ * Returns the last item in the collection.
+ * @return {Object} the last item in the collection..
+ */
+ last : function(){
+ return this.items[this.length-1];
+ },
+
+ /**
+ * @private
+ * @param {String} property Property to sort by ('key', 'value', or 'index')
+ * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.
+ * @param {Function} fn (optional) Comparison function that defines the sort order.
+ * Defaults to sorting by numeric value.
+ */
+ _sort : function(property, dir, fn){
+ var i,
+ len,
+ dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
+ c = [], k = this.keys, items = this.items;
+
+ fn = fn || function(a, b){
+ return a-b;
+ };
+ for(i = 0, len = items.length; i < len; i++){
+ c[c.length] = {key: k[i], value: items[i], index: i};
+ }
+ c.sort(function(a, b){
+ var v = fn(a[property], b[property]) * dsc;
+ if(v === 0){
+ v = (a.index < b.index ? -1 : 1);
+ }
+ return v;
+ });
+ for(i = 0, len = c.length; i < len; i++){
+ items[i] = c[i].value;
+ k[i] = c[i].key;
+ }
+ this.fireEvent('sort', this);
+ },
+
+ /**
+ * Sorts this collection by <b>item</b> value with the passed comparison function.
+ * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
+ * @param {Function} fn (optional) Comparison function that defines the sort order.
+ * Defaults to sorting by numeric value.
+ */
+ sort : function(dir, fn){
+ this._sort('value', dir, fn);
+ },
+
+ /**
+ * Sorts this collection by <b>key</b>s.
+ * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
+ * @param {Function} fn (optional) Comparison function that defines the sort order.
+ * Defaults to sorting by case insensitive string.
+ */
+ keySort : function(dir, fn){
+ this._sort('key', dir, fn || function(a, b){
+ var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ });
+ },
+
+ /**
+ * Returns a range of items in this collection
+ * @param {Number} startIndex (optional) The starting index. Defaults to 0.
+ * @param {Number} endIndex (optional) The ending index. Defaults to the last item.
+ * @return {Array} An array of items
+ */
+ getRange : function(start, end){
+ var items = this.items;
+ if(items.length < 1){
+ return [];
+ }
+ start = start || 0;
+ end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1);
+ var i, r = [];
+ if(start <= end){
+ for(i = start; i <= end; i++) {
+ r[r.length] = items[i];
+ }
+ }else{
+ for(i = start; i >= end; i--) {
+ r[r.length] = items[i];
+ }
+ }
+ return r;
+ },
+
+ /**
+ * Filter the <i>objects</i> in this collection by a specific property.
+ * Returns a new collection that has been filtered.
+ * @param {String} property A property on your objects
+ * @param {String/RegExp} value Either string that the property values
+ * should start with or a RegExp to test against the property
+ * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning
+ * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False).
+ * @return {MixedCollection} The new filtered collection
+ */
+ filter : function(property, value, anyMatch, caseSensitive){
+ if(Ext.isEmpty(value, false)){
+ return this.clone();
+ }
+ value = this.createValueMatcher(value, anyMatch, caseSensitive);
+ return this.filterBy(function(o){
+ return o && value.test(o[property]);
+ });
+ },
+
+ /**
+ * Filter by a function. Returns a <i>new</i> collection that has been filtered.
+ * The passed function will be called with each object in the collection.
+ * If the function returns true, the value is included otherwise it is filtered.
+ * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to this MixedCollection.
+ * @return {MixedCollection} The new filtered collection
+ */
+ filterBy : function(fn, scope){
+ var r = new Ext.util.MixedCollection();
+ r.getKey = this.getKey;
+ var k = this.keys, it = this.items;
+ for(var i = 0, len = it.length; i < len; i++){
+ if(fn.call(scope||this, it[i], k[i])){
+ r.add(k[i], it[i]);
+ }
+ }
+ return r;
+ },
+
/**
- * 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, <code>this</code> will refer to the browser window.
- * @param {Array} newArgs (optional) Overrides args passed to constructor
+ * Finds the index of the first matching object in this collection by a specific property/value.
+ * @param {String} property The name of a property on your objects.
+ * @param {String/RegExp} value A string that the property values
+ * should start with or a RegExp to test against the property.
+ * @param {Number} start (optional) The index to start searching at (defaults to 0).
+ * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning.
+ * @param {Boolean} caseSensitive (optional) True for case sensitive comparison.
+ * @return {Number} The matched index or -1
*/
- me.delay = function(delay, newFn, newScope, newArgs){
- me.cancel();
- fn = newFn || fn;
- scope = newScope || scope;
- args = newArgs || args;
- id = setInterval(call, delay);
- };
+ findIndex : function(property, value, start, anyMatch, caseSensitive){
+ if(Ext.isEmpty(value, false)){
+ return -1;
+ }
+ value = this.createValueMatcher(value, anyMatch, caseSensitive);
+ return this.findIndexBy(function(o){
+ return o && value.test(o[property]);
+ }, null, start);
+ },
/**
- * Cancel the last queued timeout
+ * Find the index of the first matching object in this collection by a function.
+ * If the function returns <i>true</i> it is considered a match.
+ * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key).
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to this MixedCollection.
+ * @param {Number} start (optional) The index to start searching at (defaults to 0).
+ * @return {Number} The matched index or -1
*/
- me.cancel = function(){
- if(id){
- clearInterval(id);
- id = null;
+ findIndexBy : function(fn, scope, start){
+ var k = this.keys, it = this.items;
+ for(var i = (start||0), len = it.length; i < len; i++){
+ if(fn.call(scope||this, it[i], k[i])){
+ return i;
+ }
}
- };
-};/**\r
- * @class Ext.util.MixedCollection\r
- * @extends Ext.util.Observable\r
- * A Collection class that maintains both numeric indexes and keys and exposes events.\r
- * @constructor\r
- * @param {Boolean} allowFunctions Specify <tt>true</tt> if the {@link #addAll}\r
- * function should add function references to the collection. Defaults to\r
- * <tt>false</tt>.\r
- * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection\r
- * and return the key value for that item. This is used when available to look up the key on items that\r
- * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is\r
- * equivalent to providing an implementation for the {@link #getKey} method.\r
- */\r
-Ext.util.MixedCollection = function(allowFunctions, keyFn){\r
- this.items = [];\r
- this.map = {};\r
- this.keys = [];\r
- this.length = 0;\r
- this.addEvents(\r
- /**\r
- * @event clear\r
- * Fires when the collection is cleared.\r
- */\r
- 'clear',\r
- /**\r
- * @event add\r
- * Fires when an item is added to the collection.\r
- * @param {Number} index The index at which the item was added.\r
- * @param {Object} o The item added.\r
- * @param {String} key The key associated with the added item.\r
- */\r
- 'add',\r
- /**\r
- * @event replace\r
- * Fires when an item is replaced in the collection.\r
- * @param {String} key he key associated with the new added.\r
- * @param {Object} old The item being replaced.\r
- * @param {Object} new The new item.\r
- */\r
- 'replace',\r
- /**\r
- * @event remove\r
- * Fires when an item is removed from the collection.\r
- * @param {Object} o The item being removed.\r
- * @param {String} key (optional) The key associated with the removed item.\r
- */\r
- 'remove',\r
- 'sort'\r
- );\r
- this.allowFunctions = allowFunctions === true;\r
- if(keyFn){\r
- this.getKey = keyFn;\r
- }\r
- Ext.util.MixedCollection.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, {\r
-\r
- /**\r
- * @cfg {Boolean} allowFunctions Specify <tt>true</tt> if the {@link #addAll}\r
- * function should add function references to the collection. Defaults to\r
- * <tt>false</tt>.\r
- */\r
- allowFunctions : false,\r
-\r
- /**\r
- * Adds an item to the collection. Fires the {@link #add} event when complete.\r
- * @param {String} key <p>The key to associate with the item, or the new item.</p>\r
- * <p>If a {@link #getKey} implementation was specified for this MixedCollection,\r
- * or if the key of the stored items is in a property called <tt><b>id</b></tt>,\r
- * the MixedCollection will be able to <i>derive</i> the key for the new item.\r
- * In this case just pass the new item in this parameter.</p>\r
- * @param {Object} o The item to add.\r
- * @return {Object} The item added.\r
- */\r
- add : function(key, o){\r
- if(arguments.length == 1){\r
- o = arguments[0];\r
- key = this.getKey(o);\r
- }\r
- if(typeof key != 'undefined' && key !== null){\r
- var old = this.map[key];\r
- if(typeof old != 'undefined'){\r
- return this.replace(key, o);\r
- }\r
- this.map[key] = o;\r
- }\r
- this.length++;\r
- this.items.push(o);\r
- this.keys.push(key);\r
- this.fireEvent('add', this.length-1, o, key);\r
- return o;\r
- },\r
-\r
- /**\r
- * MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation\r
- * simply returns <b><code>item.id</code></b> but you can provide your own implementation\r
- * to return a different value as in the following examples:<pre><code>\r
-// normal way\r
-var mc = new Ext.util.MixedCollection();\r
-mc.add(someEl.dom.id, someEl);\r
-mc.add(otherEl.dom.id, otherEl);\r
-//and so on\r
-\r
-// using getKey\r
-var mc = new Ext.util.MixedCollection();\r
-mc.getKey = function(el){\r
- return el.dom.id;\r
-};\r
-mc.add(someEl);\r
-mc.add(otherEl);\r
-\r
-// or via the constructor\r
-var mc = new Ext.util.MixedCollection(false, function(el){\r
- return el.dom.id;\r
-});\r
-mc.add(someEl);\r
-mc.add(otherEl);\r
- * </code></pre>\r
- * @param {Object} item The item for which to find the key.\r
- * @return {Object} The key for the passed item.\r
- */\r
- getKey : function(o){\r
- return o.id;\r
- },\r
-\r
- /**\r
- * Replaces an item in the collection. Fires the {@link #replace} event when complete.\r
- * @param {String} key <p>The key associated with the item to replace, or the replacement item.</p>\r
- * <p>If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key\r
- * of your stored items is in a property called <tt><b>id</b></tt>, then the MixedCollection\r
- * will be able to <i>derive</i> the key of the replacement item. If you want to replace an item\r
- * with one having the same key value, then just pass the replacement item in this parameter.</p>\r
- * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate\r
- * with that key.\r
- * @return {Object} The new item.\r
- */\r
- replace : function(key, o){\r
- if(arguments.length == 1){\r
- o = arguments[0];\r
- key = this.getKey(o);\r
- }\r
- var old = this.map[key];\r
- if(typeof key == 'undefined' || key === null || typeof old == 'undefined'){\r
- return this.add(key, o);\r
- }\r
- var index = this.indexOfKey(key);\r
- this.items[index] = o;\r
- this.map[key] = o;\r
- this.fireEvent('replace', key, old, o);\r
- return o;\r
- },\r
-\r
- /**\r
- * Adds all elements of an Array or an Object to the collection.\r
- * @param {Object/Array} objs An Object containing properties which will be added\r
- * to the collection, or an Array of values, each of which are added to the collection.\r
- * Functions references will be added to the collection if <code>{@link #allowFunctions}</code>\r
- * has been set to <tt>true</tt>.\r
- */\r
- addAll : function(objs){\r
- if(arguments.length > 1 || Ext.isArray(objs)){\r
- var args = arguments.length > 1 ? arguments : objs;\r
- for(var i = 0, len = args.length; i < len; i++){\r
- this.add(args[i]);\r
- }\r
- }else{\r
- for(var key in objs){\r
- if(this.allowFunctions || typeof objs[key] != 'function'){\r
- this.add(key, objs[key]);\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Executes the specified function once for every item in the collection, passing the following arguments:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>item</b> : Mixed<p class="sub-desc">The collection item</p></li>\r
- * <li><b>index</b> : Number<p class="sub-desc">The item's index</p></li>\r
- * <li><b>length</b> : Number<p class="sub-desc">The total number of items in the collection</p></li>\r
- * </ul></div>\r
- * The function should return a boolean value. Returning false from the function will stop the iteration.\r
- * @param {Function} fn The function to execute for each item.\r
- * @param {Object} scope (optional) The scope in which to execute the function.\r
- */\r
- each : function(fn, scope){\r
- var items = [].concat(this.items); // each safe for removal\r
- for(var i = 0, len = items.length; i < len; i++){\r
- if(fn.call(scope || items[i], items[i], i, len) === false){\r
- break;\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Executes the specified function once for every key in the collection, passing each\r
- * key, and its associated item as the first two parameters.\r
- * @param {Function} fn The function to execute for each item.\r
- * @param {Object} scope (optional) The scope in which to execute the function.\r
- */\r
- eachKey : function(fn, scope){\r
- for(var i = 0, len = this.keys.length; i < len; i++){\r
- fn.call(scope || window, this.keys[i], this.items[i], i, len);\r
- }\r
- },\r
-\r
- /**\r
- * Returns the first item in the collection which elicits a true return value from the\r
- * passed selection function.\r
- * @param {Function} fn The selection function to execute for each item.\r
- * @param {Object} scope (optional) The scope in which to execute the function.\r
- * @return {Object} The first item in the collection which returned true from the selection function.\r
- */\r
- find : function(fn, scope){\r
- for(var i = 0, len = this.items.length; i < len; i++){\r
- if(fn.call(scope || window, this.items[i], this.keys[i])){\r
- return this.items[i];\r
- }\r
- }\r
- return null;\r
- },\r
-\r
- /**\r
- * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete.\r
- * @param {Number} index The index to insert the item at.\r
- * @param {String} key The key to associate with the new item, or the item itself.\r
- * @param {Object} o (optional) If the second parameter was a key, the new item.\r
- * @return {Object} The item inserted.\r
- */\r
- insert : function(index, key, o){\r
- if(arguments.length == 2){\r
- o = arguments[1];\r
- key = this.getKey(o);\r
- }\r
- if(this.containsKey(key)){\r
- this.suspendEvents();\r
- this.removeKey(key);\r
- this.resumeEvents();\r
- }\r
- if(index >= this.length){\r
- return this.add(key, o);\r
- }\r
- this.length++;\r
- this.items.splice(index, 0, o);\r
- if(typeof key != 'undefined' && key !== null){\r
- this.map[key] = o;\r
- }\r
- this.keys.splice(index, 0, key);\r
- this.fireEvent('add', index, o, key);\r
- return o;\r
- },\r
-\r
- /**\r
- * Remove an item from the collection.\r
- * @param {Object} o The item to remove.\r
- * @return {Object} The item removed or false if no item was removed.\r
- */\r
- remove : function(o){\r
- return this.removeAt(this.indexOf(o));\r
- },\r
-\r
- /**\r
- * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete.\r
- * @param {Number} index The index within the collection of the item to remove.\r
- * @return {Object} The item removed or false if no item was removed.\r
- */\r
- removeAt : function(index){\r
- if(index < this.length && index >= 0){\r
- this.length--;\r
- var o = this.items[index];\r
- this.items.splice(index, 1);\r
- var key = this.keys[index];\r
- if(typeof key != 'undefined'){\r
- delete this.map[key];\r
- }\r
- this.keys.splice(index, 1);\r
- this.fireEvent('remove', o, key);\r
- return o;\r
- }\r
- return false;\r
- },\r
-\r
- /**\r
- * Removed an item associated with the passed key fom the collection.\r
- * @param {String} key The key of the item to remove.\r
- * @return {Object} The item removed or false if no item was removed.\r
- */\r
- removeKey : function(key){\r
- return this.removeAt(this.indexOfKey(key));\r
- },\r
-\r
- /**\r
- * Returns the number of items in the collection.\r
- * @return {Number} the number of items in the collection.\r
- */\r
- getCount : function(){\r
- return this.length;\r
- },\r
- \r
- /**\r
- * Returns index within the collection of the passed Object.\r
- * @param {Object} o The item to find the index of.\r
- * @return {Number} index of the item. Returns -1 if not found.\r
- */\r
- indexOf : function(o){\r
- return this.items.indexOf(o);\r
- },\r
-\r
- /**\r
- * Returns index within the collection of the passed key.\r
- * @param {String} key The key to find the index of.\r
- * @return {Number} index of the key.\r
- */\r
- indexOfKey : function(key){\r
- return this.keys.indexOf(key);\r
- },\r
-\r
- /**\r
- * Returns the item associated with the passed key OR index.\r
- * Key has priority over index. This is the equivalent\r
- * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}.\r
- * @param {String/Number} key The key or index of the item.\r
- * @return {Object} If the item is found, returns the item. If the item was not found, returns <tt>undefined</tt>.\r
- * If an item was found, but is a Class, returns <tt>null</tt>.\r
- */\r
- item : function(key){\r
- var mk = this.map[key],\r
- item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined;\r
- return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype!\r
- },\r
-\r
- /**\r
- * Returns the item at the specified index.\r
- * @param {Number} index The index of the item.\r
- * @return {Object} The item at the specified index.\r
- */\r
- itemAt : function(index){\r
- return this.items[index];\r
- },\r
-\r
- /**\r
- * Returns the item associated with the passed key.\r
- * @param {String/Number} key The key of the item.\r
- * @return {Object} The item associated with the passed key.\r
- */\r
- key : function(key){\r
- return this.map[key];\r
- },\r
-\r
- /**\r
- * Returns true if the collection contains the passed Object as an item.\r
- * @param {Object} o The Object to look for in the collection.\r
- * @return {Boolean} True if the collection contains the Object as an item.\r
- */\r
- contains : function(o){\r
- return this.indexOf(o) != -1;\r
- },\r
-\r
- /**\r
- * Returns true if the collection contains the passed Object as a key.\r
- * @param {String} key The key to look for in the collection.\r
- * @return {Boolean} True if the collection contains the Object as a key.\r
- */\r
- containsKey : function(key){\r
- return typeof this.map[key] != 'undefined';\r
- },\r
-\r
- /**\r
- * Removes all items from the collection. Fires the {@link #clear} event when complete.\r
- */\r
- clear : function(){\r
- this.length = 0;\r
- this.items = [];\r
- this.keys = [];\r
- this.map = {};\r
- this.fireEvent('clear');\r
- },\r
-\r
- /**\r
- * Returns the first item in the collection.\r
- * @return {Object} the first item in the collection..\r
- */\r
- first : function(){\r
- return this.items[0];\r
- },\r
-\r
- /**\r
- * Returns the last item in the collection.\r
- * @return {Object} the last item in the collection..\r
- */\r
- last : function(){\r
- return this.items[this.length-1];\r
- },\r
-\r
- /**\r
- * @private\r
- * @param {String} property Property to sort by ('key', 'value', or 'index')\r
- * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.\r
- * @param {Function} fn (optional) Comparison function that defines the sort order.\r
- * Defaults to sorting by numeric value. \r
- */\r
- _sort : function(property, dir, fn){\r
- var i,\r
- len,\r
- dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,\r
- c = [], k = this.keys, items = this.items;\r
- \r
- fn = fn || function(a, b){\r
- return a-b;\r
- };\r
- for(i = 0, len = items.length; i < len; i++){\r
- c[c.length] = {key: k[i], value: items[i], index: i};\r
- }\r
- c.sort(function(a, b){\r
- var v = fn(a[property], b[property]) * dsc;\r
- if(v === 0){\r
- v = (a.index < b.index ? -1 : 1);\r
- }\r
- return v;\r
- });\r
- for(i = 0, len = c.length; i < len; i++){\r
- items[i] = c[i].value;\r
- k[i] = c[i].key;\r
- }\r
- this.fireEvent('sort', this);\r
- },\r
-\r
- /**\r
- * Sorts this collection by <b>item</b> value with the passed comparison function.\r
- * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.\r
- * @param {Function} fn (optional) Comparison function that defines the sort order.\r
- * Defaults to sorting by numeric value. \r
- */\r
- sort : function(dir, fn){\r
- this._sort('value', dir, fn);\r
- },\r
-\r
- /**\r
- * Sorts this collection by <b>key</b>s.\r
- * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.\r
- * @param {Function} fn (optional) Comparison function that defines the sort order.\r
- * Defaults to sorting by case insensitive string. \r
- */\r
- keySort : function(dir, fn){\r
- this._sort('key', dir, fn || function(a, b){\r
- var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();\r
- return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);\r
- });\r
- },\r
-\r
- /**\r
- * Returns a range of items in this collection\r
- * @param {Number} startIndex (optional) The starting index. Defaults to 0.\r
- * @param {Number} endIndex (optional) The ending index. Defaults to the last item.\r
- * @return {Array} An array of items\r
- */\r
- getRange : function(start, end){\r
- var items = this.items;\r
- if(items.length < 1){\r
- return [];\r
- }\r
- start = start || 0;\r
- end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1);\r
- var i, r = [];\r
- if(start <= end){\r
- for(i = start; i <= end; i++) {\r
- r[r.length] = items[i];\r
- }\r
- }else{\r
- for(i = start; i >= end; i--) {\r
- r[r.length] = items[i];\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- /**\r
- * Filter the <i>objects</i> in this collection by a specific property.\r
- * Returns a new collection that has been filtered.\r
- * @param {String} property A property on your objects\r
- * @param {String/RegExp} value Either string that the property values\r
- * should start with or a RegExp to test against the property\r
- * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning\r
- * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False).\r
- * @return {MixedCollection} The new filtered collection\r
- */\r
- filter : function(property, value, anyMatch, caseSensitive){\r
- if(Ext.isEmpty(value, false)){\r
- return this.clone();\r
- }\r
- value = this.createValueMatcher(value, anyMatch, caseSensitive);\r
- return this.filterBy(function(o){\r
- return o && value.test(o[property]);\r
- });\r
- },\r
-\r
- /**\r
- * Filter by a function. Returns a <i>new</i> collection that has been filtered.\r
- * The passed function will be called with each object in the collection.\r
- * If the function returns true, the value is included otherwise it is filtered.\r
- * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)\r
- * @param {Object} scope (optional) The scope of the function (defaults to this)\r
- * @return {MixedCollection} The new filtered collection\r
- */\r
- filterBy : function(fn, scope){\r
- var r = new Ext.util.MixedCollection();\r
- r.getKey = this.getKey;\r
- var k = this.keys, it = this.items;\r
- for(var i = 0, len = it.length; i < len; i++){\r
- if(fn.call(scope||this, it[i], k[i])){\r
- r.add(k[i], it[i]);\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- /**\r
- * Finds the index of the first matching object in this collection by a specific property/value.\r
- * @param {String} property The name of a property on your objects.\r
- * @param {String/RegExp} value A string that the property values\r
- * should start with or a RegExp to test against the property.\r
- * @param {Number} start (optional) The index to start searching at (defaults to 0).\r
- * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning.\r
- * @param {Boolean} caseSensitive (optional) True for case sensitive comparison.\r
- * @return {Number} The matched index or -1\r
- */\r
- findIndex : function(property, value, start, anyMatch, caseSensitive){\r
- if(Ext.isEmpty(value, false)){\r
- return -1;\r
- }\r
- value = this.createValueMatcher(value, anyMatch, caseSensitive);\r
- return this.findIndexBy(function(o){\r
- return o && value.test(o[property]);\r
- }, null, start);\r
- },\r
-\r
- /**\r
- * Find the index of the first matching object in this collection by a function.\r
- * If the function returns <i>true</i> it is considered a match.\r
- * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key).\r
- * @param {Object} scope (optional) The scope of the function (defaults to this).\r
- * @param {Number} start (optional) The index to start searching at (defaults to 0).\r
- * @return {Number} The matched index or -1\r
- */\r
- findIndexBy : function(fn, scope, start){\r
- var k = this.keys, it = this.items;\r
- for(var i = (start||0), len = it.length; i < len; i++){\r
- if(fn.call(scope||this, it[i], k[i])){\r
- return i;\r
- }\r
- }\r
- return -1;\r
- },\r
-\r
- // private\r
- createValueMatcher : function(value, anyMatch, caseSensitive){\r
- if(!value.exec){ // not a regex\r
- value = String(value);\r
- value = new RegExp((anyMatch === true ? '' : '^') + Ext.escapeRe(value), caseSensitive ? '' : 'i');\r
- }\r
- return value;\r
- },\r
-\r
- /**\r
- * Creates a shallow copy of this collection\r
- * @return {MixedCollection}\r
- */\r
- clone : function(){\r
- var r = new Ext.util.MixedCollection();\r
- var k = this.keys, it = this.items;\r
- for(var i = 0, len = it.length; i < len; i++){\r
- r.add(k[i], it[i]);\r
- }\r
- r.getKey = this.getKey;\r
- return r;\r
- }\r
-});\r
-/**\r
- * This method calls {@link #item item()}.\r
- * Returns the item associated with the passed key OR index. Key has priority\r
- * over index. This is the equivalent of calling {@link #key} first, then if\r
- * nothing matched calling {@link #itemAt}.\r
- * @param {String/Number} key The key or index of the item.\r
- * @return {Object} If the item is found, returns the item. If the item was\r
- * not found, returns <tt>undefined</tt>. If an item was found, but is a Class,\r
- * returns <tt>null</tt>.\r
- */\r
+ return -1;
+ },
+
+ // private
+ createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
+ if (!value.exec) { // not a regex
+ var er = Ext.escapeRe;
+ value = String(value);
+ if (anyMatch === true) {
+ value = er(value);
+ } else {
+ value = '^' + er(value);
+ if (exactMatch === true) {
+ value += '$';
+ }
+ }
+ value = new RegExp(value, caseSensitive ? '' : 'i');
+ }
+ return value;
+ },
+
+ /**
+ * Creates a shallow copy of this collection
+ * @return {MixedCollection}
+ */
+ clone : function(){
+ var r = new Ext.util.MixedCollection();
+ var k = this.keys, it = this.items;
+ for(var i = 0, len = it.length; i < len; i++){
+ r.add(k[i], it[i]);
+ }
+ r.getKey = this.getKey;
+ return r;
+ }
+});
+/**
+ * This method calls {@link #item item()}.
+ * Returns the item associated with the passed key OR index. Key has priority
+ * over index. This is the equivalent of calling {@link #key} first, then if
+ * nothing matched calling {@link #itemAt}.
+ * @param {String/Number} key The key or index of the item.
+ * @return {Object} If the item is found, returns the item. If the item was
+ * not found, returns <tt>undefined</tt>. If an item was found, but is a Class,
+ * returns <tt>null</tt>.
+ */
Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;/**
* @class Ext.util.JSON
* Modified version of Douglas Crockford"s json.js that doesn"t
* @singleton\r
*/\r
Ext.util.Format = function(){\r
- var trimRe = /^\s+|\s+$/g;\r
+ var trimRe = /^\s+|\s+$/g,\r
+ stripTagsRE = /<\/?[^>]+>/gi,\r
+ stripScriptsRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,\r
+ nl2brRe = /\r?\n/g;\r
+ \r
return {\r
/**\r
* Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length\r
ellipsis : function(value, len, word){\r
if(value && value.length > len){\r
if(word){\r
- var vs = value.substr(0, len - 2);\r
- var index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));\r
+ var vs = value.substr(0, len - 2),\r
+ index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));\r
if(index == -1 || index < (len - 15)){\r
return value.substr(0, len - 3) + "...";\r
}else{\r
v = (Math.round((v-0)*100))/100;\r
v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);\r
v = String(v);\r
- var ps = v.split('.');\r
- var whole = ps[0];\r
- var sub = ps[1] ? '.'+ ps[1] : '.00';\r
- var r = /(\d+)(\d{3})/;\r
+ var ps = v.split('.'),\r
+ whole = ps[0],\r
+ sub = ps[1] ? '.'+ ps[1] : '.00',\r
+ r = /(\d+)(\d{3})/;\r
while (r.test(whole)) {\r
whole = whole.replace(r, '$1' + ',' + '$2');\r
}\r
return Ext.util.Format.date(v, format);\r
};\r
},\r
-\r
- // private\r
- stripTagsRE : /<\/?[^>]+>/gi,\r
\r
/**\r
* Strips all HTML tags\r
* @return {String} The stripped text\r
*/\r
stripTags : function(v){\r
- return !v ? v : String(v).replace(this.stripTagsRE, "");\r
+ return !v ? v : String(v).replace(stripTagsRE, "");\r
},\r
\r
- stripScriptsRe : /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,\r
-\r
/**\r
* Strips all script tags\r
* @param {Mixed} value The text from which to strip script tags\r
* @return {String} The stripped text\r
*/\r
stripScripts : function(v){\r
- return !v ? v : String(v).replace(this.stripScriptsRe, "");\r
+ return !v ? v : String(v).replace(stripScriptsRe, "");\r
},\r
\r
/**\r
* @return {String} The string with embedded <br/> tags in place of newlines.\r
*/\r
nl2br : function(v){\r
- return v === undefined || v === null ? '' : v.replace(/\n/g, '<br/>');\r
+ return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '<br/>');\r
}\r
}\r
-}();/**
+}();\r
+/**
* @class Ext.XTemplate
* @extends Ext.Template
* <p>A template class that supports advanced functionality like:<div class="mdetail-params"><ul>
e.stopEvent();
}
},
+
+ /**
+ * Destroy this KeyNav (this is the same as calling disable).
+ */
+ destroy: function(){
+ this.disable();
+ },
/**
* Enable this KeyNav
* following options:\r
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}\r
* @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope of the function\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.\r
*/\r
on : function(key, fn, scope){\r
var keyCode, shift, ctrl, alt;\r
var instance = {
/**
+ * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p>
* Returns the size of the specified text based on the internal element's style and width properties
* @param {String} text The text to measure
* @return {Object} An object containing the text's size {width: (width), height: (height)}
},
/**
+ * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p>
* Binds this TextMetrics instance to an element from which to copy existing CSS styles
* that can affect the size of the rendered text
* @param {String/HTMLElement} el The element, dom node or id
},
/**
+ * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p>
* Sets a fixed width on the internal measurement element. If the text will be multiline, you have
* to set a fixed width in order to accurately measure the text height.
* @param {Number} width The width to set on the element
},
/**
+ * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p>
* Returns the measured width of the specified text
* @param {String} text The text to measure
* @return {Number} width The width in pixels
},
/**
+ * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p>
* Returns the measured height of the specified text. For multiline text, be sure to call
* {@link #setFixedWidth} if necessary.
* @param {String} text The text to measure
git.ithinksw.org / extjs.git / blobdiff