中间件编程

开发平台：

JavaScript

ext-all-debug.js：源码内容

/*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ /** * @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><b><u>DomHelper element specification object</u></b></p> * <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"><ul> * <li><b><tt>tag</tt></b> : <div class="sub-desc">The tag name of the element</div></li> * <li><b><tt>children</tt></b> : or <tt>cn</tt><div class="sub-desc">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> * <li><b><tt>cls</tt></b> : <div class="sub-desc">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> * <li><b><tt>html</tt></b> : <div class="sub-desc">The innerHTML for the element</div></li> * </ul></div></p> * * <p><b><u>Insertion methods</u></b></p> * <p>Commonly used insertion methods: * <div class="mdetail-params"><ul> * <li><b><tt>{@link #append}</tt></b> : <div class="sub-desc"></div></li> * <li><b><tt>{@link #insertBefore}</tt></b> : <div class="sub-desc"></div></li> * <li><b><tt>{@link #insertAfter}</tt></b> : <div class="sub-desc"></div></li> * <li><b><tt>{@link #overwrite}</tt></b> : <div class="sub-desc"></div></li> * <li><b><tt>{@link #createTemplate}</tt></b> : <div class="sub-desc"></div></li> * <li><b><tt>{@link #insertHtml}</tt></b> : <div class="sub-desc"></div></li> * </ul></div></p> * * <p><b><u>Example</u></b></p> * <p>This is an example, where an unordered list with 3 children items is appended to an existing * element with id <tt>'my-div'</tt>:<br> <pre><code> 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></pre></p> * <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><code> dh.append('my-ul', [ {tag: 'li', id: 'item3', html: 'List Item 3'}, {tag: 'li', id: 'item4', html: 'List Item 4'} ]); * </code></pre></p> * * <p><b><u>Templating</u></b></p> * <p>The real power is in the built-in templating. Instead of creating or appending any elements, * <tt>{@link #createTemplate}</tt> 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><code> // 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></pre></p> * <p>An example using a template:<pre><code> var html = '<a id="{0}" href="{1}" class="nav">{2}</a>'; 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></pre></p> * * <p>The same example using named parameters:<pre><code> var html = '<a id="{id}" href="{url}" class="nav">{text}</a>'; 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></pre></p> * * <p><b><u>Compiling Templates</u></b></p> * <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><code> var html = '<a id="{id}" href="{url}" class="nav">{text}</a>'; var tpl = new Ext.DomHelper.createTemplate(html); tpl.compile(); //... use template like normal * </code></pre></p> * * <p><b><u>Performance Boost</u></b></p> * <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 <tt>false</tt>, * then the string is used as innerHTML. If {@link #useDom} is <tt>true</tt>, a string specification * results in the creation of a text node. Usage:</p> * <pre><code> Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance * </code></pre> * @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(typeof o == 'string'){ b = o; } else if (Ext.isArray(o)) { Ext.each(o, function(v) { b += createHtml(v); }); } 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; while(++i < depth){ el = el.firstChild; } 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); }, /** * 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 fragmenet * @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.DomHelper
*/
Ext.apply(Ext.DomHelper,
function(){
var pub,
afterbegin = 'afterbegin',
afterend = 'afterend',
beforebegin = 'beforebegin',
beforeend = 'beforeend';
// private
function doInsert(el, o, returnElement, pos, sibling, append){
el = Ext.getDom(el);
var newNode;
if (pub.useDom) {
newNode = createDom(o, null);
if (append) {
el.appendChild(newNode);
} else {
(sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
}
} else {
newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
}
return returnElement ? Ext.get(newNode, true) : newNode;
}
// build as dom
/** @ignore */
function createDom(o, parentNode){
var el,
doc = document,
useSet,
attr,
val,
cn;
if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted
el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
Ext.each(o, function(v) {
createDom(v, el);
});
} else if (Ext.isString(o)) { // Allow a string as a child spec.
el = doc.createTextNode(o);
} else {
el = doc.createElement( o.tag || 'div' );
useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
Ext.iterate(o, function(attr, val){
if(!/tag|children|cn|html|style/.test(attr)){
if(attr == 'cls'){
el.className = val;
}else{
if(useSet){
el.setAttribute(attr, val);
}else{
el[attr] = val;
}
}
}
});
pub.applyStyles(el, o.style);
if ((cn = o.children || o.cn)) {
createDom(cn, el);
} else if (o.html) {
el.innerHTML = o.html;
}
}
if(parentNode){
parentNode.appendChild(el);
}
return el;
}
pub = {
/**
* Creates a new Ext.Template from the DOM object spec.
* @param {Object} o The DOM object spec (and children)
* @return {Ext.Template} The new template
*/
createTemplate : function(o){
var html = Ext.DomHelper.createHtml(o);
return new Ext.Template(html);
},
/** True to force the use of DOM instead of html fragments @type Boolean */
useDom : false,
/**
* 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);
}
}
},
/**
* 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
* @hide (repeat)
*/
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
* @hide (repeat)
*/
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
* @hide (repeat)
*/
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
* @hide (repeat)
*/
append: function(el, o, returnElement){
return doInsert(el, o, returnElement, beforeend, '', true);
},
/**
* Creates new DOM element(s) without inserting them to the document.
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
* @return {HTMLElement} The new uninserted node
*/
createDom: createDom
};
return pub;
}());/** * @class Ext.Template * Represents an HTML fragment template. Templates can be precompiled for greater performance. * For a list of available format functions, see {@link Ext.util.Format}.<br /> * Usage: <pre><code> 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'}); </code></pre> * @constructor * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("") */ Ext.Template = function(html){ var me = this, a = arguments, buf = []; if (Ext.isArray(html)) { html = html.join(""); } else if (a.length > 1) { Ext.each(a, function(v) { if (Ext.isObject(v)) { Ext.apply(me, v); } else { buf.push(v); } }); html = buf.join(''); } /**@private*/ me.html = html; if (me.compiled) { me.compile(); } }; Ext.Template.prototype = { /** * Returns an HTML fragment of this template with the specified values applied. * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @return {String} The HTML fragment */ applyTemplate : function(values){ var me = this; return me.compiled ? me.compiled(values) : me.html.replace(me.re, function(m, name){ return values[name] !== undefined ? values[name] : ""; }); }, /** * Sets the HTML used as the template and optionally compiles it. * @param {String} html * @param {Boolean} compile (optional) True to compile the template (defaults to undefined) * @return {Ext.Template} this */ set : function(html, compile){ var me = this; me.html = html; me.compiled = null; return compile ? me.compile() : me; }, /** * The regular expression used to match template variables * @type RegExp * @property */ re : /{([w-]+)}/g, /** * Compiles the template into an internal function, eliminating the RegEx overhead. * @return {Ext.Template} this */ compile : function(){ var me = this, sep = Ext.isGecko ? "+" : ","; function fn(m, name){ name = "values['" + name + "']"; return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'"; } eval("this.compiled = function(values){ return " + (Ext.isGecko ? "'" : "['") + me.html.replace(/\/g, '\\').replace(/(rn|n)/g, '\n').replace(/'/g, "\'").replace(this.re, fn) + (Ext.isGecko ? "';};" : "'].join('');};")); return me; }, /** * Applies the supplied values to the template and inserts the new node(s) as the first child of el. * @param {Mixed} el The context element * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ insertFirst: function(el, values, returnElement){ return this.doInsert('afterBegin', el, values, returnElement); }, /** * Applies the supplied values to the template and inserts the new node(s) before el. * @param {Mixed} el The context element * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ insertBefore: function(el, values, returnElement){ return this.doInsert('beforeBegin', el, values, returnElement); }, /** * Applies the supplied values to the template and inserts the new node(s) after el. * @param {Mixed} el The context element * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ insertAfter : function(el, values, returnElement){ return this.doInsert('afterEnd', el, values, returnElement); }, /** * Applies the supplied values to the template and appends the new node(s) to el. * @param {Mixed} el The context element * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ append : function(el, values, returnElement){ return this.doInsert('beforeEnd', el, values, returnElement); }, doInsert : function(where, el, values, returnEl){ el = Ext.getDom(el); var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values)); return returnEl ? Ext.get(newNode, true) : newNode; }, /** * Applies the supplied values to the template and overwrites the content of el with the new node(s). * @param {Mixed} el The context element * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ overwrite : function(el, values, returnElement){ el = Ext.getDom(el); el.innerHTML = this.applyTemplate(values); return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; } }; /** * Alias for {@link #applyTemplate} * Returns an HTML fragment of this template with the specified values applied. * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) * @return {String} The HTML fragment * @member Ext.Template * @method apply */ Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; /** * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML. * @param {String/HTMLElement} el A DOM element or its id * @param {Object} config A configuration object * @return {Ext.Template} The created template * @static */ Ext.Template.from = function(el, config){ el = Ext.getDom(el); return new Ext.Template(el.value || el.innerHTML, config || ''); };/**
* @class Ext.Template
*/
Ext.apply(Ext.Template.prototype, {
/**
* Returns an HTML fragment of this template with the specified values applied.
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @return {String} The HTML fragment
* @hide repeat doc
*/
applyTemplate : function(values){
var me = this,
useF = me.disableFormats !== true,
fm = Ext.util.Format,
tpl = me;
if(me.compiled){
return me.compiled(values);
}
function fn(m, name, format, args){
if (format && useF) {
if (format.substr(0, 5) == "this.") {
return tpl.call(format.substr(5), values[name], values);
} else {
if (args) {
// quoted values are required for strings in compiled templates,
// but for non compiled we need to strip them
// quoted reversed for jsmin
var re = /^s*['"](.*)["']s*$/;
args = args.split(',');
for(var i = 0, len = args.length; i < len; i++){
args[i] = args[i].replace(re, "$1");
}
args = [values[name]].concat(args);
} else {
args = [values[name]];
}
return fm[format].apply(fm, args);
}
} else {
return values[name] !== undefined ? values[name] : "";
}
}
return me.html.replace(me.re, fn);
},
/**
* <tt>true</tt> to disable format functions (defaults to <tt>false</tt>)
* @type Boolean
* @property
*/
disableFormats : false,
/**
* The regular expression used to match template variables
* @type RegExp
* @property
* @hide repeat doc
*/
re : /{([w-]+)(?::([w.]*)(?:((.*?)?))?)?}/g,
/**
* Compiles the template into an internal function, eliminating the RegEx overhead.
* @return {Ext.Template} this
* @hide repeat doc
*/
compile : function(){
var me = this,
fm = Ext.util.Format,
useF = me.disableFormats !== true,
sep = Ext.isGecko ? "+" : ",",
body;
function fn(m, name, format, args){
if(format && useF){
args = args ? ',' + args : "";
if(format.substr(0, 5) != "this."){
format = "fm." + format + '(';
}else{
format = 'this.call("'+ format.substr(5) + '", ';
args = ", values";
}
}else{
args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
}
return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
}
// branched to use + in gecko and [].join() in others
if(Ext.isGecko){
body = "this.compiled = function(values){ return '" +
me.html.replace(/\/g, '\\').replace(/(rn|n)/g, '\n').replace(/'/g, "\'").replace(this.re, fn) +
"';};";
}else{
body = ["this.compiled = function(values){ return ['"];
body.push(me.html.replace(/\/g, '\\').replace(/(rn|n)/g, '\n').replace(/'/g, "\'").replace(this.re, fn));
body.push("'].join('');};");
body = body.join('');
}
eval(body);
return me;
},
// private function used to call members
call : function(fnName, value, allValues){
return this[fnName](value, allValues);
}
});
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; /*
* This is code is also distributed under MIT license for use
* with jQuery and prototype JavaScript libraries.
*/
/**
* @class Ext.DomQuery
Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
<p>
DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>
<p>
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.
</p>
<h4>Element Selectors:</h4>
<ul class="list">
<li> <b>*</b> any element</li>
<li> <b>E</b> an element with the tag E</li>
<li> <b>E F</b> All descendent elements of E that have the tag F</li>
<li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
<li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
<li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
</ul>
<h4>Attribute Selectors:</h4>
<p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
<ul class="list">
<li> <b>E[foo]</b> has an attribute "foo"</li>
<li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
<li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
<li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
<li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
<li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
<li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
</ul>
<h4>Pseudo Classes:</h4>
<ul class="list">
<li> <b>E:first-child</b> E is the first child of its parent</li>
<li> <b>E:last-child</b> E is the last child of its parent</li>
<li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>
<li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
<li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
<li> <b>E:only-child</b> E is the only child of its parent</li>
<li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>
<li> <b>E:first</b> the first E in the resultset</li>
<li> <b>E:last</b> the last E in the resultset</li>
<li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
<li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
<li> <b>E:even</b> shortcut for :nth-child(even)</li>
<li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
<li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
<li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
<li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
<li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
<li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
</ul>
<h4>CSS Value Selectors:</h4>
<ul class="list">
<li> <b>E{display=none}</b> css value "display" that equals "none"</li>
<li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
<li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
<li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
<li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
<li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
</ul>
* @singleton
*/
Ext.DomQuery = function(){
var cache = {},
simpleCache = {},
valueCache = {},
nonSpace = /S/,
trimRe = /^s+|s+$/g,
tplRe = /{(d+)}/g,
modeRe = /^(s?[/>+~]s?|s|$)/,
tagTokenRe = /^(#)?([w-*]+)/,
nthRe = /(d*)n+?(d*)/,
nthRe2 = /D/,
// This is for IE MSXML which does not support expandos.
// IE runs the same speed using setAttribute, however FF slows way down
// and Safari completely fails so they need to continue to use expandos.
isIE = window.ActiveXObject ? true : false,
isOpera = Ext.isOpera,
key = 30803;
// this eval is stop the compressor from
// renaming the variable to something shorter
eval("var batch = 30803;");
function child(p, index){
var i = 0,
n = p.firstChild;
while(n){
if(n.nodeType == 1){
if(++i == index){
return n;
}
}
n = n.nextSibling;
}
return null;
};
function next(n){
while((n = n.nextSibling) && n.nodeType != 1);
return n;
};
function prev(n){
while((n = n.previousSibling) && n.nodeType != 1);
return n;
};
function children(d){
var n = d.firstChild, ni = -1,
nx;
while(n){
nx = n.nextSibling;
if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
d.removeChild(n);
}else{
n.nodeIndex = ++ni;
}
n = nx;
}
return this;
};
function byClassName(c, a, v){
if(!v){
return c;
}
var r = [], ri = -1, cn;
for(var i = 0, ci; ci = c[i]; i++){
if((' '+ci.className+' ').indexOf(v) != -1){
r[++ri] = ci;
}
}
return r;
};
function attrValue(n, attr){
if(!n.tagName && typeof n.length != "undefined"){
n = n[0];
}
if(!n){
return null;
}
if(attr == "for"){
return n.htmlFor;
}
if(attr == "class" || attr == "className"){
return n.className;
}
return n.getAttribute(attr) || n[attr];
};
function getNodes(ns, mode, tagName){
var result = [], ri = -1, cs;
if(!ns){
return result;
}
tagName = tagName || "*";
if(typeof ns.getElementsByTagName != "undefined"){
ns = [ns];
}
if(!mode){
for(var i = 0, ni; ni = ns[i]; i++){
cs = ni.getElementsByTagName(tagName);
for(var j = 0, ci; ci = cs[j]; j++){
result[++ri] = ci;
}
}
}else if(mode == "/" || mode == ">"){
var utag = tagName.toUpperCase();
for(var i = 0, ni, cn; ni = ns[i]; i++){
cn = isOpera ? ni.childNodes : (ni.children || ni.childNodes);
for(var j = 0, cj; cj = cn[j]; j++){
if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
result[++ri] = cj;
}
}
}
}else if(mode == "+"){
var utag = tagName.toUpperCase();
for(var i = 0, n; n = ns[i]; i++){
while((n = n.nextSibling) && n.nodeType != 1);
if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
result[++ri] = n;
}
}
}else if(mode == "~"){
var utag = tagName.toUpperCase();
for(var i = 0, n; n = ns[i]; i++){
while((n = n.nextSibling)){
if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){
result[++ri] = n;
}
}
}
}
return result;
};
function concat(a, b){
if(b.slice){
return a.concat(b);
}
for(var i = 0, l = b.length; i < l; i++){
a[a.length] = b[i];
}
return a;
}
function byTag(cs, tagName){
if(cs.tagName || cs == document){
cs = [cs];
}
if(!tagName){
return cs;
}
var r = [], ri = -1;
tagName = tagName.toLowerCase();
for(var i = 0, ci; ci = cs[i]; i++){
if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
r[++ri] = ci;
}
}
return r;
};
function byId(cs, attr, id){
if(cs.tagName || cs == document){
cs = [cs];
}
if(!id){
return cs;
}
var r = [], ri = -1;
for(var i = 0,ci; ci = cs[i]; i++){
if(ci && ci.id == id){
r[++ri] = ci;
return r;
}
}
return r;
};
function byAttribute(cs, attr, value, op, custom){
var r = [],
ri = -1,
st = custom=="{",
f = Ext.DomQuery.operators[op];
for(var i = 0, ci; ci = cs[i]; i++){
if(ci.nodeType != 1){
continue;
}
var a;
if(st){
a = Ext.DomQuery.getStyle(ci, attr);
}
else if(attr == "class" || attr == "className"){
a = ci.className;
}else if(attr == "for"){
a = ci.htmlFor;
}else if(attr == "href"){
a = ci.getAttribute("href", 2);
}else{
a = ci.getAttribute(attr);
}
if((f && f(a, value)) || (!f && a)){
r[++ri] = ci;
}
}
return r;
};
function byPseudo(cs, name, value){
return Ext.DomQuery.pseudos[name](cs, value);
};
function nodupIEXml(cs){
var d = ++key,
r;
cs[0].setAttribute("_nodup", d);
r = [cs[0]];
for(var i = 1, len = cs.length; i < len; i++){
var c = cs[i];
if(!c.getAttribute("_nodup") != d){
c.setAttribute("_nodup", d);
r[r.length] = c;
}
}
for(var i = 0, len = cs.length; i < len; i++){
cs[i].removeAttribute("_nodup");
}
return r;
}
function nodup(cs){
if(!cs){
return [];
}
var len = cs.length, c, i, r = cs, cj, ri = -1;
if(!len || typeof cs.nodeType != "undefined" || len == 1){
return cs;
}
if(isIE && typeof cs[0].selectSingleNode != "undefined"){
return nodupIEXml(cs);
}
var d = ++key;
cs[0]._nodup = d;
for(i = 1; c = cs[i]; i++){
if(c._nodup != d){
c._nodup = d;
}else{
r = [];
for(var j = 0; j < i; j++){
r[++ri] = cs[j];
}
for(j = i+1; cj = cs[j]; j++){
if(cj._nodup != d){
cj._nodup = d;
r[++ri] = cj;
}
}
return r;
}
}
return r;
}
function quickDiffIEXml(c1, c2){
var d = ++key,
r = [];
for(var i = 0, len = c1.length; i < len; i++){
c1[i].setAttribute("_qdiff", d);
}
for(var i = 0, len = c2.length; i < len; i++){
if(c2[i].getAttribute("_qdiff") != d){
r[r.length] = c2[i];
}
}
for(var i = 0, len = c1.length; i < len; i++){
c1[i].removeAttribute("_qdiff");
}
return r;
}
function quickDiff(c1, c2){
var len1 = c1.length,
d = ++key,
r = [];
if(!len1){
return c2;
}
if(isIE && c1[0].selectSingleNode){
return quickDiffIEXml(c1, c2);
}
for(var i = 0; i < len1; i++){
c1[i]._qdiff = d;
}
for(var i = 0, len = c2.length; i < len; i++){
if(c2[i]._qdiff != d){
r[r.length] = c2[i];
}
}
return r;
}
function quickId(ns, mode, root, id){
if(ns == root){
var d = root.ownerDocument || root;
return d.getElementById(id);
}
ns = getNodes(ns, mode, "*");
return byId(ns, null, id);
}
return {
getStyle : function(el, name){
return Ext.fly(el).getStyle(name);
},
/**
* Compiles a selector/xpath query into a reusable function. The returned function
* takes one parameter "root" (optional), which is the context node from where the query should start.
* @param {String} selector The selector/xpath query
* @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
* @return {Function}
*/
compile : function(path, type){
type = type || "select";
var fn = ["var f = function(root){n var mode; ++batch; var n = root || document;n"],
q = path, mode, lq,
tk = Ext.DomQuery.matchers,
tklen = tk.length,
mm,
// accept leading mode switch
lmode = q.match(modeRe);
if(lmode && lmode[1]){
fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
q = q.replace(lmode[1], "");
}
// strip leading slashes
while(path.substr(0, 1)=="/"){
path = path.substr(1);
}
while(q && lq != q){
lq = q;
var tm = q.match(tagTokenRe);
if(type == "select"){
if(tm){
if(tm[1] == "#"){
fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
}else{
fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
}
q = q.replace(tm[0], "");
}else if(q.substr(0, 1) != '@'){
fn[fn.length] = 'n = getNodes(n, mode, "*");';
}
}else{
if(tm){
if(tm[1] == "#"){
fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
}else{
fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
}
q = q.replace(tm[0], "");
}
}
while(!(mm = q.match(modeRe))){
var matched = false;
for(var j = 0; j < tklen; j++){
var t = tk[j];
var m = q.match(t.re);
if(m){
fn[fn.length] = t.select.replace(tplRe, function(x, i){
return m[i];
});
q = q.replace(m[0], "");
matched = true;
break;
}
}
// prevent infinite loop on bad selector
if(!matched){
throw 'Error parsing selector, parsing failed at "' + q + '"';
}
}
if(mm[1]){
fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
q = q.replace(mm[1], "");
}
}
fn[fn.length] = "return nodup(n);n}";
eval(fn.join(""));
return f;
},
/**
* Selects a group of elements.
* @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
* @param {Node} root (optional) The start of the query (defaults to document).
* @return {Array} An Array of DOM elements which match the selector. If there are
* no matches, and empty Array is returned.
*/
select : function(path, root, type){
if(!root || root == document){
root = document;
}
if(typeof root == "string"){
root = document.getElementById(root);
}
var paths = path.split(","),
results = [];
for(var i = 0, len = paths.length; i < len; i++){
var p = paths[i].replace(trimRe, "");
if(!cache[p]){
cache[p] = Ext.DomQuery.compile(p);
if(!cache[p]){
throw p + " is not a valid selector";
}
}
var result = cache[p](root);
if(result && result != document){
results = results.concat(result);
}
}
if(paths.length > 1){
return nodup(results);
}
return results;
},
/**
* Selects a single element.
* @param {String} selector The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @return {Element} The DOM element which matched the selector.
*/
selectNode : function(path, root){
return Ext.DomQuery.select(path, root)[0];
},
/**
* Selects the value of a node, optionally replacing null with the defaultValue.
* @param {String} selector The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @param {String} defaultValue
* @return {String}
*/
selectValue : function(path, root, defaultValue){
path = path.replace(trimRe, "");
if(!valueCache[path]){
valueCache[path] = Ext.DomQuery.compile(path, "select");
}
var n = valueCache[path](root),
v;
n = n[0] ? n[0] : n;
v = (n && n.firstChild ? n.firstChild.nodeValue : null);
return ((v === null||v === undefined||v==='') ? defaultValue : v);
},
/**
* Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.
* @param {String} selector The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @param {Number} defaultValue
* @return {Number}
*/
selectNumber : function(path, root, defaultValue){
var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
return parseFloat(v);
},
/**
* Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String/HTMLElement/Array} el An element id, element or array of elements
* @param {String} selector The simple selector to test
* @return {Boolean}
*/
is : function(el, ss){
if(typeof el == "string"){
el = document.getElementById(el);
}
var isArray = Ext.isArray(el),
result = Ext.DomQuery.filter(isArray ? el : [el], ss);
return isArray ? (result.length == el.length) : (result.length > 0);
},
/**
* Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
* @param {Array} el An array of elements to filter
* @param {String} selector The simple selector to test
* @param {Boolean} nonMatches If true, it returns the elements that DON'T match
* the selector instead of the ones that match
* @return {Array} An Array of DOM elements which match the selector. If there are
* no matches, and empty Array is returned.
*/
filter : function(els, ss, nonMatches){
ss = ss.replace(trimRe, "");
if(!simpleCache[ss]){
simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");
}
var result = simpleCache[ss](els);
return nonMatches ? quickDiff(result, els) : result;
},
/**
* Collection of matching regular expressions and code snippets.
*/
matchers : [{
re: /^.([w-]+)/,
select: 'n = byClassName(n, null, " {1} ");'
}, {
re: /^:([w-]+)(?:(((?:[^s>/]*|.*?))))?/,
select: 'n = byPseudo(n, "{1}", "{2}");'
},{
re: /^(?:([[{])(?:@)?([w-]+)s?(?:(=|.=)s?['"]?(.*?)["']?)?[]}])/,
select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
}, {
re: /^#([w-]+)/,
select: 'n = byId(n, null, "{1}");'
},{
re: /^@([w-]+)/,
select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
}
],
/**
* Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
* New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, > <.
*/
operators : {
"=" : function(a, v){
return a == v;
},
"!=" : function(a, v){
return a != v;
},
"^=" : function(a, v){
return a && a.substr(0, v.length) == v;
},
"$=" : function(a, v){
return a && a.substr(a.length-v.length) == v;
},
"*=" : function(a, v){
return a && a.indexOf(v) !== -1;
},
"%=" : function(a, v){
return (a % v) == 0;
},
"|=" : function(a, v){
return a && (a == v || a.substr(0, v.length+1) == v+'-');
},
"~=" : function(a, v){
return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
}
},
/**
* Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
* and the argument (if any) supplied in the selector.
*/
pseudos : {
"first-child" : function(c){
var r = [], ri = -1, n;
for(var i = 0, ci; ci = n = c[i]; i++){
while((n = n.previousSibling) && n.nodeType != 1);
if(!n){
r[++ri] = ci;
}
}
return r;
},
"last-child" : function(c){
var r = [], ri = -1, n;
for(var i = 0, ci; ci = n = c[i]; i++){
while((n = n.nextSibling) && n.nodeType != 1);
if(!n){
r[++ri] = ci;
}
}
return r;
},
"nth-child" : function(c, a) {
var r = [], ri = -1,
m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
f = (m[1] || 1) - 0, l = m[2] - 0;
for(var i = 0, n; n = c[i]; i++){
var pn = n.parentNode;
if (batch != pn._batch) {
var j = 0;
for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
if(cn.nodeType == 1){
cn.nodeIndex = ++j;
}
}
pn._batch = batch;
}
if (f == 1) {
if (l == 0 || n.nodeIndex == l){
r[++ri] = n;
}
} else if ((n.nodeIndex + l) % f == 0){
r[++ri] = n;
}
}
return r;
},
"only-child" : function(c){
var r = [], ri = -1;;
for(var i = 0, ci; ci = c[i]; i++){
if(!prev(ci) && !next(ci)){
r[++ri] = ci;
}
}
return r;
},
"empty" : function(c){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var cns = ci.childNodes, j = 0, cn, empty = true;
while(cn = cns[j]){
++j;
if(cn.nodeType == 1 || cn.nodeType == 3){
empty = false;
break;
}
}
if(empty){
r[++ri] = ci;
}
}
return r;
},
"contains" : function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
r[++ri] = ci;
}
}
return r;
},
"nodeValue" : function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(ci.firstChild && ci.firstChild.nodeValue == v){
r[++ri] = ci;
}
}
return r;
},
"checked" : function(c){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(ci.checked == true){
r[++ri] = ci;
}
}
return r;
},
"not" : function(c, ss){
return Ext.DomQuery.filter(c, ss, true);
},
"any" : function(c, selectors){
var ss = selectors.split('|'),
r = [], ri = -1, s;
for(var i = 0, ci; ci = c[i]; i++){
for(var j = 0; s = ss[j]; j++){
if(Ext.DomQuery.is(ci, s)){
r[++ri] = ci;
break;
}
}
}
return r;
},
"odd" : function(c){
return this["nth-child"](c, "odd");
},
"even" : function(c){
return this["nth-child"](c, "even");
},
"nth" : function(c, a){
return c[a-1] || [];
},
"first" : function(c){
return c[0] || [];
},
"last" : function(c){
return c[c.length-1] || [];
},
"has" : function(c, ss){
var s = Ext.DomQuery.select,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(s(ss, ci).length > 0){
r[++ri] = ci;
}
}
return r;
},
"next" : function(c, ss){
var is = Ext.DomQuery.is,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var n = next(ci);
if(n && is(n, ss)){
r[++ri] = ci;
}
}
return r;
},
"prev" : function(c, ss){
var is = Ext.DomQuery.is,
r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
var n = prev(ci);
if(n && is(n, ss)){
r[++ri] = ci;
}
}
return r;
}
}
};
}();
/**
* Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}
* @param {String} path The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @return {Array}
* @member Ext
* @method query
*/
Ext.query = Ext.DomQuery.select;
(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><code> 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></pre> * This could then be used like this:<pre><code> 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></pre> */ 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><p><b><u>DOM events from ExtJs {@link Ext.Component Components}</u></b></p> * <br><p>While <i>some</i> 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><code>{@link Ext.DataView#click click}</code></b> 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}</i> after the Component * has been rendered. A plugin can simplify this step:<pre><code> // 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></pre></p> */ var me = this, e = me.events; if(me.listeners){ me.on(me.listeners); delete me.listeners; } me.events = e || {}; }; EXTUTIL.Observable.prototype = function(){ var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){ return s.toLowerCase(); }; return { /** * <p>Fires the specified event with the passed parameters (minus the event name).</p> * <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 = toLower(a[0]), me = this, ret = TRUE, ce = me.events[ename], q, c; if (me.eventsSuspended === TRUE) { if (q = me.suspendedEventsQueue) { q.push(a); } } else if(ISOBJECT(ce) && ce.bubble){ if(ce.fire.apply(ce, a.slice(1)) === FALSE) { return FALSE; } c = me.getBubbleTarget && me.getBubbleTarget(); if(c && c.enableBubble) { c.enableBubble(ename); return c.fireEvent.apply(c, a); } } else { if (ISOBJECT(ce)) { a.shift(); ret = ce.fire.apply(ce, a); } } return ret; }, /** * Appends an event handler to this object. * @param {String} eventName The name of the event to listen for. * @param {Function} handler The method the event invokes. * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event.</b> * @param {Object} options (optional) An object containing handler configuration. * properties. This may contain any of the following properties:<ul> * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event.</b></div></li> * <li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li> * <li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li> * <li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed * by the specified number of milliseconds. If the event fires again within that time, the original * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li> * <li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i> * if the event was bubbled up from a child Observable.</div></li> * </ul><br> * <p> * <b>Combining Options</b><br> * Using the options argument, it is possible to combine different types of listeners:<br> * <br> * A delayed, one-time listener. * <pre><code> myDataView.on('click', this.onClick, this, { single: true, delay: 100 });</code></pre> * <p> * <b>Attaching multiple handlers in 1 call</b><br> * The method also allows for a single argument to be passed which is a config object containing properties * which specify multiple handlers. * <p> * <pre><code> myGridPanel.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } });</code></pre> * <p> * Or a shorthand syntax:<br> * <pre><code> myGridPanel.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut, scope: this });</code></pre> */ 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 (!filterOptRe.test(e)) { me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o); } } } else { eventName = toLower(eventName); ce = me.events[eventName] || TRUE; if (typeof ce == "boolean") { 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.</b> * @param {Object} scope (optional) The scope originally specified for the handler. */ removeListener : function(eventName, fn, scope){ var ce = this.events[toLower(eventName)]; 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(); } } }, /** * Used to define events on this Observable * @param {Object} object The object with the events defined */ addEvents : function(o){ var me = this; me.events = me.events || {}; if (typeof o == 'string') { EACH(arguments, function(a) { me.events[a] = me.events[a] || 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.suspendedEventsQueue = []; } }, /** * Resume firing events. (see {@link #suspendEvents}) * If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all * events fired during event suspension will be sent to any listeners now. */ resumeEvents : function(){ var me = this; me.eventsSuspended = !delete me.suspendedEventQueue; EACH(me.suspendedEventsQueue, 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><b>this</b></code> reference) in which the handler function is executed. * <b>If omitted, defaults to the object which fired the event.</b> * @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.</b> * @param {Object} scope (optional) The scope originally specified for the handler. * @method */ OBSERVABLE.un = OBSERVABLE.removeListener; /** * Removes <b>all</b> added captures from the Observable. * @param {Observable} o The Observable to release * @static */ EXTUTIL.Observable.releaseCapture = function(o){ o.fireEvent = OBSERVABLE.fireEvent; }; function createTargeted(h, o, scope){ return function(){ if(o.target == arguments[0]){ h.apply(scope, TOARRAY(arguments)); } }; }; function createBuffered(h, o, scope){ var task = new EXTUTIL.DelayedTask(); return function(){ task.delay(o.buffer, h, scope, TOARRAY(arguments)); }; } function createSingle(h, e, fn, scope){ return function(){ e.removeListener(fn, scope); return h.apply(scope, arguments); }; } function createDelayed(h, o, scope){ return function(){ var args = TOARRAY(arguments); (function(){ h.apply(scope, args); }).defer(o.delay || 10); }; }; EXTUTIL.Event = function(obj, name){ this.name = name; this.obj = obj; this.listeners = []; }; EXTUTIL.Event.prototype = { addListener : function(fn, scope, options){ var me = this, l; scope = scope || me.obj; if(!me.isListening(fn, scope)){ l = me.createListener(fn, scope, options); if(me.firing){ // if we are currently firing this event, don't disturb the listener loop me.listeners = me.listeners.slice(0); } me.listeners.push(l); } }, createListener: function(fn, scope, o){ o = o || {}, scope = scope || this.obj; var l = { fn: fn, scope: scope, options: o }, h = fn; if(o.target){ h = createTargeted(h, o, scope); } if(o.delay){ h = createDelayed(h, o, scope); } if(o.single){ h = createSingle(h, this, fn, scope); } if(o.buffer){ h = createBuffered(h, o, scope); } l.fireFn = h; return l; }, findListener : function(fn, scope){ var s, ret = -1; EACH(this.listeners, function(l, i) { s = l.scope; if(l.fn == fn && (s == scope || s == this.obj)){ ret = i; return FALSE; } }, this); return ret; }, isListening : function(fn, scope){ return this.findListener(fn, scope) != -1; }, removeListener : function(fn, scope){ var index, me = this, ret = FALSE; if((index = me.findListener(fn, scope)) != -1){ if (me.firing) { me.listeners = me.listeners.slice(0); } me.listeners.splice(index, 1); ret = TRUE; } return ret; }, clearListeners : function(){ this.listeners = []; }, fire : function(){ var me = this, args = TOARRAY(arguments), ret = TRUE; EACH(me.listeners, function(l) { me.firing = TRUE; if (l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) { return ret = me.firing = FALSE; } }); me.firing = FALSE; return ret; } }; })();/**
* @class Ext.util.Observable
*/
Ext.apply(Ext.util.Observable.prototype, function(){
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// private
function getMethodEvent(method){
var e = (this.methodEvents = this.methodEvents ||
{})[method], returnValue, v, cancel, obj = this;
if (!e) {
this.methodEvents[method] = e = {};
e.originalFn = this[method];
e.methodName = method;
e.before = [];
e.after = [];
var makeCall = function(fn, scope, args){
if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {
if (Ext.isObject(v)) {
returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;
cancel = !!v.cancel;
}
else
if (v === false) {
cancel = true;
}
else {
returnValue = v;
}
}
};
this[method] = function(){
var args = Ext.toArray(arguments);
returnValue = v = undefined;
cancel = false;
Ext.each(e.before, function(b){
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
});
if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {
returnValue = v;
}
Ext.each(e.after, function(a){
makeCall(a.fn, a.scope, args);
if (cancel) {
return returnValue;
}
});
return returnValue;
};
}
return e;
}
return {
// these are considered experimental
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// adds an "interceptor" called before the original method
beforeMethod: function(method, fn, scope){
getMethodEvent.call(this, method).before.push({
fn: fn,
scope: scope
});
},
// adds a "sequence" called after the original method
afterMethod: function(method, fn, scope){
getMethodEvent.call(this, method).after.push({
fn: fn,
scope: scope
});
},
removeMethodListener: function(method, fn, scope){
var e = getMethodEvent.call(this, method), found = false;
Ext.each(e.before, function(b, i, arr){
if (b.fn == fn && b.scope == scope) {
arr.splice(i, 1);
found = true;
return false;
}
});
if (!found) {
Ext.each(e.after, function(a, i, arr){
if (a.fn == fn && a.scope == scope) {
arr.splice(i, 1);
return false;
}
});
}
},
/**
* Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.
* @param {Object} o The Observable whose events this object is to relay.
* @param {Array} events Array of event names to relay.
*/
relayEvents: function(o, events){
var me = this;
function createHandler(ename){
return function(){
return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments)));
};
}
Ext.each(events, function(ename){
me.events[ename] = me.events[ename] || true;
o.on(ename, createHandler(ename), me);
});
},
/**
* Used to enable bubbling of events
* @param {Object} events
*/
enableBubble: function(events){
var me = this;
events = Ext.isArray(events) ? events : Ext.toArray(arguments);
Ext.each(events, function(ename){
ename = ename.toLowerCase();
var ce = me.events[ename] || true;
if (typeof ce == "boolean") {
ce = new Ext.util.Event(me, ename);
me.events[ename] = ce;
}
ce.bubble = true;
});
}
};
}());
/**
* Starts capture on the specified Observable. All events will be passed
* to the supplied function with the event name + standard signature of the event
* <b>before</b> the event is fired. If the supplied function returns false,
* the event will not fire.
* @param {Observable} o The Observable to capture
* @param {Function} fn The function to call
* @param {Object} scope (optional) The scope (this object) for the fn
* @static
*/
Ext.util.Observable.capture = function(o, fn, scope){
o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};
/**
* Sets observability on the passed class constructor.<p>
* <p>This makes any event fired on any instance of the passed class also fire a single event through
* the <i>class</i> allowing for central handling of events on many instances at once.</p>
* <p>Usage:</p><pre><code>
Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log("Ajax request made to " + options.url);
});</code></pre>
* @param {Function} c The class constructor to make observable.
* @static
*/
Ext.util.Observable.observeClass = function(c){
Ext.apply(c, new Ext.util.Observable());
c.prototype.fireEvent = function(){
return (c.fireEvent.apply(c, arguments) !== false) &&
(Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);
};
};/** * @class Ext.EventManager * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides * several useful events directly. * See {@link Ext.EventObject} for more details on normalized event objects. * @singleton */ Ext.EventManager = function(){ var docReadyEvent, docReadyProcId, docReadyState = false, E = Ext.lib.Event, D = Ext.lib.Dom, DOC = document, WINDOW = window, IEDEFERED = "ie-deferred-loader", DOMCONTENTLOADED = "DOMContentLoaded", elHash = {}, propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/; /// There is some jquery work around stuff here that isn't needed in Ext Core. function addListener(el, ename, fn, wrap, scope){ var id = Ext.id(el), es = elHash[id] = elHash[id] || {}; (es[ename] = es[ename] || []).push([fn, wrap, scope]); E.on(el, ename, wrap); // this is a workaround for jQuery and should somehow be removed from Ext Core in the future // without breaking ExtJS. if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery var args = ["DOMMouseScroll", wrap, false]; el.addEventListener.apply(el, args); E.on(window, 'unload', function(){ el.removeEventListener.apply(el, args); }); } if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document Ext.EventManager.stoppedMouseDownEvent.addListener(wrap); } }; function fireDocReady(){ if(!docReadyState){ Ext.isReady = docReadyState = true; if(docReadyProcId){ clearInterval(docReadyProcId); } if(Ext.isGecko || Ext.isOpera) { DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false); } if(Ext.isIE){ var defer = DOC.getElementById(IEDEFERED); if(defer){ defer.onreadystatechange = null; defer.parentNode.removeChild(defer); } } if(docReadyEvent){ docReadyEvent.fire(); docReadyEvent.clearListeners(); } } }; function initDocReady(){ var COMPLETE = "complete"; docReadyEvent = new Ext.util.Event(); if (Ext.isGecko || Ext.isOpera) { DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false); } else if (Ext.isIE){ DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>"); DOC.getElementById(IEDEFERED).onreadystatechange = function(){ if(this.readyState == COMPLETE){ fireDocReady(); } }; } else if (Ext.isWebKit){ docReadyProcId = setInterval(function(){ if(DOC.readyState == COMPLETE) { fireDocReady(); } }, 10); } // no matter what, make sure it fires on load E.on(WINDOW, "load", fireDocReady); }; function createTargeted(h, o){ return function(){ var args = Ext.toArray(arguments); if(o.target == Ext.EventObject.setEvent(args[0]).target){ h.apply(this, args); } }; }; function createBuffered(h, o){ var task = new Ext.util.DelayedTask(h); return function(e){ // create new event object impl so new events don't wipe out properties task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]); }; }; function createSingle(h, el, ename, fn, scope){ return function(e){ Ext.EventManager.removeListener(el, ename, fn, scope); h(e); }; }; function createDelayed(h, o){ return function(e){ // create new event object impl so new events don't wipe out properties e = new Ext.EventObjectImpl(e); setTimeout(function(){ h(e); }, o.delay || 10); }; }; function listen(element, ename, opt, fn, scope){ var o = !Ext.isObject(opt) ? {} : opt, el = Ext.getDom(element); fn = fn || o.fn; scope = scope || o.scope; if(!el){ throw "Error listening for "" + ename + '". Element "' + element + '" doesn't exist.'; } function h(e){ // prevent errors while unload occurring if(!Ext){// !window[xname]){ ==> can't we do this? return; } e = Ext.EventObject.setEvent(e); var t; if (o.delegate) { if(!(t = e.getTarget(o.delegate, el))){ return; } } else { t = e.target; } if (o.stopEvent) { e.stopEvent(); } if (o.preventDefault) { e.preventDefault(); } if (o.stopPropagation) { e.stopPropagation(); } if (o.normalized) { e = e.browserEvent; } fn.call(scope || el, e, t, o); }; if(o.target){ h = createTargeted(h, o); } if(o.delay){ h = createDelayed(h, o); } if(o.single){ h = createSingle(h, el, ename, fn, scope); } if(o.buffer){ h = createBuffered(h, o); } addListener(el, ename, fn, h, scope); return h; }; var pub = { /** * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The html element or id to assign the event handler to * @param {String} eventName The type of event to listen for * @param {Function} handler The handler function the event invokes This function is passed * the following parameters:<ul> * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li> * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event. * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li> * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li> * </ul> * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>. * @param {Object} options (optional) An object containing handler configuration properties. * This may contain any of the following properties:<ul> * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li> * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li> * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li> * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li> * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li> * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li> * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li> * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li> * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed * by the specified number of milliseconds. If the event fires again within that time, the original * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li> * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li> * </ul><br> * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p> */ addListener : function(element, eventName, fn, scope, options){ if(Ext.isObject(eventName)){ var o = eventName, e, val; for(e in o){ val = o[e]; if(!propRe.test(e)){ if(Ext.isFunction(val)){ // shared options listen(element, e, o, val, o.scope); }else{ // individual options listen(element, e, val); } } } } else { listen(element, eventName, options, fn, scope); } }, /** * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The id or html element from which to remove the event * @param {String} eventName The type of event * @param {Function} fn The handler function to remove */ removeListener : function(element, eventName, fn, scope){ var el = Ext.getDom(element), id = Ext.id(el), wrap; Ext.each((elHash[id] || {})[eventName], function (v,i,a) { if (Ext.isArray(v) && v[0] == fn && (!scope || v[2] == scope)) { E.un(el, eventName, wrap = v[1]); a.splice(i,1); return false; } }); // jQuery workaround that should be removed from Ext Core if(eventName == "mousewheel" && el.addEventListener && wrap){ el.removeEventListener("DOMMouseScroll", wrap, false); } if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); } }, /** * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners} * directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The id or html element from which to remove the event */ removeAll : function(el){ var id = Ext.id(el = Ext.getDom(el)), es = elHash[id], ename; for(ename in es){ if(es.hasOwnProperty(ename)){ Ext.each(es[ename], function(v) { E.un(el, ename, v.wrap); }); } } elHash[id] = null; }, /** * Fires when the document is ready (before onload and before images are loaded). Can be * accessed shorthanded as Ext.onReady(). * @param {Function} fn The method the event invokes * @param {Object} scope (optional) An object that becomes the scope of the handler * @param {boolean} options (optional) An object containing standard {@link #addListener} options */ onDocumentReady : function(fn, scope, options){ if(docReadyState){ // if it already fired docReadyEvent.addListener(fn, scope, options); docReadyEvent.fire(); docReadyEvent.clearListeners(); } else { if(!docReadyEvent) initDocReady(); options = options || {}; options.delay = options.delay || 1; docReadyEvent.addListener(fn, scope, options); } }, elHash : elHash }; /** * Appends an event handler to an element. Shorthand for {@link #addListener}. * @param {String/HTMLElement} el The html element or id to assign the event handler to * @param {String} eventName The type of event to listen for * @param {Function} handler The handler function the event invokes * @param {Object} scope (optional) The scope in which to execute the handler * function (the handler function's "this" context) * @param {Object} options (optional) An object containing standard {@link #addListener} options * @member Ext.EventManager * @method on */ pub.on = pub.addListener; /** * Removes an event handler from an element. Shorthand for {@link #removeListener}. * @param {String/HTMLElement} el The id or html element from which to remove the event * @param {String} eventName The type of event * @param {Function} fn The handler function to remove * @return {Boolean} True if a listener was actually removed, else false * @member Ext.EventManager * @method un */ pub.un = pub.removeListener; pub.stoppedMouseDownEvent = new Ext.util.Event(); return pub; }(); /** * Fires when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. * @param {Function} fn The method the event invokes * @param {Object} scope An object that becomes the scope of the handler * @param {boolean} options (optional) An object containing standard {@link #addListener} options * @member Ext * @method onReady */ Ext.onReady = Ext.EventManager.onDocumentReady; //Initialize doc classes (function(){ var initExtCss = function(){ // find the body element var bd = document.body || document.getElementsByTagName('body')[0]; if(!bd){ return false; } var cls = [' ', Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8')) : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') : Ext.isOpera ? "ext-opera" : Ext.isWebKit ? "ext-webkit" : ""]; if(Ext.isSafari){ cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4'))); }else if(Ext.isChrome){ cls.push("ext-chrome"); } if(Ext.isMac){ cls.push("ext-mac"); } if(Ext.isLinux){ cls.push("ext-linux"); } if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" var p = bd.parentNode; if(p){ p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box'; } } bd.className += cls.join(' '); return true; } if(!initExtCss()){ Ext.onReady(initExtCss); } })(); /** * @class Ext.EventObject * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject * wraps the browser's native event-object normalizing cross-browser differences, * such as which mouse button is clicked, keys pressed, mechanisms to stop * event-propagation along with a method to prevent default actions from taking place. * <p>For example:</p> * <pre><code> function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject e.preventDefault(); var target = e.getTarget(); // same as t (the target HTMLElement) ... } var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element} myDiv.on( // 'on' is shorthand for addListener "click", // perform an action on click of myDiv handleClick // reference to the action handler ); // other methods to do the same: Ext.EventManager.on("myDiv", 'click', handleClick); Ext.EventManager.addListener("myDiv", 'click', handleClick); </code></pre> * @singleton */ Ext.EventObject = function(){ var E = Ext.lib.Event, // safari keypress events for special keys return bad keycodes safariKeys = { 3 : 13, // enter 63234 : 37, // left 63235 : 39, // right 63232 : 38, // up 63233 : 40, // down 63276 : 33, // page up 63277 : 34, // page down 63272 : 46, // delete 63273 : 36, // home 63275 : 35 // end }, // normalize button clicks btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); Ext.EventObjectImpl = function(e){ if(e){ this.setEvent(e.browserEvent || e); } }; Ext.EventObjectImpl.prototype = { /** @private */ setEvent : function(e){ var me = this; if(e == me || (e && e.browserEvent)){ // already wrapped return e; } me.browserEvent = e; if(e){ // normalize buttons me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1); if(e.type == 'click' && me.button == -1){ me.button = 0; } me.type = e.type; me.shiftKey = e.shiftKey; // mac metaKey behaves like ctrlKey me.ctrlKey = e.ctrlKey || e.metaKey || false; me.altKey = e.altKey; // in getKey these will be normalized for the mac me.keyCode = e.keyCode; me.charCode = e.charCode; // cache the target for the delayed and or buffered events me.target = E.getTarget(e); // same for XY me.xy = E.getXY(e); }else{ me.button = -1; me.shiftKey = false; me.ctrlKey = false; me.altKey = false; me.keyCode = 0; me.charCode = 0; me.target = null; me.xy = [0, 0]; } return me; }, /** * Stop the event (preventDefault and stopPropagation) */ stopEvent : function(){ var me = this; if(me.browserEvent){ if(me.browserEvent.type == 'mousedown'){ Ext.EventManager.stoppedMouseDownEvent.fire(me); } E.stopEvent(me.browserEvent); } }, /** * Prevents the browsers default handling of the event. */ preventDefault : function(){ if(this.browserEvent){ E.preventDefault(this.browserEvent); } }, /** * Cancels bubbling of the event. */ stopPropagation : function(){ var me = this; if(me.browserEvent){ if(me.browserEvent.type == 'mousedown'){ Ext.EventManager.stoppedMouseDownEvent.fire(me); } E.stopPropagation(me.browserEvent); } }, /** * Gets the character code for the event. * @return {Number} */ getCharCode : function(){ return this.charCode || this.keyCode; }, /** * Returns a normalized keyCode for the event. * @return {Number} The key code */ getKey : function(){ return this.normalizeKey(this.keyCode || this.charCode) }, // private normalizeKey: function(k){ return Ext.isSafari ? (safariKeys[k] || k) : k; }, /** * Gets the x coordinate of the event. * @return {Number} */ getPageX : function(){ return this.xy[0]; }, /** * Gets the y coordinate of the event. * @return {Number} */ getPageY : function(){ return this.xy[1]; }, /** * Gets the page coordinates of the event. * @return {Array} The xy values like [x, y] */ getXY : function(){ return this.xy; }, /** * Gets the target for the event. * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body) * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node * @return {HTMLelement} */ getTarget : function(selector, maxDepth, returnEl){ return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target); }, /** * Gets the related target. * @return {HTMLElement} */ getRelatedTarget : function(){ return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null; }, /** * Normalizes mouse wheel delta across browsers * @return {Number} The delta */ getWheelDelta : function(){ var e = this.browserEvent; var delta = 0; if(e.wheelDelta){ /* IE/Opera. */ delta = e.wheelDelta/120; }else if(e.detail){ /* Mozilla case. */ delta = -e.detail/3; } return delta; }, /** * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el. * Example usage:<pre><code> // Handle click on any child of an element Ext.getBody().on('click', function(e){ if(e.within('some-el')){ alert('Clicked on a child of some-el!'); } }); // Handle click directly on an element, ignoring clicks on child nodes Ext.getBody().on('click', function(e,t){ if((t.id == 'some-el') && !e.within(t, true)){ alert('Clicked directly on some-el!'); } }); </code></pre> * @param {Mixed} el The id, DOM element or Ext.Element to check * @param {Boolean} related (optional) true to test if the related target is within el instead of the target * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target * @return {Boolean} */ within : function(el, related, allowEl){ if(el){ var t = this[related ? "getRelatedTarget" : "getTarget"](); return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t)); } return false; } }; return new Ext.EventObjectImpl(); }();/**
* @class Ext.EventManager
*/
Ext.apply(Ext.EventManager, function(){
var resizeEvent,
resizeTask,
textEvent,
textSize,
D = Ext.lib.Dom,
E = Ext.lib.Event,
propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
curWidth = 0,
curHeight = 0,
// note 1: IE fires ONLY the keydown event on specialkey autorepeat
// note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
// (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
useKeydown = Ext.isSafari ?
Ext.num(navigator.userAgent.toLowerCase().match(/version/(d+.d)/)[1] || 2) >= 3.1 :
!((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
return {
// private
doResizeEvent: function(){
var h = D.getViewHeight(),
w = D.getViewWidth();
//whacky problem in IE where the resize event will fire even though the w/h are the same.
if(curHeight != h || curWidth != w){
resizeEvent.fire(curWidth = w, curHeight = h);
}
},
/**
* 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(this.doResizeEvent);
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());
}
},
/**
* The frequency, in milliseconds, to check for text resize events (defaults to 50)
*/
textResizeInterval : 50,
/**
* Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
*/
ieDeferSrc : false,
// protected for use inside the framework
// detects whether we should use keydown or keypress based on the browser.
useKeydown: useKeydown
};
}());
Ext.EventManager.on = Ext.EventManager.addListener;
Ext.apply(Ext.EventObjectImpl.prototype, {
/** Key constant @type Number */
BACKSPACE: 8,
/** Key constant @type Number */
TAB: 9,
/** Key constant @type Number */
NUM_CENTER: 12,
/** Key constant @type Number */
ENTER: 13,
/** Key constant @type Number */
RETURN: 13,
/** Key constant @type Number */
SHIFT: 16,
/** Key constant @type Number */
CTRL: 17,
CONTROL : 17, // legacy
/** Key constant @type Number */
ALT: 18,
/** Key constant @type Number */
PAUSE: 19,
/** Key constant @type Number */
CAPS_LOCK: 20,
/** Key constant @type Number */
ESC: 27,
/** Key constant @type Number */
SPACE: 32,
/** Key constant @type Number */
PAGE_UP: 33,
PAGEUP : 33, // legacy
/** Key constant @type Number */
PAGE_DOWN: 34,
PAGEDOWN : 34, // legacy
/** Key constant @type Number */
END: 35,
/** Key constant @type Number */
HOME: 36,
/** Key constant @type Number */
LEFT: 37,
/** Key constant @type Number */
UP: 38,
/** Key constant @type Number */
RIGHT: 39,
/** Key constant @type Number */
DOWN: 40,
/** Key constant @type Number */
PRINT_SCREEN: 44,
/** Key constant @type Number */
INSERT: 45,
/** Key constant @type Number */
DELETE: 46,
/** Key constant @type Number */
ZERO: 48,
/** Key constant @type Number */
ONE: 49,
/** Key constant @type Number */
TWO: 50,
/** Key constant @type Number */
THREE: 51,
/** Key constant @type Number */
FOUR: 52,
/** Key constant @type Number */
FIVE: 53,
/** Key constant @type Number */
SIX: 54,
/** Key constant @type Number */
SEVEN: 55,
/** Key constant @type Number */
EIGHT: 56,
/** Key constant @type Number */
NINE: 57,
/** Key constant @type Number */
A: 65,
/** Key constant @type Number */
B: 66,
/** Key constant @type Number */
C: 67,
/** Key constant @type Number */
D: 68,
/** Key constant @type Number */
E: 69,
/** Key constant @type Number */
F: 70,
/** Key constant @type Number */
G: 71,
/** Key constant @type Number */
H: 72,
/** Key constant @type Number */
I: 73,
/** Key constant @type Number */
J: 74,
/** Key constant @type Number */
K: 75,
/** Key constant @type Number */
L: 76,
/** Key constant @type Number */
M: 77,
/** Key constant @type Number */
N: 78,
/** Key constant @type Number */
O: 79,
/** Key constant @type Number */
P: 80,
/** Key constant @type Number */
Q: 81,
/** Key constant @type Number */
R: 82,
/** Key constant @type Number */
S: 83,
/** Key constant @type Number */
T: 84,
/** Key constant @type Number */
U: 85,
/** Key constant @type Number */
V: 86,
/** Key constant @type Number */
W: 87,
/** Key constant @type Number */
X: 88,
/** Key constant @type Number */
Y: 89,
/** Key constant @type Number */
Z: 90,
/** Key constant @type Number */
CONTEXT_MENU: 93,
/** Key constant @type Number */
NUM_ZERO: 96,
/** Key constant @type Number */
NUM_ONE: 97,
/** Key constant @type Number */
NUM_TWO: 98,
/** Key constant @type Number */
NUM_THREE: 99,
/** Key constant @type Number */
NUM_FOUR: 100,
/** Key constant @type Number */
NUM_FIVE: 101,
/** Key constant @type Number */
NUM_SIX: 102,
/** Key constant @type Number */
NUM_SEVEN: 103,
/** Key constant @type Number */
NUM_EIGHT: 104,
/** Key constant @type Number */
NUM_NINE: 105,
/** Key constant @type Number */
NUM_MULTIPLY: 106,
/** Key constant @type Number */
NUM_PLUS: 107,
/** Key constant @type Number */
NUM_MINUS: 109,
/** Key constant @type Number */
NUM_PERIOD: 110,
/** Key constant @type Number */
NUM_DIVISION: 111,
/** Key constant @type Number */
F1: 112,
/** Key constant @type Number */
F2: 113,
/** Key constant @type Number */
F3: 114,
/** Key constant @type Number */
F4: 115,
/** Key constant @type Number */
F5: 116,
/** Key constant @type Number */
F6: 117,
/** Key constant @type Number */
F7: 118,
/** Key constant @type Number */
F8: 119,
/** Key constant @type Number */
F9: 120,
/** Key constant @type Number */
F10: 121,
/** Key constant @type Number */
F11: 122,
/** Key constant @type Number */
F12: 123,
/** @private */
isNavKeyPress : function(){
var me = this,
k = this.normalizeKey(me.keyCode);
return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down
k == me.RETURN ||
k == me.TAB ||
k == me.ESC;
},
isSpecialKey : function(){
var k = this.normalizeKey(this.keyCode);
return (this.type == 'keypress' && this.ctrlKey) ||
this.isNavKeyPress() ||
(k == this.BACKSPACE) || // Backspace
(k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
(k >= 44 && k <= 45); // Print Screen, Insert
},
getPoint : function(){
return new Ext.lib.Point(this.xy[0], this.xy[1]);
},
/**
* Returns true if the control, meta, shift or alt key was pressed during this event.
* @return {Boolean}
*/
hasModifier : function(){
return ((this.ctrlKey || this.altKey) || this.shiftKey);
}
});/**
* @class Ext.Element
* <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
* <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
* <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
* access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
* browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
* Usage:<br>
<pre><code>
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
</code></pre>
* <b>Animations</b><br />
* <p>When an element is manipulated, by default there is no animation.</p>
* <pre><code>
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
* </code></pre>
* <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
* parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
* <pre><code>
// default animation
el.setWidth(100, true);
* </code></pre>
*
* <p>To configure the effects, an object literal with animation options to use as the Element animation
* configuration object can also be specified. Note that the supported Element animation configuration
* options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported
* Element animation configuration options are:</p>
<pre>
Option Default Description
--------- -------- ---------------------------------------------
{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds
{@link Ext.Fx#easing easing} easeOut The easing method
{@link Ext.Fx#callback callback} none A function to execute when the anim completes
{@link Ext.Fx#scope scope} this The scope (this) of the callback function
</pre>
*
* <pre><code>