Lift Framework example source code file (ext-core-debug.js)

(optional) The number of times to execute the task before * stopping automatically (defaults to indefinite).</div> * </ul> * @return {Object} The task */ this.start = function(task){ tasks.push(task); task.taskStartTime = new Date().getTime(); task.taskRunTime = 0; task.taskRunCount = 0; startThread(); return task; }; /** * Stops an existing running task. * @method stop * @param {Object} task The task to stop * @return {Object} The task */ this.stop = function(task){ removeTask(task); return task; }; /** * Stops all tasks that are currently running. * @method stopAll */ this.stopAll = function(){ stopThread(); for(var i = 0, len = tasks.length; i < len; i++){ if(tasks[i].onStop){ tasks[i].onStop(); } } tasks = []; removeQueue = []; }; }; /** * @class Ext.TaskMgr * @extends Ext.util.TaskRunner * A static {@link Ext.util.TaskRunner} instance that can be used to start and stop arbitrary tasks. See * {@link Ext.util.TaskRunner} for supported methods and task config properties. * <pre> // Start a simple clock task that updates a div once per second var task = { run: function(){ Ext.fly('clock').update(new Date().format('g:i:s A')); }, interval: 1000 //1 second } Ext.TaskMgr.start(task); </code> * @singleton */ Ext.TaskMgr = new Ext.util.TaskRunner();/** * @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>

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>

* <p>Note that we are using a DelayedTask here to illustrate a point. The configuration * option <tt>buffer 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>this reference) in which the * function is called. If not specified, <code>this will refer to the browser window. * @param {Array} args (optional) The default Array of arguments. */ Ext.util.DelayedTask = function(fn, scope, args){ var me = this, id, call = function(){ clearInterval(id); id = null; fn.apply(scope, args || []); }; /** * Cancels any pending timeout and queues a new one * @param {Number} delay The milliseconds to delay * @param {Function} newFn (optional) Overrides function passed to constructor * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope * is specified, <code>this will refer to the browser window. * @param {Array} newArgs (optional) Overrides args passed to constructor */ me.delay = function(delay, newFn, newScope, newArgs){ me.cancel(); fn = newFn || fn; scope = newScope || scope; args = newArgs || args; id = setInterval(call, delay); }; /** * Cancel the last queued timeout */ me.cancel = function(){ if(id){ clearInterval(id); id = null; } }; };(function(){ var libFlyweight; function fly(el) { if (!libFlyweight) { libFlyweight = new Ext.Element.Flyweight(); } libFlyweight.dom = el; return libFlyweight; } (function(){ var doc = document, isCSS1 = doc.compatMode == "CSS1Compat", MAX = Math.max, ROUND = Math.round, PARSEINT = parseInt; Ext.lib.Dom = { isAncestor : function(p, c) { var ret = false; p = Ext.getDom(p); c = Ext.getDom(c); if (p && c) { if (p.contains) { return p.contains(c); } else if (p.compareDocumentPosition) { return !!(p.compareDocumentPosition(c) & 16); } else { while (c = c.parentNode) { ret = c == p || ret; } } } return ret; }, getViewWidth : function(full) { return full ? this.getDocumentWidth() : this.getViewportWidth(); }, getViewHeight : function(full) { return full ? this.getDocumentHeight() : this.getViewportHeight(); }, getDocumentHeight: function() { return MAX(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, this.getViewportHeight()); }, getDocumentWidth: function() { return MAX(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, this.getViewportWidth()); }, getViewportHeight: function(){ return Ext.isIE ? (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) : self.innerHeight; }, getViewportWidth : function() { return !Ext.isStrict && !Ext.isOpera ? doc.body.clientWidth : Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth; }, getY : function(el) { return this.getXY(el)[1]; }, getX : function(el) { return this.getXY(el)[0]; }, getXY : function(el) { var p, pe, b, bt, bl, dbd, x = 0, y = 0, scroll, hasAbsolute, bd = (doc.body || doc.documentElement), ret = [0,0]; el = Ext.getDom(el); if(el != bd){ if (el.getBoundingClientRect) { b = el.getBoundingClientRect(); scroll = fly(document).getScroll(); ret = [ROUND(b.left + scroll.left), ROUND(b.top + scroll.top)]; } else { p = el; hasAbsolute = fly(el).isStyle("position", "absolute"); while (p) { pe = fly(p); x += p.offsetLeft; y += p.offsetTop; hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute"); if (Ext.isGecko) { y += bt = PARSEINT(pe.getStyle("borderTopWidth"), 10) || 0; x += bl = PARSEINT(pe.getStyle("borderLeftWidth"), 10) || 0; if (p != el && !pe.isStyle('overflow','visible')) { x += bl; y += bt; } } p = p.offsetParent; } if (Ext.isSafari && hasAbsolute) { x -= bd.offsetLeft; y -= bd.offsetTop; } if (Ext.isGecko && !hasAbsolute) { dbd = fly(bd); x += PARSEINT(dbd.getStyle("borderLeftWidth"), 10) || 0; y += PARSEINT(dbd.getStyle("borderTopWidth"), 10) || 0; } p = el.parentNode; while (p && p != bd) { if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) { x -= p.scrollLeft; y -= p.scrollTop; } p = p.parentNode; } ret = [x,y]; } } return ret }, setXY : function(el, xy) { (el = Ext.fly(el, '_setXY')).position(); var pts = el.translatePoints(xy), style = el.dom.style, pos; for (pos in pts) { if(!isNaN(pts[pos])) style[pos] = pts[pos] + "px" } }, setX : function(el, x) { this.setXY(el, [x, false]); }, setY : function(el, y) { this.setXY(el, [false, y]); } }; })();Ext.lib.Event = function() { var loadComplete = false, unloadListeners = {}, retryCount = 0, onAvailStack = [], _interval, locked = false, win = window, doc = document, // constants POLL_RETRYS = 200, POLL_INTERVAL = 20, EL = 0, TYPE = 0, FN = 1, WFN = 2, OBJ = 2, ADJ_SCOPE = 3, SCROLLLEFT = 'scrollLeft', SCROLLTOP = 'scrollTop', UNLOAD = 'unload', MOUSEOVER = 'mouseover', MOUSEOUT = 'mouseout', // private doAdd = function() { var ret; if (win.addEventListener) { ret = function(el, eventName, fn, capture) { if (eventName == 'mouseenter') { fn = fn.createInterceptor(checkRelatedTarget); el.addEventListener(MOUSEOVER, fn, (capture)); } else if (eventName == 'mouseleave') { fn = fn.createInterceptor(checkRelatedTarget); el.addEventListener(MOUSEOUT, fn, (capture)); } else { el.addEventListener(eventName, fn, (capture)); } return fn; }; } else if (win.attachEvent) { ret = function(el, eventName, fn, capture) { el.attachEvent("on" + eventName, fn); return fn; }; } else { ret = function(){}; } return ret; }(), // private doRemove = function(){ var ret; if (win.removeEventListener) { ret = function (el, eventName, fn, capture) { if (eventName == 'mouseenter') { eventName = MOUSEOVER; } else if (eventName == 'mouseleave') { eventName = MOUSEOUT; } el.removeEventListener(eventName, fn, (capture)); }; } else if (win.detachEvent) { ret = function (el, eventName, fn) { el.detachEvent("on" + eventName, fn); }; } else { ret = function(){}; } return ret; }(); function checkRelatedTarget(e) { return !elContains(e.currentTarget, pub.getRelatedTarget(e)); } function elContains(parent, child) { if(parent && parent.firstChild){ while(child) { if(child === parent) { return true; } child = child.parentNode; if(child && (child.nodeType != 1)) { child = null; } } } return false; } // private function _tryPreloadAttach() { var ret = false, notAvail = [], element, i, len, v, tryAgain = !loadComplete || (retryCount > 0); if (!locked) { locked = true; for (i = 0, len = onAvailStack.length; i < len; i++) { v = onAvailStack[i]; if(v && (element = doc.getElementById(v.id))){ if(!v.checkReady || loadComplete || element.nextSibling || (doc && doc.body)) { element = v.override ? (v.override === true ? v.obj : v.override) : element; v.fn.call(element, v.obj); onAvailStack.remove(v); } else { notAvail.push(v); } } } retryCount = (notAvail.length === 0) ? 0 : retryCount - 1; if (tryAgain) { startInterval(); } else { clearInterval(_interval); _interval = null; } ret = !(locked = false); } return ret; } // private function startInterval() { if(!_interval){ var callback = function() { _tryPreloadAttach(); }; _interval = setInterval(callback, POLL_INTERVAL); } } // private function getScroll() { var dd = doc.documentElement, db = doc.body; if(dd && (dd[SCROLLTOP] || dd[SCROLLLEFT])){ return [dd[SCROLLLEFT], dd[SCROLLTOP]]; }else if(db){ return [db[SCROLLLEFT], db[SCROLLTOP]]; }else{ return [0, 0]; } } // private function getPageCoord (ev, xy) { ev = ev.browserEvent || ev; var coord = ev['page' + xy]; if (!coord && coord !== 0) { coord = ev['client' + xy] || 0; if (Ext.isIE) { coord += getScroll()[xy == "X" ? 0 : 1]; } } return coord; } var pub = { extAdapter: true, onAvailable : function(p_id, p_fn, p_obj, p_override) { onAvailStack.push({ id: p_id, fn: p_fn, obj: p_obj, override: p_override, checkReady: false }); retryCount = POLL_RETRYS; startInterval(); }, // This function should ALWAYS be called from Ext.EventManager addListener: function(el, eventName, fn) { el = Ext.getDom(el); if (el && fn) { if (eventName == UNLOAD) { if (unloadListeners[el.id] === undefined) { unloadListeners[el.id] = []; } unloadListeners[el.id].push([eventName, fn]); return fn; } return doAdd(el, eventName, fn, false); } return false; }, // This function should ALWAYS be called from Ext.EventManager removeListener: function(el, eventName, fn) { el = Ext.getDom(el); var i, len, li, lis; if (el && fn) { if(eventName == UNLOAD){ if((lis = unloadListeners[el.id]) !== undefined){ for(i = 0, len = lis.length; i < len; i++){ if((li = lis[i]) && li[TYPE] == eventName && li[FN] == fn){ unloadListeners[id].splice(i, 1); } } } return; } doRemove(el, eventName, fn, false); } }, getTarget : function(ev) { ev = ev.browserEvent || ev; return this.resolveTextNode(ev.target || ev.srcElement); }, resolveTextNode : Ext.isGecko ? function(node){ if(!node){ return; } // work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197 var s = HTMLElement.prototype.toString.call(node); if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){ return; } return node.nodeType == 3 ? node.parentNode : node; } : function(node){ return node && node.nodeType == 3 ? node.parentNode : node; }, getRelatedTarget : function(ev) { ev = ev.browserEvent || ev; return this.resolveTextNode(ev.relatedTarget || (ev.type == MOUSEOUT ? ev.toElement : ev.type == MOUSEOVER ? ev.fromElement : null)); }, getPageX : function(ev) { return getPageCoord(ev, "X"); }, getPageY : function(ev) { return getPageCoord(ev, "Y"); }, getXY : function(ev) { return [this.getPageX(ev), this.getPageY(ev)]; }, stopEvent : function(ev) { this.stopPropagation(ev); this.preventDefault(ev); }, stopPropagation : function(ev) { ev = ev.browserEvent || ev; if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, preventDefault : function(ev) { ev = ev.browserEvent || ev; if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; } }, getEvent : function(e) { e = e || win.event; if (!e) { var c = this.getEvent.caller; while (c) { e = c.arguments[0]; if (e && Event == e.constructor) { break; } c = c.caller; } } return e; }, getCharCode : function(ev) { ev = ev.browserEvent || ev; return ev.charCode || ev.keyCode || 0; }, //clearCache: function() {}, // deprecated, call from EventManager getListeners : function(el, eventName) { Ext.EventManager.getListeners(el, eventName); }, // deprecated, call from EventManager purgeElement : function(el, recurse, eventName) { Ext.EventManager.purgeElement(el, recurse, eventName); }, _load : function(e) { loadComplete = true; var EU = Ext.lib.Event; if (Ext.isIE && e !== true) { // IE8 complains that _load is null or not an object // so lets remove self via arguments.callee doRemove(win, "load", arguments.callee); } }, _unload : function(e) { var EU = Ext.lib.Event, i, j, l, v, ul, id, len, index, scope; for (id in unloadListeners) { ul = unloadListeners[id]; for (i = 0, len = ul.length; i < len; i++) { v = ul[i]; if (v) { try{ scope = v[ADJ_SCOPE] ? (v[ADJ_SCOPE] === true ? v[OBJ] : v[ADJ_SCOPE]) : win; v[FN].call(scope, EU.getEvent(e), v[OBJ]); }catch(ex){} } } }; unloadListeners = null; Ext.EventManager._unload(); doRemove(win, UNLOAD, EU._unload); } }; // Initialize stuff. pub.on = pub.addListener; pub.un = pub.removeListener; if (doc && doc.body) { pub._load(true); } else { doAdd(win, "load", pub._load); } doAdd(win, UNLOAD, pub._unload); _tryPreloadAttach(); return pub; }(); /* * Portions of this file are based on pieces of Yahoo User Interface Library * Copyright (c) 2007, Yahoo! Inc. All rights reserved. * YUI licensed under the BSD License: * http://developer.yahoo.net/yui/license.txt */ Ext.lib.Ajax = function() { var activeX = ['MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'], CONTENTTYPE = 'Content-Type'; // private function setHeader(o) { var conn = o.conn, prop; function setTheHeaders(conn, headers){ for (prop in headers) { if (headers.hasOwnProperty(prop)) { conn.setRequestHeader(prop, headers[prop]); } } } if (pub.defaultHeaders) { setTheHeaders(conn, pub.defaultHeaders); } if (pub.headers) { setTheHeaders(conn, pub.headers); delete pub.headers; } } // private function createExceptionObject(tId, callbackArg, isAbort, isTimeout) { return { tId : tId, status : isAbort ? -1 : 0, statusText : isAbort ? 'transaction aborted' : 'communication failure', isAbort: isAbort, isTimeout: isTimeout, argument : callbackArg }; } // private function initHeader(label, value) { (pub.headers = pub.headers || {})[label] = value; } // private function createResponseObject(o, callbackArg) { var headerObj = {}, headerStr, conn = o.conn, t, s; try { headerStr = o.conn.getAllResponseHeaders(); Ext.each(headerStr.replace(/\r\n/g, '\n').split('\n'), function(v){ t = v.indexOf(':'); if(t >= 0){ s = v.substr(0, t).toLowerCase(); if(v.charAt(t + 1) == ' '){ ++t; } headerObj[s] = v.substr(t + 1); } }); } catch(e) {} return { tId : o.tId, status : conn.status, statusText : conn.statusText, getResponseHeader : function(header){return headerObj[header.toLowerCase()];}, getAllResponseHeaders : function(){return headerStr}, responseText : conn.responseText, responseXML : conn.responseXML, argument : callbackArg }; } // private function releaseObject(o) { o.conn = null; o = null; } // private function handleTransactionResponse(o, callback, isAbort, isTimeout) { if (!callback) { releaseObject(o); return; } var httpStatus, responseObject; try { if (o.conn.status !== undefined && o.conn.status != 0) { httpStatus = o.conn.status; } else { httpStatus = 13030; } } catch(e) { httpStatus = 13030; } if ((httpStatus >= 200 && httpStatus < 300) || (Ext.isIE && httpStatus == 1223)) { responseObject = createResponseObject(o, callback.argument); if (callback.success) { if (!callback.scope) { callback.success(responseObject); } else { callback.success.apply(callback.scope, [responseObject]); } } } else { switch (httpStatus) { case 12002: case 12029: case 12030: case 12031: case 12152: case 13030: responseObject = createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false), isTimeout); if (callback.failure) { if (!callback.scope) { callback.failure(responseObject); } else { callback.failure.apply(callback.scope, [responseObject]); } } break; default: responseObject = createResponseObject(o, callback.argument); if (callback.failure) { if (!callback.scope) { callback.failure(responseObject); } else { callback.failure.apply(callback.scope, [responseObject]); } } } } releaseObject(o); responseObject = null; } // private function handleReadyState(o, callback){ callback = callback || {}; var conn = o.conn, tId = o.tId, poll = pub.poll, cbTimeout = callback.timeout || null; if (cbTimeout) { pub.timeout[tId] = setTimeout(function() { pub.abort(o, callback, true); }, cbTimeout); } poll[tId] = setInterval( function() { if (conn && conn.readyState == 4) { clearInterval(poll[tId]); poll[tId] = null; if (cbTimeout) { clearTimeout(pub.timeout[tId]); pub.timeout[tId] = null; } handleTransactionResponse(o, callback); } }, pub.pollInterval); } // private function asyncRequest(method, uri, callback, postData) { var o = getConnectionObject() || null; if (o) { o.conn.open(method, uri, true); if (pub.useDefaultXhrHeader) { initHeader('X-Requested-With', pub.defaultXhrHeader); } if(postData && pub.useDefaultHeader && (!pub.headers || !pub.headers[CONTENTTYPE])){ initHeader(CONTENTTYPE, pub.defaultPostHeader); } if (pub.defaultHeaders || pub.headers) { setHeader(o); } handleReadyState(o, callback); o.conn.send(postData || null); } return o; } // private function getConnectionObject() { var o; try { if (o = createXhrObject(pub.transactionId)) { pub.transactionId++; } } catch(e) { } finally { return o; } } // private function createXhrObject(transactionId) { var http; try { http = new XMLHttpRequest(); } catch(e) { for (var i = 0; i < activeX.length; ++i) { try { http = new ActiveXObject(activeX[i]); break; } catch(e) {} } } finally { return {conn : http, tId : transactionId}; } } var pub = { request : function(method, uri, cb, data, options) { if(options){ var me = this, xmlData = options.xmlData, jsonData = options.jsonData, hs; Ext.applyIf(me, options); if(xmlData || jsonData){ hs = me.headers; if(!hs || !hs[CONTENTTYPE]){ initHeader(CONTENTTYPE, xmlData ? 'text/xml' : 'application/json'); } data = xmlData || (!Ext.isPrimitive(jsonData) ? Ext.encode(jsonData) : jsonData); } } return asyncRequest(method || options.method || "POST", uri, cb, data); }, serializeForm : function(form) { var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements, hasSubmit = false, encoder = encodeURIComponent, element, options, name, val, data = '', type; Ext.each(fElements, function(element) { name = element.name; type = element.type; if (!element.disabled && name){ if(/select-(one|multiple)/i.test(type)) { Ext.each(element.options, function(opt) { if (opt.selected) { data += String.format("{0}={1}&", encoder(name), encoder((opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttribute('value') !== null) ? opt.value : opt.text)); } }); } else if(!/file|undefined|reset|button/i.test(type)) { if(!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)){ data += encoder(name) + '=' + encoder(element.value) + '&'; hasSubmit = /submit/i.test(type); } } } }); return data.substr(0, data.length - 1); }, useDefaultHeader : true, defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8', useDefaultXhrHeader : true, defaultXhrHeader : 'XMLHttpRequest', poll : {}, timeout : {}, pollInterval : 50, transactionId : 0, // This is never called - Is it worth exposing this? // setProgId : function(id) { // activeX.unshift(id); // }, // This is never called - Is it worth exposing this? // setDefaultPostHeader : function(b) { // this.useDefaultHeader = b; // }, // This is never called - Is it worth exposing this? // setDefaultXhrHeader : function(b) { // this.useDefaultXhrHeader = b; // }, // This is never called - Is it worth exposing this? // setPollingInterval : function(i) { // if (typeof i == 'number' && isFinite(i)) { // this.pollInterval = i; // } // }, // This is never called - Is it worth exposing this? // resetDefaultHeaders : function() { // this.defaultHeaders = null; // }, abort : function(o, callback, isTimeout) { var me = this, tId = o.tId, isAbort = false; if (me.isCallInProgress(o)) { o.conn.abort(); clearInterval(me.poll[tId]); me.poll[tId] = null; clearTimeout(pub.timeout[tId]); me.timeout[tId] = null; handleTransactionResponse(o, callback, (isAbort = true), isTimeout); } return isAbort; }, isCallInProgress : function(o) { // if there is a connection and readyState is not 0 or 4 return o.conn && !{0:true,4:true}[o.conn.readyState]; } }; return pub; }();(function(){ var EXTLIB = Ext.lib, noNegatives = /width|height|opacity|padding/i, offsetAttribute = /^((width|height)|(top|left))$/, defaultUnit = /width|height|top$|bottom$|left$|right$/i, offsetUnit = /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i, isset = function(v){ return typeof v !== 'undefined'; }, now = function(){ return new Date(); }; EXTLIB.Anim = { motion : function(el, args, duration, easing, cb, scope) { return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion); }, run : function(el, args, duration, easing, cb, scope, type) { type = type || Ext.lib.AnimBase; if (typeof easing == "string") { easing = Ext.lib.Easing[easing]; } var anim = new type(el, args, duration, easing); anim.animateX(function() { if(Ext.isFunction(cb)){ cb.call(scope); } }); return anim; } }; EXTLIB.AnimBase = function(el, attributes, duration, method) { if (el) { this.init(el, attributes, duration, method); } }; EXTLIB.AnimBase.prototype = { doMethod: function(attr, start, end) { var me = this; return me.method(me.curFrame, start, end - start, me.totalFrames); }, setAttr: function(attr, val, unit) { if (noNegatives.test(attr) && val < 0) { val = 0; } Ext.fly(this.el, '_anim').setStyle(attr, val + unit); }, getAttr: function(attr) { var el = Ext.fly(this.el), val = el.getStyle(attr), a = offsetAttribute.exec(attr) || [] if (val !== 'auto' && !offsetUnit.test(val)) { return parseFloat(val); } return (!!(a[2]) || (el.getStyle('position') == 'absolute' && !!(a[3]))) ? el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0; }, getDefaultUnit: function(attr) { return defaultUnit.test(attr) ? 'px' : ''; }, animateX : function(callback, scope) { var me = this, f = function() { me.onComplete.removeListener(f); if (Ext.isFunction(callback)) { callback.call(scope || me, me); } }; me.onComplete.addListener(f, me); me.animate(); }, setRunAttr: function(attr) { var me = this, a = this.attributes[attr], to = a.to, by = a.by, from = a.from, unit = a.unit, ra = (this.runAttrs[attr] = {}), end; if (!isset(to) && !isset(by)){ return false; } var start = isset(from) ? from : me.getAttr(attr); if (isset(to)) { end = to; }else if(isset(by)) { if (Ext.isArray(start)){ end = []; for(var i=0,len=start.length; i<len; i++) { end[i] = start[i] + by[i]; } }else{ end = start + by; } } Ext.apply(ra, { start: start, end: end, unit: isset(unit) ? unit : me.getDefaultUnit(attr) }); }, init: function(el, attributes, duration, method) { var me = this, actualFrames = 0, mgr = EXTLIB.AnimMgr; Ext.apply(me, { isAnimated: false, startTime: null, el: Ext.getDom(el), attributes: attributes || {}, duration: duration || 1, method: method || EXTLIB.Easing.easeNone, useSec: true, curFrame: 0, totalFrames: mgr.fps, runAttrs: {}, animate: function(){ var me = this, d = me.duration; if(me.isAnimated){ return false; } me.curFrame = 0; me.totalFrames = me.useSec ? Math.ceil(mgr.fps * d) : d; mgr.registerElement(me); }, stop: function(finish){ var me = this; if(finish){ me.curFrame = me.totalFrames; me._onTween.fire(); } mgr.stop(me); } }); var onStart = function(){ var me = this, attr; me.onStart.fire(); me.runAttrs = {}; for(attr in this.attributes){ this.setRunAttr(attr); } me.isAnimated = true; me.startTime = now(); actualFrames = 0; }; var onTween = function(){ var me = this; me.onTween.fire({ duration: now() - me.startTime, curFrame: me.curFrame }); var ra = me.runAttrs; for (var attr in ra) { this.setAttr(attr, me.doMethod(attr, ra[attr].start, ra[attr].end), ra[attr].unit); } ++actualFrames; }; var onComplete = function() { var me = this, actual = (now() - me.startTime) / 1000, data = { duration: actual, frames: actualFrames, fps: actualFrames / actual }; me.isAnimated = false; actualFrames = 0; me.onComplete.fire(data); }; me.onStart = new Ext.util.Event(me); me.onTween = new Ext.util.Event(me); me.onComplete = new Ext.util.Event(me); (me._onStart = new Ext.util.Event(me)).addListener(onStart); (me._onTween = new Ext.util.Event(me)).addListener(onTween); (me._onComplete = new Ext.util.Event(me)).addListener(onComplete); } }; Ext.lib.AnimMgr = new function() { var me = this, thread = null, queue = [], tweenCount = 0; Ext.apply(me, { fps: 1000, delay: 1, registerElement: function(tween){ queue.push(tween); ++tweenCount; tween._onStart.fire(); me.start(); }, unRegister: function(tween, index){ tween._onComplete.fire(); index = index || getIndex(tween); if (index != -1) { queue.splice(index, 1); } if (--tweenCount <= 0) { me.stop(); } }, start: function(){ if(thread === null){ thread = setInterval(me.run, me.delay); } }, stop: function(tween){ if(!tween){ clearInterval(thread); for(var i = 0, len = queue.length; i < len; ++i){ if(queue[0].isAnimated){ me.unRegister(queue[0], 0); } } queue = []; thread = null; tweenCount = 0; }else{ me.unRegister(tween); } }, run: function(){ var tf, i, len, tween; for(i = 0, len = queue.length; i<len; i++) { tween = queue[i]; if(tween && tween.isAnimated){ tf = tween.totalFrames; if(tween.curFrame < tf || tf === null){ ++tween.curFrame; if(tween.useSec){ correctFrame(tween); } tween._onTween.fire(); }else{ me.stop(tween); } } } } }); var getIndex = function(anim) { var i, len; for(i = 0, len = queue.length; i<len; i++) { if(queue[i] === anim) { return i; } } return -1; }; var correctFrame = function(tween) { var frames = tween.totalFrames, frame = tween.curFrame, duration = tween.duration, expected = (frame * duration * 1000 / frames), elapsed = (now() - tween.startTime), tweak = 0; if(elapsed < duration * 1000){ tweak = Math.round((elapsed / expected - 1) * frame); }else{ tweak = frames - (frame + 1); } if(tweak > 0 && isFinite(tweak)){ if(tween.curFrame + tweak >= frames){ tweak = frames - (frame + 1); } tween.curFrame += tweak; } }; }; EXTLIB.Bezier = new function() { this.getPosition = function(points, t) { var n = points.length, tmp = [], c = 1 - t, i, j; for (i = 0; i < n; ++i) { tmp[i] = [points[i][0], points[i][1]]; } for (j = 1; j < n; ++j) { for (i = 0; i < n - j; ++i) { tmp[i][0] = c * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0]; tmp[i][1] = c * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1]; } } return [ tmp[0][0], tmp[0][1] ]; }; }; EXTLIB.Easing = { easeNone: function (t, b, c, d) { return c * t / d + b; }, easeIn: function (t, b, c, d) { return c * (t /= d) * t + b; }, easeOut: function (t, b, c, d) { return -c * (t /= d) * (t - 2) + b; } }; (function() { EXTLIB.Motion = function(el, attributes, duration, method) { if (el) { EXTLIB.Motion.superclass.constructor.call(this, el, attributes, duration, method); } }; Ext.extend(EXTLIB.Motion, Ext.lib.AnimBase); var superclass = EXTLIB.Motion.superclass, proto = EXTLIB.Motion.prototype, pointsRe = /^points$/i; Ext.apply(EXTLIB.Motion.prototype, { setAttr: function(attr, val, unit){ var me = this, setAttr = superclass.setAttr; if (pointsRe.test(attr)) { unit = unit || 'px'; setAttr.call(me, 'left', val[0], unit); setAttr.call(me, 'top', val[1], unit); } else { setAttr.call(me, attr, val, unit); } }, getAttr: function(attr){ var me = this, getAttr = superclass.getAttr; return pointsRe.test(attr) ? [getAttr.call(me, 'left'), getAttr.call(me, 'top')] : getAttr.call(me, attr); }, doMethod: function(attr, start, end){ var me = this; return pointsRe.test(attr) ? EXTLIB.Bezier.getPosition(me.runAttrs[attr], me.method(me.curFrame, 0, 100, me.totalFrames) / 100) : superclass.doMethod.call(me, attr, start, end); }, setRunAttr: function(attr){ if(pointsRe.test(attr)){ var me = this, el = this.el, points = this.attributes.points, control = points.control || [], from = points.from, to = points.to, by = points.by, DOM = EXTLIB.Dom, start, i, end, len, ra; if(control.length > 0 && !Ext.isArray(control[0])){ control = [control]; }else{ /* var tmp = []; for (i = 0,len = control.length; i < len; ++i) { tmp[i] = control[i]; } control = tmp; */ } Ext.fly(el, '_anim').position(); DOM.setXY(el, isset(from) ? from : DOM.getXY(el)); start = me.getAttr('points'); if(isset(to)){ end = translateValues.call(me, to, start); for (i = 0,len = control.length; i < len; ++i) { control[i] = translateValues.call(me, control[i], start); } } else if (isset(by)) { end = [start[0] + by[0], start[1] + by[1]]; for (i = 0,len = control.length; i < len; ++i) { control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ]; } } ra = this.runAttrs[attr] = [start]; if (control.length > 0) { ra = ra.concat(control); } ra[ra.length] = end; }else{ superclass.setRunAttr.call(this, attr); } } }); var translateValues = function(val, start) { var pageXY = EXTLIB.Dom.getXY(this.el); return [val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1]]; }; })(); })();// Easing functions (function(){ // shortcuts to aid compression var abs = Math.abs, pi = Math.PI, asin = Math.asin, pow = Math.pow, sin = Math.sin, EXTLIB = Ext.lib; Ext.apply(EXTLIB.Easing, { easeBoth: function (t, b, c, d) { return ((t /= d / 2) < 1) ? c / 2 * t * t + b : -c / 2 * ((--t) * (t - 2) - 1) + b; }, easeInStrong: function (t, b, c, d) { return c * (t /= d) * t * t * t + b; }, easeOutStrong: function (t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; }, easeBothStrong: function (t, b, c, d) { return ((t /= d / 2) < 1) ? c / 2 * t * t * t * t + b : -c / 2 * ((t -= 2) * t * t * t - 2) + b; }, elasticIn: function (t, b, c, d, a, p) { if (t == 0 || (t /= d) == 1) { return t == 0 ? b : b + c; } p = p || (d * .3); var s; if (a >= abs(c)) { s = p / (2 * pi) * asin(c / a); } else { a = c; s = p / 4; } return -(a * pow(2, 10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p)) + b; }, elasticOut: function (t, b, c, d, a, p) { if (t == 0 || (t /= d) == 1) { return t == 0 ? b : b + c; } p = p || (d * .3); var s; if (a >= abs(c)) { s = p / (2 * pi) * asin(c / a); } else { a = c; s = p / 4; } return a * pow(2, -10 * t) * sin((t * d - s) * (2 * pi) / p) + c + b; }, elasticBoth: function (t, b, c, d, a, p) { if (t == 0 || (t /= d / 2) == 2) { return t == 0 ? b : b + c; } p = p || (d * (.3 * 1.5)); var s; if (a >= abs(c)) { s = p / (2 * pi) * asin(c / a); } else { a = c; s = p / 4; } return t < 1 ? -.5 * (a * pow(2, 10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p)) + b : a * pow(2, -10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p) * .5 + c + b; }, backIn: function (t, b, c, d, s) { s = s || 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, backOut: function (t, b, c, d, s) { if (!s) { s = 1.70158; } return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }, backBoth: function (t, b, c, d, s) { s = s || 1.70158; return ((t /= d / 2 ) < 1) ? c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b : c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; }, bounceIn: function (t, b, c, d) { return c - EXTLIB.Easing.bounceOut(d - t, 0, c, d) + b; }, bounceOut: function (t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; }, bounceBoth: function (t, b, c, d) { return (t < d / 2) ? EXTLIB.Easing.bounceIn(t * 2, 0, c, d) * .5 + b : EXTLIB.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; } }); })(); (function() { var EXTLIB = Ext.lib; // Color Animation EXTLIB.Anim.color = function(el, args, duration, easing, cb, scope) { return EXTLIB.Anim.run(el, args, duration, easing, cb, scope, EXTLIB.ColorAnim); } EXTLIB.ColorAnim = function(el, attributes, duration, method) { EXTLIB.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method); }; Ext.extend(EXTLIB.ColorAnim, EXTLIB.AnimBase); var superclass = EXTLIB.ColorAnim.superclass, colorRE = /color$/i, transparentRE = /^transparent|rgba\(0, 0, 0, 0\)$/, rgbRE = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i, hexRE= /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i, hex3RE = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i, isset = function(v){ return typeof v !== 'undefined'; } // private function parseColor(s) { var pi = parseInt, base, out = null, c; if (s.length == 3) { return s; } Ext.each([hexRE, rgbRE, hex3RE], function(re, idx){ base = (idx % 2 == 0) ? 16 : 10; c = re.exec(s); if(c && c.length == 4){ out = [pi(c[1], base), pi(c[2], base), pi(c[3], base)]; return false; } }); return out; } Ext.apply(EXTLIB.ColorAnim.prototype, { getAttr : function(attr) { var me = this, el = me.el, val; if(colorRE.test(attr)){ while(el && transparentRE.test(val = Ext.fly(el).getStyle(attr))){ el = el.parentNode; val = "fff"; } }else{ val = superclass.getAttr.call(me, attr); } return val; }, doMethod : function(attr, start, end) { var me = this, val, floor = Math.floor, i, len, v; if(colorRE.test(attr)){ val = []; for(i = 0, len = start.length; i < len; i++) { v = start[i]; val[i] = superclass.doMethod.call(me, attr, v, end[i]); } val = 'rgb(' + floor(val[0]) + ',' + floor(val[1]) + ',' + floor(val[2]) + ')'; }else{ val = superclass.doMethod.call(me, attr, start, end); } return val; }, setRunAttr : function(attr) { var me = this, a = me.attributes[attr], to = a.to, by = a.by, ra; superclass.setRunAttr.call(me, attr); ra = me.runAttrs[attr]; if(colorRE.test(attr)){ var start = parseColor(ra.start), end = parseColor(ra.end); if(!isset(to) && isset(by)){ end = parseColor(by); for(var i=0,len=start.length; i<len; i++) { end[i] = start[i] + end[i]; } } ra.start = start; ra.end = end; } } }); })(); (function() { // Scroll Animation var EXTLIB = Ext.lib; EXTLIB.Anim.scroll = function(el, args, duration, easing, cb, scope) { return EXTLIB.Anim.run(el, args, duration, easing, cb, scope, EXTLIB.Scroll); } EXTLIB.Scroll = function(el, attributes, duration, method) { if(el){ EXTLIB.Scroll.superclass.constructor.call(this, el, attributes, duration, method); } }; Ext.extend(EXTLIB.Scroll, EXTLIB.ColorAnim); var superclass = EXTLIB.Scroll.superclass, SCROLL = 'scroll'; Ext.apply(EXTLIB.Scroll.prototype, { doMethod : function(attr, start, end) { var val, me = this, curFrame = me.curFrame, totalFrames = me.totalFrames; if(attr == SCROLL){ val = [me.method(curFrame, start[0], end[0] - start[0], totalFrames), me.method(curFrame, start[1], end[1] - start[1], totalFrames)]; }else{ val = superclass.doMethod.call(me, attr, start, end); } return val; }, getAttr : function(attr) { var me = this; if (attr == SCROLL) { return [me.el.scrollLeft, me.el.scrollTop]; }else{ return superclass.getAttr.call(me, attr); } }, setAttr : function(attr, val, unit) { var me = this; if(attr == SCROLL){ me.el.scrollLeft = val[0]; me.el.scrollTop = val[1]; }else{ superclass.setAttr.call(me, attr, val, unit); } } }); })(); if(Ext.isIE) { function fnCleanUp() { var p = Function.prototype; delete p.createSequence; delete p.defer; delete p.createDelegate; delete p.createCallback; delete p.createInterceptor; window.detachEvent("onunload", fnCleanUp); } window.attachEvent("onunload", fnCleanUp); } })();(function(){ var EXTUTIL = Ext.util, TOARRAY = Ext.toArray, EACH = Ext.each, ISOBJECT = Ext.isObject, TRUE = true, FALSE = false; /** * @class Ext.util.Observable * Base class that provides a common interface for publishing events. Subclasses are expected to * to have a property "events" with all the events defined, and, optionally, a property "listeners" * with configured listeners defined.<br> * For example: * <pre> Employee = Ext.extend(Ext.util.Observable, { constructor: function(config){ this.name = config.name; this.addEvents({ "fired" : true, "quit" : true }); // Copy configured listeners into *this* object so that the base class's // constructor will add them. this.listeners = config.listeners; // Call our superclass constructor to complete construction process. Employee.superclass.constructor.call(config) } }); </code> * This could then be used like this:<pre> var newEmployee = new Employee({ name: employeeName, listeners: { quit: function() { // By default, "this" will be the object that fired the event. alert(this.name + " has quit!"); } } }); </code> */ EXTUTIL.Observable = function(){ /** * @cfg {Object} listeners (optional) <p>A config object containing one or more event handlers to be added to this * object during initialization. This should be a valid listeners config object as specified in the * {@link #addListener} example for attaching multiple handlers at once.</p> * <br>

DOM events from ExtJs {@link Ext.Component Components}

* <br>

While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s * <b>{@link Ext.DataView#click click} event passing the node clicked on. To access DOM * events directly from a Component's HTMLElement, listeners must be added to the <i>{@link Ext.Component#getEl Element} after the Component * has been rendered. A plugin can simplify this step:<pre> // Plugin is configured with a listeners config object. // The Component is appended to the argument list of all handler functions. Ext.DomObserver = Ext.extend(Object, { constructor: function(config) { this.listeners = config.listeners ? config.listeners : config; }, // Component passes itself into plugin's init method init: function(c) { var p, l = this.listeners; for (p in l) { if (Ext.isFunction(l[p])) { l[p] = this.createHandler(l[p], c); } else { l[p].fn = this.createHandler(l[p].fn, c); } } // Add the listeners to the Element immediately following the render call c.render = c.render.{@link Function#createSequence createSequence}(function() { var e = c.getEl(); if (e) { e.on(l); } }); }, createHandler: function(fn, c) { return function(e) { fn.call(this, e, c); }; } }); var combo = new Ext.form.ComboBox({ // Collapse combo when its element is clicked on plugins: [ new Ext.DomObserver({ click: function(evt, comp) { comp.collapse(); } })], store: myStore, typeAhead: true, mode: 'local', triggerAction: 'all' }); * </code>

*/ var me = this, e = me.events; if(me.listeners){ me.on(me.listeners); delete me.listeners; } me.events = e || {}; }; EXTUTIL.Observable.prototype = { // private filterOptRe : /^(?:scope|delay|buffer|single)$/, /** * <p>Fires the specified event with the passed parameters (minus the event name).

* <p>An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) * by calling {@link #enableBubble}.</p> * @param {String} eventName The name of the event to fire. * @param {Object...} args Variable number of parameters are passed to handlers. * @return {Boolean} returns false if any of the handlers return false otherwise it returns true. */ fireEvent : function(){ var a = TOARRAY(arguments), ename = a[0].toLowerCase(), me = this, ret = TRUE, ce = me.events[ename], q, c; if (me.eventsSuspended === TRUE) { if (q = me.eventQueue) { q.push(a); } } else if(ISOBJECT(ce) && ce.bubble){ if(ce.fire.apply(ce, a.slice(1)) === FALSE) { return FALSE; } c = me.getBubbleTarget && me.getBubbleTarget(); if(c && c.enableBubble) { if(!c.events[ename] || !Ext.isObject(c.events[ename]) || !c.events[ename].bubble) { c.enableBubble(ename); } return c.fireEvent.apply(c, a); } } else { if (ISOBJECT(ce)) { a.shift(); ret = ce.fire.apply(ce, a); } } return ret; }, /** * Appends an event handler to this object. * @param {String} eventName The name of the event to listen for. * @param {Function} handler The method the event invokes. * @param {Object} scope (optional) The scope (<code>this reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event. * @param {Object} options (optional) An object containing handler configuration. * properties. This may contain any of the following properties:<ul> * <li>scope : Object

The scope (this reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event.

* <li>delay : Number

The number of milliseconds to delay the invocation of the handler after the event fires.

* <li>single : Boolean

True to add a handler to handle just the next firing of the event, and then remove itself.

* <li>buffer : Number

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 invoked, but the new handler is scheduled in its place.

* <li>target : Observable

Only call the handler if the event was fired on the target Observable, not * if the event was bubbled up from a child Observable.</div> * </ul>
* <p> * <b>Combining Options
* Using the options argument, it is possible to combine different types of listeners:<br> * <br> * A delayed, one-time listener. * <pre> myDataView.on('click', this.onClick, this, { single: true, delay: 100 });</code> * <p> * <b>Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties * which specify multiple handlers. * <p> * <pre> myGridPanel.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } });</code> * <p> * Or a shorthand syntax:<br> * <pre> myGridPanel.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut, scope: this });</code> */ addListener : function(eventName, fn, scope, o){ var me = this, e, oe, isF, ce; if (ISOBJECT(eventName)) { o = eventName; for (e in o){ oe = o[e]; if (!me.filterOptRe.test(e)) { me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o); } } } else { eventName = eventName.toLowerCase(); ce = me.events[eventName] || TRUE; if (Ext.isBoolean(ce)) { me.events[eventName] = ce = new EXTUTIL.Event(me, eventName); } ce.addListener(fn, scope, ISOBJECT(o) ? o : {}); } }, /** * Removes an event handler. * @param {String} eventName The type of event the handler was associated with. * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call. * @param {Object} scope (optional) The scope originally specified for the handler. */ removeListener : function(eventName, fn, scope){ var ce = this.events[eventName.toLowerCase()]; if (ISOBJECT(ce)) { ce.removeListener(fn, scope); } }, /** * Removes all listeners for this object */ purgeListeners : function(){ var events = this.events, evt, key; for(key in events){ evt = events[key]; if(ISOBJECT(evt)){ evt.clearListeners(); } } }, /** * Adds the specified events to the list of events which this Observable may fire. * @param {Object|String} o Either an object with event names as properties with a value of <code>true * or the first event name string if multiple event names are being passed as separate parameters. * @param {string} Optional. Event name if multiple event names are being passed as separate parameters. * Usage:<pre> this.addEvents('storeloaded', 'storecleared'); </code> */ addEvents : function(o){ var me = this; me.events = me.events || {}; if (Ext.isString(o)) { var a = arguments, i = a.length; while(i--) { me.events[a[i]] = me.events[a[i]] || TRUE; } } else { Ext.applyIf(me.events, o); } }, /** * Checks to see if this object has any listeners for a specified event * @param {String} eventName The name of the event to check for * @return {Boolean} True if the event is being listened for, else false */ hasListener : function(eventName){ var e = this.events[eventName]; return ISOBJECT(e) && e.listeners.length > 0; }, /** * Suspend the firing of all events. (see {@link #resumeEvents}) * @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired * after the {@link #resumeEvents} call instead of discarding all suspended events; */ suspendEvents : function(queueSuspended){ this.eventsSuspended = TRUE; if(queueSuspended && !this.eventQueue){ this.eventQueue = []; } }, /** * Resume firing events. (see {@link #suspendEvents}) * If events were suspended using the <tt>queueSuspended parameter, then all * events fired during event suspension will be sent to any listeners now. */ resumeEvents : function(){ var me = this, queued = me.eventQueue || []; me.eventsSuspended = FALSE; delete me.eventQueue; EACH(queued, function(e) { me.fireEvent.apply(me, e); }); } }; var OBSERVABLE = EXTUTIL.Observable.prototype; /** * Appends an event handler to this object (shorthand for {@link #addListener}.) * @param {String} eventName The type of event to listen for * @param {Function} handler The method the event invokes * @param {Object} scope (optional) The scope (<code>this reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event. * @param {Object} options (optional) An object containing handler configuration. * @method */ OBSERVABLE.on = OBSERVABLE.addListener; /** * Removes an event handler (shorthand for {@link #removeListener}.) * @param {String} eventName The type of event the handler was associated with. * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call. * @param {Object} scope (optional) The scope originally specified for the handler. * @method */ OBSERVABLE.un = OBSERVABLE.removeListener; /** * Removes <b>all added captures from the Observable. * @param {Observable} o The Observable to release * @static */ EXTUTIL.Observable.releaseCapture = function(o){ o.fireEvent = OBSERVABLE.fireEvent; }; function createTargeted(h, o, scope){ return function(){ if(o.target == arguments[0]){ h.apply(scope, TOARRAY(arguments)); } }; }; function createBuffered(h, o, l, scope){ l.task = new EXTUTIL.DelayedTask(); return function(){ l.task.delay(o.buffer, h, scope, TOARRAY(arguments)); }; }; function createSingle(h, e, fn, scope){ return function(){ e.removeListener(fn, scope); return h.apply(scope, arguments); }; }; function createDelayed(h, o, l, scope){ return function(){ var task = new EXTUTIL.DelayedTask(); if(!l.tasks) { l.tasks = []; } l.tasks.push(task); task.delay(o.delay || 10, h, scope, TOARRAY(arguments)); }; }; EXTUTIL.Event = function(obj, name){ this.name = name; this.obj = obj; this.listeners = []; }; EXTUTIL.Event.prototype = { addListener : function(fn, scope, options){ var me = this, l; scope = scope || me.obj; if(!me.isListening(fn, scope)){ l = me.createListener(fn, scope, options); if(me.firing){ // if we are currently firing this event, don't disturb the listener loop me.listeners = me.listeners.slice(0); } me.listeners.push(l); } }, createListener: function(fn, scope, o){ o = o || {}, scope = scope || this.obj; var l = { fn: fn, scope: scope, options: o }, h = fn; if(o.target){ h = createTargeted(h, o, scope); } if(o.delay){ h = createDelayed(h, o, l, scope); } if(o.single){ h = createSingle(h, this, fn, scope); } if(o.buffer){ h = createBuffered(h, o, l, scope); } l.fireFn = h; return l; }, findListener : function(fn, scope){ var list = this.listeners, i = list.length, l, s; while(i--) { l = list[i]; if(l) { s = l.scope; if(l.fn == fn && (s == scope || s == this.obj)){ return i; } } } return -1; }, isListening : function(fn, scope){ return this.findListener(fn, scope) != -1; }, removeListener : function(fn, scope){ var index, l, k, me = this, ret = FALSE; if((index = me.findListener(fn, scope)) != -1){ if (me.firing) { me.listeners = me.listeners.slice(0); } l = me.listeners[index]; if(l.task) { l.task.cancel(); delete l.task; } k = l.tasks && l.tasks.length; if(k) { while(k--) { l.tasks[k].cancel(); } delete l.tasks; } me.listeners.splice(index, 1); ret = TRUE; } return ret; }, // Iterate to stop any buffered/delayed events clearListeners : function(){ var me = this, l = me.listeners, i = l.length; while(i--) { me.removeListener(l[i].fn, l[i].scope); } }, fire : function(){ var me = this, args = TOARRAY(arguments), listeners = me.listeners, len = listeners.length, i = 0, l; if(len > 0){ me.firing = TRUE; for (; i < len; i++) { l = listeners[i]; if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) { return (me.firing = FALSE); } } } me.firing = FALSE; return TRUE; } }; })();/** * @class Ext.DomHelper * <p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates * from your DOM building code.</p> * * <p>DomHelper element specification object

* <p>A specification object is used when creating elements. Attributes of this object * are assumed to be element attributes, except for 4 special attributes: * <div class="mdetail-params">

* <li>tag :
The tag name of the element
* <li>children : or cn
An array of the * same kind of element definition objects to be created and appended. These can be nested * as deep as you want.</div> * <li>cls :
The class attribute of the element. * This will end up being either the "class" attribute on a HTML fragment or className * for a DOM node, depending on whether DomHelper is using fragments or DOM.</div> * <li>html :
The innerHTML for the element
* </ul>
* * <p>Insertion methods
* <p>Commonly used insertion methods: * <div class="mdetail-params">
* <li>{@link #append} :
* <li>{@link #insertBefore} :
* <li>{@link #insertAfter} :
* <li>{@link #overwrite} :
* <li>{@link #createTemplate} :
* <li>{@link #insertHtml} :
* </ul>
* * <p>Example
* <p>This is an example, where an unordered list with 3 children items is appended to an existing * element with id <tt>'my-div':
<pre> var dh = Ext.DomHelper; // create shorthand alias // specification object var spec = { id: 'my-ul', tag: 'ul', cls: 'my-list', // append children after creating children: [ // may also specify 'cn' instead of 'children' {tag: 'li', id: 'item0', html: 'List Item 0'}, {tag: 'li', id: 'item1', html: 'List Item 1'}, {tag: 'li', id: 'item2', html: 'List Item 2'} ] }; var list = dh.append( 'my-div', // the context element 'my-div' can either be the id or the actual node spec // the specification object ); </code>
* <p>Element creation specification parameters in this class may also be passed as an Array of * specification objects. This can be used to insert multiple sibling nodes into an existing * container very efficiently. For example, to add more list items to the example above:<pre> dh.append('my-ul', [ {tag: 'li', id: 'item3', html: 'List Item 3'}, {tag: 'li', id: 'item4', html: 'List Item 4'} ]); * </code>
* * <p>Templating
* <p>The real power is in the built-in templating. Instead of creating or appending any elements, * <tt>{@link #createTemplate} returns a Template object which can be used over and over to * insert new elements. Revisiting the example above, we could utilize templating this time: * <pre> // create the node var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'}); // get template var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'}); for(var i = 0; i < 5, i++){ tpl.append(list, [i]); // use template to append to the actual node } * </code>
* <p>An example using a template:

var html = '<a id="{0}" href="{1}" class="nav">{2}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
 * </code>

* * <p>The same example using named parameters:

var html = '<a id="{id}" href="{url}" class="nav">{text}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
    id: 'link1',
    url: 'http://www.jackslocum.com/',
    text: "Jack's Site"
});
tpl.append('blog-roll', {
    id: 'link2',
    url: 'http://www.dustindiaz.com/',
    text: "Dustin's Site"
});
 * </code>

* * <p>Compiling Templates
* <p>Templates are applied using regular expressions. The performance is great, but if * you are adding a bunch of DOM elements using the same template, you can increase * performance even further by {@link Ext.Template#compile "compiling"} the template. * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and * broken up at the different variable points and a dynamic function is created and eval'ed. * The generated function performs string concatenation of these parts and the passed * variables instead of using regular expressions. * <pre> var html = '<a id="{id}" href="{url}" class="nav">{text}'; var tpl = new Ext.DomHelper.createTemplate(html); tpl.compile(); //... use template like normal * </code>
* * <p>Performance Boost
* <p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead * of DOM can significantly boost performance.</p> * <p>Element creation specification parameters may also be strings. If {@link #useDom} is false, * then the string is used as innerHTML. If {@link #useDom} is <tt>true, a string specification * results in the creation of a text node. Usage:</p> * <pre> Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance * </code> * @singleton */ Ext.DomHelper = function(){ var tempTableEl = null, emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i, tableRe = /^table|tbody|tr|td$/i, pub, // kill repeat to save bytes afterbegin = 'afterbegin', afterend = 'afterend', beforebegin = 'beforebegin', beforeend = 'beforeend', ts = '<table>', te = '</table>', tbs = ts+'<tbody>', tbe = '</tbody>'+te, trs = tbs + '<tr>', tre = '</tr>'+tbe; // private function doInsert(el, o, returnElement, pos, sibling, append){ var newNode = pub.insertHtml(pos, Ext.getDom(el), createHtml(o)); return returnElement ? Ext.get(newNode, true) : newNode; } // build as innerHTML where available function createHtml(o){ var b = '', attr, val, key, keyVal, cn; if(Ext.isString(o)){ b = o; } else if (Ext.isArray(o)) { for (var i=0; i < o.length; i++) { if(o[i]) { b += createHtml(o[i]); } }; } else { b += '<' + (o.tag = o.tag || 'div'); Ext.iterate(o, function(attr, val){ if(!/tag|children|cn|html$/i.test(attr)){ if (Ext.isObject(val)) { b += ' ' + attr + '="'; Ext.iterate(val, function(key, keyVal){ b += key + ':' + keyVal + ';'; }); b += '"'; }else{ b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '="' + val + '"'; } } }); // Now either just close the tag or try to add children and close the tag. if (emptyTags.test(o.tag)) { b += '/>'; } else { b += '>'; if ((cn = o.children || o.cn)) { b += createHtml(cn); } else if(o.html){ b += o.html; } b += '</' + o.tag + '>'; } } return b; } function ieTable(depth, s, h, e){ tempTableEl.innerHTML = [s, h, e].join(''); var i = -1, el = tempTableEl, ns; while(++i < depth){ el = el.firstChild; } // If the result is multiple siblings, then encapsulate them into one fragment. if(ns = el.nextSibling){ var df = document.createDocumentFragment(); while(el){ ns = el.nextSibling; df.appendChild(el); el = ns; } el = df; } return el; } /** * @ignore * Nasty code for IE's broken table implementation */ function insertIntoTable(tag, where, el, html) { var node, before; tempTableEl = tempTableEl || document.createElement('div'); if(tag == 'td' && (where == afterbegin || where == beforeend) || !/td|tr|tbody/i.test(tag) && (where == beforebegin || where == afterend)) { return; } before = where == beforebegin ? el : where == afterend ? el.nextSibling : where == afterbegin ? el.firstChild : null; if (where == beforebegin || where == afterend) { el = el.parentNode; } if (tag == 'td' || (tag == 'tr' && (where == beforeend || where == afterbegin))) { node = ieTable(4, trs, html, tre); } else if ((tag == 'tbody' && (where == beforeend || where == afterbegin)) || (tag == 'tr' && (where == beforebegin || where == afterend))) { node = ieTable(3, tbs, html, tbe); } else { node = ieTable(2, ts, html, te); } el.insertBefore(node, before); return node; } pub = { /** * Returns the markup for the passed Element(s) config. * @param {Object} o The DOM object spec (and children) * @return {String} */ markup : function(o){ return createHtml(o); }, /** * Applies a style specification to an element. * @param {String/HTMLElement} el The element to apply styles to * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or * a function which returns such a specification. */ applyStyles : function(el, styles){ if(styles){ var i = 0, len, style; el = Ext.fly(el); if(Ext.isFunction(styles)){ styles = styles.call(); } if(Ext.isString(styles)){ styles = styles.trim().split(/\s*(?::|;)\s*/); for(len = styles.length; i < len;){ el.setStyle(styles[i++], styles[i++]); } }else if (Ext.isObject(styles)){ el.setStyle(styles); } } }, /** * Inserts an HTML fragment into the DOM. * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd. * @param {HTMLElement} el The context element * @param {String} html The HTML fragment * @return {HTMLElement} The new node */ insertHtml : function(where, el, html){ var hash = {}, hashVal, setStart, range, frag, rangeEl, rs; where = where.toLowerCase(); // add these here because they are used in both branches of the condition. hash[beforebegin] = ['BeforeBegin', 'previousSibling']; hash[afterend] = ['AfterEnd', 'nextSibling']; if (el.insertAdjacentHTML) { if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){ return rs; } // add these two to the hash. hash[afterbegin] = ['AfterBegin', 'firstChild']; hash[beforeend] = ['BeforeEnd', 'lastChild']; if ((hashVal = hash[where])) { el.insertAdjacentHTML(hashVal[0], html); return el[hashVal[1]]; } } else { range = el.ownerDocument.createRange(); setStart = 'setStart' + (/end/i.test(where) ? 'After' : 'Before'); if (hash[where]) { range[setStart](el); frag = range.createContextualFragment(html); el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling); return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling']; } else { rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child'; if (el.firstChild) { range[setStart](el[rangeEl]); frag = range.createContextualFragment(html); if(where == afterbegin){ el.insertBefore(frag, el.firstChild); }else{ el.appendChild(frag); } } else { el.innerHTML = html; } return el[rangeEl]; } } throw 'Illegal insertion point -> "' + where + '"'; }, /** * Creates new DOM element(s) and inserts them before el. * @param {Mixed} el The context element * @param {Object/String} o The DOM object spec (and children) or raw HTML blob * @param {Boolean} returnElement (optional) true to return a Ext.Element * @return {HTMLElement/Ext.Element} The new node */ insertBefore : function(el, o, returnElement){ return doInsert(el, o, returnElement, beforebegin); }, /** * Creates new DOM element(s) and inserts them after el. * @param {Mixed} el The context element * @param {Object} o The DOM object spec (and children) * @param {Boolean} returnElement (optional) true to return a Ext.Element * @return {HTMLElement/Ext.Element} The new node */ insertAfter : function(el, o, returnElement){ return doInsert(el, o, returnElement, afterend, 'nextSibling'); }, /** * Creates new DOM element(s) and inserts them as the first child of el. * @param {Mixed} el The context element * @param {Object/String} o The DOM object spec (and children) or raw HTML blob * @param {Boolean} returnElement (optional) true to return a Ext.Element * @return {HTMLElement/Ext.Element} The new node */ insertFirst : function(el, o, returnElement){ return doInsert(el, o, returnElement, afterbegin, 'firstChild'); }, /** * Creates new DOM element(s) and appends them to el. * @param {Mixed} el The context element * @param {Object/String} o The DOM object spec (and children) or raw HTML blob * @param {Boolean} returnElement (optional) true to return a Ext.Element * @return {HTMLElement/Ext.Element} The new node */ append : function(el, o, returnElement){ return doInsert(el, o, returnElement, beforeend, '', true); }, /** * Creates new DOM element(s) and overwrites the contents of el with them. * @param {Mixed} el The context element * @param {Object/String} o The DOM object spec (and children) or raw HTML blob * @param {Boolean} returnElement (optional) true to return a Ext.Element * @return {HTMLElement/Ext.Element} The new node */ overwrite : function(el, o, returnElement){ el = Ext.getDom(el); el.innerHTML = createHtml(o); return returnElement ? Ext.get(el.firstChild) : el.firstChild; }, createHtml : createHtml }; return pub; }();/** * @class Ext.Template * <p>Represents an HTML fragment template. Templates may be {@link #compile precompiled} * for greater performance.</p> * <p>For example usage {@link #Template see the constructor}.
* * @constructor * An instance of this class may be created by passing to the constructor either * a single argument, or multiple arguments: * <div class="mdetail-params">
* <li>single argument : String/Array * <div class="sub-desc"> * The single argument may be either a String or an Array:<ul> * <li>String :

var t = new Ext.Template("<div>Hello {0}.</div>");
t.{@link #append}('some-element', ['foo']);
 * </code>

* <li>Array : * An Array will be combined with <code>join(''). <pre> var t = new Ext.Template([ '<div name="{id}">', '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', '</div>', ]); t.{@link #compile}(); t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); </code> * </ul>

* <li>multiple arguments : String, Object, Array, ... * <div class="sub-desc"> * Multiple arguments will be combined with <code>join(''). * <pre> var t = new Ext.Template( '<div name="{id}">', '<span class="{cls}">{name} {value}</span>', '</div>', // a configuration object: { compiled: true, // {@link #compile} immediately disableFormats: true // See Notes below. } ); * </code> * <p>Notes:

* <div class="mdetail-params">

* <li>Formatting and disableFormats are not applicable for Ext Core. * <li>For a list of available format functions, see {@link Ext.util.Format}. * <li>disableFormats reduces {@link #apply} time * when no formatting is required.</li> * </ul>