+ var els = Ext.select("#some-el div.some-class", true);
+ // or select directly from an existing element
+ var el = Ext.get('some-el');
+ el.select('div.some-class', true);
+
+ els.setWidth(100); // all elements become 100 width
+ els.hide(true); // all elements fade out and hide
+ // or
+ els.setWidth(100).hide(true);
+
+ var els = Ext.select("#some-el div.some-class");
+ // or select directly from an existing element
+ var el = Ext.get('some-el');
+ el.select('div.some-class');
+
+ els.setWidth(100); // all elements become 100 width
+ els.hide(true); // all elements fade out and hide
+ // or
+ els.setWidth(100).hide(true);
+
+var dh = Ext.DomHelper;
+var list = dh.append('my-div', {
+ id: 'my-ul', tag: 'ul', cls: 'my-list', 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'},
+ {tag: 'li', id: 'item3', html: 'List Item 3'},
+ {tag: 'li', id: 'item4', html: 'List Item 4'}
+ ]
+});
+ Element creation specification parameters in this class may also be passed as an Array of + * specification objects. This can be used to insert multiple sibling nodes into an existing + * container very efficiently. For example, to add more list items to the example above:
+dh.append('my-ul', [
+ {tag: 'li', id: 'item5', html: 'List Item 5'},
+ {tag: 'li', id: 'item6', html: 'List Item 6'} ]);
+Element creation specification parameters may also be strings. If {@link useDom} is false, then the string is used + * as innerHTML. If {@link useDom} is true, a string specification results in the creation of a text node.
+ * For more information and examples, see the original blog post. + * @singleton + */ +Ext.DomHelper = function(){ + var tempTableEl = null; + var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i; + var tableRe = /^table|tbody|tr|td$/i; + + // build as innerHTML where available + var createHtml = function(o){ + if(typeof o == 'string'){ + return o; + } + var b = ""; + if (Ext.isArray(o)) { + for (var i = 0, l = o.length; i < l; i++) { + b += createHtml(o[i]); + } + return b; + } + if(!o.tag){ + o.tag = "div"; + } + b += "<" + o.tag; + for(var attr in o){ + if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue; + if(attr == "style"){ + var s = o["style"]; + if(typeof s == "function"){ + s = s.call(); + } + if(typeof s == "string"){ + b += ' style="' + s + '"'; + }else if(typeof s == "object"){ + b += ' style="'; + for(var key in s){ + if(typeof s[key] != "function"){ + b += key + ":" + s[key] + ";"; + } + } + b += '"'; + } + }else{ + if(attr == "cls"){ + b += ' class="' + o["cls"] + '"'; + }else if(attr == "htmlFor"){ + b += ' for="' + o["htmlFor"] + '"'; + }else{ + b += " " + attr + '="' + o[attr] + '"'; + } + } + } + if(emptyTags.test(o.tag)){ + b += "/>"; + }else{ + b += ">"; + var cn = o.children || o.cn; + if(cn){ + b += createHtml(cn); + } else if(o.html){ + b += o.html; + } + b += ""; + } + return b; + }; + + // build as dom + /** @ignore */ + var createDom = function(o, parentNode){ + var el; + if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted + el = document.createDocumentFragment(); // in one shot using a DocumentFragment + for(var i = 0, l = o.length; i < l; i++) { + createDom(o[i], el); + } + } else if (typeof o == "string") { // Allow a string as a child spec. + el = document.createTextNode(o); + } else { + el = document.createElement(o.tag||'div'); + var useSet = !!el.setAttribute; // In IE some elements don't have setAttribute + for(var attr in o){ + if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || attr == "style" || typeof o[attr] == "function") continue; + if(attr=="cls"){ + el.className = o["cls"]; + }else{ + if(useSet) el.setAttribute(attr, o[attr]); + else el[attr] = o[attr]; + } + } + Ext.DomHelper.applyStyles(el, o.style); + var cn = o.children || o.cn; + if(cn){ + createDom(cn, el); + } else if(o.html){ + el.innerHTML = o.html; + } + } + if(parentNode){ + parentNode.appendChild(el); + } + return el; + }; + + var ieTable = function(depth, s, h, e){ + tempTableEl.innerHTML = [s, h, e].join(''); + var i = -1, el = tempTableEl; + while(++i < depth){ + el = el.firstChild; + } + return el; + }; + + // kill repeat to save bytes + var ts = '+DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
+ ++All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. +
+The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
+
+// by id
+var el = Ext.get("my-div");
+
+// by DOM element reference
+var el = Ext.get(myDivElement);
++Option Default Description +--------- -------- --------------------------------------------- +duration .35 The duration of the animation in seconds +easing easeOut The easing method +callback none A function to execute when the anim completes +scope this The scope (this) of the callback function ++* Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or +* manipulate the animation. Here's an example: +
+var el = Ext.get("my-div");
+
+// no animation
+el.setWidth(100);
+
+// default animation
+el.setWidth(100, true);
+
+// animation with some options set
+el.setWidth(100, {
+ duration: 1,
+ callback: this.foo,
+ scope: this
+});
+
+// using the "anim" property to get the Anim object
+var opt = {
+ duration: 1,
+ callback: this.foo,
+ scope: this
+};
+el.setWidth(100, opt);
+...
+if(opt.anim.isAnimated()){
+ opt.anim.stop();
+}
+
+ * Combining Options
+ * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
+ * addListener. The two are equivalent. Using the options argument, it is possible to combine different
+ * types of listeners:
+ *
+ * A normalized, delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+ * options object. The options object is available as the third parameter in the handler function.
+el.on('click', this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});
+ * Attaching multiple handlers in 1 call
+ * The method also allows for a single argument to be passed which is a config object containing properties
+ * which specify multiple handlers.
+ * Code:
+el.on({
+ 'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ 'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ 'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});
+ * Or a shorthand syntax:
+ * Code:
+el.on({
+ 'click' : this.onClick,
+ 'mouseover' : this.onMouseOver,
+ 'mouseout' : this.onMouseOut,
+ scope: this
+});
+el.removeListener('click', this.handlerFn);
+// or
+el.un('click', this.handlerFn);
++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 ++Example Usage: +
+// align el to other-el using the default positioning ("tl-bl", non-constrained)
+el.alignTo("other-el");
+
+// align the top left corner of el with the top right corner of other-el (constrained to viewport)
+el.alignTo("other-el", "tr?");
+
+// align the bottom right corner of el with the center left edge of other-el
+el.alignTo("other-el", "br-l?");
+
+// align the center of el with the bottom left corner of other-el and
+// adjust the x position by -6 pixels (and the y position by 0)
+el.alignTo("other-el", "c-bl", [-6, 0]);
+
+// Basic box wrap
+Ext.get("foo").boxWrap();
+
+// You can also add a custom class and use CSS inheritance rules to customize the box look.
+// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+// for how to create a custom box wrap style.
+Ext.get("foo").boxWrap().addClass("x-box-blue");
+This method does not retrieve {@link Ext.Component Component}s. This method + * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by + * its ID, use {@link Ext.ComponentMgr#get}.
+ *Uses simple caching to consistently return the same object. + * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
+ * @param {Mixed} el The id of the node, a DOM Node or an existing Element. + * @return {Element} The {@link Ext.Element Element} object (or null if no matching element was found) + * @static + */ +El.get = function(el){ + var ex, elm, id; + if(!el){ return null; } + if(typeof el == "string"){ // element id + if(!(elm = document.getElementById(el))){ + return null; + } + if(ex = El.cache[el]){ + ex.dom = elm; + }else{ + ex = El.cache[el] = new El(elm); + } + return ex; + }else if(el.tagName){ // dom element + if(!(id = el.id)){ + id = Ext.id(el); + } + if(ex = El.cache[id]){ + ex.dom = el; + }else{ + ex = El.cache[id] = new El(el); + } + return ex; + }else if(el instanceof El){ + if(el != docEl){ + el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid, + // catch case where it hasn't been appended + El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it + } + return el; + }else if(el.isComposite){ + return el; + }else if(Ext.isArray(el)){ + return El.select(el); + }else if(el == document){ + // create a bogus element object representing the document object + if(!docEl){ + var f = function(){}; + f.prototype = El.prototype; + docEl = new f(); + docEl.dom = document; + } + return docEl; + } + return null; +}; + +// private +El.uncache = function(el){ + for(var i = 0, a = arguments, len = a.length; i < len; i++) { + if(a[i]){ + delete El.cache[a[i].id || a[i]]; + } + } +}; + +// private +// Garbage collection - uncache elements/purge listeners on orphaned elements +// so we don't hold a reference and cause the browser to retain them +El.garbageCollect = function(){ + if(!Ext.enableGarbageCollector){ + clearInterval(El.collectorThread); + return; + } + for(var eid in El.cache){ + var el = El.cache[eid], d = el.dom; + // ------------------------------------------------------- + // Determining what is garbage: + // ------------------------------------------------------- + // !d + // dom node is null, definitely garbage + // ------------------------------------------------------- + // !d.parentNode + // no parentNode == direct orphan, definitely garbage + // ------------------------------------------------------- + // !d.offsetParent && !document.getElementById(eid) + // display none elements have no offsetParent so we will + // also try to look it up by it's id. However, check + // offsetParent first so we don't do unneeded lookups. + // This enables collection of elements that are not orphans + // directly, but somewhere up the line they have an orphan + // parent. + // ------------------------------------------------------- + if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){ + delete El.cache[eid]; + if(d && Ext.enableListenerCollection){ + Ext.EventManager.removeAll(d); + } + } + } +} +El.collectorThreadId = setInterval(El.garbageCollect, 30000); + +var flyFn = function(){}; +flyFn.prototype = El.prototype; +var _cls = new flyFn(); + +// dom is optional +El.Flyweight = function(dom){ + this.dom = dom; +}; + +El.Flyweight.prototype = _cls; +El.Flyweight.prototype.isFlyweight = true; + +El._flyweights = {}; +/** + * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - + * the dom node can be overwritten by other code. + * @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 "_internal") + * @static + * @return {Element} The shared Element object (or null if no matching element was found) + */ +El.fly = function(el, named){ + named = named || '_global'; + el = Ext.getDom(el); + if(!el){ + return null; + } + if(!El._flyweights[named]){ + El._flyweights[named] = new El.Flyweight(); + } + El._flyweights[named].dom = el; + return El._flyweights[named]; +}; + +/** + * Static method to retrieve Element objects. Uses simple caching to consistently return the same object. + * Automatically fixes if an object was recreated with the same id via AJAX or DOM. + * Shorthand of {@link Ext.Element#get} + * @param {Mixed} el The id of the node, a DOM Node or an existing Element. + * @return {Element} The Element object + * @member Ext + * @method get + */ +Ext.get = El.get; +/** + * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - + * the dom node can be overwritten by other code. + * Shorthand of {@link Ext.Element#fly} + * @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 "_internal") + * @static + * @return {Element} The shared Element object + * @member Ext + * @method fly + */ +Ext.fly = El.fly; + +// speedy lookup for elements never to box adjust +var noBoxAdjust = Ext.isStrict ? { + select:1 +} : { + input:1, select:1, textarea:1 +}; +if(Ext.isIE || Ext.isGecko){ + noBoxAdjust['button'] = 1; +} + + +Ext.EventManager.on(window, 'unload', function(){ + delete El.cache; + delete El._flyweights; +}); +})(); \ No newline at end of file diff --git a/thirdpartyjs/extjs/source/core/EventManager.js b/thirdpartyjs/extjs/source/core/EventManager.js new file mode 100644 index 0000000..5119954 --- /dev/null +++ b/thirdpartyjs/extjs/source/core/EventManager.js @@ -0,0 +1,933 @@ +/* + * Ext JS Library 2.2 + * Copyright(c) 2006-2008, Ext JS, LLC. + * licensing@extjs.com + * + * http://extjs.com/license + */ + +/** + * @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; + var resizeEvent, resizeTask, textEvent, textSize; + var E = Ext.lib.Event; + var D = Ext.lib.Dom; + // fix parser confusion + var xname = 'Ex' + 't'; + + var elHash = {}; + + var addListener = function(el, ename, fn, wrap, scope){ + var id = Ext.id(el); + if(!elHash[id]){ + elHash[id] = {}; + } + var es = elHash[id]; + if(!es[ename]){ + es[ename] = []; + } + var ls = es[ename]; + ls.push({ + id: id, + ename: ename, + fn: fn, + wrap: wrap, + scope: scope + }); + + E.on(el, ename, wrap); + + if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery + el.addEventListener("DOMMouseScroll", wrap, false); + E.on(window, 'unload', function(){ + el.removeEventListener("DOMMouseScroll", wrap, false); + }); + } + if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document + Ext.EventManager.stoppedMouseDownEvent.addListener(wrap); + } + } + + var removeListener = function(el, ename, fn, scope){ + el = Ext.getDom(el); + var id = Ext.id(el), es = elHash[id], wrap; + if(es){ + var ls = es[ename], l; + if(ls){ + for(var i = 0, len = ls.length; i < len; i++){ + l = ls[i]; + if(l.fn == fn && (!scope || l.scope == scope)){ + wrap = l.wrap; + E.un(el, ename, wrap); + ls.splice(i, 1); + break; + } + } + } + } + if(ename == "mousewheel" && el.addEventListener && wrap){ + el.removeEventListener("DOMMouseScroll", wrap, false); + } + if(ename == "mousedown" && el == document && wrap){ // fix stopped mousedowns on the document + Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); + } + } + + var removeAll = function(el){ + el = Ext.getDom(el); + var id = Ext.id(el), es = elHash[id], ls; + if(es){ + for(var ename in es){ + if(es.hasOwnProperty(ename)){ + ls = es[ename]; + for(var i = 0, len = ls.length; i < len; i++){ + E.un(el, ename, ls[i].wrap); + ls[i] = null; + } + } + es[ename] = null; + } + delete elHash[id]; + } + } + + var fireDocReady = function(){ + if(!docReadyState){ + docReadyState = Ext.isReady = true; + if(Ext.isGecko || Ext.isOpera) { + document.removeEventListener("DOMContentLoaded", fireDocReady, false); + } + } + if(docReadyProcId){ + clearInterval(docReadyProcId); + docReadyProcId = null; + } + if(docReadyEvent){ + docReadyEvent.fire(); + docReadyEvent.clearListeners(); + } + }; + + var initDocReady = function(){ + docReadyEvent = new Ext.util.Event(); + + if(Ext.isReady){ + return; + } + + // no matter what, make sure it fires on load + E.on(window, 'load', fireDocReady); + + if(Ext.isGecko || Ext.isOpera) { + document.addEventListener('DOMContentLoaded', fireDocReady, false); + } + else if(Ext.isIE){ + docReadyProcId = setInterval(function(){ + try{ + // throws errors until DOM is ready + Ext.isReady || (document.documentElement.doScroll('left')); + }catch(e){ + return; + } + fireDocReady(); // no errors, fire + }, 5); + + document.onreadystatechange = function(){ + if(document.readyState == 'complete'){ + document.onreadystatechange = null; + fireDocReady(); + } + }; + } + else if(Ext.isSafari){ + docReadyProcId = setInterval(function(){ + var rs = document.readyState; + if(rs == 'complete') { + fireDocReady(); + } + }, 10); + } + }; + + var createBuffered = function(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 + e = new Ext.EventObjectImpl(e); + task.delay(o.buffer, h, null, [e]); + }; + }; + + var createSingle = function(h, el, ename, fn, scope){ + return function(e){ + Ext.EventManager.removeListener(el, ename, fn, scope); + h(e); + }; + }; + + var createDelayed = function(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); + }; + }; + + var listen = function(element, ename, opt, fn, scope){ + var o = (!opt || typeof opt == "boolean") ? {} : opt; + fn = fn || o.fn; scope = scope || o.scope; + var el = Ext.getDom(element); + if(!el){ + throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.'; + } + var h = function(e){ + // prevent errors while unload occurring + if(!window[xname]){ + return; + } + e = Ext.EventObject.setEvent(e); + var t; + if(o.delegate){ + t = e.getTarget(o.delegate, el); + if(!t){ + return; + } + }else{ + t = e.target; + } + if(o.stopEvent === true){ + e.stopEvent(); + } + if(o.preventDefault === true){ + e.preventDefault(); + } + if(o.stopPropagation === true){ + e.stopPropagation(); + } + + if(o.normalized === false){ + e = e.browserEvent; + } + + fn.call(scope || el, e, t, 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 propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/; + 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 type of event to listen for + * @param {Function} handler The handler function the event invokes This function is passed + * the following parameters:See {@link Ext.Element#addListener} for examples of how to use these options.
+ */ + addListener : function(element, eventName, fn, scope, options){ + if(typeof eventName == "object"){ + var o = eventName; + for(var e in o){ + if(propRe.test(e)){ + continue; + } + if(typeof o[e] == "function"){ + // shared options + listen(element, e, o, o[e], o.scope); + }else{ + // individual options + listen(element, e, o[e]); + } + } + return; + } + return listen(element, eventName, options, fn, scope); + }, + + /** + * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically + * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. + * @param {String/HTMLElement} el The id or html element from which to remove the event + * @param {String} eventName The type of event + * @param {Function} fn The handler function to remove + */ + removeListener : function(element, eventName, fn, scope){ + return removeListener(element, eventName, fn, scope); + }, + + /** + * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners} + * directly on an Element in favor of calling this version. + * @param {String/HTMLElement} el The id or html element from which to remove the event + */ + removeAll : function(element){ + return removeAll(element); + }, + + /** + * Fires when the document is ready (before onload and before images are loaded). Can be + * accessed shorthanded as Ext.onReady(). + * @param {Function} fn The method the event invokes + * @param {Object} scope (optional) An object that becomes the scope of the handler + * @param {boolean} options (optional) An object containing standard {@link #addListener} options + */ + onDocumentReady : function(fn, scope, options){ + if(!docReadyEvent){ + initDocReady(); + } + if(docReadyState || Ext.isReady){ // if it already fired + options || (options = {}); + fn.defer(options.delay||0, scope); + }else{ + docReadyEvent.addListener(fn, scope, options); + } + }, + + /** + * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers. + * @param {Function} fn The method the event invokes + * @param {Object} scope An object that becomes the scope of the handler + * @param {boolean} options + */ + onWindowResize : function(fn, scope, options){ + if(!resizeEvent){ + resizeEvent = new Ext.util.Event(); + resizeTask = new Ext.util.DelayedTask(function(){ + resizeEvent.fire(D.getViewWidth(), D.getViewHeight()); + }); + E.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()); + } + } + }, + + /** + * Fires 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 method the event invokes + * @param {Object} scope An object that becomes the scope of the handler + * @param {boolean} options + */ + 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()); + } + }, + /** + * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL) + */ + ieDeferSrc : false, + /** + * The frequency, in milliseconds, to check for text resize events (defaults to 50) + */ + textResizeInterval : 50 + }; + /** + * Appends an event handler to an element. Shorthand for {@link #addListener}. + * @param {String/HTMLElement} el The html element or id to assign the event handler to + * @param {String} eventName The type of event to listen for + * @param {Function} handler The handler function the event invokes + * @param {Object} scope (optional) The scope in which to execute the handler + * function (the handler function's "this" context) + * @param {Object} options (optional) An object containing standard {@link #addListener} options + * @member Ext.EventManager + * @method on + */ + pub.on = pub.addListener; + /** + * Removes an event handler from an element. Shorthand for {@link #removeListener}. + * @param {String/HTMLElement} el The id or html element from which to remove the event + * @param {String} eventName The type of event + * @param {Function} fn The handler function to remove + * @return {Boolean} True if a listener was actually removed, else false + * @member Ext.EventManager + * @method un + */ + pub.un = pub.removeListener; + + pub.stoppedMouseDownEvent = new Ext.util.Event(); + return pub; +}(); +/** + * Fires when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. + * @param {Function} fn The method the event invokes + * @param {Object} scope An object that becomes the scope of the handler + * @param {boolean} override If true, the obj passed in becomes + * the execution scope of the listener + * @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-ie7') + : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') + : Ext.isOpera ? "ext-opera" + : Ext.isSafari ? "ext-safari" : ""]; + + if(Ext.isMac){ + cls.push("ext-mac"); + } + if(Ext.isLinux){ + cls.push("ext-linux"); + } + if(Ext.isBorderBox){ + cls.push('ext-border-box'); + } + if(Ext.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" + var p = bd.parentNode; + if(p){ + p.className += ' ext-strict'; + } + } + bd.className += cls.join(' '); + return true; + } + + if(!initExtCss()){ + Ext.onReady(initExtCss); + } +})(); + +/** + * @class Ext.EventObject + * EventObject exposes the Yahoo! UI Event functionality directly on the object + * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code + * Example: + *
+ function handleClick(e){ // e is not a standard event object, it is a Ext.EventObject
+ e.preventDefault();
+ var target = e.getTarget();
+ ...
+ }
+ var myDiv = Ext.get("myDiv");
+ myDiv.on("click", handleClick);
+ //or
+ Ext.EventManager.on("myDiv", 'click', handleClick);
+ Ext.EventManager.addListener("myDiv", 'click', handleClick);
+
+// Handle click on any child of an element
+Ext.getBody().on('click', function(e){
+ if(e.within('some-el')){
+ alert('Clicked on a child of some-el!');
+ }
+});
+
+// Handle click directly on an element, ignoring clicks on child nodes
+Ext.getBody().on('click', function(e,t){
+ if((t.id == 'some-el') && !e.within(t, true)){
+ alert('Clicked directly on some-el!');
+ }
+});
+
+Ext.addBehaviors({
+ // add a listener for click on all anchors in element with id foo
+ '#foo a@click' : function(e, t){
+ // do something
+ },
+
+ // add the same listener to multiple selectors (separated by comma BEFORE the @)
+ '#foo a, #bar span.some-class@mouseover' : function(){
+ // do something
+ }
+});
++ * This function also supports a 2-argument call in which the subclass's constructor is + * not passed as an argument. In this form, the parameters are as follows:
+ *
superclass
+ * overrides
+ * + * This may contain a special member named constructor. This is used + * to define the constructor of the new class, and is returned. If this property is + * not specified, a constructor is generated and returned which just calls the + * superclass's constructor passing on its parameters.
+ * For example, to create a subclass of the Ext GridPanel: + *
+ MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
+ constructor: function(config) {
+ // Your preprocessing here
+ MyGridPanel.superclass.constructor.apply(this, arguments);
+ // Your postprocessing here
+ },
+
+ yourMethod: function() {
+ // etc.
+ }
+ });
+
+Ext.override(MyClass, {
+ newMethod1: function(){
+ // etc.
+ },
+ newMethod2: function(foo){
+ // etc.
+ }
+});
+
+Ext.namespace('Company', 'Company.data');
+Company.Widget = function() { ... }
+Company.data.CustomStore = function(config) { ... }
+myFunction.createCallback(arg1, arg2)
+ * Will create a function that is bound to those 2 args. If a specific scope is required in the
+ * callback, use {@link #createDelegate} instead. The function returned by createCallback always
+ * executes in the window scope.
+ * This method is required when you want to pass arguments to a callback function. If no arguments + * are needed, you can simply pass a reference to the function as a callback (e.g., callback: myFn). + * However, if you tried to pass a function with arguments (e.g., callback: myFn(arg1, arg2)) the function + * would simply execute immediately when the code is parsed. Example usage: + *
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+// clicking the button alerts "Hi, Fred"
+new Ext.Button({
+ text: 'Say Hi',
+ renderTo: Ext.getBody(),
+ handler: sayHi.createCallback('Fred')
+});
+this.myFunction.createDelegate(this, [arg1, arg2])
+ * Will create a function that is automatically scoped to obj so that the this variable inside the
+ * callback points to obj. Example usage:
+ *
+var sayHi = function(name){
+ // Note this use of "this.text" here. This function expects to
+ // execute within a scope that contains a text property. In this
+ // example, the "this" variable is pointing to the btn object that
+ // was passed in createDelegate below.
+ alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
+}
+
+var btn = new Ext.Button({
+ text: 'Say Hi',
+ renderTo: Ext.getBody()
+});
+
+// This callback will execute in the scope of the
+// button instance. Clicking the button alerts
+// "Hi, Fred. You clicked the "Say Hi" button."
+btn.on('click', sayHi.createDelegate(btn, ['Fred']));
+
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+// executes immediately:
+sayHi('Fred');
+
+// executes after 2 seconds:
+sayHi.defer(2000, this, ['Fred']);
+
+// this syntax is sometimes useful for deferring
+// execution of an anonymous function:
+(function(){
+ alert('Anonymous');
+}).defer(100);
+
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+sayHi('Fred'); // alerts "Hi, Fred"
+
+var sayGoodbye = sayHi.createSequence(function(name){
+ alert('Bye, ' + name);
+});
+
+sayGoodbye('Fred'); // both alerts show
+
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+sayHi('Fred'); // alerts "Hi, Fred"
+
+// create a new function that validates input without
+// directly modifying the original function:
+var sayHiToFriend = sayHi.createInterceptor(function(name){
+ return name == 'Brian';
+});
+
+sayHiToFriend('Fred'); // no alert
+sayHiToFriend('Brian'); // alerts "Hi, Brian"
+
+var s = String.leftPad('123', 5, '0');
+// s now contains the string: '00123'
+
+var cls = 'my-class', text = 'Some text';
+var s = String.format('<div class="{0}">{1}</div>', cls, text);
+// s now contains the string: '<div class="my-class">Some text</div>'
+
+// alternate sort directions
+sort = sort.toggle('ASC', 'DESC');
+
+// instead of conditional logic:
+sort = (sort == 'ASC' ? 'DESC' : 'ASC');
+
+var s = ' foo bar ';
+alert('-' + s + '-'); //alerts "- foo bar -"
+alert('-' + s.trim() + '-'); //alerts "-foo bar-"
+A class to provide basic animation and visual effects support. Note: This class is automatically applied + * to the {@link Ext.Element} interface when included, so all effects calls should be performed via Element. + * Conversely, since the effects are not actually defined in Element, Ext.Fx must be included in order for the + * Element effects to work.
It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that + * they return the Element object itself as the method return value, it is not always possible to mix the two in a single + * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. + * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, + * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the + * expected results and should be done with care.
Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element + * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
++Value Description +----- ----------------------------- +tl The top left corner +t The center of the top edge +tr The top right corner +l The center of the left edge +r The center of the right edge +bl The bottom left corner +b The center of the bottom edge +br The bottom right corner ++ * Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section + * below are common options that can be passed to any Fx method. + * + * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the + * Fx class, so do not need to use the callback parameter to specify another effect -- effects can simply be chained together + * and called in sequence (e.g., el.slideIn().highlight();). The callback is intended for any additional code that should + * run once a particular effect has completed. The Element being operated upon is passed as the first parameter. + * @cfg {Object} scope The scope of the effect function + * @cfg {String} easing A valid Easing value for the effect + * @cfg {String} afterCls A css class to apply after the effect + * @cfg {Number} duration The length of time (in seconds) that the effect should last + * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes + * @cfg {Boolean} useDisplay Whether to use the display CSS property instead of visibility when hiding Elements (only applies to + * effects that end with the element being visually hidden, ignored otherwise) + * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or + * a function which returns such a specification that will be applied to the Element after the effect finishes + * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs + * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence + * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes + */ +Ext.Fx = { + /** + * Slides the element into view. An anchor point can be optionally passed to set the point of + * origin for the slide effect. This function automatically handles wrapping the element with + * a fixed-size container if needed. See the Fx class overview for valid anchor point options. + * Usage: + *
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+ easing: 'easeOut',
+ duration: .5
+});
+
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+ easing: 'easeIn',
+ duration: .3,
+ remove: false,
+ useDisplay: false
+});
+
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight("0000ff", { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight("ffff9c", {
+ attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
+ endColor: (current color) or "ffffff",
+ easing: 'easeIn',
+ duration: 1
+});
+
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame("ff0000", 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame("C3DAF9", 1, {
+ duration: 1 //duration of entire animation (not each individual ripple)
+ // Note: Easing is not configurable and will be ignored if included
+});
+
+el.pause(1);
+
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+ endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5
+});
+
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+ endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values. The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+ [element's width],
+ [element's height], {
+ easing: 'easeOut',
+ duration: .35
+ }
+);
+
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+ width: [element's width],
+ height: [element's height],
+ x: [element's x position],
+ y: [element's y position],
+ opacity: [element's opacity],
+ easing: 'easeOut',
+ duration: .35
+});
+
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+var t = new Ext.Template(
+ '<div name="{id}">',
+ '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
+ '</div>'
+);
+t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
+
+ * // Get it from a Ext.Element object
+ * var el = Ext.get("foo");
+ * var mgr = el.getUpdater();
+ * mgr.update({
+ url: "http://myserver.com/index.php",
+ params: {
+ param1: "foo",
+ param2: "bar"
+ }
+ * });
+ * ...
+ * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
+ *
+ * // or directly (returns the same Updater instance)
+ * var mgr = new Ext.Updater("myElementId");
+ * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
+ * mgr.on("update", myFcnNeedsToKnow);
+ *
+ * // short handed call directly from the element object
+ * Ext.get("foo").load({
+ url: "bar.php",
+ scripts: true,
+ params: "param1=foo¶m2=bar",
+ text: "Loading Foo..."
+ * });
+ * The URL to request or a function which + * returns the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).
The HTTP method to + * use. Defaults to POST if the params argument is present, otherwise GET.
The + * parameters to pass to the server (defaults to none). These may be specified as a url-encoded + * string, or as an object containing properties which represent parameters, + * or as a function, which returns such an object.
If true + * any <script> tags embedded in the response text will be extracted + * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified, + * the callback will be called after the execution of the scripts.
A function to + * be called when the response from the server arrives. The following + * parameters are passed:
The Element being updated.
True for success, false for failure.
The XMLHttpRequest which processed the update.
The config object passed to the update call.
The scope in which + * to execute the callback (The callback's this reference.) If the + * params argument is a function, this scope is used for that function also.
By default, the URL of this request becomes + * the default URL for this Updater object, and will be subsequently used in {@link #refresh} + * calls. To bypass this behavior, pass discardUrl:true (defaults to false).
The number of seconds to wait for a response before + * timing out (defaults to {@link Ext.Updater.defaults#timeout}).
The text to use as the innerHTML of the + * {@link Ext.Updater.defaults#indicatorText} div (defaults to 'Loading...'). To replace the entire div, not + * just the text, override {@link Ext.Updater.defaults#indicatorText} directly.
Only needed for GET + * requests, this option causes an extra, auto-generated parameter to be appended to the request + * to defeat caching (defaults to {@link Ext.Updater.defaults#disableCaching}).
+ * For example: +
+um.update({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: true,
+ nocache: true,
+ text: "Loading...",
+ timeout: 60,
+ scripts: false // Save time by avoiding RegExp execution.
+});
+The Element being updated.
True for success, false for failure.
The XMLHttpRequest which processed the update.
Ext.Updater.updateElement("my-div", "stuff.php");