X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/pkgs/ext-foundation-debug.js diff --git a/pkgs/ext-foundation-debug.js b/pkgs/ext-foundation-debug.js deleted file mode 100644 index 7a6b21d0..00000000 --- a/pkgs/ext-foundation-debug.js +++ /dev/null @@ -1,14532 +0,0 @@ -/*! - * Ext JS Library 3.2.1 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.DomHelper - *
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.
- * - *DomHelper element specification object
- *A specification object is used when creating elements. Attributes of this object - * are assumed to be element attributes, except for 4 special attributes: - *
Insertion methods
- *Commonly used insertion methods: - *
Example
- *This is an example, where an unordered list with 3 children items is appended to an existing
- * element with id 'my-div':
-
-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
-);
-
- * 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: 'item3', html: 'List Item 3'},
- {tag: 'li', id: 'item4', html: 'List Item 4'}
-]);
- *
- *
- * Templating
- *The real power is in the built-in templating. Instead of creating or appending any elements, - * {@link #createTemplate} returns a Template object which can be used over and over to - * insert new elements. Revisiting the example above, we could utilize templating this time: - *
-// 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
-}
- *
- * An example using a template:
-var html = '{2}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
-tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
- *
- *
- * The same example using named parameters:
-var html = '{text}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', {
- id: 'link1',
- url: 'http://www.jackslocum.com/',
- text: "Jack's Site"
-});
-tpl.append('blog-roll', {
- id: 'link2',
- url: 'http://www.dustindiaz.com/',
- text: "Dustin's Site"
-});
- *
- *
- * Compiling Templates
- *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. - *
-var html = '{text}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.compile();
-
-//... use template like normal
- *
- *
- * Performance Boost
- *DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead - * of DOM can significantly boost performance.
- *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. Usage:
- *
-Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
- *
- * @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,
- confRe = /tag|children|cn|html$/i,
- tableElRe = /td|tr|tbody/i,
- cssRe = /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
- endRe = /end/i,
- pub,
- // kill repeat to save bytes
- afterbegin = 'afterbegin',
- afterend = 'afterend',
- beforebegin = 'beforebegin',
- beforeend = 'beforeend',
- ts = 'Represents an HTML fragment template. Templates may be {@link #compile precompiled} - * for greater performance.
- *For example usage {@link #Template see the constructor}.
- * - * @constructor - * An instance of this class may be created by passing to the constructor either - * a single argument, or multiple arguments: - *
-var t = new Ext.Template("<div>Hello {0}.</div>");
-t.{@link #append}('some-element', ['foo']);
- *
- * join('')
.
-
-var t = new Ext.Template([
- '<div name="{id}">',
- '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
- '</div>',
-]);
-t.{@link #compile}();
-t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
-
- * join('')
.
- *
-var t = new Ext.Template(
- '<div name="{id}">',
- '<span class="{cls}">{name} {value}</span>',
- '</div>',
- // a configuration object:
- {
- compiled: true, // {@link #compile} immediately
- disableFormats: true // See Notes below.
- }
-);
- *
- * Notes:
- *disableFormats
are not applicable for Ext Core.disableFormats
reduces {@link #apply}
time
- * when no formatting is required.{@link #compile}
).
- * Defaults to false.
- */
- if (me.compiled) {
- me.compile();
- }
-};
-Ext.Template.prototype = {
- /**
- * @cfg {RegExp} re The regular expression used to match template variables.
- * Defaults to:
- * re : /\{([\w-]+)\}/g // for Ext Core
- * re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS
- *
- */
- re : /\{([\w-]+)\}/g,
- /**
- * See {@link #re}
.
- * @type RegExp
- * @property re
- */
-
- /**
- * Returns an HTML fragment of this template with the specified values
applied.
- * @param {Object/Array} values
- * The template values. Can be an array if the 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;
- },
-
- /**
- * 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(/(\r\n|\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 the specified el
.
- * For example usage {@link #Template see the constructor}.
- * @param {Mixed} el The context element - * @param {Object/Array} values - * The template values. Can be an array if the params are numeric (i.e.{0}
)
- * or an object (i.e. {foo: 'bar'}
).
- * @param {Boolean} returnElement (optional) true to return an 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 the 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 (display:none 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, {
- /**
- * @cfg {Boolean} disableFormats Specify true to disable format
- * functions in the template. If the template does not contain
- * {@link Ext.util.Format format functions}, setting disableFormats
- * to true will reduce {@link #apply}
time. Defaults to false.
- *
-var t = new Ext.Template(
- '<div name="{id}">',
- '<span class="{cls}">{name} {value}</span>',
- '</div>',
- {
- compiled: true, // {@link #compile} immediately
- disableFormats: true // reduce {@link #apply}
time since no formatting
- }
-);
- *
- * For a list of available format functions, see {@link Ext.util.Format}.
- */
- disableFormats : false,
- /**
- * See {@link #disableFormats}
.
- * @type Boolean
- * @property disableFormats
- */
-
- /**
- * The regular expression used to match template variables
- * @type RegExp
- * @property
- * @hide repeat doc
- */
- re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
- argsRe : /^\s*['"](.*)["']\s*$/,
- compileARe : /\\/g,
- compileBRe : /(\r\n|\n)/g,
- compileCRe : /'/g,
-
- /**
- * 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 = me.argsRe;
- 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);
- },
-
- /**
- * 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(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn) +
- "';};";
- }else{
- body = ["this.compiled = function(values){ return ['"];
- body.push(me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.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).
--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.
-Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed - * two parameters:
A filter function returns an Array of DOM elements which conform to the pseudo class.
- *In addition to the provided pseudo classes listed above such as first-child
and nth-child
,
- * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.
For example, to filter <a>
elements to only return links to external resources:
-Ext.DomQuery.pseudos.external = function(c, v){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
-// Include in result set only if it's a link to an external resource
- if(ci.hostname != location.hostname){
- r[++ri] = ci;
- }
- }
- return r;
-};
- * Then external links could be gathered with the following statement:
-var externalLinks = Ext.select("a:external");
-
- */
- pseudos : {
- "first-child" : function(c){
- var r = [], ri = -1, n;
- for(var i = 0, ci; ci = n = c[i]; i++){
- while((n = n.previousSibling) && n.nodeType != 1);
- if(!n){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "last-child" : function(c){
- var r = [], ri = -1, n;
- for(var i = 0, ci; ci = n = c[i]; i++){
- while((n = n.nextSibling) && n.nodeType != 1);
- if(!n){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "nth-child" : function(c, a) {
- var r = [], ri = -1,
- m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
- f = (m[1] || 1) - 0, l = m[2] - 0;
- for(var i = 0, n; n = c[i]; i++){
- var pn = n.parentNode;
- if (batch != pn._batch) {
- var j = 0;
- for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
- if(cn.nodeType == 1){
- cn.nodeIndex = ++j;
- }
- }
- pn._batch = batch;
- }
- if (f == 1) {
- if (l == 0 || n.nodeIndex == l){
- r[++ri] = n;
- }
- } else if ((n.nodeIndex + l) % f == 0){
- r[++ri] = n;
- }
- }
-
- return r;
- },
-
- "only-child" : function(c){
- var r = [], ri = -1;;
- for(var i = 0, ci; ci = c[i]; i++){
- if(!prev(ci) && !next(ci)){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "empty" : function(c){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- var cns = ci.childNodes, j = 0, cn, empty = true;
- while(cn = cns[j]){
- ++j;
- if(cn.nodeType == 1 || cn.nodeType == 3){
- empty = false;
- break;
- }
- }
- if(empty){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "contains" : function(c, v){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "nodeValue" : function(c, v){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- if(ci.firstChild && ci.firstChild.nodeValue == v){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "checked" : function(c){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- if(ci.checked == true){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "not" : function(c, ss){
- return Ext.DomQuery.filter(c, ss, true);
- },
-
- "any" : function(c, selectors){
- var ss = selectors.split('|'),
- r = [], ri = -1, s;
- for(var i = 0, ci; ci = c[i]; i++){
- for(var j = 0; s = ss[j]; j++){
- if(Ext.DomQuery.is(ci, s)){
- r[++ri] = ci;
- break;
- }
- }
- }
- return r;
- },
-
- "odd" : function(c){
- return this["nth-child"](c, "odd");
- },
-
- "even" : function(c){
- return this["nth-child"](c, "even");
- },
-
- "nth" : function(c, a){
- return c[a-1] || [];
- },
-
- "first" : function(c){
- return c[0] || [];
- },
-
- "last" : function(c){
- return c[c.length-1] || [];
- },
-
- "has" : function(c, ss){
- var s = Ext.DomQuery.select,
- r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- if(s(ss, ci).length > 0){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "next" : function(c, ss){
- var is = Ext.DomQuery.is,
- r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- var n = next(ci);
- if(n && is(n, ss)){
- r[++ri] = ci;
- }
- }
- return r;
- },
-
- "prev" : function(c, ss){
- var is = Ext.DomQuery.is,
- r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
- var n = prev(ci);
- if(n && is(n, ss)){
- r[++ri] = ci;
- }
- }
- return r;
- }
- }
- };
-}();
-
-/**
- * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}
- * @param {String} path The selector/xpath query
- * @param {Node} root (optional) The start of the query (defaults to document).
- * @return {Array}
- * @member Ext
- * @method query
- */
-Ext.query = Ext.DomQuery.select;
-/**
- * @class Ext.util.DelayedTask
- * The DelayedTask class provides a convenient way to "buffer" the execution of a method, - * performing setTimeout where a new timeout cancels the old timeout. When called, the - * task will wait the specified time period before executing. If durng that time period, - * the task is called again, the original call will be cancelled. This continues so that - * the function is only called a single time for each iteration.
- *This method is especially useful for things like detecting whether a user has finished - * typing in a text field. An example would be performing validation on a keypress. You can - * use this class to buffer the keypress events for a certain number of milliseconds, and - * perform only if they stop for that amount of time. Usage:
-var task = new Ext.util.DelayedTask(function(){
- alert(Ext.getDom('myInputField').value.length);
-});
-// Wait 500ms before calling our function. If the user presses another key
-// during that 500ms, it will be cancelled and we'll wait another 500ms.
-Ext.get('myInputField').on('keypress', function(){
- task.{@link #delay}(500);
-});
- *
- * Note that we are using a DelayedTask here to illustrate a point. The configuration - * option buffer for {@link Ext.util.Observable#addListener addListener/on} will - * also setup a delayed task for you to buffer events.
- * @constructor The parameters to this constructor serve as defaults and are not required. - * @param {Function} fn (optional) The default function to call. - * @param {Object} scope The default scope (Thethis
reference) in which the
- * function is called. If not specified, this
will refer to the browser window.
- * @param {Array} args (optional) The default Array of arguments.
- */
-Ext.util.DelayedTask = function(fn, scope, args){
- var me = this,
- id,
- call = function(){
- clearInterval(id);
- id = null;
- fn.apply(scope, args || []);
- };
-
- /**
- * Cancels any pending timeout and queues a new one
- * @param {Number} delay The milliseconds to delay
- * @param {Function} newFn (optional) Overrides function passed to constructor
- * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
- * is specified, this
will refer to the browser window.
- * @param {Array} newArgs (optional) Overrides args passed to constructor
- */
- me.delay = function(delay, newFn, newScope, newArgs){
- me.cancel();
- fn = newFn || fn;
- scope = newScope || scope;
- args = newArgs || args;
- id = setInterval(call, delay);
- };
-
- /**
- * Cancel the last queued timeout
- */
- me.cancel = function(){
- if(id){
- clearInterval(id);
- id = null;
- }
- };
-};(function(){
-
-var EXTUTIL = Ext.util,
- EACH = Ext.each,
- 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.
-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(this, config)
- }
-});
-
- * This could then be used like this:
-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!");
- }
- }
-});
-
- */
-EXTUTIL.Observable = function(){
- /**
- * @cfg {Object} listeners (optional) 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.
- *DOM events from ExtJs {@link Ext.Component Components}
- *While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
- * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
- * {@link Ext.DataView#click click}
event passing the node clicked on. To access DOM
- * events directly from a Component's HTMLElement, listeners must be added to the {@link Ext.Component#getEl Element} after the Component
- * has been rendered. A plugin can simplify this step:
-// 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'
-});
- *
- */
- var me = this, e = me.events;
- if(me.listeners){
- me.on(me.listeners);
- delete me.listeners;
- }
- me.events = e || {};
-};
-
-EXTUTIL.Observable.prototype = {
- // private
- filterOptRe : /^(?:scope|delay|buffer|single)$/,
-
- /**
- * Fires the specified event with the passed parameters (minus the event name).
- *An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) - * by calling {@link #enableBubble}.
- * @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 = Array.prototype.slice.call(arguments, 0), - ename = a[0].toLowerCase(), - me = this, - ret = TRUE, - ce = me.events[ename], - cc, - q, - c; - if (me.eventsSuspended === TRUE) { - if (q = me.eventQueue) { - q.push(a); - } - } - else if(typeof ce == 'object') { - if (ce.bubble){ - if(ce.fire.apply(ce, a.slice(1)) === FALSE) { - return FALSE; - } - c = me.getBubbleTarget && me.getBubbleTarget(); - if(c && c.enableBubble) { - cc = c.events[ename]; - if(!cc || typeof cc != 'object' || !cc.bubble) { - c.enableBubble(ename); - } - return c.fireEvent.apply(c, a); - } - } - else { - a.shift(); - ret = ce.fire.apply(ce, a); - } - } - return ret; - }, - - /** - * 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 (this
reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * properties. This may contain any of the following properties:this
reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * Combining Options
- * Using the options argument, it is possible to combine different types of listeners:
- *
- * A delayed, one-time listener.
- *
-myDataView.on('click', this.onClick, this, {
-single: true,
-delay: 100
-});
- *
- * 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.
- *
- *
-myGridPanel.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:
- *
-myGridPanel.on({
-'click' : this.onClick,
-'mouseover' : this.onMouseOver,
-'mouseout' : this.onMouseOut,
- scope: this
-});
- */
- addListener : function(eventName, fn, scope, o){
- var me = this,
- e,
- oe,
- isF,
- ce;
- if (typeof eventName == 'object') {
- o = eventName;
- for (e in o){
- oe = o[e];
- if (!me.filterOptRe.test(e)) {
- me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
- }
- }
- } else {
- eventName = eventName.toLowerCase();
- ce = me.events[eventName] || TRUE;
- if (typeof ce == 'boolean') {
- me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
- }
- ce.addListener(fn, scope, typeof o == 'object' ? o : {});
- }
- },
-
- /**
- * Removes an event handler.
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
- */
- removeListener : function(eventName, fn, scope){
- var ce = this.events[eventName.toLowerCase()];
- if (typeof ce == 'object') {
- 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(typeof evt == 'object'){
- evt.clearListeners();
- }
- }
- },
-
- /**
- * Adds the specified events to the list of events which this Observable may fire.
- * @param {Object|String} o Either an object with event names as properties with a value of true
- * or the first event name string if multiple event names are being passed as separate parameters.
- * @param {string} Optional. Event name if multiple event names are being passed as separate parameters.
- * Usage:
-this.addEvents('storeloaded', 'storecleared');
-
- */
- addEvents : function(o){
- var me = this;
- me.events = me.events || {};
- if (typeof o == 'string') {
- var a = arguments,
- i = a.length;
- while(i--) {
- me.events[a[i]] = me.events[a[i]] || TRUE;
- }
- } else {
- Ext.applyIf(me.events, o);
- }
- },
-
- /**
- * 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.toLowerCase()];
- return typeof e == 'object' && e.listeners.length > 0;
- },
-
- /**
- * Suspend the firing of all events. (see {@link #resumeEvents})
- * @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
- * after the {@link #resumeEvents} call instead of discarding all suspended events;
- */
- suspendEvents : function(queueSuspended){
- this.eventsSuspended = TRUE;
- if(queueSuspended && !this.eventQueue){
- this.eventQueue = [];
- }
- },
-
- /**
- * Resume firing events. (see {@link #suspendEvents})
- * If events were suspended using the queueSuspended parameter, then all
- * events fired during event suspension will be sent to any listeners now.
- */
- resumeEvents : function(){
- var me = this,
- queued = me.eventQueue || [];
- me.eventsSuspended = FALSE;
- delete me.eventQueue;
- EACH(queued, function(e) {
- me.fireEvent.apply(me, e);
- });
- }
-};
-
-var OBSERVABLE = EXTUTIL.Observable.prototype;
-/**
- * Appends an event handler to this object (shorthand for {@link #addListener}.)
- * @param {String} eventName The type of event to listen for
- * @param {Function} handler The method the event invokes
- * @param {Object} scope (optional) The scope (this
reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * @method
- */
-OBSERVABLE.on = OBSERVABLE.addListener;
-/**
- * Removes an event handler (shorthand for {@link #removeListener}.)
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
- * @method
- */
-OBSERVABLE.un = OBSERVABLE.removeListener;
-
-/**
- * Removes all added captures from the Observable.
- * @param {Observable} o The Observable to release
- * @static
- */
-EXTUTIL.Observable.releaseCapture = function(o){
- o.fireEvent = OBSERVABLE.fireEvent;
-};
-
-function createTargeted(h, o, scope){
- return function(){
- if(o.target == arguments[0]){
- h.apply(scope, Array.prototype.slice.call(arguments, 0));
- }
- };
-};
-
-function createBuffered(h, o, l, scope){
- l.task = new EXTUTIL.DelayedTask();
- return function(){
- l.task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
- };
-};
-
-function createSingle(h, e, fn, scope){
- return function(){
- e.removeListener(fn, scope);
- return h.apply(scope, arguments);
- };
-};
-
-function createDelayed(h, o, l, scope){
- return function(){
- var task = new EXTUTIL.DelayedTask();
- if(!l.tasks) {
- l.tasks = [];
- }
- l.tasks.push(task);
- task.delay(o.delay || 10, h, scope, Array.prototype.slice.call(arguments, 0));
- };
-};
-
-EXTUTIL.Event = function(obj, name){
- this.name = name;
- this.obj = obj;
- this.listeners = [];
-};
-
-EXTUTIL.Event.prototype = {
- addListener : function(fn, scope, options){
- var me = this,
- l;
- scope = scope || me.obj;
- if(!me.isListening(fn, scope)){
- l = me.createListener(fn, scope, options);
- if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
- me.listeners = me.listeners.slice(0);
- }
- me.listeners.push(l);
- }
- },
-
- createListener: function(fn, scope, o){
- o = o || {}, scope = scope || this.obj;
- var l = {
- fn: fn,
- scope: scope,
- options: o
- }, h = fn;
- if(o.target){
- h = createTargeted(h, o, scope);
- }
- if(o.delay){
- h = createDelayed(h, o, l, scope);
- }
- if(o.single){
- h = createSingle(h, this, fn, scope);
- }
- if(o.buffer){
- h = createBuffered(h, o, l, scope);
- }
- l.fireFn = h;
- return l;
- },
-
- findListener : function(fn, scope){
- var list = this.listeners,
- i = list.length,
- l;
-
- scope = scope || this.obj;
- while(i--){
- l = list[i];
- if(l){
- if(l.fn == fn && l.scope == scope){
- return i;
- }
- }
- }
- return -1;
- },
-
- isListening : function(fn, scope){
- return this.findListener(fn, scope) != -1;
- },
-
- removeListener : function(fn, scope){
- var index,
- l,
- k,
- me = this,
- ret = FALSE;
- if((index = me.findListener(fn, scope)) != -1){
- if (me.firing) {
- me.listeners = me.listeners.slice(0);
- }
- l = me.listeners[index];
- if(l.task) {
- l.task.cancel();
- delete l.task;
- }
- k = l.tasks && l.tasks.length;
- if(k) {
- while(k--) {
- l.tasks[k].cancel();
- }
- delete l.tasks;
- }
- me.listeners.splice(index, 1);
- ret = TRUE;
- }
- return ret;
- },
-
- // Iterate to stop any buffered/delayed events
- clearListeners : function(){
- var me = this,
- l = me.listeners,
- i = l.length;
- while(i--) {
- me.removeListener(l[i].fn, l[i].scope);
- }
- },
-
- fire : function(){
- var me = this,
- listeners = me.listeners,
- len = listeners.length,
- i = 0,
- l;
-
- if(len > 0){
- me.firing = TRUE;
- var args = Array.prototype.slice.call(arguments, 0);
- for (; i < len; i++) {
- l = listeners[i];
- if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
- return (me.firing = FALSE);
- }
- }
- }
- me.firing = FALSE;
- return TRUE;
- }
-
-};
-})();
-/**
- * @class Ext.util.Observable
- */
-Ext.apply(Ext.util.Observable.prototype, function(){
- // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
- // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
- // private
- function getMethodEvent(method){
- var e = (this.methodEvents = this.methodEvents ||
- {})[method], returnValue, v, cancel, obj = this;
-
- if (!e) {
- this.methodEvents[method] = e = {};
- e.originalFn = this[method];
- e.methodName = method;
- e.before = [];
- e.after = [];
-
- var makeCall = function(fn, scope, args){
- if((v = fn.apply(scope || obj, args)) !== undefined){
- if (typeof v == 'object') {
- if(v.returnValue !== undefined){
- returnValue = v.returnValue;
- }else{
- returnValue = v;
- }
- cancel = !!v.cancel;
- }
- else
- if (v === false) {
- cancel = true;
- }
- else {
- returnValue = v;
- }
- }
- };
-
- this[method] = function(){
- var args = Array.prototype.slice.call(arguments, 0),
- b;
- returnValue = v = undefined;
- cancel = false;
-
- for(var i = 0, len = e.before.length; i < len; i++){
- b = e.before[i];
- makeCall(b.fn, b.scope, args);
- if (cancel) {
- return returnValue;
- }
- }
-
- if((v = e.originalFn.apply(obj, args)) !== undefined){
- returnValue = v;
- }
-
- for(var i = 0, len = e.after.length; i < len; i++){
- b = e.after[i];
- makeCall(b.fn, b.scope, args);
- if (cancel) {
- return returnValue;
- }
- }
- return returnValue;
- };
- }
- return e;
- }
-
- return {
- // these are considered experimental
- // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
- // adds an 'interceptor' called before the original method
- beforeMethod : function(method, fn, scope){
- getMethodEvent.call(this, method).before.push({
- fn: fn,
- scope: scope
- });
- },
-
- // adds a 'sequence' called after the original method
- afterMethod : function(method, fn, scope){
- getMethodEvent.call(this, method).after.push({
- fn: fn,
- scope: scope
- });
- },
-
- removeMethodListener: function(method, fn, scope){
- var e = this.getMethodEvent(method);
- for(var i = 0, len = e.before.length; i < len; i++){
- if(e.before[i].fn == fn && e.before[i].scope == scope){
- e.before.splice(i, 1);
- return;
- }
- }
- for(var i = 0, len = e.after.length; i < len; i++){
- if(e.after[i].fn == fn && e.after[i].scope == scope){
- e.after.splice(i, 1);
- return;
- }
- }
- },
-
- /**
- * Relays selected events from the specified Observable as if the events were fired by this.
- * @param {Object} o The Observable whose events this object is to relay.
- * @param {Array} events Array of event names to relay.
- */
- relayEvents : function(o, events){
- var me = this;
- function createHandler(ename){
- return function(){
- return me.fireEvent.apply(me, [ename].concat(Array.prototype.slice.call(arguments, 0)));
- };
- }
- for(var i = 0, len = events.length; i < len; i++){
- var ename = events[i];
- me.events[ename] = me.events[ename] || true;
- o.on(ename, createHandler(ename), me);
- }
- },
-
- /**
- * Enables events fired by this Observable to bubble up an owner hierarchy by calling
- * this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default - * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to - * access the required target more quickly.
- *Example:
-Ext.override(Ext.form.Field, {
- // Add functionality to Field's initComponent to enable the change event to bubble
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
- this.enableBubble('change');
- }),
-
- // We know that we want Field's events to bubble directly to the FormPanel.
- getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
- }
-});
-
-var myForm = new Ext.formPanel({
- title: 'User Details',
- items: [{
- ...
- }],
- listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
- }
-});
-
- * @param {String/Array} events The event name to bubble, or an Array of event names.
- */
- enableBubble : function(events){
- var me = this;
- if(!Ext.isEmpty(events)){
- events = Ext.isArray(events) ? events : Array.prototype.slice.call(arguments, 0);
- for(var i = 0, len = events.length; i < len; i++){
- var ename = events[i];
- ename = ename.toLowerCase();
- var ce = me.events[ename] || true;
- if (typeof ce == 'boolean') {
- ce = new Ext.util.Event(me, ename);
- me.events[ename] = ce;
- }
- ce.bubble = true;
- }
- }
- }
- };
-}());
-
-
-/**
- * Starts capture on the specified Observable. All events will be passed
- * to the supplied function with the event name + standard signature of the event
- * before the event is fired. If the supplied function returns false,
- * the event will not fire.
- * @param {Observable} o The Observable to capture events from.
- * @param {Function} fn The function to call when an event is fired.
- * @param {Object} scope (optional) The scope (this
reference) in which the function is executed. Defaults to the Observable firing the event.
- * @static
- */
-Ext.util.Observable.capture = function(o, fn, scope){
- o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
-};
-
-
-/**
- * Sets observability on the passed class constructor.- *
This makes any event fired on any instance of the passed class also fire a single event through - * the class allowing for central handling of events on many instances at once.
- *Usage:
-Ext.util.Observable.observeClass(Ext.data.Connection);
-Ext.data.Connection.on('beforerequest', function(con, options) {
- console.log('Ajax request made to ' + options.url);
-});
- * @param {Function} c The class constructor to make observable.
- * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
- * @static
- */
-Ext.util.Observable.observeClass = function(c, listeners){
- if(c){
- if(!c.fireEvent){
- Ext.apply(c, new Ext.util.Observable());
- Ext.util.Observable.capture(c.prototype, c.fireEvent, c);
- }
- if(typeof listeners == 'object'){
- c.on(listeners);
- }
- return c;
- }
-};
-/**
- * @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,
- DETECT_NATIVE = Ext.isGecko || Ext.isWebKit || Ext.isSafari,
- E = Ext.lib.Event,
- D = Ext.lib.Dom,
- DOC = document,
- WINDOW = window,
- DOMCONTENTLOADED = "DOMContentLoaded",
- COMPLETE = 'complete',
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
- /*
- * This cache is used to hold special js objects, the document and window, that don't have an id. We need to keep
- * a reference to them so we can look them up at a later point.
- */
- specialElCache = [];
-
- function getId(el){
- var id = false,
- i = 0,
- len = specialElCache.length,
- id = false,
- skip = false,
- o;
- if(el){
- if(el.getElementById || el.navigator){
- // look up the id
- for(; i < len; ++i){
- o = specialElCache[i];
- if(o.el === el){
- id = o.id;
- break;
- }
- }
- if(!id){
- // for browsers that support it, ensure that give the el the same id
- id = Ext.id(el);
- specialElCache.push({
- id: id,
- el: el
- });
- skip = true;
- }
- }else{
- id = Ext.id(el);
- }
- if(!Ext.elCache[id]){
- Ext.Element.addToCache(new Ext.Element(el), id);
- if(skip){
- Ext.elCache[id].skipGC = true;
- }
- }
- }
- return id;
- };
-
- /// There is some jquery work around stuff here that isn't needed in Ext Core.
- function addListener(el, ename, fn, task, wrap, scope){
- el = Ext.getDom(el);
- var id = getId(el),
- es = Ext.elCache[id].events,
- wfn;
-
- wfn = E.on(el, ename, wrap);
- es[ename] = es[ename] || [];
-
- /* 0 = Original Function,
- 1 = Event Manager Wrapped Function,
- 2 = Scope,
- 3 = Adapter Wrapped Function,
- 4 = Buffered Task
- */
- es[ename].push([fn, wrap, scope, wfn, task]);
-
- // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
- // without breaking ExtJS.
-
- // workaround for jQuery
- if(el.addEventListener && ename == "mousewheel"){
- var args = ["DOMMouseScroll", wrap, false];
- el.addEventListener.apply(el, args);
- Ext.EventManager.addListener(WINDOW, 'unload', function(){
- el.removeEventListener.apply(el, args);
- });
- }
-
- // fix stopped mousedowns on the document
- if(el == DOC && ename == "mousedown"){
- Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
- }
- };
-
- function doScrollChk(){
- /* Notes:
- 'doScroll' will NOT work in a IFRAME/FRAMESET.
- The method succeeds but, a DOM query done immediately after -- FAILS.
- */
- if(window != top){
- return false;
- }
-
- try{
- DOC.documentElement.doScroll('left');
- }catch(e){
- return false;
- }
-
- fireDocReady();
- return true;
- }
- /**
- * @return {Boolean} True if the document is in a 'complete' state (or was determined to
- * be true by other means). If false, the state is evaluated again until canceled.
- */
- function checkReadyState(e){
-
- if(Ext.isIE && doScrollChk()){
- return true;
- }
- if(DOC.readyState == COMPLETE){
- fireDocReady();
- return true;
- }
- docReadyState || (docReadyProcId = setTimeout(arguments.callee, 2));
- return false;
- }
-
- var styles;
- function checkStyleSheets(e){
- styles || (styles = Ext.query('style, link[rel=stylesheet]'));
- if(styles.length == DOC.styleSheets.length){
- fireDocReady();
- return true;
- }
- docReadyState || (docReadyProcId = setTimeout(arguments.callee, 2));
- return false;
- }
-
- function OperaDOMContentLoaded(e){
- DOC.removeEventListener(DOMCONTENTLOADED, arguments.callee, false);
- checkStyleSheets();
- }
-
- function fireDocReady(e){
- if(!docReadyState){
- docReadyState = true; //only attempt listener removal once
-
- if(docReadyProcId){
- clearTimeout(docReadyProcId);
- }
- if(DETECT_NATIVE) {
- DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
- }
- if(Ext.isIE && checkReadyState.bindIE){ //was this was actually set ??
- DOC.detachEvent('onreadystatechange', checkReadyState);
- }
- E.un(WINDOW, "load", arguments.callee);
- }
- if(docReadyEvent && !Ext.isReady){
- Ext.isReady = true;
- docReadyEvent.fire();
- docReadyEvent.listeners = [];
- }
-
- };
-
- function initDocReady(){
- docReadyEvent || (docReadyEvent = new Ext.util.Event());
- if (DETECT_NATIVE) {
- DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
- }
- /*
- * Handle additional (exceptional) detection strategies here
- */
- if (Ext.isIE){
- //Use readystatechange as a backup AND primary detection mechanism for a FRAME/IFRAME
- //See if page is already loaded
- if(!checkReadyState()){
- checkReadyState.bindIE = true;
- DOC.attachEvent('onreadystatechange', checkReadyState);
- }
-
- }else if(Ext.isOpera ){
- /* Notes:
- Opera needs special treatment needed here because CSS rules are NOT QUITE
- available after DOMContentLoaded is raised.
- */
-
- //See if page is already loaded and all styleSheets are in place
- (DOC.readyState == COMPLETE && checkStyleSheets()) ||
- DOC.addEventListener(DOMCONTENTLOADED, OperaDOMContentLoaded, false);
-
- }else if (Ext.isWebKit){
- //Fallback for older Webkits without DOMCONTENTLOADED support
- checkReadyState();
- }
- // 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, task){
- 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, fn){
- return function(e){
- var task = new Ext.util.DelayedTask(h);
- if(!fn.tasks) {
- fn.tasks = [];
- }
- fn.tasks.push(task);
- task.delay(o.delay || 10, h, null, [new Ext.EventObjectImpl(e)]);
- };
- };
-
- function listen(element, ename, opt, fn, scope){
- var o = (!opt || typeof opt == "boolean") ? {} : opt,
- el = Ext.getDom(element), task;
-
- 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, fn);
- }
- if(o.single){
- h = createSingle(h, el, ename, fn, scope);
- }
- if(o.buffer){
- task = new Ext.util.DelayedTask(h);
- h = createBuffered(h, o, task);
- }
-
- addListener(el, ename, fn, task, h, scope);
- return h;
- };
-
- var pub = {
- /**
- * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will
- * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
- * @param {String/HTMLElement} el The html element or id to assign the event handler to.
- * @param {String} eventName The name of the event to listen for.
- * @param {Function} handler The handler function the event invokes. This function is passed
- * the following parameters:this
reference) in which the handler function is executed. Defaults to the Element.
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:this
reference) in which the handler function is executed. Defaults to the Element.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, e, val; - for(e in o){ - val = o[e]; - if(!propRe.test(e)){ - if(Ext.isFunction(val)){ - // shared options - listen(element, e, o, val, o.scope); - }else{ - // individual options - listen(element, e, val); - } - } - } - } else { - listen(element, eventName, options, fn, scope); - } - }, - - /** - * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically - * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. - * @param {String/HTMLElement} el The id or html element from which to remove the listener. - * @param {String} eventName The name of the event. - * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call. - * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
- * then this must refer to the same object.
- */
- removeListener : function(el, eventName, fn, scope){
- el = Ext.getDom(el);
- var id = getId(el),
- f = el && (Ext.elCache[id].events)[eventName] || [],
- wrap, i, l, k, len, fnc;
-
- for (i = 0, len = f.length; i < len; i++) {
-
- /* 0 = Original Function,
- 1 = Event Manager Wrapped Function,
- 2 = Scope,
- 3 = Adapter Wrapped Function,
- 4 = Buffered Task
- */
- if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) {
- if(fnc[4]) {
- fnc[4].cancel();
- }
- k = fn.tasks && fn.tasks.length;
- if(k) {
- while(k--) {
- fn.tasks[k].cancel();
- }
- delete fn.tasks;
- }
- wrap = fnc[1];
- E.un(el, eventName, E.extAdapter ? fnc[3] : wrap);
-
- // jQuery workaround that should be removed from Ext Core
- if(wrap && el.addEventListener && eventName == "mousewheel"){
- el.removeEventListener("DOMMouseScroll", wrap, false);
- }
-
- // fix stopped mousedowns on the document
- if(wrap && el == DOC && eventName == "mousedown"){
- Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
- }
-
- f.splice(i, 1);
- if (f.length === 0) {
- delete Ext.elCache[id].events[eventName];
- }
- for (k in Ext.elCache[id].events) {
- return false;
- }
- Ext.elCache[id].events = {};
- return false;
- }
- }
- },
-
- /**
- * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}
- * directly on an Element in favor of calling this version.
- * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
- */
- removeAll : function(el){
- el = Ext.getDom(el);
- var id = getId(el),
- ec = Ext.elCache[id] || {},
- es = ec.events || {},
- f, i, len, ename, fn, k, wrap;
-
- for(ename in es){
- if(es.hasOwnProperty(ename)){
- f = es[ename];
- /* 0 = Original Function,
- 1 = Event Manager Wrapped Function,
- 2 = Scope,
- 3 = Adapter Wrapped Function,
- 4 = Buffered Task
- */
- for (i = 0, len = f.length; i < len; i++) {
- fn = f[i];
- if(fn[4]) {
- fn[4].cancel();
- }
- if(fn[0].tasks && (k = fn[0].tasks.length)) {
- while(k--) {
- fn[0].tasks[k].cancel();
- }
- delete fn.tasks;
- }
- wrap = fn[1];
- E.un(el, ename, E.extAdapter ? fn[3] : wrap);
-
- // jQuery workaround that should be removed from Ext Core
- if(el.addEventListener && wrap && ename == "mousewheel"){
- el.removeEventListener("DOMMouseScroll", wrap, false);
- }
-
- // fix stopped mousedowns on the document
- if(wrap && el == DOC && ename == "mousedown"){
- Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
- }
- }
- }
- }
- if (Ext.elCache[id]) {
- Ext.elCache[id].events = {};
- }
- },
-
- getListeners : function(el, eventName) {
- el = Ext.getDom(el);
- var id = getId(el),
- ec = Ext.elCache[id] || {},
- es = ec.events || {},
- results = [];
- if (es && es[eventName]) {
- return es[eventName];
- } else {
- return null;
- }
- },
-
- purgeElement : function(el, recurse, eventName) {
- el = Ext.getDom(el);
- var id = getId(el),
- ec = Ext.elCache[id] || {},
- es = ec.events || {},
- i, f, len;
- if (eventName) {
- if (es && es.hasOwnProperty(eventName)) {
- f = es[eventName];
- for (i = 0, len = f.length; i < len; i++) {
- Ext.EventManager.removeListener(el, eventName, f[i][0]);
- }
- }
- } else {
- Ext.EventManager.removeAll(el);
- }
- if (recurse && el && el.childNodes) {
- for (i = 0, len = el.childNodes.length; i < len; i++) {
- Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName);
- }
- }
- },
-
- _unload : function() {
- var el;
- for (el in Ext.elCache) {
- Ext.EventManager.removeAll(el);
- }
- delete Ext.elCache;
- delete Ext.Element._flyweights;
-
- // Abort any outstanding Ajax requests
- var c,
- conn,
- tid,
- ajax = Ext.lib.Ajax;
- (typeof ajax.conn == 'object') ? conn = ajax.conn : conn = {};
- for (tid in conn) {
- c = conn[tid];
- if (c) {
- ajax.abort({conn: c, tId: tid});
- }
- }
- },
- /**
- * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
- * accessed shorthanded as Ext.onReady().
- * @param {Function} fn The method the event invokes.
- * @param {Object} scope (optional) The scope (this
reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
- * {single: true}
be used so that the handler is removed on first invocation.
- */
- onDocumentReady : function(fn, scope, options){
- if(Ext.isReady){ // if it already fired or document.body is present
- docReadyEvent || (docReadyEvent = new Ext.util.Event());
- docReadyEvent.addListener(fn, scope, options);
- docReadyEvent.fire();
- docReadyEvent.listeners = [];
- }else{
- if(!docReadyEvent){
- initDocReady();
- }
- options = options || {};
- options.delay = options.delay || 1;
- docReadyEvent.addListener(fn, scope, options);
- }
- },
-
- /**
- * Forces a document ready state transition for the framework. Used when Ext is loaded
- * into a DOM structure AFTER initial page load (Google API or other dynamic load scenario.
- * Any pending 'onDocumentReady' handlers will be fired (if not already handled).
- */
- fireDocReady : fireDocReady
- };
- /**
- * Appends an event handler to an element. Shorthand for {@link #addListener}.
- * @param {String/HTMLElement} el The html element or id to assign the event handler to
- * @param {String} eventName The name of the event to listen for.
- * @param {Function} handler The handler function the event invokes.
- * @param {Object} scope (optional) (this
reference) in which the handler function executes. Defaults to the Element.
- * @param {Object} options (optional) An object containing standard {@link #addListener} options
- * @member Ext.EventManager
- * @method on
- */
- pub.on = pub.addListener;
- /**
- * Removes an event handler from an element. Shorthand for {@link #removeListener}.
- * @param {String/HTMLElement} el The id or html element from which to remove the listener.
- * @param {String} eventName The name of the event.
- * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #on} call.
- * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @member Ext.EventManager
- * @method un
- */
- pub.un = pub.removeListener;
-
- pub.stoppedMouseDownEvent = new Ext.util.Event();
- return pub;
-}();
-/**
- * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.
- * @param {Function} fn The method the event invokes.
- * @param {Object} scope (optional) The scope (this
reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
- * {single: true}
be used so that the handler is removed on first invocation.
- * @member Ext
- * @method onReady
- */
-Ext.onReady = Ext.EventManager.onDocumentReady;
-
-
-//Initialize doc classes
-(function(){
-
- var initExtCss = function(){
- // find the body element
- var bd = document.body || document.getElementsByTagName('body')[0];
- if(!bd){ return false; }
- var cls = [' ',
- Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
- : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
- : Ext.isOpera ? "ext-opera"
- : Ext.isWebKit ? "ext-webkit" : ""];
-
- if(Ext.isSafari){
- cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
- }else if(Ext.isChrome){
- cls.push("ext-chrome");
- }
-
- if(Ext.isMac){
- cls.push("ext-mac");
- }
- if(Ext.isLinux){
- cls.push("ext-linux");
- }
-
- if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
- var p = bd.parentNode;
- if(p){
- p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
- }
- }
- bd.className += cls.join(' ');
- return true;
- }
-
- if(!initExtCss()){
- Ext.onReady(initExtCss);
- }
-})();
-
-
-/**
- * @class Ext.EventObject
- * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
- * wraps the browser's native event-object normalizing cross-browser differences,
- * such as which mouse button is clicked, keys pressed, mechanisms to stop
- * event-propagation along with a method to prevent default actions from taking place.
- * For example:
- *
-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);
-
- * @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:
- // 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!');
- }
- });
-
- * @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,
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
- curWidth = 0,
- curHeight = 0,
- // note 1: IE fires ONLY the keydown event on specialkey autorepeat
- // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
- // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
- useKeydown = Ext.isWebKit ?
- Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
- !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
-
- return {
- // private
- doResizeEvent: function(){
- var h = D.getViewHeight(),
- w = D.getViewWidth();
-
- //whacky problem in IE where the resize event will fire even though the w/h are the same.
- if(curHeight != h || curWidth != w){
- resizeEvent.fire(curWidth = w, curHeight = h);
- }
- },
-
- /**
- * Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
- * passes new viewport width and height to handlers.
- * @param {Function} fn The handler function the window resize event invokes.
- * @param {Object} scope The scope (this
reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
- */
- onWindowResize : function(fn, scope, options){
- if(!resizeEvent){
- resizeEvent = new Ext.util.Event();
- resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
- Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
- }
- resizeEvent.addListener(fn, scope, options);
- },
-
- // exposed only to allow manual firing
- fireWindowResize : function(){
- if(resizeEvent){
- resizeTask.delay(100);
- }
- },
-
- /**
- * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
- * @param {Function} fn The function the event invokes.
- * @param {Object} scope The scope (this
reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
- */
- onTextResize : function(fn, scope, options){
- if(!textEvent){
- textEvent = new Ext.util.Event();
- var textEl = new Ext.Element(document.createElement('div'));
- textEl.dom.className = 'x-text-resize';
- textEl.dom.innerHTML = 'X';
- textEl.appendTo(document.body);
- textSize = textEl.dom.offsetHeight;
- setInterval(function(){
- if(textEl.dom.offsetHeight != textSize){
- textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
- }
- }, this.textResizeInterval);
- }
- textEvent.addListener(fn, scope, options);
- },
-
- /**
- * Removes the passed window resize listener.
- * @param {Function} fn The method the event invokes
- * @param {Object} scope The scope of handler
- */
- removeResizeListener : function(fn, scope){
- if(resizeEvent){
- resizeEvent.removeListener(fn, scope);
- }
- },
-
- // private
- fireResize : function(){
- if(resizeEvent){
- resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
- }
- },
-
- /**
- * The frequency, in milliseconds, to check for text resize events (defaults to 50)
- */
- textResizeInterval : 50,
-
- /**
- * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
- */
- ieDeferSrc : false,
-
- // protected for use inside the framework
- // detects whether we should use keydown or keypress based on the browser.
- useKeydown: useKeydown
- };
-}());
-
-Ext.EventManager.on = Ext.EventManager.addListener;
-
-
-Ext.apply(Ext.EventObjectImpl.prototype, {
- /** Key constant @type Number */
- BACKSPACE: 8,
- /** Key constant @type Number */
- TAB: 9,
- /** Key constant @type Number */
- NUM_CENTER: 12,
- /** Key constant @type Number */
- ENTER: 13,
- /** Key constant @type Number */
- RETURN: 13,
- /** Key constant @type Number */
- SHIFT: 16,
- /** Key constant @type Number */
- CTRL: 17,
- CONTROL : 17, // legacy
- /** Key constant @type Number */
- ALT: 18,
- /** Key constant @type Number */
- PAUSE: 19,
- /** Key constant @type Number */
- CAPS_LOCK: 20,
- /** Key constant @type Number */
- ESC: 27,
- /** Key constant @type Number */
- SPACE: 32,
- /** Key constant @type Number */
- PAGE_UP: 33,
- PAGEUP : 33, // legacy
- /** Key constant @type Number */
- PAGE_DOWN: 34,
- PAGEDOWN : 34, // legacy
- /** Key constant @type Number */
- END: 35,
- /** Key constant @type Number */
- HOME: 36,
- /** Key constant @type Number */
- LEFT: 37,
- /** Key constant @type Number */
- UP: 38,
- /** Key constant @type Number */
- RIGHT: 39,
- /** Key constant @type Number */
- DOWN: 40,
- /** Key constant @type Number */
- PRINT_SCREEN: 44,
- /** Key constant @type Number */
- INSERT: 45,
- /** Key constant @type Number */
- DELETE: 46,
- /** Key constant @type Number */
- ZERO: 48,
- /** Key constant @type Number */
- ONE: 49,
- /** Key constant @type Number */
- TWO: 50,
- /** Key constant @type Number */
- THREE: 51,
- /** Key constant @type Number */
- FOUR: 52,
- /** Key constant @type Number */
- FIVE: 53,
- /** Key constant @type Number */
- SIX: 54,
- /** Key constant @type Number */
- SEVEN: 55,
- /** Key constant @type Number */
- EIGHT: 56,
- /** Key constant @type Number */
- NINE: 57,
- /** Key constant @type Number */
- A: 65,
- /** Key constant @type Number */
- B: 66,
- /** Key constant @type Number */
- C: 67,
- /** Key constant @type Number */
- D: 68,
- /** Key constant @type Number */
- E: 69,
- /** Key constant @type Number */
- F: 70,
- /** Key constant @type Number */
- G: 71,
- /** Key constant @type Number */
- H: 72,
- /** Key constant @type Number */
- I: 73,
- /** Key constant @type Number */
- J: 74,
- /** Key constant @type Number */
- K: 75,
- /** Key constant @type Number */
- L: 76,
- /** Key constant @type Number */
- M: 77,
- /** Key constant @type Number */
- N: 78,
- /** Key constant @type Number */
- O: 79,
- /** Key constant @type Number */
- P: 80,
- /** Key constant @type Number */
- Q: 81,
- /** Key constant @type Number */
- R: 82,
- /** Key constant @type Number */
- S: 83,
- /** Key constant @type Number */
- T: 84,
- /** Key constant @type Number */
- U: 85,
- /** Key constant @type Number */
- V: 86,
- /** Key constant @type Number */
- W: 87,
- /** Key constant @type Number */
- X: 88,
- /** Key constant @type Number */
- Y: 89,
- /** Key constant @type Number */
- Z: 90,
- /** Key constant @type Number */
- CONTEXT_MENU: 93,
- /** Key constant @type Number */
- NUM_ZERO: 96,
- /** Key constant @type Number */
- NUM_ONE: 97,
- /** Key constant @type Number */
- NUM_TWO: 98,
- /** Key constant @type Number */
- NUM_THREE: 99,
- /** Key constant @type Number */
- NUM_FOUR: 100,
- /** Key constant @type Number */
- NUM_FIVE: 101,
- /** Key constant @type Number */
- NUM_SIX: 102,
- /** Key constant @type Number */
- NUM_SEVEN: 103,
- /** Key constant @type Number */
- NUM_EIGHT: 104,
- /** Key constant @type Number */
- NUM_NINE: 105,
- /** Key constant @type Number */
- NUM_MULTIPLY: 106,
- /** Key constant @type Number */
- NUM_PLUS: 107,
- /** Key constant @type Number */
- NUM_MINUS: 109,
- /** Key constant @type Number */
- NUM_PERIOD: 110,
- /** Key constant @type Number */
- NUM_DIVISION: 111,
- /** Key constant @type Number */
- F1: 112,
- /** Key constant @type Number */
- F2: 113,
- /** Key constant @type Number */
- F3: 114,
- /** Key constant @type Number */
- F4: 115,
- /** Key constant @type Number */
- F5: 116,
- /** Key constant @type Number */
- F6: 117,
- /** Key constant @type Number */
- F7: 118,
- /** Key constant @type Number */
- F8: 119,
- /** Key constant @type Number */
- F9: 120,
- /** Key constant @type Number */
- F10: 121,
- /** Key constant @type Number */
- F11: 122,
- /** Key constant @type Number */
- F12: 123,
-
- /** @private */
- isNavKeyPress : function(){
- var me = this,
- k = this.normalizeKey(me.keyCode);
- return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down
- k == me.RETURN ||
- k == me.TAB ||
- k == me.ESC;
- },
-
- isSpecialKey : function(){
- var k = this.normalizeKey(this.keyCode);
- return (this.type == 'keypress' && this.ctrlKey) ||
- this.isNavKeyPress() ||
- (k == this.BACKSPACE) || // Backspace
- (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
- (k >= 44 && k <= 46); // Print Screen, Insert, Delete
- },
-
- 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
- * Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
- *All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.
- *Note that the events documented in this class are not Ext events, they encapsulate browser events. To - * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older - * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.
- * Usage:
-// by id
-var el = Ext.get("my-div");
-
-// by DOM element reference
-var el = Ext.get(myDivElement);
-
- * AnimationsWhen an element is manipulated, by default there is no animation.
- *
-var el = Ext.get("my-div");
-
-// no animation
-el.setWidth(100);
- *
- * Many of the functions for manipulating an element have an optional "animate" parameter. This - * parameter can be specified as boolean (true) for default animation effects.
- *
-// default animation
-el.setWidth(100, true);
- *
- *
- * To configure the effects, an object literal with animation options to use as the Element animation - * configuration object can also be specified. Note that the supported Element animation configuration - * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported - * Element animation configuration options are:
--Option Default Description ---------- -------- --------------------------------------------- -{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds -{@link Ext.Fx#easing easing} easeOut The easing method -{@link Ext.Fx#callback callback} none A function to execute when the anim completes -{@link Ext.Fx#scope scope} this The scope (this) of the callback function -- * - *
-// Element animation options object
-var opt = {
- {@link Ext.Fx#duration duration}: 1,
- {@link Ext.Fx#easing easing}: 'elasticIn',
- {@link Ext.Fx#callback callback}: this.foo,
- {@link Ext.Fx#scope scope}: this
-};
-// animation with some options set
-el.setWidth(100, opt);
- *
- * The Element animation object being used for the animation will be set on the options - * object as "anim", which allows you to stop or manipulate the animation. Here is an example:
- *
-// using the "anim" property to get the Anim object
-if(opt.anim.isAnimated()){
- opt.anim.stop();
-}
- *
- * Also see the {@link #animate} method for another animation technique.
- *Composite (Collections of) Elements
- *For working with collections of Elements, see {@link Ext.CompositeElement}
- * @constructor Create a new Element directly. - * @param {String/HTMLElement} element - * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). - */ -(function(){ -var DOC = document; - -Ext.Element = function(element, forceNew){ - var dom = typeof element == "string" ? - DOC.getElementById(element) : element, - id; - - if(!dom) return null; - - id = dom.id; - - if(!forceNew && id && Ext.elCache[id]){ // element object already exists - return Ext.elCache[id].el; - } - - /** - * The DOM element - * @type HTMLElement - */ - this.dom = dom; - - /** - * The DOM element ID - * @type String - */ - this.id = id || Ext.id(dom); -}; - -var D = Ext.lib.Dom, - DH = Ext.DomHelper, - E = Ext.lib.Event, - A = Ext.lib.Anim, - El = Ext.Element, - EC = Ext.elCache; - -El.prototype = { - /** - * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) - * @param {Object} o The object with the attributes - * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos. - * @return {Ext.Element} this - */ - set : function(o, useSet){ - var el = this.dom, - attr, - val, - useSet = (useSet !== false) && !!el.setAttribute; - - for(attr in o){ - if (o.hasOwnProperty(attr)) { - val = o[attr]; - if (attr == 'style') { - DH.applyStyles(el, val); - } else if (attr == 'cls') { - el.className = val; - } else if (useSet) { - el.setAttribute(attr, val); - } else { - el[attr] = val; - } - } - } - return this; - }, - -// Mouse events - /** - * @event click - * Fires when a mouse click is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event contextmenu - * Fires when a right click is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event dblclick - * Fires when a mouse double click is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mousedown - * Fires when a mousedown is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mouseup - * Fires when a mouseup is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mouseover - * Fires when a mouseover is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mousemove - * Fires when a mousemove is detected with the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mouseout - * Fires when a mouseout is detected with the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mouseenter - * Fires when the mouse enters the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event mouseleave - * Fires when the mouse leaves the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - -// Keyboard events - /** - * @event keypress - * Fires when a keypress is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event keydown - * Fires when a keydown is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event keyup - * Fires when a keyup is detected within the element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - - -// HTML frame/object events - /** - * @event load - * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event unload - * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event abort - * Fires when an object/image is stopped from loading before completely loaded. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event error - * Fires when an object/image/frame cannot be loaded properly. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event resize - * Fires when a document view is resized. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event scroll - * Fires when a document view is scrolled. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - -// Form events - /** - * @event select - * Fires when a user selects some text in a text field, including input and textarea. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event change - * Fires when a control loses the input focus and its value has been modified since gaining focus. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event submit - * Fires when a form is submitted. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event reset - * Fires when a form is reset. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event focus - * Fires when an element receives focus either via the pointing device or by tab navigation. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event blur - * Fires when an element loses focus either via the pointing device or by tabbing navigation. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - -// User Interface events - /** - * @event DOMFocusIn - * Where supported. Similar to HTML focus event, but can be applied to any focusable element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMFocusOut - * Where supported. Similar to HTML blur event, but can be applied to any focusable element. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMActivate - * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - -// DOM Mutation events - /** - * @event DOMSubtreeModified - * Where supported. Fires when the subtree is modified. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMNodeInserted - * Where supported. Fires when a node has been added as a child of another node. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMNodeRemoved - * Where supported. Fires when a descendant node of the element is removed. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMNodeRemovedFromDocument - * Where supported. Fires when a node is being removed from a document. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMNodeInsertedIntoDocument - * Where supported. Fires when a node is being inserted into a document. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMAttrModified - * Where supported. Fires when an attribute has been modified. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - /** - * @event DOMCharacterDataModified - * Where supported. Fires when the character data has been modified. - * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. - * @param {HtmlElement} t The target of the event. - * @param {Object} o The options configuration passed to the {@link #addListener} call. - */ - - /** - * The default unit to append to CSS values where a unit isn't provided (defaults to px). - * @type String - */ - defaultUnit : "px", - - /** - * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) - * @param {String} selector The simple selector to test - * @return {Boolean} True if this element matches the selector, else false - */ - is : function(simpleSelector){ - return Ext.DomQuery.is(this.dom, simpleSelector); - }, - - /** - * Tries to focus the element. Any exceptions are caught and ignored. - * @param {Number} defer (optional) Milliseconds to defer the focus - * @return {Ext.Element} this - */ - focus : function(defer, /* private */ dom) { - var me = this, - dom = dom || me.dom; - try{ - if(Number(defer)){ - me.focus.defer(defer, null, [null, dom]); - }else{ - dom.focus(); - } - }catch(e){} - return me; - }, - - /** - * Tries to blur the element. Any exceptions are caught and ignored. - * @return {Ext.Element} this - */ - blur : function() { - try{ - this.dom.blur(); - }catch(e){} - return this; - }, - - /** - * Returns the value of the "value" attribute - * @param {Boolean} asNumber true to parse the value as a number - * @return {String/Number} - */ - getValue : function(asNumber){ - var val = this.dom.value; - return asNumber ? parseInt(val, 10) : val; - }, - - /** - * Appends an event handler to this element. The shorthand version {@link #on} is equivalent. - * @param {String} eventName The name of event to handle. - * @param {Function} fn The handler function the event invokes. This function is passed - * the following parameters:this
reference) in which the handler function is executed.
- * If omitted, defaults to this Element..
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:this
reference) in which the handler function is executed.
- * If omitted, defaults to this Element.
- * Combining Options
- * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
- * addListener. The two are equivalent. Using the options argument, it is possible to combine different
- * types of listeners:
- *
- * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
- * options object. The options object is available as the third parameter in the handler function.
-el.on('click', this.onClick, this, {
- single: true,
- delay: 100,
- stopEvent : true,
- forumId: 4
-});
- *
- * Attaching multiple handlers in 1 call
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple handlers.
- * Code:
-el.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
-});
- *
- * Or a shorthand syntax:
- * Code:
-el.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
-});
- *
- * delegate
- *This is a configuration option that you can pass along when registering a handler for - * an event to assist with event delegation. Event delegation is a technique that is used to - * reduce memory consumption and prevent exposure to memory-leaks. By registering an event - * for a container element as opposed to each element within a container. By setting this - * configuration option to a simple selector, the target element will be filtered to look for - * a descendant of the target. - * For example:
-// using this markup:
-<div id='elId'>
- <p id='p1'>paragraph one</p>
- <p id='p2' class='clickable'>paragraph two</p>
- <p id='p3'>paragraph three</p>
-</div>
-// utilize event delegation to registering just one handler on the container element:
-el = Ext.get('elId');
-el.on(
- 'click',
- function(e,t) {
- // handle click
- console.info(t.id); // 'p2'
- },
- this,
- {
- // filter the target element to be a descendant with the class 'clickable'
- delegate: '.clickable'
- }
-);
- *
- * @return {Ext.Element} this
- */
- addListener : function(eventName, fn, scope, options){
- Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
- return this;
- },
-
- /**
- * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
- * Note: if a scope was explicitly specified when {@link #addListener adding} the
- * listener, the same scope must be specified here.
- * Example:
- *
-el.removeListener('click', this.handlerFn);
-// or
-el.un('click', this.handlerFn);
-
- * @param {String} eventName The name of the event from which to remove the handler.
- * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @return {Ext.Element} this
- */
- removeListener : function(eventName, fn, scope){
- Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
- return this;
- },
-
- /**
- * Removes all previous added listeners from this element
- * @return {Ext.Element} this
- */
- removeAllListeners : function(){
- Ext.EventManager.removeAll(this.dom);
- return this;
- },
-
- /**
- * Recursively removes all previous added listeners from this element and its children
- * @return {Ext.Element} this
- */
- purgeAllListeners : function() {
- Ext.EventManager.purgeElement(this, true);
- return this;
- },
- /**
- * @private Test if size has a unit, otherwise appends the default
- */
- addUnits : function(size){
- if(size === "" || size == "auto" || size === undefined){
- size = size || '';
- } else if(!isNaN(size) || !unitPattern.test(size)){
- size = size + (this.defaultUnit || 'px');
- }
- return size;
- },
-
- /**
- * Updates the innerHTML of this Element - * from a specified URL. Note that this is subject to the Same Origin Policy
- *Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.
- * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying - * exactly how to request the HTML. - * @return {Ext.Element} this - */ - load : function(url, params, cb){ - Ext.Ajax.request(Ext.apply({ - params: params, - url: url.url || url, - callback: cb, - el: this.dom, - indicatorText: url.indicatorText || '' - }, Ext.isObject(url) ? url : {})); - return this; - }, - - /** - * Tests various css rules/browsers to determine if this element uses a border box - * @return {Boolean} - */ - isBorderBox : function(){ - return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; - }, - - /** - *Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode}
- */ - remove : function(){ - var me = this, - dom = me.dom; - - if (dom) { - delete me.dom; - Ext.removeNode(dom); - } - }, - - /** - * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. - * @param {Function} overFn The function to call when the mouse enters the Element. - * @param {Function} outFn The function to call when the mouse leaves the Element. - * @param {Object} scope (optional) The scope (this
reference) in which the functions are executed. Defaults to the Element's DOM element.
- * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}.
- * @return {Ext.Element} this
- */
- hover : function(overFn, outFn, scope, options){
- var me = this;
- me.on('mouseenter', overFn, scope || me.dom, options);
- me.on('mouseleave', outFn, scope || me.dom, options);
- return me;
- },
-
- /**
- * Returns true if this element is an ancestor of the passed element
- * @param {HTMLElement/String} el The element to check
- * @return {Boolean} True if this element is an ancestor of el, else false
- */
- contains : function(el){
- return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
- },
-
- /**
- * Returns the value of a namespaced attribute from the element's underlying DOM node.
- * @param {String} namespace The namespace in which to look for the attribute
- * @param {String} name The attribute name
- * @return {String} The attribute value
- * @deprecated
- */
- getAttributeNS : function(ns, name){
- return this.getAttribute(name, ns);
- },
-
- /**
- * Returns the value of an attribute from the element's underlying DOM node.
- * @param {String} name The attribute name
- * @param {String} namespace (optional) The namespace in which to look for the attribute
- * @return {String} The attribute value
- */
- getAttribute : Ext.isIE ? function(name, ns){
- var d = this.dom,
- type = typeof d[ns + ":" + name];
-
- if(['undefined', 'unknown'].indexOf(type) == -1){
- return d[ns + ":" + name];
- }
- return d[name];
- } : function(name, ns){
- var d = this.dom;
- return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
- },
-
- /**
- * Update the innerHTML of this element
- * @param {String} html The new HTML
- * @return {Ext.Element} this
- */
- update : function(html) {
- if (this.dom) {
- this.dom.innerHTML = html;
- }
- return this;
- }
-};
-
-var ep = El.prototype;
-
-El.addMethods = function(o){
- Ext.apply(ep, o);
-};
-
-/**
- * Appends an event handler (shorthand for {@link #addListener}).
- * @param {String} eventName The name of event to handle.
- * @param {Function} fn The handler function the event invokes.
- * @param {Object} scope (optional) The scope (this
reference) in which the handler function is executed.
- * @param {Object} options (optional) An object containing standard {@link #addListener} options
- * @member Ext.Element
- * @method on
- */
-ep.on = ep.addListener;
-
-/**
- * Removes an event handler from this element (see {@link #removeListener} for additional notes).
- * @param {String} eventName The name of the event from which to remove the handler.
- * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @return {Ext.Element} this
- * @member Ext.Element
- * @method un
- */
-ep.un = ep.removeListener;
-
-/**
- * true to automatically adjust width and height settings for box-model issues (default to true)
- */
-ep.autoBoxAdjust = true;
-
-// private
-var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
- docEl;
-
-/**
- * @private
- */
-
-/**
- * Retrieves Ext.Element objects.
- * 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 Element object (or null if no matching element was found) - * @static - * @member Ext.Element - * @method get - */ -El.get = function(el){ - var ex, - elm, - id; - if(!el){ return null; } - if (typeof el == "string") { // element id - if (!(elm = DOC.getElementById(el))) { - return null; - } - if (EC[el] && EC[el].el) { - ex = EC[el].el; - ex.dom = elm; - } else { - ex = El.addToCache(new El(elm)); - } - return ex; - } else if (el.tagName) { // dom element - if(!(id = el.id)){ - id = Ext.id(el); - } - if (EC[id] && EC[id].el) { - ex = EC[id].el; - ex.dom = el; - } else { - ex = El.addToCache(new El(el)); - } - return ex; - } else if (el instanceof El) { - if(el != docEl){ - // refresh dom element in case no longer valid, - // catch case where it hasn't been appended - - // If an el instance is passed, don't pass to getElementById without some kind of id - if (Ext.isIE && (el.id == undefined || el.id == '')) { - el.dom = el.dom; - } else { - el.dom = DOC.getElementById(el.id) || el.dom; - } - } - return el; - } else if(el.isComposite) { - return el; - } else if(Ext.isArray(el)) { - return El.select(el); - } else if(el == DOC) { - // create a bogus element object representing the document object - if(!docEl){ - var f = function(){}; - f.prototype = El.prototype; - docEl = new f(); - docEl.dom = DOC; - } - return docEl; - } - return null; -}; - -El.addToCache = function(el, id){ - id = id || el.id; - EC[id] = { - el: el, - data: {}, - events: {} - }; - return el; -}; - -// private method for getting and setting element data -El.data = function(el, key, value){ - el = El.get(el); - if (!el) { - return null; - } - var c = EC[el.id].data; - if(arguments.length == 2){ - return c[key]; - }else{ - return (c[key] = value); - } -}; - -// private -// Garbage collection - uncache elements/purge listeners on orphaned elements -// so we don't hold a reference and cause the browser to retain them -function garbageCollect(){ - if(!Ext.enableGarbageCollector){ - clearInterval(El.collectorThreadId); - } else { - var eid, - el, - d, - o; - - for(eid in EC){ - o = EC[eid]; - if(o.skipGC){ - continue; - } - el = o.el; - d = el.dom; - // ------------------------------------------------------- - // Determining what is garbage: - // ------------------------------------------------------- - // !d - // dom node is null, definitely garbage - // ------------------------------------------------------- - // !d.parentNode - // no parentNode == direct orphan, definitely garbage - // ------------------------------------------------------- - // !d.offsetParent && !document.getElementById(eid) - // display none elements have no offsetParent so we will - // also try to look it up by it's id. However, check - // offsetParent first so we don't do unneeded lookups. - // This enables collection of elements that are not orphans - // directly, but somewhere up the line they have an orphan - // parent. - // ------------------------------------------------------- - if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){ - if(Ext.enableListenerCollection){ - Ext.EventManager.removeAll(d); - } - delete EC[eid]; - } - } - // Cleanup IE Object leaks - if (Ext.isIE) { - var t = {}; - for (eid in EC) { - t[eid] = EC[eid]; - } - EC = Ext.elCache = t; - } - } -} -El.collectorThreadId = setInterval(garbageCollect, 30000); - -var flyFn = function(){}; -flyFn.prototype = El.prototype; - -// dom is optional -El.Flyweight = function(dom){ - this.dom = dom; -}; - -El.Flyweight.prototype = new flyFn(); -El.Flyweight.prototype.isFlyweight = true; -El._flyweights = {}; - -/** - *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}
- *Use this to make one-time references to DOM elements which are not going to be accessed again either by - * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get} - * will be more appropriate to take advantage of the caching provided by the Ext.Element class.
- * @param {String/HTMLElement} el The dom node or id - * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts - * (e.g. internally Ext uses "_global") - * @return {Element} The shared Element object (or null if no matching element was found) - * @member Ext.Element - * @method fly - */ -El.fly = function(el, named){ - var ret = null; - named = named || '_global'; - - if (el = Ext.getDom(el)) { - (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; - ret = El._flyweights[named]; - } - return ret; -}; - -/** - * Retrieves Ext.Element objects. - *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.
- * Shorthand of {@link Ext.Element#get} - * @param {Mixed} el The id of the node, a DOM Node or an existing Element. - * @return {Element} The Element object (or null if no matching element was found) - * @member Ext - * @method get - */ -Ext.get = El.get; - -/** - *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}
- *Use this to make one-time references to DOM elements which are not going to be accessed again either by - * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get} - * will be more appropriate to take advantage of the caching provided by the Ext.Element class.
- * @param {String/HTMLElement} el The dom node or id - * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts - * (e.g. internally Ext uses "_global") - * @return {Element} The shared Element object (or null if no matching element was found) - * @member Ext - * @method fly - */ -Ext.fly = El.fly; - -// speedy lookup for elements never to box adjust -var noBoxAdjust = Ext.isStrict ? { - select:1 -} : { - input:1, select:1, textarea:1 -}; -if(Ext.isIE || Ext.isGecko){ - noBoxAdjust['button'] = 1; -} - -})(); -/** - * @class Ext.Element - */ -Ext.Element.addMethods({ - /** - * Stops the specified event(s) from bubbling and optionally prevents the default action - * @param {String/Array} eventName an event / array of events to stop from bubbling - * @param {Boolean} preventDefault (optional) true to prevent the default action too - * @return {Ext.Element} this - */ - swallowEvent : function(eventName, preventDefault){ - var me = this; - function fn(e){ - e.stopPropagation(); - if(preventDefault){ - e.preventDefault(); - } - } - if(Ext.isArray(eventName)){ - Ext.each(eventName, function(e) { - me.on(e, fn); - }); - return me; - } - me.on(eventName, fn); - return me; - }, - - /** - * Create an event handler on this element such that when the event fires and is handled by this element, - * it will be relayed to another object (i.e., fired again as if it originated from that object instead). - * @param {String} eventName The type of event to relay - * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context - * for firing the relayed event - */ - relayEvent : function(eventName, observable){ - this.on(eventName, function(e){ - observable.fireEvent(eventName, e); - }); - }, - - /** - * Removes worthless text nodes - * @param {Boolean} forceReclean (optional) By default the element - * keeps track if it has been cleaned already so - * you can call this over and over. However, if you update the element and - * need to force a reclean, you can pass true. - */ - clean : function(forceReclean){ - var me = this, - dom = me.dom, - n = dom.firstChild, - ni = -1; - - if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){ - return me; - } - - while(n){ - var nx = n.nextSibling; - if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){ - dom.removeChild(n); - }else{ - n.nodeIndex = ++ni; - } - n = nx; - } - Ext.Element.data(dom, 'isCleaned', true); - return me; - }, - - /** - * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object - * parameter as {@link Ext.Updater#update} - * @return {Ext.Element} this - */ - load : function(){ - var um = this.getUpdater(); - um.update.apply(um, arguments); - return this; - }, - - /** - * Gets this element's {@link Ext.Updater Updater} - * @return {Ext.Updater} The Updater - */ - getUpdater : function(){ - return this.updateManager || (this.updateManager = new Ext.Updater(this)); - }, - - /** - * Update the innerHTML of this element, optionally searching for and processing scripts - * @param {String} html The new HTML - * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false) - * @param {Function} callback (optional) For async script loading you can be notified when the update completes - * @return {Ext.Element} this - */ - update : function(html, loadScripts, callback){ - if (!this.dom) { - return this; - } - html = html || ""; - - if(loadScripts !== true){ - this.dom.innerHTML = html; - if(typeof callback == 'function'){ - callback(); - } - return this; - } - - var id = Ext.id(), - dom = this.dom; - - html += ''; - - Ext.lib.Event.onAvailable(id, function(){ - var DOC = document, - hd = DOC.getElementsByTagName("head")[0], - re = /(?: