/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-/**\r
- * @class Ext.DomHelper\r
- * <p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating\r
- * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates\r
- * from your DOM building code.</p>\r
- *\r
- * <p><b><u>DomHelper element specification object</u></b></p>\r
- * <p>A specification object is used when creating elements. Attributes of this object\r
- * are assumed to be element attributes, except for 4 special attributes:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b><tt>tag</tt></b> : <div class="sub-desc">The tag name of the element</div></li>\r
- * <li><b><tt>children</tt></b> : or <tt>cn</tt><div class="sub-desc">An array of the\r
- * same kind of element definition objects to be created and appended. These can be nested\r
- * as deep as you want.</div></li>\r
- * <li><b><tt>cls</tt></b> : <div class="sub-desc">The class attribute of the element.\r
- * This will end up being either the "class" attribute on a HTML fragment or className\r
- * for a DOM node, depending on whether DomHelper is using fragments or DOM.</div></li>\r
- * <li><b><tt>html</tt></b> : <div class="sub-desc">The innerHTML for the element</div></li>\r
- * </ul></div></p>\r
- *\r
- * <p><b><u>Insertion methods</u></b></p>\r
- * <p>Commonly used insertion methods:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b><tt>{@link #append}</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>{@link #insertBefore}</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>{@link #insertAfter}</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>{@link #overwrite}</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>{@link #createTemplate}</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>{@link #insertHtml}</tt></b> : <div class="sub-desc"></div></li>\r
- * </ul></div></p>\r
- *\r
- * <p><b><u>Example</u></b></p>\r
- * <p>This is an example, where an unordered list with 3 children items is appended to an existing\r
- * element with id <tt>'my-div'</tt>:<br>\r
- <pre><code>\r
-var dh = Ext.DomHelper; // create shorthand alias\r
-// specification object\r
-var spec = {\r
- id: 'my-ul',\r
- tag: 'ul',\r
- cls: 'my-list',\r
- // append children after creating\r
- children: [ // may also specify 'cn' instead of 'children'\r
- {tag: 'li', id: 'item0', html: 'List Item 0'},\r
- {tag: 'li', id: 'item1', html: 'List Item 1'},\r
- {tag: 'li', id: 'item2', html: 'List Item 2'}\r
- ]\r
-};\r
-var list = dh.append(\r
- 'my-div', // the context element 'my-div' can either be the id or the actual node\r
- spec // the specification object\r
-);\r
- </code></pre></p>\r
- * <p>Element creation specification parameters in this class may also be passed as an Array of\r
- * specification objects. This can be used to insert multiple sibling nodes into an existing\r
- * container very efficiently. For example, to add more list items to the example above:<pre><code>\r
-dh.append('my-ul', [\r
- {tag: 'li', id: 'item3', html: 'List Item 3'},\r
- {tag: 'li', id: 'item4', html: 'List Item 4'}\r
-]);\r
- * </code></pre></p>\r
- *\r
- * <p><b><u>Templating</u></b></p>\r
- * <p>The real power is in the built-in templating. Instead of creating or appending any elements,\r
- * <tt>{@link #createTemplate}</tt> returns a Template object which can be used over and over to\r
- * insert new elements. Revisiting the example above, we could utilize templating this time:\r
- * <pre><code>\r
-// create the node\r
-var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});\r
-// get template\r
-var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});\r
-\r
-for(var i = 0; i < 5, i++){\r
- tpl.append(list, [i]); // use template to append to the actual node\r
-}\r
- * </code></pre></p>\r
- * <p>An example using a template:<pre><code>\r
-var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';\r
-\r
-var tpl = new Ext.DomHelper.createTemplate(html);\r
-tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);\r
-tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);\r
- * </code></pre></p>\r
- *\r
- * <p>The same example using named parameters:<pre><code>\r
-var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';\r
-\r
-var tpl = new Ext.DomHelper.createTemplate(html);\r
-tpl.append('blog-roll', {\r
- id: 'link1',\r
- url: 'http://www.jackslocum.com/',\r
- text: "Jack's Site"\r
-});\r
-tpl.append('blog-roll', {\r
- id: 'link2',\r
- url: 'http://www.dustindiaz.com/',\r
- text: "Dustin's Site"\r
-});\r
- * </code></pre></p>\r
- *\r
- * <p><b><u>Compiling Templates</u></b></p>\r
- * <p>Templates are applied using regular expressions. The performance is great, but if\r
- * you are adding a bunch of DOM elements using the same template, you can increase\r
- * performance even further by {@link Ext.Template#compile "compiling"} the template.\r
- * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and\r
- * broken up at the different variable points and a dynamic function is created and eval'ed.\r
- * The generated function performs string concatenation of these parts and the passed\r
- * variables instead of using regular expressions.\r
- * <pre><code>\r
-var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';\r
-\r
-var tpl = new Ext.DomHelper.createTemplate(html);\r
-tpl.compile();\r
-\r
-//... use template like normal\r
- * </code></pre></p>\r
- *\r
- * <p><b><u>Performance Boost</u></b></p>\r
- * <p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead\r
- * of DOM can significantly boost performance.</p>\r
- * <p>Element creation specification parameters may also be strings. If {@link #useDom} is <tt>false</tt>,\r
- * then the string is used as innerHTML. If {@link #useDom} is <tt>true</tt>, a string specification\r
- * results in the creation of a text node. Usage:</p>\r
- * <pre><code>\r
-Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance\r
- * </code></pre>\r
- * @singleton\r
- */\r
-Ext.DomHelper = function(){\r
- var tempTableEl = null,\r
- emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,\r
- tableRe = /^table|tbody|tr|td$/i,\r
- pub,\r
- // kill repeat to save bytes\r
- afterbegin = 'afterbegin',\r
- afterend = 'afterend',\r
- beforebegin = 'beforebegin',\r
- beforeend = 'beforeend',\r
- ts = '<table>',\r
- te = '</table>',\r
- tbs = ts+'<tbody>',\r
- tbe = '</tbody>'+te,\r
- trs = tbs + '<tr>',\r
- tre = '</tr>'+tbe;\r
-\r
- // private\r
- function doInsert(el, o, returnElement, pos, sibling, append){\r
- var newNode = pub.insertHtml(pos, Ext.getDom(el), createHtml(o));\r
- return returnElement ? Ext.get(newNode, true) : newNode;\r
- }\r
-\r
- // build as innerHTML where available\r
- function createHtml(o){\r
- var b = '',\r
- attr,\r
- val,\r
- key,\r
- keyVal,\r
- cn;\r
-\r
- if(Ext.isString(o)){\r
- b = o;\r
- } else if (Ext.isArray(o)) {\r
- for (var i=0; i < o.length; i++) {\r
- if(o[i]) {\r
- b += createHtml(o[i]);\r
- }\r
- };\r
- } else {\r
- b += '<' + (o.tag = o.tag || 'div');\r
- Ext.iterate(o, function(attr, val){\r
- if(!/tag|children|cn|html$/i.test(attr)){\r
- if (Ext.isObject(val)) {\r
- b += ' ' + attr + '="';\r
- Ext.iterate(val, function(key, keyVal){\r
- b += key + ':' + keyVal + ';';\r
- });\r
- b += '"';\r
- }else{\r
- b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '="' + val + '"';\r
- }\r
- }\r
- });\r
- // Now either just close the tag or try to add children and close the tag.\r
- if (emptyTags.test(o.tag)) {\r
- b += '/>';\r
- } else {\r
- b += '>';\r
- if ((cn = o.children || o.cn)) {\r
- b += createHtml(cn);\r
- } else if(o.html){\r
- b += o.html;\r
- }\r
- b += '</' + o.tag + '>';\r
- }\r
- }\r
- return b;\r
- }\r
-\r
- function ieTable(depth, s, h, e){\r
- tempTableEl.innerHTML = [s, h, e].join('');\r
- var i = -1,\r
- el = tempTableEl,\r
- ns;\r
- while(++i < depth){\r
- el = el.firstChild;\r
- }\r
-// If the result is multiple siblings, then encapsulate them into one fragment.\r
- if(ns = el.nextSibling){\r
- var df = document.createDocumentFragment();\r
- while(el){\r
- ns = el.nextSibling;\r
- df.appendChild(el);\r
- el = ns;\r
- }\r
- el = df;\r
- }\r
- return el;\r
- }\r
-\r
- /**\r
- * @ignore\r
- * Nasty code for IE's broken table implementation\r
- */\r
- function insertIntoTable(tag, where, el, html) {\r
- var node,\r
- before;\r
-\r
- tempTableEl = tempTableEl || document.createElement('div');\r
-\r
- if(tag == 'td' && (where == afterbegin || where == beforeend) ||\r
- !/td|tr|tbody/i.test(tag) && (where == beforebegin || where == afterend)) {\r
- return;\r
- }\r
- before = where == beforebegin ? el :\r
- where == afterend ? el.nextSibling :\r
- where == afterbegin ? el.firstChild : null;\r
-\r
- if (where == beforebegin || where == afterend) {\r
- el = el.parentNode;\r
- }\r
-\r
- if (tag == 'td' || (tag == 'tr' && (where == beforeend || where == afterbegin))) {\r
- node = ieTable(4, trs, html, tre);\r
- } else if ((tag == 'tbody' && (where == beforeend || where == afterbegin)) ||\r
- (tag == 'tr' && (where == beforebegin || where == afterend))) {\r
- node = ieTable(3, tbs, html, tbe);\r
- } else {\r
- node = ieTable(2, ts, html, te);\r
- }\r
- el.insertBefore(node, before);\r
- return node;\r
- }\r
-\r
-\r
- pub = {\r
- /**\r
- * Returns the markup for the passed Element(s) config.\r
- * @param {Object} o The DOM object spec (and children)\r
- * @return {String}\r
- */\r
- markup : function(o){\r
- return createHtml(o);\r
- },\r
- \r
- /**\r
- * Applies a style specification to an element.\r
- * @param {String/HTMLElement} el The element to apply styles to\r
- * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or\r
- * a function which returns such a specification.\r
- */\r
- applyStyles : function(el, styles){\r
- if(styles){\r
- var i = 0,\r
- len,\r
- style;\r
-\r
- el = Ext.fly(el);\r
- if(Ext.isFunction(styles)){\r
- styles = styles.call();\r
- }\r
- if(Ext.isString(styles)){\r
- styles = styles.trim().split(/\s*(?::|;)\s*/);\r
- for(len = styles.length; i < len;){\r
- el.setStyle(styles[i++], styles[i++]);\r
- }\r
- }else if (Ext.isObject(styles)){\r
- el.setStyle(styles);\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Inserts an HTML fragment into the DOM.\r
- * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.\r
- * @param {HTMLElement} el The context element\r
- * @param {String} html The HTML fragment\r
- * @return {HTMLElement} The new node\r
- */\r
- insertHtml : function(where, el, html){\r
- var hash = {},\r
- hashVal,\r
- setStart,\r
- range,\r
- frag,\r
- rangeEl,\r
- rs;\r
-\r
- where = where.toLowerCase();\r
- // add these here because they are used in both branches of the condition.\r
- hash[beforebegin] = ['BeforeBegin', 'previousSibling'];\r
- hash[afterend] = ['AfterEnd', 'nextSibling'];\r
-\r
- if (el.insertAdjacentHTML) {\r
- if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){\r
- return rs;\r
- }\r
- // add these two to the hash.\r
- hash[afterbegin] = ['AfterBegin', 'firstChild'];\r
- hash[beforeend] = ['BeforeEnd', 'lastChild'];\r
- if ((hashVal = hash[where])) {\r
- el.insertAdjacentHTML(hashVal[0], html);\r
- return el[hashVal[1]];\r
- }\r
- } else {\r
- range = el.ownerDocument.createRange();\r
- setStart = 'setStart' + (/end/i.test(where) ? 'After' : 'Before');\r
- if (hash[where]) {\r
- range[setStart](el);\r
- frag = range.createContextualFragment(html);\r
- el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);\r
- return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];\r
- } else {\r
- rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';\r
- if (el.firstChild) {\r
- range[setStart](el[rangeEl]);\r
- frag = range.createContextualFragment(html);\r
- if(where == afterbegin){\r
- el.insertBefore(frag, el.firstChild);\r
- }else{\r
- el.appendChild(frag);\r
- }\r
- } else {\r
- el.innerHTML = html;\r
- }\r
- return el[rangeEl];\r
- }\r
- }\r
- throw 'Illegal insertion point -> "' + where + '"';\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them before el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- */\r
- insertBefore : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, beforebegin);\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them after el.\r
- * @param {Mixed} el The context element\r
- * @param {Object} o The DOM object spec (and children)\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- */\r
- insertAfter : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, afterend, 'nextSibling');\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them as the first child of el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- */\r
- insertFirst : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, afterbegin, 'firstChild');\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and appends them to el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- */\r
- append : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, beforeend, '', true);\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and overwrites the contents of el with them.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- */\r
- overwrite : function(el, o, returnElement){\r
- el = Ext.getDom(el);\r
- el.innerHTML = createHtml(o);\r
- return returnElement ? Ext.get(el.firstChild) : el.firstChild;\r
- },\r
-\r
- createHtml : createHtml\r
- };\r
- return pub;\r
-}();/**\r
- * @class Ext.DomHelper\r
- */\r
-Ext.apply(Ext.DomHelper,\r
-function(){\r
- var pub,\r
- afterbegin = 'afterbegin',\r
- afterend = 'afterend',\r
- beforebegin = 'beforebegin',\r
- beforeend = 'beforeend';\r
-\r
- // private\r
- function doInsert(el, o, returnElement, pos, sibling, append){\r
- el = Ext.getDom(el);\r
- var newNode;\r
- if (pub.useDom) {\r
- newNode = createDom(o, null);\r
- if (append) {\r
- el.appendChild(newNode);\r
- } else {\r
- (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);\r
- }\r
- } else {\r
- newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));\r
- }\r
- return returnElement ? Ext.get(newNode, true) : newNode;\r
- }\r
-\r
- // build as dom\r
- /** @ignore */\r
- function createDom(o, parentNode){\r
- var el,\r
- doc = document,\r
- useSet,\r
- attr,\r
- val,\r
- cn;\r
-\r
- if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted\r
- el = doc.createDocumentFragment(); // in one shot using a DocumentFragment\r
- Ext.each(o, function(v) {\r
- createDom(v, el);\r
- });\r
- } else if (Ext.isString(o)) { // Allow a string as a child spec.\r
- el = doc.createTextNode(o);\r
- } else {\r
- el = doc.createElement( o.tag || 'div' );\r
- useSet = !!el.setAttribute; // In IE some elements don't have setAttribute\r
- Ext.iterate(o, function(attr, val){\r
- if(!/tag|children|cn|html|style/.test(attr)){\r
- if(attr == 'cls'){\r
- el.className = val;\r
- }else{\r
- if(useSet){\r
- el.setAttribute(attr, val);\r
- }else{\r
- el[attr] = val;\r
- }\r
- }\r
- }\r
- });\r
- Ext.DomHelper.applyStyles(el, o.style);\r
-\r
- if ((cn = o.children || o.cn)) {\r
- createDom(cn, el);\r
- } else if (o.html) {\r
- el.innerHTML = o.html;\r
- }\r
- }\r
- if(parentNode){\r
- parentNode.appendChild(el);\r
- }\r
- return el;\r
- }\r
-\r
- pub = {\r
- /**\r
- * Creates a new Ext.Template from the DOM object spec.\r
- * @param {Object} o The DOM object spec (and children)\r
- * @return {Ext.Template} The new template\r
- */\r
- createTemplate : function(o){\r
- var html = Ext.DomHelper.createHtml(o);\r
- return new Ext.Template(html);\r
- },\r
-\r
- /** True to force the use of DOM instead of html fragments @type Boolean */\r
- useDom : false,\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them before el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- * @hide (repeat)\r
- */\r
- insertBefore : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, beforebegin);\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them after el.\r
- * @param {Mixed} el The context element\r
- * @param {Object} o The DOM object spec (and children)\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- * @hide (repeat)\r
- */\r
- insertAfter : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, afterend, 'nextSibling');\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and inserts them as the first child of el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- * @hide (repeat)\r
- */\r
- insertFirst : function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, afterbegin, 'firstChild');\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) and appends them to el.\r
- * @param {Mixed} el The context element\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
- * @return {HTMLElement/Ext.Element} The new node\r
- * @hide (repeat)\r
- */\r
- append: function(el, o, returnElement){\r
- return doInsert(el, o, returnElement, beforeend, '', true);\r
- },\r
-\r
- /**\r
- * Creates new DOM element(s) without inserting them to the document.\r
- * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
- * @return {HTMLElement} The new uninserted node\r
- */\r
- createDom: createDom\r
- };\r
- return pub;\r
+/**
+ * @class Ext.DomHelper
+ * <p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
+ * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
+ * from your DOM building code.</p>
+ *
+ * <p><b><u>DomHelper element specification object</u></b></p>
+ * <p>A specification object is used when creating elements. Attributes of this object
+ * are assumed to be element attributes, except for 4 special attributes:
+ * <div class="mdetail-params"><ul>
+ * <li><b><tt>tag</tt></b> : <div class="sub-desc">The tag name of the element</div></li>
+ * <li><b><tt>children</tt></b> : or <tt>cn</tt><div class="sub-desc">An array of the
+ * same kind of element definition objects to be created and appended. These can be nested
+ * as deep as you want.</div></li>
+ * <li><b><tt>cls</tt></b> : <div class="sub-desc">The class attribute of the element.
+ * This will end up being either the "class" attribute on a HTML fragment or className
+ * for a DOM node, depending on whether DomHelper is using fragments or DOM.</div></li>
+ * <li><b><tt>html</tt></b> : <div class="sub-desc">The innerHTML for the element</div></li>
+ * </ul></div></p>
+ *
+ * <p><b><u>Insertion methods</u></b></p>
+ * <p>Commonly used insertion methods:
+ * <div class="mdetail-params"><ul>
+ * <li><b><tt>{@link #append}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>{@link #insertBefore}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>{@link #insertAfter}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>{@link #overwrite}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>{@link #createTemplate}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>{@link #insertHtml}</tt></b> : <div class="sub-desc"></div></li>
+ * </ul></div></p>
+ *
+ * <p><b><u>Example</u></b></p>
+ * <p>This is an example, where an unordered list with 3 children items is appended to an existing
+ * element with id <tt>'my-div'</tt>:<br>
+ <pre><code>
+var dh = Ext.DomHelper; // create shorthand alias
+// specification object
+var spec = {
+ id: 'my-ul',
+ tag: 'ul',
+ cls: 'my-list',
+ // append children after creating
+ children: [ // may also specify 'cn' instead of 'children'
+ {tag: 'li', id: 'item0', html: 'List Item 0'},
+ {tag: 'li', id: 'item1', html: 'List Item 1'},
+ {tag: 'li', id: 'item2', html: 'List Item 2'}
+ ]
+};
+var list = dh.append(
+ 'my-div', // the context element 'my-div' can either be the id or the actual node
+ spec // the specification object
+);
+ </code></pre></p>
+ * <p>Element creation specification parameters in this class may also be passed as an Array of
+ * specification objects. This can be used to insert multiple sibling nodes into an existing
+ * container very efficiently. For example, to add more list items to the example above:<pre><code>
+dh.append('my-ul', [
+ {tag: 'li', id: 'item3', html: 'List Item 3'},
+ {tag: 'li', id: 'item4', html: 'List Item 4'}
+]);
+ * </code></pre></p>
+ *
+ * <p><b><u>Templating</u></b></p>
+ * <p>The real power is in the built-in templating. Instead of creating or appending any elements,
+ * <tt>{@link #createTemplate}</tt> returns a Template object which can be used over and over to
+ * insert new elements. Revisiting the example above, we could utilize templating this time:
+ * <pre><code>
+// create the node
+var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
+// get template
+var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
+
+for(var i = 0; i < 5, i++){
+ tpl.append(list, [i]); // use template to append to the actual node
+}
+ * </code></pre></p>
+ * <p>An example using a template:<pre><code>
+var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
+tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
+ * </code></pre></p>
+ *
+ * <p>The same example using named parameters:<pre><code>
+var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.append('blog-roll', {
+ id: 'link1',
+ url: 'http://www.jackslocum.com/',
+ text: "Jack's Site"
+});
+tpl.append('blog-roll', {
+ id: 'link2',
+ url: 'http://www.dustindiaz.com/',
+ text: "Dustin's Site"
+});
+ * </code></pre></p>
+ *
+ * <p><b><u>Compiling Templates</u></b></p>
+ * <p>Templates are applied using regular expressions. The performance is great, but if
+ * you are adding a bunch of DOM elements using the same template, you can increase
+ * performance even further by {@link Ext.Template#compile "compiling"} the template.
+ * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and
+ * broken up at the different variable points and a dynamic function is created and eval'ed.
+ * The generated function performs string concatenation of these parts and the passed
+ * variables instead of using regular expressions.
+ * <pre><code>
+var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.compile();
+
+//... use template like normal
+ * </code></pre></p>
+ *
+ * <p><b><u>Performance Boost</u></b></p>
+ * <p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
+ * of DOM can significantly boost performance.</p>
+ * <p>Element creation specification parameters may also be strings. If {@link #useDom} is <tt>false</tt>,
+ * then the string is used as innerHTML. If {@link #useDom} is <tt>true</tt>, a string specification
+ * results in the creation of a text node. Usage:</p>
+ * <pre><code>
+Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
+ * </code></pre>
+ * @singleton
+ */
+Ext.DomHelper = function(){
+ var tempTableEl = null,
+ emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
+ tableRe = /^table|tbody|tr|td$/i,
+ pub,
+ // kill repeat to save bytes
+ afterbegin = 'afterbegin',
+ afterend = 'afterend',
+ beforebegin = 'beforebegin',
+ beforeend = 'beforeend',
+ ts = '<table>',
+ te = '</table>',
+ tbs = ts+'<tbody>',
+ tbe = '</tbody>'+te,
+ trs = tbs + '<tr>',
+ tre = '</tr>'+tbe;
+
+ // private
+ function doInsert(el, o, returnElement, pos, sibling, append){
+ var newNode = pub.insertHtml(pos, Ext.getDom(el), createHtml(o));
+ return returnElement ? Ext.get(newNode, true) : newNode;
+ }
+
+ // build as innerHTML where available
+ function createHtml(o){
+ var b = '',
+ attr,
+ val,
+ key,
+ keyVal,
+ cn;
+
+ if(Ext.isString(o)){
+ b = o;
+ } else if (Ext.isArray(o)) {
+ for (var i=0; i < o.length; i++) {
+ if(o[i]) {
+ b += createHtml(o[i]);
+ }
+ };
+ } else {
+ b += '<' + (o.tag = o.tag || 'div');
+ Ext.iterate(o, function(attr, val){
+ if(!/tag|children|cn|html$/i.test(attr)){
+ if (Ext.isObject(val)) {
+ b += ' ' + attr + '="';
+ Ext.iterate(val, function(key, keyVal){
+ b += key + ':' + keyVal + ';';
+ });
+ b += '"';
+ }else{
+ b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '="' + val + '"';
+ }
+ }
+ });
+ // Now either just close the tag or try to add children and close the tag.
+ if (emptyTags.test(o.tag)) {
+ b += '/>';
+ } else {
+ b += '>';
+ if ((cn = o.children || o.cn)) {
+ b += createHtml(cn);
+ } else if(o.html){
+ b += o.html;
+ }
+ b += '</' + o.tag + '>';
+ }
+ }
+ return b;
+ }
+
+ function ieTable(depth, s, h, e){
+ tempTableEl.innerHTML = [s, h, e].join('');
+ var i = -1,
+ el = tempTableEl,
+ ns;
+ while(++i < depth){
+ el = el.firstChild;
+ }
+// If the result is multiple siblings, then encapsulate them into one fragment.
+ if(ns = el.nextSibling){
+ var df = document.createDocumentFragment();
+ while(el){
+ ns = el.nextSibling;
+ df.appendChild(el);
+ el = ns;
+ }
+ el = df;
+ }
+ return el;
+ }
+
+ /**
+ * @ignore
+ * Nasty code for IE's broken table implementation
+ */
+ function insertIntoTable(tag, where, el, html) {
+ var node,
+ before;
+
+ tempTableEl = tempTableEl || document.createElement('div');
+
+ if(tag == 'td' && (where == afterbegin || where == beforeend) ||
+ !/td|tr|tbody/i.test(tag) && (where == beforebegin || where == afterend)) {
+ return;
+ }
+ before = where == beforebegin ? el :
+ where == afterend ? el.nextSibling :
+ where == afterbegin ? el.firstChild : null;
+
+ if (where == beforebegin || where == afterend) {
+ el = el.parentNode;
+ }
+
+ if (tag == 'td' || (tag == 'tr' && (where == beforeend || where == afterbegin))) {
+ node = ieTable(4, trs, html, tre);
+ } else if ((tag == 'tbody' && (where == beforeend || where == afterbegin)) ||
+ (tag == 'tr' && (where == beforebegin || where == afterend))) {
+ node = ieTable(3, tbs, html, tbe);
+ } else {
+ node = ieTable(2, ts, html, te);
+ }
+ el.insertBefore(node, before);
+ return node;
+ }
+
+
+ pub = {
+ /**
+ * Returns the markup for the passed Element(s) config.
+ * @param {Object} o The DOM object spec (and children)
+ * @return {String}
+ */
+ markup : function(o){
+ return createHtml(o);
+ },
+
+ /**
+ * Applies a style specification to an element.
+ * @param {String/HTMLElement} el The element to apply styles to
+ * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
+ * a function which returns such a specification.
+ */
+ applyStyles : function(el, styles){
+ if(styles){
+ var i = 0,
+ len,
+ style;
+
+ el = Ext.fly(el);
+ if(Ext.isFunction(styles)){
+ styles = styles.call();
+ }
+ if(Ext.isString(styles)){
+ styles = styles.trim().split(/\s*(?::|;)\s*/);
+ for(len = styles.length; i < len;){
+ el.setStyle(styles[i++], styles[i++]);
+ }
+ }else if (Ext.isObject(styles)){
+ el.setStyle(styles);
+ }
+ }
+ },
+
+ /**
+ * Inserts an HTML fragment into the DOM.
+ * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+ * @param {HTMLElement} el The context element
+ * @param {String} html The HTML fragment
+ * @return {HTMLElement} The new node
+ */
+ insertHtml : function(where, el, html){
+ var hash = {},
+ hashVal,
+ setStart,
+ range,
+ frag,
+ rangeEl,
+ rs;
+
+ where = where.toLowerCase();
+ // add these here because they are used in both branches of the condition.
+ hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
+ hash[afterend] = ['AfterEnd', 'nextSibling'];
+
+ if (el.insertAdjacentHTML) {
+ if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
+ return rs;
+ }
+ // add these two to the hash.
+ hash[afterbegin] = ['AfterBegin', 'firstChild'];
+ hash[beforeend] = ['BeforeEnd', 'lastChild'];
+ if ((hashVal = hash[where])) {
+ el.insertAdjacentHTML(hashVal[0], html);
+ return el[hashVal[1]];
+ }
+ } else {
+ range = el.ownerDocument.createRange();
+ setStart = 'setStart' + (/end/i.test(where) ? 'After' : 'Before');
+ if (hash[where]) {
+ range[setStart](el);
+ frag = range.createContextualFragment(html);
+ el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);
+ return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];
+ } else {
+ rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';
+ if (el.firstChild) {
+ range[setStart](el[rangeEl]);
+ frag = range.createContextualFragment(html);
+ if(where == afterbegin){
+ el.insertBefore(frag, el.firstChild);
+ }else{
+ el.appendChild(frag);
+ }
+ } else {
+ el.innerHTML = html;
+ }
+ return el[rangeEl];
+ }
+ }
+ throw 'Illegal insertion point -> "' + where + '"';
+ },
+
+ /**
+ * Creates new DOM element(s) and inserts them before el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ */
+ insertBefore : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, beforebegin);
+ },
+
+ /**
+ * Creates new DOM element(s) and inserts them after el.
+ * @param {Mixed} el The context element
+ * @param {Object} o The DOM object spec (and children)
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ */
+ insertAfter : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, afterend, 'nextSibling');
+ },
+
+ /**
+ * Creates new DOM element(s) and inserts them as the first child of el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ */
+ insertFirst : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, afterbegin, 'firstChild');
+ },
+
+ /**
+ * Creates new DOM element(s) and appends them to el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ */
+ append : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, beforeend, '', true);
+ },
+
+ /**
+ * Creates new DOM element(s) and overwrites the contents of el with them.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ */
+ overwrite : function(el, o, returnElement){
+ el = Ext.getDom(el);
+ el.innerHTML = createHtml(o);
+ return returnElement ? Ext.get(el.firstChild) : el.firstChild;
+ },
+
+ createHtml : createHtml
+ };
+ return pub;
+}();/**
+ * @class Ext.DomHelper
+ */
+Ext.apply(Ext.DomHelper,
+function(){
+ var pub,
+ afterbegin = 'afterbegin',
+ afterend = 'afterend',
+ beforebegin = 'beforebegin',
+ beforeend = 'beforeend';
+
+ // private
+ function doInsert(el, o, returnElement, pos, sibling, append){
+ el = Ext.getDom(el);
+ var newNode;
+ if (pub.useDom) {
+ newNode = createDom(o, null);
+ if (append) {
+ el.appendChild(newNode);
+ } else {
+ (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
+ }
+ } else {
+ newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
+ }
+ return returnElement ? Ext.get(newNode, true) : newNode;
+ }
+
+ // build as dom
+ /** @ignore */
+ function createDom(o, parentNode){
+ var el,
+ doc = document,
+ useSet,
+ attr,
+ val,
+ cn;
+
+ if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted
+ el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
+ Ext.each(o, function(v) {
+ createDom(v, el);
+ });
+ } else if (Ext.isString(o)) { // Allow a string as a child spec.
+ el = doc.createTextNode(o);
+ } else {
+ el = doc.createElement( o.tag || 'div' );
+ useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
+ Ext.iterate(o, function(attr, val){
+ if(!/tag|children|cn|html|style/.test(attr)){
+ if(attr == 'cls'){
+ el.className = val;
+ }else{
+ if(useSet){
+ el.setAttribute(attr, val);
+ }else{
+ el[attr] = val;
+ }
+ }
+ }
+ });
+ Ext.DomHelper.applyStyles(el, o.style);
+
+ if ((cn = o.children || o.cn)) {
+ createDom(cn, el);
+ } else if (o.html) {
+ el.innerHTML = o.html;
+ }
+ }
+ if(parentNode){
+ parentNode.appendChild(el);
+ }
+ return el;
+ }
+
+ pub = {
+ /**
+ * Creates a new Ext.Template from the DOM object spec.
+ * @param {Object} o The DOM object spec (and children)
+ * @return {Ext.Template} The new template
+ */
+ createTemplate : function(o){
+ var html = Ext.DomHelper.createHtml(o);
+ return new Ext.Template(html);
+ },
+
+ /** True to force the use of DOM instead of html fragments @type Boolean */
+ useDom : false,
+
+ /**
+ * Creates new DOM element(s) and inserts them before el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ * @hide (repeat)
+ */
+ insertBefore : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, beforebegin);
+ },
+
+ /**
+ * Creates new DOM element(s) and inserts them after el.
+ * @param {Mixed} el The context element
+ * @param {Object} o The DOM object spec (and children)
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ * @hide (repeat)
+ */
+ insertAfter : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, afterend, 'nextSibling');
+ },
+
+ /**
+ * Creates new DOM element(s) and inserts them as the first child of el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ * @hide (repeat)
+ */
+ insertFirst : function(el, o, returnElement){
+ return doInsert(el, o, returnElement, afterbegin, 'firstChild');
+ },
+
+ /**
+ * Creates new DOM element(s) and appends them to el.
+ * @param {Mixed} el The context element
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
+ * @hide (repeat)
+ */
+ append: function(el, o, returnElement){
+ return doInsert(el, o, returnElement, beforeend, '', true);
+ },
+
+ /**
+ * Creates new DOM element(s) without inserting them to the document.
+ * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+ * @return {HTMLElement} The new uninserted node
+ */
+ createDom: createDom
+ };
+ return pub;
}());/**
* @class Ext.Template
* <p>Represents an HTML fragment template. Templates may be {@link #compile precompiled}
Ext.Template.from = function(el, config){
el = Ext.getDom(el);
return new Ext.Template(el.value || el.innerHTML, config || '');
-};/**\r
- * @class Ext.Template\r
- */\r
-Ext.apply(Ext.Template.prototype, {\r
- /**\r
- * @cfg {Boolean} disableFormats Specify <tt>true</tt> to disable format\r
- * functions in the template. If the template does not contain\r
- * {@link Ext.util.Format format functions}, setting <code>disableFormats</code>\r
- * to true will reduce <code>{@link #apply}</code> time. Defaults to <tt>false</tt>.\r
- * <pre><code>\r
-var t = new Ext.Template(\r
- '<div name="{id}">',\r
- '<span class="{cls}">{name} {value}</span>',\r
- '</div>',\r
- {\r
- compiled: true, // {@link #compile} immediately\r
- disableFormats: true // reduce <code>{@link #apply}</code> time since no formatting\r
- } \r
-);\r
- * </code></pre>\r
- * For a list of available format functions, see {@link Ext.util.Format}.\r
- */\r
- disableFormats : false, \r
- /**\r
- * See <code>{@link #disableFormats}</code>.\r
- * @type Boolean\r
- * @property disableFormats\r
- */\r
-\r
- /**\r
- * The regular expression used to match template variables\r
- * @type RegExp\r
- * @property\r
- * @hide repeat doc\r
- */\r
- re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,\r
-\r
- /**\r
- * Returns an HTML fragment of this template with the specified values applied.\r
- * @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'})\r
- * @return {String} The HTML fragment\r
- * @hide repeat doc\r
- */\r
- applyTemplate : function(values){\r
- var me = this,\r
- useF = me.disableFormats !== true,\r
- fm = Ext.util.Format, \r
- tpl = me; \r
- \r
- if(me.compiled){\r
- return me.compiled(values);\r
- }\r
- function fn(m, name, format, args){\r
- if (format && useF) {\r
- if (format.substr(0, 5) == "this.") {\r
- return tpl.call(format.substr(5), values[name], values);\r
- } else {\r
- if (args) {\r
- // quoted values are required for strings in compiled templates,\r
- // but for non compiled we need to strip them\r
- // quoted reversed for jsmin\r
- var re = /^\s*['"](.*)["']\s*$/;\r
- args = args.split(',');\r
- for(var i = 0, len = args.length; i < len; i++){\r
- args[i] = args[i].replace(re, "$1");\r
- }\r
- args = [values[name]].concat(args);\r
- } else {\r
- args = [values[name]];\r
- }\r
- return fm[format].apply(fm, args);\r
- }\r
- } else {\r
- return values[name] !== undefined ? values[name] : "";\r
- }\r
- }\r
- return me.html.replace(me.re, fn);\r
- },\r
- \r
- /**\r
- * Compiles the template into an internal function, eliminating the RegEx overhead.\r
- * @return {Ext.Template} this\r
- * @hide repeat doc\r
- */\r
- compile : function(){\r
- var me = this,\r
- fm = Ext.util.Format,\r
- useF = me.disableFormats !== true,\r
- sep = Ext.isGecko ? "+" : ",",\r
- body;\r
- \r
- function fn(m, name, format, args){\r
- if(format && useF){\r
- args = args ? ',' + args : "";\r
- if(format.substr(0, 5) != "this."){\r
- format = "fm." + format + '(';\r
- }else{\r
- format = 'this.call("'+ format.substr(5) + '", ';\r
- args = ", values";\r
- }\r
- }else{\r
- args= ''; format = "(values['" + name + "'] == undefined ? '' : ";\r
- }\r
- return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";\r
- }\r
- \r
- // branched to use + in gecko and [].join() in others\r
- if(Ext.isGecko){\r
- body = "this.compiled = function(values){ return '" +\r
- me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +\r
- "';};";\r
- }else{\r
- body = ["this.compiled = function(values){ return ['"];\r
- body.push(me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));\r
- body.push("'].join('');};");\r
- body = body.join('');\r
- }\r
- eval(body);\r
- return me;\r
- },\r
- \r
- // private function used to call members\r
- call : function(fnName, value, allValues){\r
- return this[fnName](value, allValues);\r
- }\r
-});\r
-Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; /*\r
- * This is code is also distributed under MIT license for use\r
- * with jQuery and prototype JavaScript libraries.\r
- */\r
-/**\r
- * @class Ext.DomQuery\r
-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).\r
-<p>\r
-DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>\r
-\r
-<p>\r
-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.\r
-</p>\r
-<h4>Element Selectors:</h4>\r
-<ul class="list">\r
- <li> <b>*</b> any element</li>\r
- <li> <b>E</b> an element with the tag E</li>\r
- <li> <b>E F</b> All descendent elements of E that have the tag F</li>\r
- <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>\r
- <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>\r
- <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>\r
-</ul>\r
-<h4>Attribute Selectors:</h4>\r
-<p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>\r
-<ul class="list">\r
- <li> <b>E[foo]</b> has an attribute "foo"</li>\r
- <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>\r
- <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>\r
- <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>\r
- <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>\r
- <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>\r
- <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>\r
-</ul>\r
-<h4>Pseudo Classes:</h4>\r
-<ul class="list">\r
- <li> <b>E:first-child</b> E is the first child of its parent</li>\r
- <li> <b>E:last-child</b> E is the last child of its parent</li>\r
- <li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>\r
- <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>\r
- <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>\r
- <li> <b>E:only-child</b> E is the only child of its parent</li>\r
- <li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>\r
- <li> <b>E:first</b> the first E in the resultset</li>\r
- <li> <b>E:last</b> the last E in the resultset</li>\r
- <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>\r
- <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>\r
- <li> <b>E:even</b> shortcut for :nth-child(even)</li>\r
- <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>\r
- <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>\r
- <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>\r
- <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>\r
- <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>\r
- <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>\r
- <li> <b>E:any(S1|S2|S2)</b> an E element which matches any of the simple selectors S1, S2 or S3//\\</li>\r
-</ul>\r
-<h4>CSS Value Selectors:</h4>\r
-<ul class="list">\r
- <li> <b>E{display=none}</b> css value "display" that equals "none"</li>\r
- <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>\r
- <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>\r
- <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>\r
- <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>\r
- <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>\r
-</ul>\r
- * @singleton\r
- */\r
-Ext.DomQuery = function(){\r
- var cache = {}, \r
- simpleCache = {}, \r
- valueCache = {},\r
- nonSpace = /\S/,\r
- trimRe = /^\s+|\s+$/g,\r
- tplRe = /\{(\d+)\}/g,\r
- modeRe = /^(\s?[\/>+~]\s?|\s|$)/,\r
- tagTokenRe = /^(#)?([\w-\*]+)/,\r
- nthRe = /(\d*)n\+?(\d*)/, \r
- nthRe2 = /\D/,\r
- // This is for IE MSXML which does not support expandos.\r
- // IE runs the same speed using setAttribute, however FF slows way down\r
- // and Safari completely fails so they need to continue to use expandos.\r
- isIE = window.ActiveXObject ? true : false,\r
- key = 30803;\r
- \r
- // this eval is stop the compressor from\r
- // renaming the variable to something shorter\r
- eval("var batch = 30803;"); \r
-\r
- // Retrieve the child node from a particular\r
- // parent at the specified index.\r
- function child(parent, index){\r
- var i = 0,\r
- n = parent.firstChild;\r
- while(n){\r
- if(n.nodeType == 1){\r
- if(++i == index){\r
- return n;\r
- }\r
- }\r
- n = n.nextSibling;\r
- }\r
- return null;\r
- }\r
-\r
- // retrieve the next element node\r
- function next(n){ \r
- while((n = n.nextSibling) && n.nodeType != 1);\r
- return n;\r
- }\r
-\r
- // retrieve the previous element node \r
- function prev(n){\r
- while((n = n.previousSibling) && n.nodeType != 1);\r
- return n;\r
- }\r
-\r
- // Mark each child node with a nodeIndex skipping and\r
- // removing empty text nodes.\r
- function children(parent){\r
- var n = parent.firstChild,\r
- nodeIndex = -1,\r
- nextNode;\r
- while(n){\r
- nextNode = n.nextSibling;\r
- // clean worthless empty nodes.\r
- if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){\r
- parent.removeChild(n);\r
- }else{\r
- // add an expando nodeIndex\r
- n.nodeIndex = ++nodeIndex;\r
- }\r
- n = nextNode;\r
- }\r
- return this;\r
- }\r
-\r
-\r
- // nodeSet - array of nodes\r
- // cls - CSS Class\r
- function byClassName(nodeSet, cls){\r
- if(!cls){\r
- return nodeSet;\r
- }\r
- var result = [], ri = -1;\r
- for(var i = 0, ci; ci = nodeSet[i]; i++){\r
- if((' '+ci.className+' ').indexOf(cls) != -1){\r
- result[++ri] = ci;\r
- }\r
- }\r
- return result;\r
- };\r
-\r
- function attrValue(n, attr){\r
- // if its an array, use the first node.\r
- if(!n.tagName && typeof n.length != "undefined"){\r
- n = n[0];\r
- }\r
- if(!n){\r
- return null;\r
- }\r
-\r
- if(attr == "for"){\r
- return n.htmlFor;\r
- }\r
- if(attr == "class" || attr == "className"){\r
- return n.className;\r
- }\r
- return n.getAttribute(attr) || n[attr];\r
-\r
- };\r
-\r
-\r
- // ns - nodes\r
- // mode - false, /, >, +, ~\r
- // tagName - defaults to "*"\r
- function getNodes(ns, mode, tagName){\r
- var result = [], ri = -1, cs;\r
- if(!ns){\r
- return result;\r
- }\r
- tagName = tagName || "*";\r
- // convert to array\r
- if(typeof ns.getElementsByTagName != "undefined"){\r
- ns = [ns];\r
- }\r
- \r
- // no mode specified, grab all elements by tagName\r
- // at any depth\r
- if(!mode){\r
- for(var i = 0, ni; ni = ns[i]; i++){\r
- cs = ni.getElementsByTagName(tagName);\r
- for(var j = 0, ci; ci = cs[j]; j++){\r
- result[++ri] = ci;\r
- }\r
- }\r
- // Direct Child mode (/ or >)\r
- // E > F or E/F all direct children elements of E that have the tag \r
- } else if(mode == "/" || mode == ">"){\r
- var utag = tagName.toUpperCase();\r
- for(var i = 0, ni, cn; ni = ns[i]; i++){\r
- cn = ni.childNodes;\r
- for(var j = 0, cj; cj = cn[j]; j++){\r
- if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){\r
- result[++ri] = cj;\r
- }\r
- }\r
- }\r
- // Immediately Preceding mode (+)\r
- // E + F all elements with the tag F that are immediately preceded by an element with the tag E\r
- }else if(mode == "+"){\r
- var utag = tagName.toUpperCase();\r
- for(var i = 0, n; n = ns[i]; i++){\r
- while((n = n.nextSibling) && n.nodeType != 1);\r
- if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){\r
- result[++ri] = n;\r
- }\r
- }\r
- // Sibling mode (~)\r
- // E ~ F all elements with the tag F that are preceded by a sibling element with the tag E\r
- }else if(mode == "~"){\r
- var utag = tagName.toUpperCase();\r
- for(var i = 0, n; n = ns[i]; i++){\r
- while((n = n.nextSibling)){\r
- if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){\r
- result[++ri] = n;\r
- }\r
- }\r
- }\r
- }\r
- return result;\r
- }\r
-\r
- function concat(a, b){\r
- if(b.slice){\r
- return a.concat(b);\r
- }\r
- for(var i = 0, l = b.length; i < l; i++){\r
- a[a.length] = b[i];\r
- }\r
- return a;\r
- }\r
-\r
- function byTag(cs, tagName){\r
- if(cs.tagName || cs == document){\r
- cs = [cs];\r
- }\r
- if(!tagName){\r
- return cs;\r
- }\r
- var result = [], ri = -1;\r
- tagName = tagName.toLowerCase();\r
- for(var i = 0, ci; ci = cs[i]; i++){\r
- if(ci.nodeType == 1 && ci.tagName.toLowerCase() == tagName){\r
- result[++ri] = ci;\r
- }\r
- }\r
- return result;\r
- }\r
-\r
- function byId(cs, id){\r
- if(cs.tagName || cs == document){\r
- cs = [cs];\r
- }\r
- if(!id){\r
- return cs;\r
- }\r
- var result = [], ri = -1;\r
- for(var i = 0, ci; ci = cs[i]; i++){\r
- if(ci && ci.id == id){\r
- result[++ri] = ci;\r
- return result;\r
- }\r
- }\r
- return result;\r
- }\r
-\r
- // operators are =, !=, ^=, $=, *=, %=, |= and ~=\r
- // custom can be "{"\r
- function byAttribute(cs, attr, value, op, custom){\r
- var result = [], \r
- ri = -1, \r
- useGetStyle = custom == "{", \r
- fn = Ext.DomQuery.operators[op], \r
- a, \r
- innerHTML;\r
- for(var i = 0, ci; ci = cs[i]; i++){\r
- // skip non-element nodes.\r
- if(ci.nodeType != 1){\r
- continue;\r
- }\r
- \r
- innerHTML = ci.innerHTML;\r
- // we only need to change the property names if we're dealing with html nodes, not XML\r
- if(innerHTML !== null && innerHTML !== undefined){\r
- if(useGetStyle){\r
- a = Ext.DomQuery.getStyle(ci, attr);\r
- } else if (attr == "class" || attr == "className"){\r
- a = ci.className;\r
- } else if (attr == "for"){\r
- a = ci.htmlFor;\r
- } else if (attr == "href"){\r
- // getAttribute href bug\r
- // http://www.glennjones.net/Post/809/getAttributehrefbug.htm\r
- a = ci.getAttribute("href", 2);\r
- } else{\r
- a = ci.getAttribute(attr);\r
- }\r
- }else{\r
- a = ci.getAttribute(attr);\r
- }\r
- if((fn && fn(a, value)) || (!fn && a)){\r
- result[++ri] = ci;\r
- }\r
- }\r
- return result;\r
- }\r
-\r
- function byPseudo(cs, name, value){\r
- return Ext.DomQuery.pseudos[name](cs, value);\r
- }\r
-\r
- function nodupIEXml(cs){\r
- var d = ++key, \r
- r;\r
- cs[0].setAttribute("_nodup", d);\r
- r = [cs[0]];\r
- for(var i = 1, len = cs.length; i < len; i++){\r
- var c = cs[i];\r
- if(!c.getAttribute("_nodup") != d){\r
- c.setAttribute("_nodup", d);\r
- r[r.length] = c;\r
- }\r
- }\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- cs[i].removeAttribute("_nodup");\r
- }\r
- return r;\r
- }\r
-\r
- function nodup(cs){\r
- if(!cs){\r
- return [];\r
- }\r
- var len = cs.length, c, i, r = cs, cj, ri = -1;\r
- if(!len || typeof cs.nodeType != "undefined" || len == 1){\r
- return cs;\r
- }\r
- if(isIE && typeof cs[0].selectSingleNode != "undefined"){\r
- return nodupIEXml(cs);\r
- }\r
- var d = ++key;\r
- cs[0]._nodup = d;\r
- for(i = 1; c = cs[i]; i++){\r
- if(c._nodup != d){\r
- c._nodup = d;\r
- }else{\r
- r = [];\r
- for(var j = 0; j < i; j++){\r
- r[++ri] = cs[j];\r
- }\r
- for(j = i+1; cj = cs[j]; j++){\r
- if(cj._nodup != d){\r
- cj._nodup = d;\r
- r[++ri] = cj;\r
- }\r
- }\r
- return r;\r
- }\r
- }\r
- return r;\r
- }\r
-\r
- function quickDiffIEXml(c1, c2){\r
- var d = ++key,\r
- r = [];\r
- for(var i = 0, len = c1.length; i < len; i++){\r
- c1[i].setAttribute("_qdiff", d);\r
- } \r
- for(var i = 0, len = c2.length; i < len; i++){\r
- if(c2[i].getAttribute("_qdiff") != d){\r
- r[r.length] = c2[i];\r
- }\r
- }\r
- for(var i = 0, len = c1.length; i < len; i++){\r
- c1[i].removeAttribute("_qdiff");\r
- }\r
- return r;\r
- }\r
-\r
- function quickDiff(c1, c2){\r
- var len1 = c1.length,\r
- d = ++key,\r
- r = [];\r
- if(!len1){\r
- return c2;\r
- }\r
- if(isIE && typeof c1[0].selectSingleNode != "undefined"){\r
- return quickDiffIEXml(c1, c2);\r
- } \r
- for(var i = 0; i < len1; i++){\r
- c1[i]._qdiff = d;\r
- } \r
- for(var i = 0, len = c2.length; i < len; i++){\r
- if(c2[i]._qdiff != d){\r
- r[r.length] = c2[i];\r
- }\r
- }\r
- return r;\r
- }\r
-\r
- function quickId(ns, mode, root, id){\r
- if(ns == root){\r
- var d = root.ownerDocument || root;\r
- return d.getElementById(id);\r
- }\r
- ns = getNodes(ns, mode, "*");\r
- return byId(ns, id);\r
- }\r
-\r
- return {\r
- getStyle : function(el, name){\r
- return Ext.fly(el).getStyle(name);\r
- },\r
- /**\r
- * Compiles a selector/xpath query into a reusable function. The returned function\r
- * takes one parameter "root" (optional), which is the context node from where the query should start.\r
- * @param {String} selector The selector/xpath query\r
- * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match\r
- * @return {Function}\r
- */\r
- compile : function(path, type){\r
- type = type || "select";\r
-\r
- // setup fn preamble\r
- var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],\r
- mode, \r
- lastPath,\r
- matchers = Ext.DomQuery.matchers,\r
- matchersLn = matchers.length,\r
- modeMatch,\r
- // accept leading mode switch\r
- lmode = path.match(modeRe);\r
- \r
- if(lmode && lmode[1]){\r
- fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';\r
- path = path.replace(lmode[1], "");\r
- }\r
- \r
- // strip leading slashes\r
- while(path.substr(0, 1)=="/"){\r
- path = path.substr(1);\r
- }\r
-\r
- while(path && lastPath != path){\r
- lastPath = path;\r
- var tokenMatch = path.match(tagTokenRe);\r
- if(type == "select"){\r
- if(tokenMatch){\r
- // ID Selector\r
- if(tokenMatch[1] == "#"){\r
- fn[fn.length] = 'n = quickId(n, mode, root, "'+tokenMatch[2]+'");'; \r
- }else{\r
- fn[fn.length] = 'n = getNodes(n, mode, "'+tokenMatch[2]+'");';\r
- }\r
- path = path.replace(tokenMatch[0], "");\r
- }else if(path.substr(0, 1) != '@'){\r
- fn[fn.length] = 'n = getNodes(n, mode, "*");';\r
- }\r
- // type of "simple"\r
- }else{\r
- if(tokenMatch){\r
- if(tokenMatch[1] == "#"){\r
- fn[fn.length] = 'n = byId(n, "'+tokenMatch[2]+'");';\r
- }else{\r
- fn[fn.length] = 'n = byTag(n, "'+tokenMatch[2]+'");';\r
- }\r
- path = path.replace(tokenMatch[0], "");\r
- }\r
- }\r
- while(!(modeMatch = path.match(modeRe))){\r
- var matched = false;\r
- for(var j = 0; j < matchersLn; j++){\r
- var t = matchers[j];\r
- var m = path.match(t.re);\r
- if(m){\r
- fn[fn.length] = t.select.replace(tplRe, function(x, i){\r
- return m[i];\r
- });\r
- path = path.replace(m[0], "");\r
- matched = true;\r
- break;\r
- }\r
- }\r
- // prevent infinite loop on bad selector\r
- if(!matched){\r
- throw 'Error parsing selector, parsing failed at "' + path + '"';\r
- }\r
- }\r
- if(modeMatch[1]){\r
- fn[fn.length] = 'mode="'+modeMatch[1].replace(trimRe, "")+'";';\r
- path = path.replace(modeMatch[1], "");\r
- }\r
- }\r
- // close fn out\r
- fn[fn.length] = "return nodup(n);\n}";\r
- \r
- // eval fn and return it\r
- eval(fn.join(""));\r
- return f;\r
- },\r
-\r
- /**\r
- * Selects a group of elements.\r
- * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)\r
- * @param {Node/String} root (optional) The start of the query (defaults to document).\r
- * @return {Array} An Array of DOM elements which match the selector. If there are\r
- * no matches, and empty Array is returned.\r
- */\r
- jsSelect: function(path, root, type){\r
- // set root to doc if not specified.\r
- root = root || document;\r
- \r
- if(typeof root == "string"){\r
- root = document.getElementById(root);\r
- }\r
- var paths = path.split(","),\r
- results = [];\r
- \r
- // loop over each selector\r
- for(var i = 0, len = paths.length; i < len; i++){ \r
- var subPath = paths[i].replace(trimRe, "");\r
- // compile and place in cache\r
- if(!cache[subPath]){\r
- cache[subPath] = Ext.DomQuery.compile(subPath);\r
- if(!cache[subPath]){\r
- throw subPath + " is not a valid selector";\r
- }\r
- }\r
- var result = cache[subPath](root);\r
- if(result && result != document){\r
- results = results.concat(result);\r
- }\r
- }\r
- \r
- // if there were multiple selectors, make sure dups\r
- // are eliminated\r
- if(paths.length > 1){\r
- return nodup(results);\r
- }\r
- return results;\r
- },\r
- isXml: function(el) {\r
- var docEl = (el ? el.ownerDocument || el : 0).documentElement;\r
- return docEl ? docEl.nodeName !== "HTML" : false;\r
- },\r
- select : document.querySelectorAll ? function(path, root, type) {\r
- root = root || document;\r
- if (!Ext.DomQuery.isXml(root)) {\r
- try {\r
- var cs = root.querySelectorAll(path);\r
- return Ext.toArray(cs);\r
- }\r
- catch (ex) {} \r
- } \r
- return Ext.DomQuery.jsSelect.call(this, path, root, type);\r
- } : function(path, root, type) {\r
- return Ext.DomQuery.jsSelect.call(this, path, root, type);\r
- },\r
-\r
- /**\r
- * Selects a single element.\r
- * @param {String} selector The selector/xpath query\r
- * @param {Node} root (optional) The start of the query (defaults to document).\r
- * @return {Element} The DOM element which matched the selector.\r
- */\r
- selectNode : function(path, root){\r
- return Ext.DomQuery.select(path, root)[0];\r
- },\r
-\r
- /**\r
- * Selects the value of a node, optionally replacing null with the defaultValue.\r
- * @param {String} selector The selector/xpath query\r
- * @param {Node} root (optional) The start of the query (defaults to document).\r
- * @param {String} defaultValue\r
- * @return {String}\r
- */\r
- selectValue : function(path, root, defaultValue){\r
- path = path.replace(trimRe, "");\r
- if(!valueCache[path]){\r
- valueCache[path] = Ext.DomQuery.compile(path, "select");\r
- }\r
- var n = valueCache[path](root), v;\r
- n = n[0] ? n[0] : n;\r
- \r
- // overcome a limitation of maximum textnode size\r
- // Rumored to potentially crash IE6 but has not been confirmed.\r
- // http://reference.sitepoint.com/javascript/Node/normalize\r
- // https://developer.mozilla.org/En/DOM/Node.normalize \r
- if (typeof n.normalize == 'function') n.normalize();\r
- \r
- v = (n && n.firstChild ? n.firstChild.nodeValue : null);\r
- return ((v === null||v === undefined||v==='') ? defaultValue : v);\r
- },\r
-\r
- /**\r
- * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.\r
- * @param {String} selector The selector/xpath query\r
- * @param {Node} root (optional) The start of the query (defaults to document).\r
- * @param {Number} defaultValue\r
- * @return {Number}\r
- */\r
- selectNumber : function(path, root, defaultValue){\r
- var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);\r
- return parseFloat(v);\r
- },\r
-\r
- /**\r
- * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)\r
- * @param {String/HTMLElement/Array} el An element id, element or array of elements\r
- * @param {String} selector The simple selector to test\r
- * @return {Boolean}\r
- */\r
- is : function(el, ss){\r
- if(typeof el == "string"){\r
- el = document.getElementById(el);\r
- }\r
- var isArray = Ext.isArray(el),\r
- result = Ext.DomQuery.filter(isArray ? el : [el], ss);\r
- return isArray ? (result.length == el.length) : (result.length > 0);\r
- },\r
-\r
- /**\r
- * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)\r
- * @param {Array} el An array of elements to filter\r
- * @param {String} selector The simple selector to test\r
- * @param {Boolean} nonMatches If true, it returns the elements that DON'T match\r
- * the selector instead of the ones that match\r
- * @return {Array} An Array of DOM elements which match the selector. If there are\r
- * no matches, and empty Array is returned.\r
- */\r
- filter : function(els, ss, nonMatches){\r
- ss = ss.replace(trimRe, "");\r
- if(!simpleCache[ss]){\r
- simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");\r
- }\r
- var result = simpleCache[ss](els);\r
- return nonMatches ? quickDiff(result, els) : result;\r
- },\r
-\r
- /**\r
- * Collection of matching regular expressions and code snippets.\r
- * Each capture group within () will be replace the {} in the select\r
- * statement as specified by their index.\r
- */\r
- matchers : [{\r
- re: /^\.([\w-]+)/,\r
- select: 'n = byClassName(n, " {1} ");'\r
- }, {\r
- re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,\r
- select: 'n = byPseudo(n, "{1}", "{2}");'\r
- },{\r
- re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,\r
- select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'\r
- }, {\r
- re: /^#([\w-]+)/,\r
- select: 'n = byId(n, "{1}");'\r
- },{\r
- re: /^@([\w-]+)/,\r
- select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'\r
- }\r
- ],\r
-\r
- /**\r
- * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.\r
- * New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, > <.\r
- */\r
- operators : {\r
- "=" : function(a, v){\r
- return a == v;\r
- },\r
- "!=" : function(a, v){\r
- return a != v;\r
- },\r
- "^=" : function(a, v){\r
- return a && a.substr(0, v.length) == v;\r
- },\r
- "$=" : function(a, v){\r
- return a && a.substr(a.length-v.length) == v;\r
- },\r
- "*=" : function(a, v){\r
- return a && a.indexOf(v) !== -1;\r
- },\r
- "%=" : function(a, v){\r
- return (a % v) == 0;\r
- },\r
- "|=" : function(a, v){\r
- return a && (a == v || a.substr(0, v.length+1) == v+'-');\r
- },\r
- "~=" : function(a, v){\r
- return a && (' '+a+' ').indexOf(' '+v+' ') != -1;\r
- }\r
- },\r
-\r
- /**\r
- * <p>Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed\r
- * two parameters:</p><div class="mdetail-params"><ul>\r
- * <li><b>c</b> : Array<div class="sub-desc">An Array of DOM elements to filter.</div></li>\r
- * <li><b>v</b> : String<div class="sub-desc">The argument (if any) supplied in the selector.</div></li>\r
- * </ul></div>\r
- * <p>A filter function returns an Array of DOM elements which conform to the pseudo class.</p>\r
- * <p>In addition to the provided pseudo classes listed above such as <code>first-child</code> and <code>nth-child</code>,\r
- * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.</p>\r
- * <p>For example, to filter <code><a></code> elements to only return links to <i>external</i> resources:</p>\r
- * <code><pre>\r
-Ext.DomQuery.pseudos.external = function(c, v){\r
- var r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
-// Include in result set only if it's a link to an external resource\r
- if(ci.hostname != location.hostname){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
-};</pre></code>\r
- * Then external links could be gathered with the following statement:<code><pre>\r
-var externalLinks = Ext.select("a:external");\r
-</code></pre>\r
- */\r
- pseudos : {\r
- "first-child" : function(c){\r
- var r = [], ri = -1, n;\r
- for(var i = 0, ci; ci = n = c[i]; i++){\r
- while((n = n.previousSibling) && n.nodeType != 1);\r
- if(!n){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "last-child" : function(c){\r
- var r = [], ri = -1, n;\r
- for(var i = 0, ci; ci = n = c[i]; i++){\r
- while((n = n.nextSibling) && n.nodeType != 1);\r
- if(!n){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "nth-child" : function(c, a) {\r
- var r = [], ri = -1,\r
- m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),\r
- f = (m[1] || 1) - 0, l = m[2] - 0;\r
- for(var i = 0, n; n = c[i]; i++){\r
- var pn = n.parentNode;\r
- if (batch != pn._batch) {\r
- var j = 0;\r
- for(var cn = pn.firstChild; cn; cn = cn.nextSibling){\r
- if(cn.nodeType == 1){\r
- cn.nodeIndex = ++j;\r
- }\r
- }\r
- pn._batch = batch;\r
- }\r
- if (f == 1) {\r
- if (l == 0 || n.nodeIndex == l){\r
- r[++ri] = n;\r
- }\r
- } else if ((n.nodeIndex + l) % f == 0){\r
- r[++ri] = n;\r
- }\r
- }\r
-\r
- return r;\r
- },\r
-\r
- "only-child" : function(c){\r
- var r = [], ri = -1;;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- if(!prev(ci) && !next(ci)){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "empty" : function(c){\r
- var r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- var cns = ci.childNodes, j = 0, cn, empty = true;\r
- while(cn = cns[j]){\r
- ++j;\r
- if(cn.nodeType == 1 || cn.nodeType == 3){\r
- empty = false;\r
- break;\r
- }\r
- }\r
- if(empty){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "contains" : function(c, v){\r
- var r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- if((ci.textContent||ci.innerText||'').indexOf(v) != -1){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "nodeValue" : function(c, v){\r
- var r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- if(ci.firstChild && ci.firstChild.nodeValue == v){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "checked" : function(c){\r
- var r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- if(ci.checked == true){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "not" : function(c, ss){\r
- return Ext.DomQuery.filter(c, ss, true);\r
- },\r
-\r
- "any" : function(c, selectors){\r
- var ss = selectors.split('|'),\r
- r = [], ri = -1, s;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- for(var j = 0; s = ss[j]; j++){\r
- if(Ext.DomQuery.is(ci, s)){\r
- r[++ri] = ci;\r
- break;\r
- }\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "odd" : function(c){\r
- return this["nth-child"](c, "odd");\r
- },\r
-\r
- "even" : function(c){\r
- return this["nth-child"](c, "even");\r
- },\r
-\r
- "nth" : function(c, a){\r
- return c[a-1] || [];\r
- },\r
-\r
- "first" : function(c){\r
- return c[0] || [];\r
- },\r
-\r
- "last" : function(c){\r
- return c[c.length-1] || [];\r
- },\r
-\r
- "has" : function(c, ss){\r
- var s = Ext.DomQuery.select,\r
- r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- if(s(ss, ci).length > 0){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "next" : function(c, ss){\r
- var is = Ext.DomQuery.is,\r
- r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- var n = next(ci);\r
- if(n && is(n, ss)){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- },\r
-\r
- "prev" : function(c, ss){\r
- var is = Ext.DomQuery.is,\r
- r = [], ri = -1;\r
- for(var i = 0, ci; ci = c[i]; i++){\r
- var n = prev(ci);\r
- if(n && is(n, ss)){\r
- r[++ri] = ci;\r
- }\r
- }\r
- return r;\r
- }\r
- }\r
- };\r
-}();\r
-\r
-/**\r
- * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}\r
- * @param {String} path The selector/xpath query\r
- * @param {Node} root (optional) The start of the query (defaults to document).\r
- * @return {Array}\r
- * @member Ext\r
- * @method query\r
- */\r
-Ext.query = Ext.DomQuery.select;\r
-/**
- * @class Ext.util.DelayedTask
- * <p> The DelayedTask class provides a convenient way to "buffer" the execution of a method,
- * performing setTimeout where a new timeout cancels the old timeout. When called, the
- * task will wait the specified time period before executing. If durng that time period,
- * the task is called again, the original call will be cancelled. This continues so that
- * the function is only called a single time for each iteration.</p>
- * <p>This method is especially useful for things like detecting whether a user has finished
- * typing in a text field. An example would be performing validation on a keypress. You can
- * use this class to buffer the keypress events for a certain number of milliseconds, and
- * perform only if they stop for that amount of time. Usage:</p><pre><code>
-var task = new Ext.util.DelayedTask(function(){
- alert(Ext.getDom('myInputField').value.length);
-});
-// Wait 500ms before calling our function. If the user presses another key
-// during that 500ms, it will be cancelled and we'll wait another 500ms.
-Ext.get('myInputField').on('keypress', function(){
- task.{@link #delay}(500);
-});
- * </code></pre>
- * <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
- * option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
- * also setup a delayed task for you to buffer events.</p>
- * @constructor The parameters to this constructor serve as defaults and are not required.
- * @param {Function} fn (optional) The default function to call.
- * @param {Object} scope The default scope (The <code><b>this</b></code> reference) in which the
- * function is called. If not specified, <code>this</code> will refer to the browser window.
- * @param {Array} args (optional) The default Array of arguments.
+};/**
+ * @class Ext.Template
*/
-Ext.util.DelayedTask = function(fn, scope, args){
- var me = this,
- id,
- call = function(){
- clearInterval(id);
- id = null;
- fn.apply(scope, args || []);
- };
-
+Ext.apply(Ext.Template.prototype, {
/**
- * Cancels any pending timeout and queues a new one
- * @param {Number} delay The milliseconds to delay
- * @param {Function} newFn (optional) Overrides function passed to constructor
- * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
- * is specified, <code>this</code> will refer to the browser window.
- * @param {Array} newArgs (optional) Overrides args passed to constructor
+ * @cfg {Boolean} disableFormats Specify <tt>true</tt> to disable format
+ * functions in the template. If the template does not contain
+ * {@link Ext.util.Format format functions}, setting <code>disableFormats</code>
+ * to true will reduce <code>{@link #apply}</code> time. Defaults to <tt>false</tt>.
+ * <pre><code>
+var t = new Ext.Template(
+ '<div name="{id}">',
+ '<span class="{cls}">{name} {value}</span>',
+ '</div>',
+ {
+ compiled: true, // {@link #compile} immediately
+ disableFormats: true // reduce <code>{@link #apply}</code> time since no formatting
+ }
+);
+ * </code></pre>
+ * For a list of available format functions, see {@link Ext.util.Format}.
*/
- me.delay = function(delay, newFn, newScope, newArgs){
- me.cancel();
- fn = newFn || fn;
- scope = newScope || scope;
- args = newArgs || args;
- id = setInterval(call, delay);
- };
-
+ disableFormats : false,
/**
- * Cancel the last queued timeout
+ * See <code>{@link #disableFormats}</code>.
+ * @type Boolean
+ * @property disableFormats
*/
- me.cancel = function(){
- if(id){
- clearInterval(id);
- id = null;
- }
- };
-};(function(){
-var EXTUTIL = Ext.util,
- TOARRAY = Ext.toArray,
- EACH = Ext.each,
- ISOBJECT = Ext.isObject,
- TRUE = true,
- FALSE = false;
-/**
- * @class Ext.util.Observable
- * Base class that provides a common interface for publishing events. Subclasses are expected to
- * to have a property "events" with all the events defined, and, optionally, a property "listeners"
- * with configured listeners defined.<br>
- * For example:
- * <pre><code>
-Employee = Ext.extend(Ext.util.Observable, {
- constructor: function(config){
- this.name = config.name;
- this.addEvents({
- "fired" : true,
- "quit" : true
- });
+ /**
+ * The regular expression used to match template variables
+ * @type RegExp
+ * @property
+ * @hide repeat doc
+ */
+ re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
- // Copy configured listeners into *this* object so that the base class's
- // constructor will add them.
- this.listeners = config.listeners;
-
- // Call our superclass constructor to complete construction process.
- Employee.superclass.constructor.call(config)
- }
-});
-</code></pre>
- * This could then be used like this:<pre><code>
-var newEmployee = new Employee({
- name: employeeName,
- listeners: {
- quit: function() {
- // By default, "this" will be the object that fired the event.
- alert(this.name + " has quit!");
+ /**
+ * Returns an HTML fragment of this template with the specified values applied.
+ * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
+ * @return {String} The HTML fragment
+ * @hide repeat doc
+ */
+ applyTemplate : function(values){
+ var me = this,
+ useF = me.disableFormats !== true,
+ fm = Ext.util.Format,
+ tpl = me;
+
+ if(me.compiled){
+ return me.compiled(values);
+ }
+ function fn(m, name, format, args){
+ if (format && useF) {
+ if (format.substr(0, 5) == "this.") {
+ return tpl.call(format.substr(5), values[name], values);
+ } else {
+ if (args) {
+ // quoted values are required for strings in compiled templates,
+ // but for non compiled we need to strip them
+ // quoted reversed for jsmin
+ var re = /^\s*['"](.*)["']\s*$/;
+ args = args.split(',');
+ for(var i = 0, len = args.length; i < len; i++){
+ args[i] = args[i].replace(re, "$1");
+ }
+ args = [values[name]].concat(args);
+ } else {
+ args = [values[name]];
+ }
+ return fm[format].apply(fm, args);
+ }
+ } else {
+ return values[name] !== undefined ? values[name] : "";
+ }
+ }
+ return me.html.replace(me.re, fn);
+ },
+
+ /**
+ * Compiles the template into an internal function, eliminating the RegEx overhead.
+ * @return {Ext.Template} this
+ * @hide repeat doc
+ */
+ compile : function(){
+ var me = this,
+ fm = Ext.util.Format,
+ useF = me.disableFormats !== true,
+ sep = Ext.isGecko ? "+" : ",",
+ body;
+
+ function fn(m, name, format, args){
+ if(format && useF){
+ args = args ? ',' + args : "";
+ if(format.substr(0, 5) != "this."){
+ format = "fm." + format + '(';
+ }else{
+ format = 'this.call("'+ format.substr(5) + '", ';
+ args = ", values";
+ }
+ }else{
+ args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
+ }
+ return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
+ }
+
+ // branched to use + in gecko and [].join() in others
+ if(Ext.isGecko){
+ body = "this.compiled = function(values){ return '" +
+ me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+ "';};";
+ }else{
+ body = ["this.compiled = function(values){ return ['"];
+ body.push(me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+ body.push("'].join('');};");
+ body = body.join('');
}
+ eval(body);
+ return me;
+ },
+
+ // private function used to call members
+ call : function(fnName, value, allValues){
+ return this[fnName](value, allValues);
}
});
-</code></pre>
+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.
*/
-EXTUTIL.Observable = function(){
- /**
- * @cfg {Object} listeners (optional) <p>A config object containing one or more event handlers to be added to this
- * object during initialization. This should be a valid listeners config object as specified in the
- * {@link #addListener} example for attaching multiple handlers at once.</p>
- * <br><p><b><u>DOM events from ExtJs {@link Ext.Component Components}</u></b></p>
- * <br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
- * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
- * <b><code>{@link Ext.DataView#click click}</code></b> event passing the node clicked on. To access DOM
- * events directly from a Component's HTMLElement, listeners must be added to the <i>{@link Ext.Component#getEl Element}</i> after the Component
- * has been rendered. A plugin can simplify this step:<pre><code>
-// Plugin is configured with a listeners config object.
-// The Component is appended to the argument list of all handler functions.
-Ext.DomObserver = Ext.extend(Object, {
- constructor: function(config) {
- this.listeners = config.listeners ? config.listeners : config;
- },
-
- // Component passes itself into plugin's init method
- init: function(c) {
- var p, l = this.listeners;
- for (p in l) {
- if (Ext.isFunction(l[p])) {
- l[p] = this.createHandler(l[p], c);
- } else {
- l[p].fn = this.createHandler(l[p].fn, c);
+/**
+ * @class Ext.DomQuery
+Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
+<p>
+DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>
+
+<p>
+All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
+</p>
+<h4>Element Selectors:</h4>
+<ul class="list">
+ <li> <b>*</b> any element</li>
+ <li> <b>E</b> an element with the tag E</li>
+ <li> <b>E F</b> All descendent elements of E that have the tag F</li>
+ <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
+ <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
+ <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
+</ul>
+<h4>Attribute Selectors:</h4>
+<p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
+<ul class="list">
+ <li> <b>E[foo]</b> has an attribute "foo"</li>
+ <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
+ <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
+ <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
+ <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
+ <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
+ <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
+</ul>
+<h4>Pseudo Classes:</h4>
+<ul class="list">
+ <li> <b>E:first-child</b> E is the first child of its parent</li>
+ <li> <b>E:last-child</b> E is the last child of its parent</li>
+ <li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>
+ <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
+ <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
+ <li> <b>E:only-child</b> E is the only child of its parent</li>
+ <li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>
+ <li> <b>E:first</b> the first E in the resultset</li>
+ <li> <b>E:last</b> the last E in the resultset</li>
+ <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
+ <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
+ <li> <b>E:even</b> shortcut for :nth-child(even)</li>
+ <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
+ <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
+ <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
+ <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
+ <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
+ <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
+ <li> <b>E:any(S1|S2|S2)</b> an E element which matches any of the simple selectors S1, S2 or S3//\\</li>
+</ul>
+<h4>CSS Value Selectors:</h4>
+<ul class="list">
+ <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
+ <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
+ <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
+ <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
+ <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
+ <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
+</ul>
+ * @singleton
+ */
+Ext.DomQuery = function(){
+ var cache = {},
+ simpleCache = {},
+ valueCache = {},
+ nonSpace = /\S/,
+ trimRe = /^\s+|\s+$/g,
+ tplRe = /\{(\d+)\}/g,
+ modeRe = /^(\s?[\/>+~]\s?|\s|$)/,
+ tagTokenRe = /^(#)?([\w-\*]+)/,
+ nthRe = /(\d*)n\+?(\d*)/,
+ nthRe2 = /\D/,
+ // This is for IE MSXML which does not support expandos.
+ // IE runs the same speed using setAttribute, however FF slows way down
+ // and Safari completely fails so they need to continue to use expandos.
+ isIE = window.ActiveXObject ? true : false,
+ key = 30803;
+
+ // this eval is stop the compressor from
+ // renaming the variable to something shorter
+ eval("var batch = 30803;");
+
+ // Retrieve the child node from a particular
+ // parent at the specified index.
+ function child(parent, index){
+ var i = 0,
+ n = parent.firstChild;
+ while(n){
+ if(n.nodeType == 1){
+ if(++i == index){
+ return n;
+ }
}
+ n = n.nextSibling;
}
+ return null;
+ }
- // 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);
+ // retrieve the next element node
+ function next(n){
+ while((n = n.nextSibling) && n.nodeType != 1);
+ return n;
+ }
+
+ // retrieve the previous element node
+ function prev(n){
+ while((n = n.previousSibling) && n.nodeType != 1);
+ return n;
+ }
+
+ // Mark each child node with a nodeIndex skipping and
+ // removing empty text nodes.
+ function children(parent){
+ var n = parent.firstChild,
+ nodeIndex = -1,
+ nextNode;
+ while(n){
+ nextNode = n.nextSibling;
+ // clean worthless empty nodes.
+ if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
+ parent.removeChild(n);
+ }else{
+ // add an expando nodeIndex
+ n.nodeIndex = ++nodeIndex;
+ }
+ n = nextNode;
+ }
+ return this;
+ }
+
+
+ // nodeSet - array of nodes
+ // cls - CSS Class
+ function byClassName(nodeSet, cls){
+ if(!cls){
+ return nodeSet;
+ }
+ var result = [], ri = -1;
+ for(var i = 0, ci; ci = nodeSet[i]; i++){
+ if((' '+ci.className+' ').indexOf(cls) != -1){
+ result[++ri] = ci;
}
- });
- },
+ }
+ return result;
+ };
- createHandler: function(fn, c) {
- return function(e) {
- fn.call(this, e, c);
- };
+ function attrValue(n, attr){
+ // if its an array, use the first node.
+ if(!n.tagName && typeof n.length != "undefined"){
+ n = n[0];
+ }
+ if(!n){
+ return null;
+ }
+
+ if(attr == "for"){
+ return n.htmlFor;
+ }
+ if(attr == "class" || attr == "className"){
+ return n.className;
+ }
+ return n.getAttribute(attr) || n[attr];
+
+ };
+
+
+ // ns - nodes
+ // mode - false, /, >, +, ~
+ // tagName - defaults to "*"
+ function getNodes(ns, mode, tagName){
+ var result = [], ri = -1, cs;
+ if(!ns){
+ return result;
+ }
+ tagName = tagName || "*";
+ // convert to array
+ if(typeof ns.getElementsByTagName != "undefined"){
+ ns = [ns];
+ }
+
+ // no mode specified, grab all elements by tagName
+ // at any depth
+ if(!mode){
+ for(var i = 0, ni; ni = ns[i]; i++){
+ cs = ni.getElementsByTagName(tagName);
+ for(var j = 0, ci; ci = cs[j]; j++){
+ result[++ri] = ci;
+ }
+ }
+ // Direct Child mode (/ or >)
+ // E > F or E/F all direct children elements of E that have the tag
+ } else if(mode == "/" || mode == ">"){
+ var utag = tagName.toUpperCase();
+ for(var i = 0, ni, cn; ni = ns[i]; i++){
+ cn = ni.childNodes;
+ for(var j = 0, cj; cj = cn[j]; j++){
+ if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
+ result[++ri] = cj;
+ }
+ }
+ }
+ // Immediately Preceding mode (+)
+ // E + F all elements with the tag F that are immediately preceded by an element with the tag E
+ }else if(mode == "+"){
+ var utag = tagName.toUpperCase();
+ for(var i = 0, n; n = ns[i]; i++){
+ while((n = n.nextSibling) && n.nodeType != 1);
+ if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
+ result[++ri] = n;
+ }
+ }
+ // Sibling mode (~)
+ // E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
+ }else if(mode == "~"){
+ var utag = tagName.toUpperCase();
+ for(var i = 0, n; n = ns[i]; i++){
+ while((n = n.nextSibling)){
+ if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){
+ result[++ri] = n;
+ }
+ }
+ }
+ }
+ return result;
}
-});
-var combo = new Ext.form.ComboBox({
+ function concat(a, b){
+ if(b.slice){
+ return a.concat(b);
+ }
+ for(var i = 0, l = b.length; i < l; i++){
+ a[a.length] = b[i];
+ }
+ return a;
+ }
- // Collapse combo when its element is clicked on
- plugins: [ new Ext.DomObserver({
- click: function(evt, comp) {
- comp.collapse();
+ function byTag(cs, tagName){
+ if(cs.tagName || cs == document){
+ cs = [cs];
}
- })],
- store: myStore,
- typeAhead: true,
- mode: 'local',
- triggerAction: 'all'
-});
- * </code></pre></p>
- */
- var me = this, e = me.events;
- if(me.listeners){
- me.on(me.listeners);
- delete me.listeners;
+ if(!tagName){
+ return cs;
+ }
+ var result = [], ri = -1;
+ tagName = tagName.toLowerCase();
+ for(var i = 0, ci; ci = cs[i]; i++){
+ if(ci.nodeType == 1 && ci.tagName.toLowerCase() == tagName){
+ result[++ri] = ci;
+ }
+ }
+ return result;
}
- me.events = e || {};
-};
-EXTUTIL.Observable.prototype = {
- // private
- filterOptRe : /^(?:scope|delay|buffer|single)$/,
+ function byId(cs, id){
+ if(cs.tagName || cs == document){
+ cs = [cs];
+ }
+ if(!id){
+ return cs;
+ }
+ var result = [], ri = -1;
+ for(var i = 0, ci; ci = cs[i]; i++){
+ if(ci && ci.id == id){
+ result[++ri] = ci;
+ return result;
+ }
+ }
+ return result;
+ }
- /**
- * <p>Fires the specified event with the passed parameters (minus the event name).</p>
- * <p>An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget})
- * by calling {@link #enableBubble}.</p>
- * @param {String} eventName The name of the event to fire.
- * @param {Object...} args Variable number of parameters are passed to handlers.
- * @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
- */
- fireEvent : function(){
- var a = TOARRAY(arguments),
- ename = a[0].toLowerCase(),
- me = this,
- ret = TRUE,
- ce = me.events[ename],
- q,
- c;
- if (me.eventsSuspended === TRUE) {
- if (q = me.eventQueue) {
- q.push(a);
+ // operators are =, !=, ^=, $=, *=, %=, |= and ~=
+ // custom can be "{"
+ function byAttribute(cs, attr, value, op, custom){
+ var result = [],
+ ri = -1,
+ useGetStyle = custom == "{",
+ fn = Ext.DomQuery.operators[op],
+ a,
+ innerHTML;
+ for(var i = 0, ci; ci = cs[i]; i++){
+ // skip non-element nodes.
+ if(ci.nodeType != 1){
+ continue;
+ }
+
+ innerHTML = ci.innerHTML;
+ // we only need to change the property names if we're dealing with html nodes, not XML
+ if(innerHTML !== null && innerHTML !== undefined){
+ if(useGetStyle){
+ a = Ext.DomQuery.getStyle(ci, attr);
+ } else if (attr == "class" || attr == "className"){
+ a = ci.className;
+ } else if (attr == "for"){
+ a = ci.htmlFor;
+ } else if (attr == "href"){
+ // getAttribute href bug
+ // http://www.glennjones.net/Post/809/getAttributehrefbug.htm
+ a = ci.getAttribute("href", 2);
+ } else{
+ a = ci.getAttribute(attr);
+ }
+ }else{
+ a = ci.getAttribute(attr);
+ }
+ if((fn && fn(a, value)) || (!fn && a)){
+ result[++ri] = ci;
}
}
- else if(ISOBJECT(ce) && ce.bubble){
- if(ce.fire.apply(ce, a.slice(1)) === FALSE) {
- return FALSE;
+ return result;
+ }
+
+ function byPseudo(cs, name, value){
+ return Ext.DomQuery.pseudos[name](cs, value);
+ }
+
+ function nodupIEXml(cs){
+ var d = ++key,
+ r;
+ cs[0].setAttribute("_nodup", d);
+ r = [cs[0]];
+ for(var i = 1, len = cs.length; i < len; i++){
+ var c = cs[i];
+ if(!c.getAttribute("_nodup") != d){
+ c.setAttribute("_nodup", d);
+ r[r.length] = c;
}
- c = me.getBubbleTarget && me.getBubbleTarget();
- if(c && c.enableBubble) {
- if(!c.events[ename] || !Ext.isObject(c.events[ename]) || !c.events[ename].bubble) {
- c.enableBubble(ename);
+ }
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].removeAttribute("_nodup");
+ }
+ return r;
+ }
+
+ function nodup(cs){
+ if(!cs){
+ return [];
+ }
+ var len = cs.length, c, i, r = cs, cj, ri = -1;
+ if(!len || typeof cs.nodeType != "undefined" || len == 1){
+ return cs;
+ }
+ if(isIE && typeof cs[0].selectSingleNode != "undefined"){
+ return nodupIEXml(cs);
+ }
+ var d = ++key;
+ cs[0]._nodup = d;
+ for(i = 1; c = cs[i]; i++){
+ if(c._nodup != d){
+ c._nodup = d;
+ }else{
+ r = [];
+ for(var j = 0; j < i; j++){
+ r[++ri] = cs[j];
}
- return c.fireEvent.apply(c, a);
+ for(j = i+1; cj = cs[j]; j++){
+ if(cj._nodup != d){
+ cj._nodup = d;
+ r[++ri] = cj;
+ }
+ }
+ return r;
}
}
- else {
- if (ISOBJECT(ce)) {
- a.shift();
- ret = ce.fire.apply(ce, a);
+ return r;
+ }
+
+ function quickDiffIEXml(c1, c2){
+ var d = ++key,
+ r = [];
+ for(var i = 0, len = c1.length; i < len; i++){
+ c1[i].setAttribute("_qdiff", d);
+ }
+ for(var i = 0, len = c2.length; i < len; i++){
+ if(c2[i].getAttribute("_qdiff") != d){
+ r[r.length] = c2[i];
}
}
- return ret;
- },
+ for(var i = 0, len = c1.length; i < len; i++){
+ c1[i].removeAttribute("_qdiff");
+ }
+ return r;
+ }
- /**
- * Appends an event handler to this object.
- * @param {String} eventName The name of the event to listen for.
- * @param {Function} handler The method the event invokes.
- * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
- * <b>If omitted, defaults to the object which fired the event.</b>
- * @param {Object} options (optional) An object containing handler configuration.
- * properties. This may contain any of the following properties:<ul>
- * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
- * <b>If omitted, defaults to the object which fired the event.</b></div></li>
- * <li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
- * <li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
- * <li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
- * by the specified number of milliseconds. If the event fires again within that time, the original
- * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
- * <li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
- * if the event was bubbled up from a child Observable.</div></li>
- * </ul><br>
- * <p>
- * <b>Combining Options</b><br>
- * Using the options argument, it is possible to combine different types of listeners:<br>
- * <br>
- * A delayed, one-time listener.
- * <pre><code>
-myDataView.on('click', this.onClick, this, {
-single: true,
-delay: 100
-});</code></pre>
- * <p>
- * <b>Attaching multiple handlers in 1 call</b><br>
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple handlers.
- * <p>
- * <pre><code>
-myGridPanel.on({
-'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
-},
-'mouseover' : {
- fn: this.onMouseOver,
- scope: this
-},
-'mouseout' : {
- fn: this.onMouseOut,
- scope: this
-}
-});</code></pre>
- * <p>
- * Or a shorthand syntax:<br>
- * <pre><code>
-myGridPanel.on({
-'click' : this.onClick,
-'mouseover' : this.onMouseOver,
-'mouseout' : this.onMouseOut,
- scope: this
-});</code></pre>
- */
- addListener : function(eventName, fn, scope, o){
- var me = this,
- e,
- oe,
- isF,
- ce;
- if (ISOBJECT(eventName)) {
- o = eventName;
- for (e in o){
- oe = o[e];
- if (!me.filterOptRe.test(e)) {
- me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
- }
- }
- } else {
- eventName = eventName.toLowerCase();
- ce = me.events[eventName] || TRUE;
- if (Ext.isBoolean(ce)) {
- me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
+ function quickDiff(c1, c2){
+ var len1 = c1.length,
+ d = ++key,
+ r = [];
+ if(!len1){
+ return c2;
+ }
+ if(isIE && typeof c1[0].selectSingleNode != "undefined"){
+ return quickDiffIEXml(c1, c2);
+ }
+ for(var i = 0; i < len1; i++){
+ c1[i]._qdiff = d;
+ }
+ for(var i = 0, len = c2.length; i < len; i++){
+ if(c2[i]._qdiff != d){
+ r[r.length] = c2[i];
}
- ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
}
- },
+ return r;
+ }
- /**
- * Removes an event handler.
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
- * @param {Object} scope (optional) The scope originally specified for the handler.
- */
- removeListener : function(eventName, fn, scope){
- var ce = this.events[eventName.toLowerCase()];
- if (ISOBJECT(ce)) {
- ce.removeListener(fn, scope);
+ function quickId(ns, mode, root, id){
+ if(ns == root){
+ var d = root.ownerDocument || root;
+ return d.getElementById(id);
}
- },
+ ns = getNodes(ns, mode, "*");
+ return byId(ns, id);
+ }
- /**
- * Removes all listeners for this object
- */
- purgeListeners : function(){
- var events = this.events,
- evt,
- key;
- for(key in events){
- evt = events[key];
- if(ISOBJECT(evt)){
- evt.clearListeners();
+ return {
+ getStyle : function(el, name){
+ return Ext.fly(el).getStyle(name);
+ },
+ /**
+ * Compiles a selector/xpath query into a reusable function. The returned function
+ * takes one parameter "root" (optional), which is the context node from where the query should start.
+ * @param {String} selector The selector/xpath query
+ * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
+ * @return {Function}
+ */
+ compile : function(path, type){
+ type = type || "select";
+
+ // setup fn preamble
+ var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],
+ mode,
+ lastPath,
+ matchers = Ext.DomQuery.matchers,
+ matchersLn = matchers.length,
+ modeMatch,
+ // accept leading mode switch
+ lmode = path.match(modeRe);
+
+ if(lmode && lmode[1]){
+ fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
+ path = path.replace(lmode[1], "");
}
- }
- },
-
- /**
- * Adds the specified events to the list of events which this Observable may fire.
- * @param {Object|String} o Either an object with event names as properties with a value of <code>true</code>
- * or the first event name string if multiple event names are being passed as separate parameters.
- * @param {string} Optional. Event name if multiple event names are being passed as separate parameters.
- * Usage:<pre><code>
-this.addEvents('storeloaded', 'storecleared');
-</code></pre>
- */
- addEvents : function(o){
- var me = this;
- me.events = me.events || {};
- if (Ext.isString(o)) {
- var a = arguments,
- i = a.length;
- while(i--) {
- me.events[a[i]] = me.events[a[i]] || TRUE;
+
+ // strip leading slashes
+ while(path.substr(0, 1)=="/"){
+ path = path.substr(1);
}
- } else {
- Ext.applyIf(me.events, o);
- }
- },
- /**
- * Checks to see if this object has any listeners for a specified event
- * @param {String} eventName The name of the event to check for
- * @return {Boolean} True if the event is being listened for, else false
- */
- hasListener : function(eventName){
- var e = this.events[eventName];
- return ISOBJECT(e) && e.listeners.length > 0;
- },
+ while(path && lastPath != path){
+ lastPath = path;
+ var tokenMatch = path.match(tagTokenRe);
+ if(type == "select"){
+ if(tokenMatch){
+ // ID Selector
+ if(tokenMatch[1] == "#"){
+ fn[fn.length] = 'n = quickId(n, mode, root, "'+tokenMatch[2]+'");';
+ }else{
+ fn[fn.length] = 'n = getNodes(n, mode, "'+tokenMatch[2]+'");';
+ }
+ path = path.replace(tokenMatch[0], "");
+ }else if(path.substr(0, 1) != '@'){
+ fn[fn.length] = 'n = getNodes(n, mode, "*");';
+ }
+ // type of "simple"
+ }else{
+ if(tokenMatch){
+ if(tokenMatch[1] == "#"){
+ fn[fn.length] = 'n = byId(n, "'+tokenMatch[2]+'");';
+ }else{
+ fn[fn.length] = 'n = byTag(n, "'+tokenMatch[2]+'");';
+ }
+ path = path.replace(tokenMatch[0], "");
+ }
+ }
+ while(!(modeMatch = path.match(modeRe))){
+ var matched = false;
+ for(var j = 0; j < matchersLn; j++){
+ var t = matchers[j];
+ var m = path.match(t.re);
+ if(m){
+ fn[fn.length] = t.select.replace(tplRe, function(x, i){
+ return m[i];
+ });
+ path = path.replace(m[0], "");
+ matched = true;
+ break;
+ }
+ }
+ // prevent infinite loop on bad selector
+ if(!matched){
+ throw 'Error parsing selector, parsing failed at "' + path + '"';
+ }
+ }
+ if(modeMatch[1]){
+ fn[fn.length] = 'mode="'+modeMatch[1].replace(trimRe, "")+'";';
+ path = path.replace(modeMatch[1], "");
+ }
+ }
+ // close fn out
+ fn[fn.length] = "return nodup(n);\n}";
+
+ // eval fn and return it
+ eval(fn.join(""));
+ return f;
+ },
- /**
- * 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 = [];
- }
- },
+ /**
+ * Selects a group of elements.
+ * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
+ * @param {Node/String} root (optional) The start of the query (defaults to document).
+ * @return {Array} An Array of DOM elements which match the selector. If there are
+ * no matches, and empty Array is returned.
+ */
+ jsSelect: function(path, root, type){
+ // set root to doc if not specified.
+ root = root || document;
+
+ if(typeof root == "string"){
+ root = document.getElementById(root);
+ }
+ var paths = path.split(","),
+ results = [];
+
+ // loop over each selector
+ for(var i = 0, len = paths.length; i < len; i++){
+ var subPath = paths[i].replace(trimRe, "");
+ // compile and place in cache
+ if(!cache[subPath]){
+ cache[subPath] = Ext.DomQuery.compile(subPath);
+ if(!cache[subPath]){
+ throw subPath + " is not a valid selector";
+ }
+ }
+ var result = cache[subPath](root);
+ if(result && result != document){
+ results = results.concat(result);
+ }
+ }
+
+ // if there were multiple selectors, make sure dups
+ // are eliminated
+ if(paths.length > 1){
+ return nodup(results);
+ }
+ return results;
+ },
+ isXml: function(el) {
+ var docEl = (el ? el.ownerDocument || el : 0).documentElement;
+ return docEl ? docEl.nodeName !== "HTML" : false;
+ },
+ select : document.querySelectorAll ? function(path, root, type) {
+ root = root || document;
+ if (!Ext.DomQuery.isXml(root)) {
+ try {
+ var cs = root.querySelectorAll(path);
+ return Ext.toArray(cs);
+ }
+ catch (ex) {}
+ }
+ return Ext.DomQuery.jsSelect.call(this, path, root, type);
+ } : function(path, root, type) {
+ return Ext.DomQuery.jsSelect.call(this, path, root, type);
+ },
- /**
- * Resume firing events. (see {@link #suspendEvents})
- * If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
- * events fired during event suspension will be sent to any listeners now.
- */
- resumeEvents : function(){
- var me = this,
- queued = me.eventQueue || [];
- me.eventsSuspended = FALSE;
- delete me.eventQueue;
- EACH(queued, function(e) {
- me.fireEvent.apply(me, e);
- });
- }
-};
+ /**
+ * Selects a single element.
+ * @param {String} selector The selector/xpath query
+ * @param {Node} root (optional) The start of the query (defaults to document).
+ * @return {Element} The DOM element which matched the selector.
+ */
+ selectNode : function(path, root){
+ return Ext.DomQuery.select(path, root)[0];
+ },
-var OBSERVABLE = EXTUTIL.Observable.prototype;
-/**
- * Appends an event handler to this object (shorthand for {@link #addListener}.)
- * @param {String} eventName The type of event to listen for
- * @param {Function} handler The method the event invokes
- * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
- * <b>If omitted, defaults to the object which fired the event.</b>
- * @param {Object} options (optional) An object containing handler configuration.
- * @method
- */
-OBSERVABLE.on = OBSERVABLE.addListener;
-/**
- * Removes an event handler (shorthand for {@link #removeListener}.)
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
- * @param {Object} scope (optional) The scope originally specified for the handler.
- * @method
- */
-OBSERVABLE.un = OBSERVABLE.removeListener;
+ /**
+ * Selects the value of a node, optionally replacing null with the defaultValue.
+ * @param {String} selector The selector/xpath query
+ * @param {Node} root (optional) The start of the query (defaults to document).
+ * @param {String} defaultValue
+ * @return {String}
+ */
+ selectValue : function(path, root, defaultValue){
+ path = path.replace(trimRe, "");
+ if(!valueCache[path]){
+ valueCache[path] = Ext.DomQuery.compile(path, "select");
+ }
+ var n = valueCache[path](root), v;
+ n = n[0] ? n[0] : n;
+
+ // overcome a limitation of maximum textnode size
+ // Rumored to potentially crash IE6 but has not been confirmed.
+ // http://reference.sitepoint.com/javascript/Node/normalize
+ // https://developer.mozilla.org/En/DOM/Node.normalize
+ if (typeof n.normalize == 'function') n.normalize();
+
+ v = (n && n.firstChild ? n.firstChild.nodeValue : null);
+ return ((v === null||v === undefined||v==='') ? defaultValue : v);
+ },
-/**
- * Removes <b>all</b> added captures from the Observable.
- * @param {Observable} o The Observable to release
- * @static
- */
-EXTUTIL.Observable.releaseCapture = function(o){
- o.fireEvent = OBSERVABLE.fireEvent;
-};
+ /**
+ * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.
+ * @param {String} selector The selector/xpath query
+ * @param {Node} root (optional) The start of the query (defaults to document).
+ * @param {Number} defaultValue
+ * @return {Number}
+ */
+ selectNumber : function(path, root, defaultValue){
+ var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
+ return parseFloat(v);
+ },
-function createTargeted(h, o, scope){
- return function(){
- if(o.target == arguments[0]){
- h.apply(scope, TOARRAY(arguments));
- }
- };
-};
+ /**
+ * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
+ * @param {String/HTMLElement/Array} el An element id, element or array of elements
+ * @param {String} selector The simple selector to test
+ * @return {Boolean}
+ */
+ is : function(el, ss){
+ if(typeof el == "string"){
+ el = document.getElementById(el);
+ }
+ var isArray = Ext.isArray(el),
+ result = Ext.DomQuery.filter(isArray ? el : [el], ss);
+ return isArray ? (result.length == el.length) : (result.length > 0);
+ },
-function createBuffered(h, o, l, scope){
- l.task = new EXTUTIL.DelayedTask();
- return function(){
- l.task.delay(o.buffer, h, scope, TOARRAY(arguments));
- };
-};
+ /**
+ * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
+ * @param {Array} el An array of elements to filter
+ * @param {String} selector The simple selector to test
+ * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
+ * the selector instead of the ones that match
+ * @return {Array} An Array of DOM elements which match the selector. If there are
+ * no matches, and empty Array is returned.
+ */
+ filter : function(els, ss, nonMatches){
+ ss = ss.replace(trimRe, "");
+ if(!simpleCache[ss]){
+ simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");
+ }
+ var result = simpleCache[ss](els);
+ return nonMatches ? quickDiff(result, els) : result;
+ },
-function createSingle(h, e, fn, scope){
- return function(){
- e.removeListener(fn, scope);
- return h.apply(scope, arguments);
- };
-};
+ /**
+ * Collection of matching regular expressions and code snippets.
+ * Each capture group within () will be replace the {} in the select
+ * statement as specified by their index.
+ */
+ matchers : [{
+ re: /^\.([\w-]+)/,
+ select: 'n = byClassName(n, " {1} ");'
+ }, {
+ re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
+ select: 'n = byPseudo(n, "{1}", "{2}");'
+ },{
+ re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
+ select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
+ }, {
+ re: /^#([\w-]+)/,
+ select: 'n = byId(n, "{1}");'
+ },{
+ re: /^@([\w-]+)/,
+ select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
+ }
+ ],
-function createDelayed(h, o, l, scope){
- return function(){
- var task = new EXTUTIL.DelayedTask();
- if(!l.tasks) {
- l.tasks = [];
- }
- l.tasks.push(task);
- task.delay(o.delay || 10, h, scope, TOARRAY(arguments));
- };
-};
-
-EXTUTIL.Event = function(obj, name){
- this.name = name;
- this.obj = obj;
- this.listeners = [];
-};
-
-EXTUTIL.Event.prototype = {
- addListener : function(fn, scope, options){
- var me = this,
- l;
- scope = scope || me.obj;
- if(!me.isListening(fn, scope)){
- l = me.createListener(fn, scope, options);
- if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
- me.listeners = me.listeners.slice(0);
+ /**
+ * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
+ * New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, > <.
+ */
+ operators : {
+ "=" : function(a, v){
+ return a == v;
+ },
+ "!=" : function(a, v){
+ return a != v;
+ },
+ "^=" : function(a, v){
+ return a && a.substr(0, v.length) == v;
+ },
+ "$=" : function(a, v){
+ return a && a.substr(a.length-v.length) == v;
+ },
+ "*=" : function(a, v){
+ return a && a.indexOf(v) !== -1;
+ },
+ "%=" : function(a, v){
+ return (a % v) == 0;
+ },
+ "|=" : function(a, v){
+ return a && (a == v || a.substr(0, v.length+1) == v+'-');
+ },
+ "~=" : function(a, v){
+ return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
}
- 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);
+ /**
+ * <p>Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed
+ * two parameters:</p><div class="mdetail-params"><ul>
+ * <li><b>c</b> : Array<div class="sub-desc">An Array of DOM elements to filter.</div></li>
+ * <li><b>v</b> : String<div class="sub-desc">The argument (if any) supplied in the selector.</div></li>
+ * </ul></div>
+ * <p>A filter function returns an Array of DOM elements which conform to the pseudo class.</p>
+ * <p>In addition to the provided pseudo classes listed above such as <code>first-child</code> and <code>nth-child</code>,
+ * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.</p>
+ * <p>For example, to filter <code><a></code> elements to only return links to <i>external</i> resources:</p>
+ * <code><pre>
+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;
}
- l.fireFn = h;
- return l;
- },
+ }
+ return r;
+};</pre></code>
+ * Then external links could be gathered with the following statement:<code><pre>
+var externalLinks = Ext.select("a:external");
+</code></pre>
+ */
+ 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;
+ },
- findListener : function(fn, scope){
- var list = this.listeners,
- i = list.length,
- l,
- s;
- while(i--) {
- l = list[i];
- if(l) {
- s = l.scope;
- if(l.fn == fn && (s == scope || s == this.obj)){
- return i;
+ "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 -1;
- },
+ return r;
+ },
- isListening : function(fn, scope){
- return this.findListener(fn, scope) != -1;
- },
+ "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;
+ }
+ }
- 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();
+ 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;
+ }
}
- delete l.tasks;
- }
- me.listeners.splice(index, 1);
- ret = TRUE;
- }
- return ret;
- },
+ return r;
+ },
- // 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);
- }
- },
+ "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;
+ },
- fire : function(){
- var me = this,
- args = TOARRAY(arguments),
- listeners = me.listeners,
- len = listeners.length,
- i = 0,
- l;
+ "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;
+ },
- if(len > 0){
- me.firing = TRUE;
- for (; i < len; i++) {
- l = listeners[i];
- if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
- return (me.firing = FALSE);
+ "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;
+ }
}
- }
- }
- me.firing = FALSE;
- return TRUE;
- }
-};
-})();/**\r
- * @class Ext.util.Observable\r
- */\r
-Ext.apply(Ext.util.Observable.prototype, function(){\r
- // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)\r
- // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
- // private\r
- function getMethodEvent(method){\r
- var e = (this.methodEvents = this.methodEvents ||\r
- {})[method], returnValue, v, cancel, obj = this;\r
-\r
- if (!e) {\r
- this.methodEvents[method] = e = {};\r
- e.originalFn = this[method];\r
- e.methodName = method;\r
- e.before = [];\r
- e.after = [];\r
-\r
- var makeCall = function(fn, scope, args){\r
- if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {\r
- if (Ext.isObject(v)) {\r
- returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;\r
- cancel = !!v.cancel;\r
- }\r
- else\r
- if (v === false) {\r
- cancel = true;\r
- }\r
- else {\r
- returnValue = v;\r
- }\r
- }\r
- };\r
-\r
- this[method] = function(){\r
- var args = Ext.toArray(arguments);\r
- returnValue = v = undefined;\r
- cancel = false;\r
-\r
- Ext.each(e.before, function(b){\r
- makeCall(b.fn, b.scope, args);\r
- if (cancel) {\r
- return returnValue;\r
- }\r
- });\r
-\r
- if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {\r
- returnValue = v;\r
- }\r
- Ext.each(e.after, function(a){\r
- makeCall(a.fn, a.scope, args);\r
- if (cancel) {\r
- return returnValue;\r
- }\r
- });\r
- return returnValue;\r
- };\r
- }\r
- return e;\r
- }\r
-\r
- return {\r
- // these are considered experimental\r
- // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
- // adds an 'interceptor' called before the original method\r
- beforeMethod : function(method, fn, scope){\r
- getMethodEvent.call(this, method).before.push({\r
- fn: fn,\r
- scope: scope\r
- });\r
- },\r
-\r
- // adds a 'sequence' called after the original method\r
- afterMethod : function(method, fn, scope){\r
- getMethodEvent.call(this, method).after.push({\r
- fn: fn,\r
- scope: scope\r
- });\r
- },\r
-\r
- removeMethodListener: function(method, fn, scope){\r
- var e = getMethodEvent.call(this, method), found = false;\r
- Ext.each(e.before, function(b, i, arr){\r
- if (b.fn == fn && b.scope == scope) {\r
- arr.splice(i, 1);\r
- found = true;\r
- return false;\r
- }\r
- });\r
- if (!found) {\r
- Ext.each(e.after, function(a, i, arr){\r
- if (a.fn == fn && a.scope == scope) {\r
- arr.splice(i, 1);\r
- return false;\r
- }\r
- });\r
- }\r
- },\r
-\r
- /**\r
- * Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.\r
- * @param {Object} o The Observable whose events this object is to relay.\r
- * @param {Array} events Array of event names to relay.\r
- */\r
- relayEvents : function(o, events){\r
- var me = this;\r
- function createHandler(ename){\r
- return function(){\r
- return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments)));\r
- };\r
- }\r
- Ext.each(events, function(ename){\r
- me.events[ename] = me.events[ename] || true;\r
- o.on(ename, createHandler(ename), me);\r
- });\r
- },\r
-\r
- /**\r
- * <p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
- * <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
- * <p>This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default\r
- * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\r
- * access the required target more quickly.</p>\r
- * <p>Example:</p><pre><code>\r
-Ext.override(Ext.form.Field, {\r
- // Add functionality to Field's initComponent to enable the change event to bubble\r
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\r
- this.enableBubble('change');\r
- }),\r
-\r
- // We know that we want Field's events to bubble directly to the FormPanel.\r
- getBubbleTarget : function() {\r
- if (!this.formPanel) {\r
- this.formPanel = this.findParentByType('form');\r
- }\r
- return this.formPanel;\r
- }\r
-});\r
-\r
-var myForm = new Ext.formPanel({\r
- title: 'User Details',\r
- items: [{\r
- ...\r
- }],\r
- listeners: {\r
- change: function() {\r
- // Title goes red if form has been modified.\r
- myForm.header.setStyle('color', 'red');\r
- }\r
- }\r
-});\r
-</code></pre>\r
- * @param {String/Array} events The event name to bubble, or an Array of event names.\r
- */\r
- enableBubble : function(events){\r
- var me = this;\r
- if(!Ext.isEmpty(events)){\r
- events = Ext.isArray(events) ? events : Ext.toArray(arguments);\r
- Ext.each(events, function(ename){\r
- ename = ename.toLowerCase();\r
- var ce = me.events[ename] || true;\r
- if (Ext.isBoolean(ce)) {\r
- ce = new Ext.util.Event(me, ename);\r
- me.events[ename] = ce;\r
- }\r
- ce.bubble = true;\r
- });\r
- }\r
- }\r
- };\r
-}());\r
-\r
-\r
-/**\r
- * Starts capture on the specified Observable. All events will be passed\r
- * to the supplied function with the event name + standard signature of the event\r
- * <b>before</b> the event is fired. If the supplied function returns false,\r
- * the event will not fire.\r
- * @param {Observable} o The Observable to capture events from.\r
- * @param {Function} fn The function to call when an event is fired.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Observable firing the event.\r
- * @static\r
- */\r
-Ext.util.Observable.capture = function(o, fn, scope){\r
- o.fireEvent = o.fireEvent.createInterceptor(fn, scope);\r
-};\r
-\r
-\r
-/**\r
- * Sets observability on the passed class constructor.<p>\r
- * <p>This makes any event fired on any instance of the passed class also fire a single event through\r
- * the <i>class</i> allowing for central handling of events on many instances at once.</p>\r
- * <p>Usage:</p><pre><code>\r
-Ext.util.Observable.observeClass(Ext.data.Connection);\r
-Ext.data.Connection.on('beforerequest', function(con, options) {\r
- console.log('Ajax request made to ' + options.url);\r
-});</code></pre>\r
- * @param {Function} c The class constructor to make observable.\r
- * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}. \r
- * @static\r
- */\r
-Ext.util.Observable.observeClass = function(c, listeners){\r
- if(c){\r
- if(!c.fireEvent){\r
- Ext.apply(c, new Ext.util.Observable());\r
- Ext.util.Observable.capture(c.prototype, c.fireEvent, c);\r
- }\r
- if(Ext.isObject(listeners)){\r
- c.on(listeners);\r
- }\r
- return c;\r
- }\r
-};/**\r
- * @class Ext.EventManager\r
- * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides\r
- * several useful events directly.\r
- * See {@link Ext.EventObject} for more details on normalized event objects.\r
- * @singleton\r
- */\r
-Ext.EventManager = function(){\r
- var docReadyEvent,\r
- docReadyProcId,\r
- docReadyState = false,\r
- E = Ext.lib.Event,\r
- D = Ext.lib.Dom,\r
- DOC = document,\r
- WINDOW = window,\r
- IEDEFERED = "ie-deferred-loader",\r
- DOMCONTENTLOADED = "DOMContentLoaded",\r
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,\r
- /*\r
- * This cache is used to hold special js objects, the document and window, that don't have an id. We need to keep\r
- * a reference to them so we can look them up at a later point.\r
- */\r
- specialElCache = [];\r
-\r
- function getId(el){\r
- var id = false,\r
- i = 0,\r
- len = specialElCache.length,\r
- id = false,\r
- skip = false,\r
- o;\r
- if(el){\r
- if(el.getElementById || el.navigator){\r
- // look up the id\r
- for(; i < len; ++i){\r
- o = specialElCache[i];\r
- if(o.el === el){\r
- id = o.id;\r
- break;\r
- }\r
- }\r
- if(!id){\r
- // for browsers that support it, ensure that give the el the same id\r
- id = Ext.id(el);\r
- specialElCache.push({\r
- id: id,\r
- el: el\r
- });\r
- skip = true;\r
- }\r
- }else{\r
- id = Ext.id(el);\r
- }\r
- if(!Ext.elCache[id]){\r
- Ext.Element.addToCache(new Ext.Element(el), id);\r
- if(skip){\r
- Ext.elCache[id].skipGC = true;\r
- }\r
- }\r
- }\r
- return id;\r
- };\r
-\r
- /// There is some jquery work around stuff here that isn't needed in Ext Core.\r
- function addListener(el, ename, fn, task, wrap, scope){\r
- el = Ext.getDom(el);\r
- var id = getId(el),\r
- es = Ext.elCache[id].events,\r
- wfn;\r
-\r
- wfn = E.on(el, ename, wrap);\r
- es[ename] = es[ename] || [];\r
-\r
- /* 0 = Original Function,\r
- 1 = Event Manager Wrapped Function,\r
- 2 = Scope,\r
- 3 = Adapter Wrapped Function,\r
- 4 = Buffered Task\r
- */\r
- es[ename].push([fn, wrap, scope, wfn, task]);\r
-\r
- // this is a workaround for jQuery and should somehow be removed from Ext Core in the future\r
- // without breaking ExtJS.\r
-\r
- // workaround for jQuery\r
- if(el.addEventListener && ename == "mousewheel"){\r
- var args = ["DOMMouseScroll", wrap, false];\r
- el.addEventListener.apply(el, args);\r
- Ext.EventManager.addListener(WINDOW, 'unload', function(){\r
- el.removeEventListener.apply(el, args);\r
- });\r
- }\r
-\r
- // fix stopped mousedowns on the document\r
- if(el == DOC && ename == "mousedown"){\r
- Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);\r
- }\r
- };\r
-\r
- function fireDocReady(){\r
- if(!docReadyState){\r
- Ext.isReady = docReadyState = true;\r
- if(docReadyProcId){\r
- clearInterval(docReadyProcId);\r
- }\r
- if(Ext.isGecko || Ext.isOpera) {\r
- DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);\r
- }\r
- if(Ext.isIE){\r
- var defer = DOC.getElementById(IEDEFERED);\r
- if(defer){\r
- defer.onreadystatechange = null;\r
- defer.parentNode.removeChild(defer);\r
- }\r
- }\r
- if(docReadyEvent){\r
- docReadyEvent.fire();\r
- docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true?\r
- }\r
- }\r
- };\r
-\r
- function initDocReady(){\r
- var COMPLETE = "complete";\r
-\r
- docReadyEvent = new Ext.util.Event();\r
- if (Ext.isGecko || Ext.isOpera) {\r
- DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);\r
- } else if (Ext.isIE){\r
- DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");\r
- DOC.getElementById(IEDEFERED).onreadystatechange = function(){\r
- if(this.readyState == COMPLETE){\r
- fireDocReady();\r
- }\r
- };\r
- } else if (Ext.isWebKit){\r
- docReadyProcId = setInterval(function(){\r
- if(DOC.readyState == COMPLETE) {\r
- fireDocReady();\r
- }\r
- }, 10);\r
- }\r
- // no matter what, make sure it fires on load\r
- E.on(WINDOW, "load", fireDocReady);\r
- };\r
-\r
- function createTargeted(h, o){\r
- return function(){\r
- var args = Ext.toArray(arguments);\r
- if(o.target == Ext.EventObject.setEvent(args[0]).target){\r
- h.apply(this, args);\r
- }\r
- };\r
- };\r
-\r
- function createBuffered(h, o, task){\r
- return function(e){\r
- // create new event object impl so new events don't wipe out properties\r
- task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);\r
- };\r
- };\r
-\r
- function createSingle(h, el, ename, fn, scope){\r
- return function(e){\r
- Ext.EventManager.removeListener(el, ename, fn, scope);\r
- h(e);\r
- };\r
- };\r
-\r
- function createDelayed(h, o, fn){\r
- return function(e){\r
- var task = new Ext.util.DelayedTask(h);\r
- if(!fn.tasks) {\r
- fn.tasks = [];\r
- }\r
- fn.tasks.push(task);\r
- task.delay(o.delay || 10, h, null, [new Ext.EventObjectImpl(e)]);\r
- };\r
- };\r
-\r
- function listen(element, ename, opt, fn, scope){\r
- var o = !Ext.isObject(opt) ? {} : opt,\r
- el = Ext.getDom(element), task;\r
-\r
- fn = fn || o.fn;\r
- scope = scope || o.scope;\r
-\r
- if(!el){\r
- throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';\r
- }\r
- function h(e){\r
- // prevent errors while unload occurring\r
- if(!Ext){// !window[xname]){ ==> can't we do this?\r
- return;\r
- }\r
- e = Ext.EventObject.setEvent(e);\r
- var t;\r
- if (o.delegate) {\r
- if(!(t = e.getTarget(o.delegate, el))){\r
- return;\r
- }\r
- } else {\r
- t = e.target;\r
- }\r
- if (o.stopEvent) {\r
- e.stopEvent();\r
- }\r
- if (o.preventDefault) {\r
- e.preventDefault();\r
- }\r
- if (o.stopPropagation) {\r
- e.stopPropagation();\r
- }\r
- if (o.normalized) {\r
- e = e.browserEvent;\r
- }\r
-\r
- fn.call(scope || el, e, t, o);\r
- };\r
- if(o.target){\r
- h = createTargeted(h, o);\r
- }\r
- if(o.delay){\r
- h = createDelayed(h, o, fn);\r
- }\r
- if(o.single){\r
- h = createSingle(h, el, ename, fn, scope);\r
- }\r
- if(o.buffer){\r
- task = new Ext.util.DelayedTask(h);\r
- h = createBuffered(h, o, task);\r
- }\r
-\r
- addListener(el, ename, fn, task, h, scope);\r
- return h;\r
- };\r
-\r
- var pub = {\r
- /**\r
- * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will\r
- * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.\r
- * @param {String/HTMLElement} el The html element or id to assign the event handler to.\r
- * @param {String} eventName The name of the event to listen for.\r
- * @param {Function} handler The handler function the event invokes. This function is passed\r
- * the following parameters:<ul>\r
- * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>\r
- * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.\r
- * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>\r
- * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>\r
- * </ul>\r
- * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.\r
- * @param {Object} options (optional) An object containing handler configuration properties.\r
- * This may contain any of the following properties:<ul>\r
- * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>\r
- * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>\r
- * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>\r
- * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>\r
- * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>\r
- * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>\r
- * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>\r
- * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>\r
- * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed\r
- * by the specified number of milliseconds. If the event fires again within that time, the original\r
- * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>\r
- * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>\r
- * </ul><br>\r
- * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>\r
- */\r
- addListener : function(element, eventName, fn, scope, options){\r
- if(Ext.isObject(eventName)){\r
- var o = eventName, e, val;\r
- for(e in o){\r
- val = o[e];\r
- if(!propRe.test(e)){\r
- if(Ext.isFunction(val)){\r
- // shared options\r
- listen(element, e, o, val, o.scope);\r
- }else{\r
- // individual options\r
- listen(element, e, val);\r
- }\r
- }\r
- }\r
- } else {\r
- listen(element, eventName, options, fn, scope);\r
- }\r
- },\r
-\r
- /**\r
- * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically\r
- * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.\r
- * @param {String/HTMLElement} el The id or html element from which to remove the listener.\r
- * @param {String} eventName The name of the event.\r
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>\r
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,\r
- * then this must refer to the same object.\r
- */\r
- removeListener : function(el, eventName, fn, scope){\r
- el = Ext.getDom(el);\r
- var id = getId(el),\r
- f = el && (Ext.elCache[id].events)[eventName] || [],\r
- wrap, i, l, k, len, fnc;\r
-\r
- for (i = 0, len = f.length; i < len; i++) {\r
-\r
- /* 0 = Original Function,\r
- 1 = Event Manager Wrapped Function,\r
- 2 = Scope,\r
- 3 = Adapter Wrapped Function,\r
- 4 = Buffered Task\r
- */\r
- if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) {\r
- if(fnc[4]) {\r
- fnc[4].cancel();\r
- }\r
- k = fn.tasks && fn.tasks.length;\r
- if(k) {\r
- while(k--) {\r
- fn.tasks[k].cancel();\r
- }\r
- delete fn.tasks;\r
- }\r
- wrap = fnc[1];\r
- E.un(el, eventName, E.extAdapter ? fnc[3] : wrap);\r
-\r
- // jQuery workaround that should be removed from Ext Core\r
- if(wrap && el.addEventListener && eventName == "mousewheel"){\r
- el.removeEventListener("DOMMouseScroll", wrap, false);\r
- }\r
-\r
- // fix stopped mousedowns on the document\r
- if(wrap && el == DOC && eventName == "mousedown"){\r
- Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);\r
- }\r
-\r
- f.splice(i, 1);\r
- if (f.length === 0) {\r
- delete Ext.elCache[id].events[eventName];\r
- }\r
- for (k in Ext.elCache[id].events) {\r
- return false;\r
- }\r
- Ext.elCache[id].events = {};\r
- return false;\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}\r
- * directly on an Element in favor of calling this version.\r
- * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.\r
- */\r
- removeAll : function(el){\r
- el = Ext.getDom(el);\r
- var id = getId(el),\r
- ec = Ext.elCache[id] || {},\r
- es = ec.events || {},\r
- f, i, len, ename, fn, k, wrap;\r
-\r
- for(ename in es){\r
- if(es.hasOwnProperty(ename)){\r
- f = es[ename];\r
- /* 0 = Original Function,\r
- 1 = Event Manager Wrapped Function,\r
- 2 = Scope,\r
- 3 = Adapter Wrapped Function,\r
- 4 = Buffered Task\r
- */\r
- for (i = 0, len = f.length; i < len; i++) {\r
- fn = f[i];\r
- if(fn[4]) {\r
- fn[4].cancel();\r
- }\r
- if(fn[0].tasks && (k = fn[0].tasks.length)) {\r
- while(k--) {\r
- fn[0].tasks[k].cancel();\r
- }\r
- delete fn.tasks;\r
- }\r
- wrap = fn[1];\r
- E.un(el, ename, E.extAdapter ? fn[3] : wrap);\r
-\r
- // jQuery workaround that should be removed from Ext Core\r
- if(el.addEventListener && wrap && ename == "mousewheel"){\r
- el.removeEventListener("DOMMouseScroll", wrap, false);\r
- }\r
-\r
- // fix stopped mousedowns on the document\r
- if(wrap && el == DOC && ename == "mousedown"){\r
- Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);\r
- }\r
- }\r
- }\r
- }\r
- if (Ext.elCache[id]) {\r
- Ext.elCache[id].events = {};\r
- }\r
- },\r
-\r
- getListeners : function(el, eventName) {\r
- el = Ext.getDom(el);\r
- var id = getId(el),\r
- ec = Ext.elCache[id] || {},\r
- es = ec.events || {},\r
- results = [];\r
- if (es && es[eventName]) {\r
- return es[eventName];\r
- } else {\r
- return null;\r
- }\r
- },\r
-\r
- purgeElement : function(el, recurse, eventName) {\r
- el = Ext.getDom(el);\r
- var id = getId(el),\r
- ec = Ext.elCache[id] || {},\r
- es = ec.events || {},\r
- i, f, len;\r
- if (eventName) {\r
- if (es && es.hasOwnProperty(eventName)) {\r
- f = es[eventName];\r
- for (i = 0, len = f.length; i < len; i++) {\r
- Ext.EventManager.removeListener(el, eventName, f[i][0]);\r
- }\r
- }\r
- } else {\r
- Ext.EventManager.removeAll(el);\r
- }\r
- if (recurse && el && el.childNodes) {\r
- for (i = 0, len = el.childNodes.length; i < len; i++) {\r
- Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName);\r
- }\r
- }\r
- },\r
-\r
- _unload : function() {\r
- var el;\r
- for (el in Ext.elCache) {\r
- Ext.EventManager.removeAll(el);\r
- }\r
- delete Ext.elCache;\r
- delete Ext.Element._flyweights;\r
- },\r
- /**\r
- * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be\r
- * accessed shorthanded as Ext.onReady().\r
- * @param {Function} fn The method the event invokes.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.\r
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options\r
- * <code>{single: true}</code> be used so that the handler is removed on first invocation.\r
- */\r
- onDocumentReady : function(fn, scope, options){\r
- if(docReadyState){ // if it already fired\r
- docReadyEvent.addListener(fn, scope, options);\r
- docReadyEvent.fire();\r
- docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true?\r
- } else {\r
- if(!docReadyEvent) initDocReady();\r
- options = options || {};\r
- options.delay = options.delay || 1;\r
- docReadyEvent.addListener(fn, scope, options);\r
- }\r
- }\r
- };\r
- /**\r
- * Appends an event handler to an element. Shorthand for {@link #addListener}.\r
- * @param {String/HTMLElement} el The html element or id to assign the event handler to\r
- * @param {String} eventName The name of the event to listen for.\r
- * @param {Function} handler The handler function the event invokes.\r
- * @param {Object} scope (optional) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.\r
- * @param {Object} options (optional) An object containing standard {@link #addListener} options\r
- * @member Ext.EventManager\r
- * @method on\r
- */\r
- pub.on = pub.addListener;\r
- /**\r
- * Removes an event handler from an element. Shorthand for {@link #removeListener}.\r
- * @param {String/HTMLElement} el The id or html element from which to remove the listener.\r
- * @param {String} eventName The name of the event.\r
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>\r
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,\r
- * then this must refer to the same object.\r
- * @member Ext.EventManager\r
- * @method un\r
- */\r
- pub.un = pub.removeListener;\r
-\r
- pub.stoppedMouseDownEvent = new Ext.util.Event();\r
- return pub;\r
-}();\r
-/**\r
- * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.\r
- * @param {Function} fn The method the event invokes.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.\r
- * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options\r
- * <code>{single: true}</code> be used so that the handler is removed on first invocation.\r
- * @member Ext\r
- * @method onReady\r
- */\r
-Ext.onReady = Ext.EventManager.onDocumentReady;\r
-\r
-\r
-//Initialize doc classes\r
-(function(){\r
-\r
- var initExtCss = function(){\r
- // find the body element\r
- var bd = document.body || document.getElementsByTagName('body')[0];\r
- if(!bd){ return false; }\r
- var cls = [' ',\r
- Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))\r
- : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')\r
- : Ext.isOpera ? "ext-opera"\r
- : Ext.isWebKit ? "ext-webkit" : ""];\r
-\r
- if(Ext.isSafari){\r
- cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));\r
- }else if(Ext.isChrome){\r
- cls.push("ext-chrome");\r
- }\r
-\r
- if(Ext.isMac){\r
- cls.push("ext-mac");\r
- }\r
- if(Ext.isLinux){\r
- cls.push("ext-linux");\r
- }\r
-\r
- if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"\r
- var p = bd.parentNode;\r
- if(p){\r
- p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';\r
- }\r
- }\r
- bd.className += cls.join(' ');\r
- return true;\r
- }\r
-\r
- if(!initExtCss()){\r
- Ext.onReady(initExtCss);\r
- }\r
-})();\r
-\r
-\r
-/**\r
- * @class Ext.EventObject\r
- * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject\r
- * wraps the browser's native event-object normalizing cross-browser differences,\r
- * such as which mouse button is clicked, keys pressed, mechanisms to stop\r
- * event-propagation along with a method to prevent default actions from taking place.\r
- * <p>For example:</p>\r
- * <pre><code>\r
-function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject\r
- e.preventDefault();\r
- var target = e.getTarget(); // same as t (the target HTMLElement)\r
- ...\r
-}\r
-var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}\r
-myDiv.on( // 'on' is shorthand for addListener\r
- "click", // perform an action on click of myDiv\r
- handleClick // reference to the action handler\r
-);\r
-// other methods to do the same:\r
-Ext.EventManager.on("myDiv", 'click', handleClick);\r
-Ext.EventManager.addListener("myDiv", 'click', handleClick);\r
- </code></pre>\r
- * @singleton\r
- */\r
-Ext.EventObject = function(){\r
- var E = Ext.lib.Event,\r
- // safari keypress events for special keys return bad keycodes\r
- safariKeys = {\r
- 3 : 13, // enter\r
- 63234 : 37, // left\r
- 63235 : 39, // right\r
- 63232 : 38, // up\r
- 63233 : 40, // down\r
- 63276 : 33, // page up\r
- 63277 : 34, // page down\r
- 63272 : 46, // delete\r
- 63273 : 36, // home\r
- 63275 : 35 // end\r
- },\r
- // normalize button clicks\r
- btnMap = Ext.isIE ? {1:0,4:1,2:2} :\r
- (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});\r
-\r
- Ext.EventObjectImpl = function(e){\r
- if(e){\r
- this.setEvent(e.browserEvent || e);\r
- }\r
- };\r
-\r
- Ext.EventObjectImpl.prototype = {\r
- /** @private */\r
- setEvent : function(e){\r
- var me = this;\r
- if(e == me || (e && e.browserEvent)){ // already wrapped\r
- return e;\r
- }\r
- me.browserEvent = e;\r
- if(e){\r
- // normalize buttons\r
- me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);\r
- if(e.type == 'click' && me.button == -1){\r
- me.button = 0;\r
- }\r
- me.type = e.type;\r
- me.shiftKey = e.shiftKey;\r
- // mac metaKey behaves like ctrlKey\r
- me.ctrlKey = e.ctrlKey || e.metaKey || false;\r
- me.altKey = e.altKey;\r
- // in getKey these will be normalized for the mac\r
- me.keyCode = e.keyCode;\r
- me.charCode = e.charCode;\r
- // cache the target for the delayed and or buffered events\r
- me.target = E.getTarget(e);\r
- // same for XY\r
- me.xy = E.getXY(e);\r
- }else{\r
- me.button = -1;\r
- me.shiftKey = false;\r
- me.ctrlKey = false;\r
- me.altKey = false;\r
- me.keyCode = 0;\r
- me.charCode = 0;\r
- me.target = null;\r
- me.xy = [0, 0];\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Stop the event (preventDefault and stopPropagation)\r
- */\r
- stopEvent : function(){\r
- var me = this;\r
- if(me.browserEvent){\r
- if(me.browserEvent.type == 'mousedown'){\r
- Ext.EventManager.stoppedMouseDownEvent.fire(me);\r
- }\r
- E.stopEvent(me.browserEvent);\r
- }\r
- },\r
-\r
- /**\r
- * Prevents the browsers default handling of the event.\r
- */\r
- preventDefault : function(){\r
- if(this.browserEvent){\r
- E.preventDefault(this.browserEvent);\r
- }\r
- },\r
-\r
- /**\r
- * Cancels bubbling of the event.\r
- */\r
- stopPropagation : function(){\r
- var me = this;\r
- if(me.browserEvent){\r
- if(me.browserEvent.type == 'mousedown'){\r
- Ext.EventManager.stoppedMouseDownEvent.fire(me);\r
- }\r
- E.stopPropagation(me.browserEvent);\r
- }\r
- },\r
-\r
- /**\r
- * Gets the character code for the event.\r
- * @return {Number}\r
- */\r
- getCharCode : function(){\r
- return this.charCode || this.keyCode;\r
- },\r
-\r
- /**\r
- * Returns a normalized keyCode for the event.\r
- * @return {Number} The key code\r
- */\r
- getKey : function(){\r
- return this.normalizeKey(this.keyCode || this.charCode)\r
- },\r
-\r
- // private\r
- normalizeKey: function(k){\r
- return Ext.isSafari ? (safariKeys[k] || k) : k;\r
- },\r
-\r
- /**\r
- * Gets the x coordinate of the event.\r
- * @return {Number}\r
- */\r
- getPageX : function(){\r
- return this.xy[0];\r
- },\r
-\r
- /**\r
- * Gets the y coordinate of the event.\r
- * @return {Number}\r
- */\r
- getPageY : function(){\r
- return this.xy[1];\r
- },\r
-\r
- /**\r
- * Gets the page coordinates of the event.\r
- * @return {Array} The xy values like [x, y]\r
- */\r
- getXY : function(){\r
- return this.xy;\r
- },\r
-\r
- /**\r
- * Gets the target for the event.\r
- * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target\r
- * @param {Number/Mixed} maxDepth (optional) The max depth to\r
- search as a number or element (defaults to 10 || document.body)\r
- * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node\r
- * @return {HTMLelement}\r
- */\r
- getTarget : function(selector, maxDepth, returnEl){\r
- return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);\r
- },\r
-\r
- /**\r
- * Gets the related target.\r
- * @return {HTMLElement}\r
- */\r
- getRelatedTarget : function(){\r
- return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;\r
- },\r
-\r
- /**\r
- * Normalizes mouse wheel delta across browsers\r
- * @return {Number} The delta\r
- */\r
- getWheelDelta : function(){\r
- var e = this.browserEvent;\r
- var delta = 0;\r
- if(e.wheelDelta){ /* IE/Opera. */\r
- delta = e.wheelDelta/120;\r
- }else if(e.detail){ /* Mozilla case. */\r
- delta = -e.detail/3;\r
- }\r
- return delta;\r
- },\r
-\r
- /**\r
- * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.\r
- * Example usage:<pre><code>\r
- // Handle click on any child of an element\r
- Ext.getBody().on('click', function(e){\r
- if(e.within('some-el')){\r
- alert('Clicked on a child of some-el!');\r
- }\r
- });\r
-\r
- // Handle click directly on an element, ignoring clicks on child nodes\r
- Ext.getBody().on('click', function(e,t){\r
- if((t.id == 'some-el') && !e.within(t, true)){\r
- alert('Clicked directly on some-el!');\r
- }\r
- });\r
- </code></pre>\r
- * @param {Mixed} el The id, DOM element or Ext.Element to check\r
- * @param {Boolean} related (optional) true to test if the related target is within el instead of the target\r
- * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target\r
- * @return {Boolean}\r
- */\r
- within : function(el, related, allowEl){\r
- if(el){\r
- var t = this[related ? "getRelatedTarget" : "getTarget"]();\r
- return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));\r
- }\r
- return false;\r
- }\r
- };\r
-\r
- return new Ext.EventObjectImpl();\r
-}();\r
-/**
-* @class Ext.EventManager
-*/
-Ext.apply(Ext.EventManager, function(){
- var resizeEvent,
- resizeTask,
- textEvent,
- textSize,
- D = Ext.lib.Dom,
- propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
- curWidth = 0,
- curHeight = 0,
- // note 1: IE fires ONLY the keydown event on specialkey autorepeat
- // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
- // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
- useKeydown = Ext.isWebKit ?
- Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
- !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
+ return r;
+ },
- return {
- // private
- doResizeEvent: function(){
- var h = D.getViewHeight(),
- w = D.getViewWidth();
+ "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;
+ },
- //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);
- }
- },
+ "not" : function(c, ss){
+ return Ext.DomQuery.filter(c, ss, true);
+ },
- /**
- * 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 (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
- */
- onWindowResize : function(fn, scope, options){
- if(!resizeEvent){
- resizeEvent = new Ext.util.Event();
- resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
- Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
- }
- resizeEvent.addListener(fn, scope, options);
- },
+ "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;
+ },
- // exposed only to allow manual firing
- fireWindowResize : function(){
- if(resizeEvent){
- resizeTask.delay(100);
- }
- },
+ "odd" : function(c){
+ return this["nth-child"](c, "odd");
+ },
- /**
- * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
- * @param {Function} fn The function the event invokes.
- * @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
- * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
- */
- onTextResize : function(fn, scope, options){
- if(!textEvent){
- textEvent = new Ext.util.Event();
- var textEl = new Ext.Element(document.createElement('div'));
- textEl.dom.className = 'x-text-resize';
- textEl.dom.innerHTML = 'X';
- textEl.appendTo(document.body);
- textSize = textEl.dom.offsetHeight;
- setInterval(function(){
- if(textEl.dom.offsetHeight != textSize){
- textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
- }
- }, this.textResizeInterval);
- }
- textEvent.addListener(fn, scope, options);
- },
+ "even" : function(c){
+ return this["nth-child"](c, "even");
+ },
- /**
- * 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);
- }
- },
+ "nth" : function(c, a){
+ return c[a-1] || [];
+ },
- // private
- fireResize : function(){
- if(resizeEvent){
- resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
- }
- },
+ "first" : function(c){
+ return c[0] || [];
+ },
- /**
- * The frequency, in milliseconds, to check for text resize events (defaults to 50)
- */
- textResizeInterval : 50,
+ "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
+ * <p> The DelayedTask class provides a convenient way to "buffer" the execution of a method,
+ * performing setTimeout where a new timeout cancels the old timeout. When called, the
+ * task will wait the specified time period before executing. If durng that time period,
+ * the task is called again, the original call will be cancelled. This continues so that
+ * the function is only called a single time for each iteration.</p>
+ * <p>This method is especially useful for things like detecting whether a user has finished
+ * typing in a text field. An example would be performing validation on a keypress. You can
+ * use this class to buffer the keypress events for a certain number of milliseconds, and
+ * perform only if they stop for that amount of time. Usage:</p><pre><code>
+var task = new Ext.util.DelayedTask(function(){
+ alert(Ext.getDom('myInputField').value.length);
+});
+// Wait 500ms before calling our function. If the user presses another key
+// during that 500ms, it will be cancelled and we'll wait another 500ms.
+Ext.get('myInputField').on('keypress', function(){
+ task.{@link #delay}(500);
+});
+ * </code></pre>
+ * <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
+ * option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
+ * also setup a delayed task for you to buffer events.</p>
+ * @constructor The parameters to this constructor serve as defaults and are not required.
+ * @param {Function} fn (optional) The default function to call.
+ * @param {Object} scope The default scope (The <code><b>this</b></code> reference) in which the
+ * function is called. If not specified, <code>this</code> will refer to the browser window.
+ * @param {Array} args (optional) The default Array of arguments.
+ */
+Ext.util.DelayedTask = function(fn, scope, args){
+ var me = this,
+ id,
+ call = function(){
+ clearInterval(id);
+ id = null;
+ fn.apply(scope, args || []);
+ };
+
+ /**
+ * Cancels any pending timeout and queues a new one
+ * @param {Number} delay The milliseconds to delay
+ * @param {Function} newFn (optional) Overrides function passed to constructor
+ * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
+ * is specified, <code>this</code> will refer to the browser window.
+ * @param {Array} newArgs (optional) Overrides args passed to constructor
+ */
+ me.delay = function(delay, newFn, newScope, newArgs){
+ me.cancel();
+ fn = newFn || fn;
+ scope = newScope || scope;
+ args = newArgs || args;
+ id = setInterval(call, delay);
+ };
+
+ /**
+ * Cancel the last queued timeout
+ */
+ me.cancel = function(){
+ if(id){
+ clearInterval(id);
+ id = null;
+ }
+ };
+};(function(){
+
+var EXTUTIL = Ext.util,
+ TOARRAY = Ext.toArray,
+ EACH = Ext.each,
+ ISOBJECT = Ext.isObject,
+ TRUE = true,
+ FALSE = false;
+/**
+ * @class Ext.util.Observable
+ * Base class that provides a common interface for publishing events. Subclasses are expected to
+ * to have a property "events" with all the events defined, and, optionally, a property "listeners"
+ * with configured listeners defined.<br>
+ * For example:
+ * <pre><code>
+Employee = Ext.extend(Ext.util.Observable, {
+ constructor: function(config){
+ this.name = config.name;
+ this.addEvents({
+ "fired" : true,
+ "quit" : true
+ });
+
+ // Copy configured listeners into *this* object so that the base class's
+ // constructor will add them.
+ this.listeners = config.listeners;
+
+ // Call our superclass constructor to complete construction process.
+ Employee.superclass.constructor.call(this, config)
+ }
+});
+</code></pre>
+ * This could then be used like this:<pre><code>
+var newEmployee = new Employee({
+ name: employeeName,
+ listeners: {
+ quit: function() {
+ // By default, "this" will be the object that fired the event.
+ alert(this.name + " has quit!");
+ }
+ }
+});
+</code></pre>
+ */
+EXTUTIL.Observable = function(){
+ /**
+ * @cfg {Object} listeners (optional) <p>A config object containing one or more event handlers to be added to this
+ * object during initialization. This should be a valid listeners config object as specified in the
+ * {@link #addListener} example for attaching multiple handlers at once.</p>
+ * <br><p><b><u>DOM events from ExtJs {@link Ext.Component Components}</u></b></p>
+ * <br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
+ * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
+ * <b><code>{@link Ext.DataView#click click}</code></b> event passing the node clicked on. To access DOM
+ * events directly from a Component's HTMLElement, listeners must be added to the <i>{@link Ext.Component#getEl Element}</i> after the Component
+ * has been rendered. A plugin can simplify this step:<pre><code>
+// Plugin is configured with a listeners config object.
+// The Component is appended to the argument list of all handler functions.
+Ext.DomObserver = Ext.extend(Object, {
+ constructor: function(config) {
+ this.listeners = config.listeners ? config.listeners : config;
+ },
+
+ // Component passes itself into plugin's init method
+ init: function(c) {
+ var p, l = this.listeners;
+ for (p in l) {
+ if (Ext.isFunction(l[p])) {
+ l[p] = this.createHandler(l[p], c);
+ } else {
+ l[p].fn = this.createHandler(l[p].fn, c);
+ }
+ }
+
+ // Add the listeners to the Element immediately following the render call
+ c.render = c.render.{@link Function#createSequence createSequence}(function() {
+ var e = c.getEl();
+ if (e) {
+ e.on(l);
+ }
+ });
+ },
+
+ createHandler: function(fn, c) {
+ return function(e) {
+ fn.call(this, e, c);
+ };
+ }
+});
+
+var combo = new Ext.form.ComboBox({
+
+ // Collapse combo when its element is clicked on
+ plugins: [ new Ext.DomObserver({
+ click: function(evt, comp) {
+ comp.collapse();
+ }
+ })],
+ store: myStore,
+ typeAhead: true,
+ mode: 'local',
+ triggerAction: 'all'
+});
+ * </code></pre></p>
+ */
+ var me = this, e = me.events;
+ if(me.listeners){
+ me.on(me.listeners);
+ delete me.listeners;
+ }
+ me.events = e || {};
+};
+
+EXTUTIL.Observable.prototype = {
+ // private
+ filterOptRe : /^(?:scope|delay|buffer|single)$/,
+
+ /**
+ * <p>Fires the specified event with the passed parameters (minus the event name).</p>
+ * <p>An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget})
+ * by calling {@link #enableBubble}.</p>
+ * @param {String} eventName The name of the event to fire.
+ * @param {Object...} args Variable number of parameters are passed to handlers.
+ * @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
+ */
+ fireEvent : function(){
+ var a = TOARRAY(arguments),
+ ename = a[0].toLowerCase(),
+ me = this,
+ ret = TRUE,
+ ce = me.events[ename],
+ q,
+ c;
+ if (me.eventsSuspended === TRUE) {
+ if (q = me.eventQueue) {
+ q.push(a);
+ }
+ }
+ else if(ISOBJECT(ce) && ce.bubble){
+ if(ce.fire.apply(ce, a.slice(1)) === FALSE) {
+ return FALSE;
+ }
+ c = me.getBubbleTarget && me.getBubbleTarget();
+ if(c && c.enableBubble) {
+ if(!c.events[ename] || !Ext.isObject(c.events[ename]) || !c.events[ename].bubble) {
+ c.enableBubble(ename);
+ }
+ return c.fireEvent.apply(c, a);
+ }
+ }
+ else {
+ if (ISOBJECT(ce)) {
+ a.shift();
+ ret = ce.fire.apply(ce, a);
+ }
+ }
+ return ret;
+ },
+
+ /**
+ * Appends an event handler to this object.
+ * @param {String} eventName The name of the event to listen for.
+ * @param {Function} handler The method the event invokes.
+ * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to the object which fired the event.</b>
+ * @param {Object} options (optional) An object containing handler configuration.
+ * properties. This may contain any of the following properties:<ul>
+ * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to the object which fired the event.</b></div></li>
+ * <li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+ * <li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+ * <li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
+ * by the specified number of milliseconds. If the event fires again within that time, the original
+ * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+ * <li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
+ * if the event was bubbled up from a child Observable.</div></li>
+ * </ul><br>
+ * <p>
+ * <b>Combining Options</b><br>
+ * Using the options argument, it is possible to combine different types of listeners:<br>
+ * <br>
+ * A delayed, one-time listener.
+ * <pre><code>
+myDataView.on('click', this.onClick, this, {
+single: true,
+delay: 100
+});</code></pre>
+ * <p>
+ * <b>Attaching multiple handlers in 1 call</b><br>
+ * The method also allows for a single argument to be passed which is a config object containing properties
+ * which specify multiple handlers.
+ * <p>
+ * <pre><code>
+myGridPanel.on({
+'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+},
+'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+},
+'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+}
+});</code></pre>
+ * <p>
+ * Or a shorthand syntax:<br>
+ * <pre><code>
+myGridPanel.on({
+'click' : this.onClick,
+'mouseover' : this.onMouseOver,
+'mouseout' : this.onMouseOut,
+ scope: this
+});</code></pre>
+ */
+ addListener : function(eventName, fn, scope, o){
+ var me = this,
+ e,
+ oe,
+ isF,
+ ce;
+ if (ISOBJECT(eventName)) {
+ o = eventName;
+ for (e in o){
+ oe = o[e];
+ if (!me.filterOptRe.test(e)) {
+ me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
+ }
+ }
+ } else {
+ eventName = eventName.toLowerCase();
+ ce = me.events[eventName] || TRUE;
+ if (Ext.isBoolean(ce)) {
+ me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
+ }
+ ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
+ }
+ },
+
+ /**
+ * Removes an event handler.
+ * @param {String} eventName The type of event the handler was associated with.
+ * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope (optional) The scope originally specified for the handler.
+ */
+ removeListener : function(eventName, fn, scope){
+ var ce = this.events[eventName.toLowerCase()];
+ if (ISOBJECT(ce)) {
+ ce.removeListener(fn, scope);
+ }
+ },
+
+ /**
+ * Removes all listeners for this object
+ */
+ purgeListeners : function(){
+ var events = this.events,
+ evt,
+ key;
+ for(key in events){
+ evt = events[key];
+ if(ISOBJECT(evt)){
+ evt.clearListeners();
+ }
+ }
+ },
+
+ /**
+ * Adds the specified events to the list of events which this Observable may fire.
+ * @param {Object|String} o Either an object with event names as properties with a value of <code>true</code>
+ * or the first event name string if multiple event names are being passed as separate parameters.
+ * @param {string} Optional. Event name if multiple event names are being passed as separate parameters.
+ * Usage:<pre><code>
+this.addEvents('storeloaded', 'storecleared');
+</code></pre>
+ */
+ addEvents : function(o){
+ var me = this;
+ me.events = me.events || {};
+ if (Ext.isString(o)) {
+ var a = arguments,
+ i = a.length;
+ while(i--) {
+ me.events[a[i]] = me.events[a[i]] || TRUE;
+ }
+ } else {
+ Ext.applyIf(me.events, o);
+ }
+ },
+
+ /**
+ * Checks to see if this object has any listeners for a specified event
+ * @param {String} eventName The name of the event to check for
+ * @return {Boolean} True if the event is being listened for, else false
+ */
+ hasListener : function(eventName){
+ var e = this.events[eventName.toLowerCase()];
+ return ISOBJECT(e) && e.listeners.length > 0;
+ },
+
+ /**
+ * Suspend the firing of all events. (see {@link #resumeEvents})
+ * @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
+ * after the {@link #resumeEvents} call instead of discarding all suspended events;
+ */
+ suspendEvents : function(queueSuspended){
+ this.eventsSuspended = TRUE;
+ if(queueSuspended && !this.eventQueue){
+ this.eventQueue = [];
+ }
+ },
+
+ /**
+ * Resume firing events. (see {@link #suspendEvents})
+ * If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
+ * events fired during event suspension will be sent to any listeners now.
+ */
+ resumeEvents : function(){
+ var me = this,
+ queued = me.eventQueue || [];
+ me.eventsSuspended = FALSE;
+ delete me.eventQueue;
+ EACH(queued, function(e) {
+ me.fireEvent.apply(me, e);
+ });
+ }
+};
+
+var OBSERVABLE = EXTUTIL.Observable.prototype;
+/**
+ * Appends an event handler to this object (shorthand for {@link #addListener}.)
+ * @param {String} eventName The type of event to listen for
+ * @param {Function} handler The method the event invokes
+ * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to the object which fired the event.</b>
+ * @param {Object} options (optional) An object containing handler configuration.
+ * @method
+ */
+OBSERVABLE.on = OBSERVABLE.addListener;
+/**
+ * Removes an event handler (shorthand for {@link #removeListener}.)
+ * @param {String} eventName The type of event the handler was associated with.
+ * @param {Function} handler The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope (optional) The scope originally specified for the handler.
+ * @method
+ */
+OBSERVABLE.un = OBSERVABLE.removeListener;
+
+/**
+ * Removes <b>all</b> added captures from the Observable.
+ * @param {Observable} o The Observable to release
+ * @static
+ */
+EXTUTIL.Observable.releaseCapture = function(o){
+ o.fireEvent = OBSERVABLE.fireEvent;
+};
+
+function createTargeted(h, o, scope){
+ return function(){
+ if(o.target == arguments[0]){
+ h.apply(scope, TOARRAY(arguments));
+ }
+ };
+};
+
+function createBuffered(h, o, l, scope){
+ l.task = new EXTUTIL.DelayedTask();
+ return function(){
+ l.task.delay(o.buffer, h, scope, TOARRAY(arguments));
+ };
+};
+
+function createSingle(h, e, fn, scope){
+ return function(){
+ e.removeListener(fn, scope);
+ return h.apply(scope, arguments);
+ };
+};
+
+function createDelayed(h, o, l, scope){
+ return function(){
+ var task = new EXTUTIL.DelayedTask();
+ if(!l.tasks) {
+ l.tasks = [];
+ }
+ l.tasks.push(task);
+ task.delay(o.delay || 10, h, scope, TOARRAY(arguments));
+ };
+};
+
+EXTUTIL.Event = function(obj, name){
+ this.name = name;
+ this.obj = obj;
+ this.listeners = [];
+};
+
+EXTUTIL.Event.prototype = {
+ addListener : function(fn, scope, options){
+ var me = this,
+ l;
+ scope = scope || me.obj;
+ if(!me.isListening(fn, scope)){
+ l = me.createListener(fn, scope, options);
+ if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
+ me.listeners = me.listeners.slice(0);
+ }
+ me.listeners.push(l);
+ }
+ },
+
+ createListener: function(fn, scope, o){
+ o = o || {}, scope = scope || this.obj;
+ var l = {
+ fn: fn,
+ scope: scope,
+ options: o
+ }, h = fn;
+ if(o.target){
+ h = createTargeted(h, o, scope);
+ }
+ if(o.delay){
+ h = createDelayed(h, o, l, scope);
+ }
+ if(o.single){
+ h = createSingle(h, this, fn, scope);
+ }
+ if(o.buffer){
+ h = createBuffered(h, o, l, scope);
+ }
+ l.fireFn = h;
+ return l;
+ },
+
+ findListener : function(fn, scope){
+ var list = this.listeners,
+ i = list.length,
+ l;
+
+ 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,
+ args = TOARRAY(arguments),
+ listeners = me.listeners,
+ len = listeners.length,
+ i = 0,
+ l;
+
+ if(len > 0){
+ me.firing = TRUE;
+ for (; i < len; i++) {
+ l = listeners[i];
+ if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
+ return (me.firing = FALSE);
+ }
+ }
+ }
+ me.firing = FALSE;
+ return TRUE;
+ }
+};
+})();/**
+ * @class Ext.util.Observable
+ */
+Ext.apply(Ext.util.Observable.prototype, function(){
+ // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
+ // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
+ // private
+ function getMethodEvent(method){
+ var e = (this.methodEvents = this.methodEvents ||
+ {})[method], returnValue, v, cancel, obj = this;
+
+ if (!e) {
+ this.methodEvents[method] = e = {};
+ e.originalFn = this[method];
+ e.methodName = method;
+ e.before = [];
+ e.after = [];
+
+ var makeCall = function(fn, scope, args){
+ if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {
+ if (Ext.isObject(v)) {
+ returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;
+ cancel = !!v.cancel;
+ }
+ else
+ if (v === false) {
+ cancel = true;
+ }
+ else {
+ returnValue = v;
+ }
+ }
+ };
+
+ this[method] = function(){
+ var args = Ext.toArray(arguments);
+ returnValue = v = undefined;
+ cancel = false;
+
+ Ext.each(e.before, function(b){
+ makeCall(b.fn, b.scope, args);
+ if (cancel) {
+ return returnValue;
+ }
+ });
+
+ if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {
+ returnValue = v;
+ }
+ Ext.each(e.after, function(a){
+ makeCall(a.fn, a.scope, args);
+ if (cancel) {
+ return returnValue;
+ }
+ });
+ return returnValue;
+ };
+ }
+ return e;
+ }
+
+ return {
+ // these are considered experimental
+ // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
+ // adds an 'interceptor' called before the original method
+ beforeMethod : function(method, fn, scope){
+ getMethodEvent.call(this, method).before.push({
+ fn: fn,
+ scope: scope
+ });
+ },
+
+ // adds a 'sequence' called after the original method
+ afterMethod : function(method, fn, scope){
+ getMethodEvent.call(this, method).after.push({
+ fn: fn,
+ scope: scope
+ });
+ },
+
+ removeMethodListener: function(method, fn, scope){
+ var e = getMethodEvent.call(this, method), found = false;
+ Ext.each(e.before, function(b, i, arr){
+ if (b.fn == fn && b.scope == scope) {
+ arr.splice(i, 1);
+ found = true;
+ return false;
+ }
+ });
+ if (!found) {
+ Ext.each(e.after, function(a, i, arr){
+ if (a.fn == fn && a.scope == scope) {
+ arr.splice(i, 1);
+ return false;
+ }
+ });
+ }
+ },
+
+ /**
+ * Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.
+ * @param {Object} o The Observable whose events this object is to relay.
+ * @param {Array} events Array of event names to relay.
+ */
+ relayEvents : function(o, events){
+ var me = this;
+ function createHandler(ename){
+ return function(){
+ return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments)));
+ };
+ }
+ Ext.each(events, function(ename){
+ me.events[ename] = me.events[ename] || true;
+ o.on(ename, createHandler(ename), me);
+ });
+ },
+
+ /**
+ * <p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
+ * <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
+ * <p>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.</p>
+ * <p>Example:</p><pre><code>
+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');
+ }
+ }
+});
+</code></pre>
+ * @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 : Ext.toArray(arguments);
+ Ext.each(events, function(ename){
+ ename = ename.toLowerCase();
+ var ce = me.events[ename] || true;
+ if (Ext.isBoolean(ce)) {
+ ce = new Ext.util.Event(me, ename);
+ me.events[ename] = ce;
+ }
+ ce.bubble = true;
+ });
+ }
+ }
+ };
+}());
+
+
+/**
+ * Starts capture on the specified Observable. All events will be passed
+ * to the supplied function with the event name + standard signature of the event
+ * <b>before</b> the event is fired. If the supplied function returns false,
+ * the event will not fire.
+ * @param {Observable} o The Observable to capture events from.
+ * @param {Function} fn The function to call when an event is fired.
+ * @param {Object} scope (optional) The scope (<code>this</code> 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.<p>
+ * <p>This makes any event fired on any instance of the passed class also fire a single event through
+ * the <i>class</i> allowing for central handling of events on many instances at once.</p>
+ * <p>Usage:</p><pre><code>
+Ext.util.Observable.observeClass(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+ console.log('Ajax request made to ' + options.url);
+});</code></pre>
+ * @param {Function} c The class constructor to make observable.
+ * @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(Ext.isObject(listeners)){
+ 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 = !Ext.isObject(opt) ? {} : 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:<ul>
+ * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
+ * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
+ * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
+ * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>
+ * </ul>
+ * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:<ul>
+ * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>
+ * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>
+ * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
+ * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>
+ * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>
+ * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
+ * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>
+ * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+ * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
+ * by the specified number of milliseconds. If the event fires again within that time, the original
+ * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+ * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
+ * </ul><br>
+ * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>
+ */
+ addListener : function(element, eventName, fn, scope, options){
+ if(Ext.isObject(eventName)){
+ var o = eventName, e, val;
+ for(e in o){
+ val = o[e];
+ if(!propRe.test(e)){
+ if(Ext.isFunction(val)){
+ // shared options
+ listen(element, e, o, val, o.scope);
+ }else{
+ // individual options
+ listen(element, e, val);
+ }
+ }
+ }
+ } else {
+ listen(element, eventName, options, fn, scope);
+ }
+ },
+
+ /**
+ * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically
+ * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
+ * @param {String/HTMLElement} el The id or html element from which to remove the listener.
+ * @param {String} eventName The name of the event.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ */
+ removeListener : function(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;
+ (Ext.isObject(ajax.conn)) ? 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 (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
+ * <code>{single: true}</code> be used so that the handler is removed on first invocation.
+ */
+ onDocumentReady : function(fn, scope, options){
+ if(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) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.
+ * @param {Object} options (optional) An object containing standard {@link #addListener} options
+ * @member Ext.EventManager
+ * @method on
+ */
+ pub.on = pub.addListener;
+ /**
+ * Removes an event handler from an element. Shorthand for {@link #removeListener}.
+ * @param {String/HTMLElement} el The id or html element from which to remove the listener.
+ * @param {String} eventName The name of the event.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @member Ext.EventManager
+ * @method un
+ */
+ pub.un = pub.removeListener;
+
+ pub.stoppedMouseDownEvent = new Ext.util.Event();
+ return pub;
+}();
+/**
+ * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.
+ * @param {Function} fn The method the event invokes.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
+ * <code>{single: true}</code> be used so that the handler is removed on first invocation.
+ * @member Ext
+ * @method onReady
+ */
+Ext.onReady = Ext.EventManager.onDocumentReady;
+
+
+//Initialize doc classes
+(function(){
+
+ var initExtCss = function(){
+ // find the body element
+ var bd = document.body || document.getElementsByTagName('body')[0];
+ if(!bd){ return false; }
+ var cls = [' ',
+ Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
+ : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
+ : Ext.isOpera ? "ext-opera"
+ : Ext.isWebKit ? "ext-webkit" : ""];
+
+ if(Ext.isSafari){
+ cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
+ }else if(Ext.isChrome){
+ cls.push("ext-chrome");
+ }
+
+ if(Ext.isMac){
+ cls.push("ext-mac");
+ }
+ if(Ext.isLinux){
+ cls.push("ext-linux");
+ }
+
+ if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
+ var p = bd.parentNode;
+ if(p){
+ p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
+ }
+ }
+ bd.className += cls.join(' ');
+ return true;
+ }
+
+ if(!initExtCss()){
+ Ext.onReady(initExtCss);
+ }
+})();
+
+
+/**
+ * @class Ext.EventObject
+ * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
+ * wraps the browser's native event-object normalizing cross-browser differences,
+ * such as which mouse button is clicked, keys pressed, mechanisms to stop
+ * event-propagation along with a method to prevent default actions from taking place.
+ * <p>For example:</p>
+ * <pre><code>
+function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
+ e.preventDefault();
+ var target = e.getTarget(); // same as t (the target HTMLElement)
+ ...
+}
+var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}
+myDiv.on( // 'on' is shorthand for addListener
+ "click", // perform an action on click of myDiv
+ handleClick // reference to the action handler
+);
+// other methods to do the same:
+Ext.EventManager.on("myDiv", 'click', handleClick);
+Ext.EventManager.addListener("myDiv", 'click', handleClick);
+ </code></pre>
+ * @singleton
+ */
+Ext.EventObject = function(){
+ var E = Ext.lib.Event,
+ // safari keypress events for special keys return bad keycodes
+ safariKeys = {
+ 3 : 13, // enter
+ 63234 : 37, // left
+ 63235 : 39, // right
+ 63232 : 38, // up
+ 63233 : 40, // down
+ 63276 : 33, // page up
+ 63277 : 34, // page down
+ 63272 : 46, // delete
+ 63273 : 36, // home
+ 63275 : 35 // end
+ },
+ // normalize button clicks
+ btnMap = Ext.isIE ? {1:0,4:1,2:2} :
+ (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
+
+ Ext.EventObjectImpl = function(e){
+ if(e){
+ this.setEvent(e.browserEvent || e);
+ }
+ };
+
+ Ext.EventObjectImpl.prototype = {
+ /** @private */
+ setEvent : function(e){
+ var me = this;
+ if(e == me || (e && e.browserEvent)){ // already wrapped
+ return e;
+ }
+ me.browserEvent = e;
+ if(e){
+ // normalize buttons
+ me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
+ if(e.type == 'click' && me.button == -1){
+ me.button = 0;
+ }
+ me.type = e.type;
+ me.shiftKey = e.shiftKey;
+ // mac metaKey behaves like ctrlKey
+ me.ctrlKey = e.ctrlKey || e.metaKey || false;
+ me.altKey = e.altKey;
+ // in getKey these will be normalized for the mac
+ me.keyCode = e.keyCode;
+ me.charCode = e.charCode;
+ // cache the target for the delayed and or buffered events
+ me.target = E.getTarget(e);
+ // same for XY
+ me.xy = E.getXY(e);
+ }else{
+ me.button = -1;
+ me.shiftKey = false;
+ me.ctrlKey = false;
+ me.altKey = false;
+ me.keyCode = 0;
+ me.charCode = 0;
+ me.target = null;
+ me.xy = [0, 0];
+ }
+ return me;
+ },
+
+ /**
+ * Stop the event (preventDefault and stopPropagation)
+ */
+ stopEvent : function(){
+ var me = this;
+ if(me.browserEvent){
+ if(me.browserEvent.type == 'mousedown'){
+ Ext.EventManager.stoppedMouseDownEvent.fire(me);
+ }
+ E.stopEvent(me.browserEvent);
+ }
+ },
+
+ /**
+ * Prevents the browsers default handling of the event.
+ */
+ preventDefault : function(){
+ if(this.browserEvent){
+ E.preventDefault(this.browserEvent);
+ }
+ },
+
+ /**
+ * Cancels bubbling of the event.
+ */
+ stopPropagation : function(){
+ var me = this;
+ if(me.browserEvent){
+ if(me.browserEvent.type == 'mousedown'){
+ Ext.EventManager.stoppedMouseDownEvent.fire(me);
+ }
+ E.stopPropagation(me.browserEvent);
+ }
+ },
+
+ /**
+ * Gets the character code for the event.
+ * @return {Number}
+ */
+ getCharCode : function(){
+ return this.charCode || this.keyCode;
+ },
+
+ /**
+ * Returns a normalized keyCode for the event.
+ * @return {Number} The key code
+ */
+ getKey : function(){
+ return this.normalizeKey(this.keyCode || this.charCode)
+ },
+
+ // private
+ normalizeKey: function(k){
+ return Ext.isSafari ? (safariKeys[k] || k) : k;
+ },
+
+ /**
+ * Gets the x coordinate of the event.
+ * @return {Number}
+ */
+ getPageX : function(){
+ return this.xy[0];
+ },
+
+ /**
+ * Gets the y coordinate of the event.
+ * @return {Number}
+ */
+ getPageY : function(){
+ return this.xy[1];
+ },
+
+ /**
+ * Gets the page coordinates of the event.
+ * @return {Array} The xy values like [x, y]
+ */
+ getXY : function(){
+ return this.xy;
+ },
+
+ /**
+ * Gets the target for the event.
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+ * @param {Number/Mixed} maxDepth (optional) The max depth to
+ search as a number or element (defaults to 10 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
+ * @return {HTMLelement}
+ */
+ getTarget : function(selector, maxDepth, returnEl){
+ return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
+ },
+
+ /**
+ * Gets the related target.
+ * @return {HTMLElement}
+ */
+ getRelatedTarget : function(){
+ return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
+ },
+
+ /**
+ * Normalizes mouse wheel delta across browsers
+ * @return {Number} The delta
+ */
+ getWheelDelta : function(){
+ var e = this.browserEvent;
+ var delta = 0;
+ if(e.wheelDelta){ /* IE/Opera. */
+ delta = e.wheelDelta/120;
+ }else if(e.detail){ /* Mozilla case. */
+ delta = -e.detail/3;
+ }
+ return delta;
+ },
+
+ /**
+ * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
+ * Example usage:<pre><code>
+ // Handle click on any child of an element
+ Ext.getBody().on('click', function(e){
+ if(e.within('some-el')){
+ alert('Clicked on a child of some-el!');
+ }
+ });
+
+ // Handle click directly on an element, ignoring clicks on child nodes
+ Ext.getBody().on('click', function(e,t){
+ if((t.id == 'some-el') && !e.within(t, true)){
+ alert('Clicked directly on some-el!');
+ }
+ });
+ </code></pre>
+ * @param {Mixed} el The id, DOM element or Ext.Element to check
+ * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
+ * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
+ * @return {Boolean}
+ */
+ within : function(el, related, allowEl){
+ if(el){
+ var t = this[related ? "getRelatedTarget" : "getTarget"]();
+ return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
+ }
+ return false;
+ }
+ };
+
+ return new Ext.EventObjectImpl();
+}();
+/**
+* @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 (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
+ */
+ onWindowResize : function(fn, scope, options){
+ if(!resizeEvent){
+ resizeEvent = new Ext.util.Event();
+ resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
+ Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
+ }
+ resizeEvent.addListener(fn, scope, options);
+ },
+
+ // exposed only to allow manual firing
+ fireWindowResize : function(){
+ if(resizeEvent){
+ 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 (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options Options object as passed to {@link Ext.Element#addListener}
+ */
+ onTextResize : function(fn, scope, options){
+ if(!textEvent){
+ textEvent = new Ext.util.Event();
+ var textEl = new Ext.Element(document.createElement('div'));
+ textEl.dom.className = 'x-text-resize';
+ textEl.dom.innerHTML = 'X';
+ textEl.appendTo(document.body);
+ textSize = textEl.dom.offsetHeight;
+ setInterval(function(){
+ if(textEl.dom.offsetHeight != textSize){
+ textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
+ }
+ }, this.textResizeInterval);
+ }
+ textEvent.addListener(fn, scope, options);
+ },
+
+ /**
+ * Removes the passed window resize listener.
+ * @param {Function} fn The method the event invokes
+ * @param {Object} scope The scope of handler
+ */
+ removeResizeListener : function(fn, scope){
+ if(resizeEvent){
+ resizeEvent.removeListener(fn, scope);
+ }
+ },
+
+ // private
+ fireResize : function(){
+ if(resizeEvent){
+ resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
+ }
+ },
+
+ /**
+ * The frequency, in milliseconds, to check for text resize events (defaults to 50)
+ */
+ textResizeInterval : 50,
+
+ /**
* Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
*/
ieDeferSrc : false,
- // protected for use inside the framework
- // detects whether we should use keydown or keypress based on the browser.
- useKeydown: useKeydown
- };
-}());
+ // 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
+ * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
+ * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
+ * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
+ * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
+ * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
+ * Usage:<br>
+<pre><code>
+// by id
+var el = Ext.get("my-div");
+
+// by DOM element reference
+var el = Ext.get(myDivElement);
+</code></pre>
+ * <b>Animations</b><br />
+ * <p>When an element is manipulated, by default there is no animation.</p>
+ * <pre><code>
+var el = Ext.get("my-div");
+
+// no animation
+el.setWidth(100);
+ * </code></pre>
+ * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
+ * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
+ * <pre><code>
+// default animation
+el.setWidth(100, true);
+ * </code></pre>
+ *
+ * <p>To configure the effects, an object literal with animation options to use as the Element animation
+ * configuration object can also be specified. Note that the supported Element animation configuration
+ * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported
+ * Element animation configuration options are:</p>
+<pre>
+Option Default Description
+--------- -------- ---------------------------------------------
+{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds
+{@link Ext.Fx#easing easing} easeOut The easing method
+{@link Ext.Fx#callback callback} none A function to execute when the anim completes
+{@link Ext.Fx#scope scope} this The scope (this) of the callback function
+</pre>
+ *
+ * <pre><code>
+// Element animation options object
+var opt = {
+ {@link Ext.Fx#duration duration}: 1,
+ {@link Ext.Fx#easing easing}: 'elasticIn',
+ {@link Ext.Fx#callback callback}: this.foo,
+ {@link Ext.Fx#scope scope}: this
+};
+// animation with some options set
+el.setWidth(100, opt);
+ * </code></pre>
+ * <p>The Element animation object being used for the animation will be set on the options
+ * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
+ * <pre><code>
+// using the "anim" property to get the Anim object
+if(opt.anim.isAnimated()){
+ opt.anim.stop();
+}
+ * </code></pre>
+ * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
+ * <p><b> Composite (Collections of) Elements</b></p>
+ * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
+ * @constructor Create a new Element directly.
+ * @param {String/HTMLElement} element
+ * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
+ */
+(function(){
+var DOC = document;
+
+Ext.Element = function(element, forceNew){
+ var dom = typeof element == "string" ?
+ DOC.getElementById(element) : element,
+ id;
+
+ if(!dom) return null;
+
+ id = dom.id;
+
+ if(!forceNew && id && Ext.elCache[id]){ // element object already exists
+ return Ext.elCache[id].el;
+ }
+
+ /**
+ * The DOM element
+ * @type HTMLElement
+ */
+ this.dom = dom;
+
+ /**
+ * The DOM element ID
+ * @type String
+ */
+ this.id = id || Ext.id(dom);
+};
+
+var D = Ext.lib.Dom,
+ DH = Ext.DomHelper,
+ E = Ext.lib.Event,
+ A = Ext.lib.Anim,
+ El = Ext.Element,
+ EC = Ext.elCache;
+
+El.prototype = {
+ /**
+ * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
+ * @param {Object} o The object with the attributes
+ * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
+ * @return {Ext.Element} this
+ */
+ set : function(o, useSet){
+ var el = this.dom,
+ attr,
+ val,
+ useSet = (useSet !== false) && !!el.setAttribute;
+
+ for(attr in o){
+ if (o.hasOwnProperty(attr)) {
+ val = o[attr];
+ if (attr == 'style') {
+ DH.applyStyles(el, val);
+ } else if (attr == 'cls') {
+ el.className = val;
+ } else if (useSet) {
+ el.setAttribute(attr, val);
+ } else {
+ el[attr] = val;
+ }
+ }
+ }
+ return this;
+ },
+
+// Mouse events
+ /**
+ * @event click
+ * Fires when a mouse click is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event contextmenu
+ * Fires when a right click is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event dblclick
+ * Fires when a mouse double click is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mousedown
+ * Fires when a mousedown is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mouseup
+ * Fires when a mouseup is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mouseover
+ * Fires when a mouseover is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mousemove
+ * Fires when a mousemove is detected with the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mouseout
+ * Fires when a mouseout is detected with the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mouseenter
+ * Fires when the mouse enters the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event mouseleave
+ * Fires when the mouse leaves the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+// Keyboard events
+ /**
+ * @event keypress
+ * Fires when a keypress is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event keydown
+ * Fires when a keydown is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event keyup
+ * Fires when a keyup is detected within the element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+
+// HTML frame/object events
+ /**
+ * @event load
+ * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event unload
+ * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event abort
+ * Fires when an object/image is stopped from loading before completely loaded.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event error
+ * Fires when an object/image/frame cannot be loaded properly.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event resize
+ * Fires when a document view is resized.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event scroll
+ * Fires when a document view is scrolled.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+// Form events
+ /**
+ * @event select
+ * Fires when a user selects some text in a text field, including input and textarea.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event change
+ * Fires when a control loses the input focus and its value has been modified since gaining focus.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event submit
+ * Fires when a form is submitted.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event reset
+ * Fires when a form is reset.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event focus
+ * Fires when an element receives focus either via the pointing device or by tab navigation.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event blur
+ * Fires when an element loses focus either via the pointing device or by tabbing navigation.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+// User Interface events
+ /**
+ * @event DOMFocusIn
+ * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMFocusOut
+ * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMActivate
+ * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+// DOM Mutation events
+ /**
+ * @event DOMSubtreeModified
+ * Where supported. Fires when the subtree is modified.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMNodeInserted
+ * Where supported. Fires when a node has been added as a child of another node.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMNodeRemoved
+ * Where supported. Fires when a descendant node of the element is removed.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMNodeRemovedFromDocument
+ * Where supported. Fires when a node is being removed from a document.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMNodeInsertedIntoDocument
+ * Where supported. Fires when a node is being inserted into a document.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMAttrModified
+ * Where supported. Fires when an attribute has been modified.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+ /**
+ * @event DOMCharacterDataModified
+ * Where supported. Fires when the character data has been modified.
+ * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
+ * @param {HtmlElement} t The target of the event.
+ * @param {Object} o The options configuration passed to the {@link #addListener} call.
+ */
+
+ /**
+ * The default unit to append to CSS values where a unit isn't provided (defaults to px).
+ * @type String
+ */
+ defaultUnit : "px",
+
+ /**
+ * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
+ * @param {String} selector The simple selector to test
+ * @return {Boolean} True if this element matches the selector, else false
+ */
+ is : function(simpleSelector){
+ return Ext.DomQuery.is(this.dom, simpleSelector);
+ },
+
+ /**
+ * Tries to focus the element. Any exceptions are caught and ignored.
+ * @param {Number} defer (optional) Milliseconds to defer the focus
+ * @return {Ext.Element} this
+ */
+ focus : function(defer, /* private */ dom) {
+ var me = this,
+ dom = dom || me.dom;
+ try{
+ if(Number(defer)){
+ me.focus.defer(defer, null, [null, dom]);
+ }else{
+ dom.focus();
+ }
+ }catch(e){}
+ return me;
+ },
+
+ /**
+ * Tries to blur the element. Any exceptions are caught and ignored.
+ * @return {Ext.Element} this
+ */
+ blur : function() {
+ try{
+ this.dom.blur();
+ }catch(e){}
+ return this;
+ },
+
+ /**
+ * Returns the value of the "value" attribute
+ * @param {Boolean} asNumber true to parse the value as a number
+ * @return {String/Number}
+ */
+ getValue : function(asNumber){
+ var val = this.dom.value;
+ return asNumber ? parseInt(val, 10) : val;
+ },
+
+ /**
+ * Appends an event handler to this element. The shorthand version {@link #on} is equivalent.
+ * @param {String} eventName The name of event to handle.
+ * @param {Function} fn The handler function the event invokes. This function is passed
+ * the following parameters:<ul>
+ * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
+ * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
+ * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
+ * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
+ * </ul>
+ * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to this Element.</b>.
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:<ul>
+ * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+ * <b>If omitted, defaults to this Element.</b></div></li>
+ * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
+ * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
+ * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
+ * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
+ * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
+ * <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
+ * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+ * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+ * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
+ * by the specified number of milliseconds. If the event fires again within that time, the original
+ * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+ * </ul><br>
+ * <p>
+ * <b>Combining Options</b><br>
+ * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
+ * addListener. The two are equivalent. Using the options argument, it is possible to combine different
+ * types of listeners:<br>
+ * <br>
+ * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+ * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
+ * Code:<pre><code>
+el.on('click', this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});</code></pre></p>
+ * <p>
+ * <b>Attaching multiple handlers in 1 call</b><br>
+ * The method also allows for a single argument to be passed which is a config object containing properties
+ * which specify multiple handlers.</p>
+ * <p>
+ * Code:<pre><code>
+el.on({
+ 'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ 'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ 'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});</code></pre>
+ * <p>
+ * Or a shorthand syntax:<br>
+ * Code:<pre><code></p>
+el.on({
+ 'click' : this.onClick,
+ 'mouseover' : this.onMouseOver,
+ 'mouseout' : this.onMouseOut,
+ scope: this
+});
+ * </code></pre></p>
+ * <p><b>delegate</b></p>
+ * <p>This is a configuration option that you can pass along when registering a handler for
+ * an event to assist with event delegation. Event delegation is a technique that is used to
+ * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
+ * for a container element as opposed to each element within a container. By setting this
+ * configuration option to a simple selector, the target element will be filtered to look for
+ * a descendant of the target.
+ * For example:<pre><code>
+// using this markup:
+<div id='elId'>
+ <p id='p1'>paragraph one</p>
+ <p id='p2' class='clickable'>paragraph two</p>
+ <p id='p3'>paragraph three</p>
+</div>
+// utilize event delegation to registering just one handler on the container element:
+el = Ext.get('elId');
+el.on(
+ 'click',
+ function(e,t) {
+ // handle click
+ console.info(t.id); // 'p2'
+ },
+ this,
+ {
+ // filter the target element to be a descendant with the class 'clickable'
+ delegate: '.clickable'
+ }
+);
+ * </code></pre></p>
+ * @return {Ext.Element} this
+ */
+ addListener : function(eventName, fn, scope, options){
+ Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
+ return this;
+ },
+
+ /**
+ * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
+ * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
+ * listener, the same scope must be specified here.
+ * Example:
+ * <pre><code>
+el.removeListener('click', this.handlerFn);
+// or
+el.un('click', this.handlerFn);
+</code></pre>
+ * @param {String} eventName The name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @return {Ext.Element} this
+ */
+ removeListener : function(eventName, fn, scope){
+ Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
+ return this;
+ },
+
+ /**
+ * Removes all previous added listeners from this element
+ * @return {Ext.Element} this
+ */
+ removeAllListeners : function(){
+ Ext.EventManager.removeAll(this.dom);
+ return this;
+ },
+
+ /**
+ * Recursively removes all previous added listeners from this element and its children
+ * @return {Ext.Element} this
+ */
+ purgeAllListeners : function() {
+ Ext.EventManager.purgeElement(this, true);
+ return this;
+ },
+ /**
+ * @private Test if size has a unit, otherwise appends the default
+ */
+ addUnits : function(size){
+ if(size === "" || size == "auto" || size === undefined){
+ size = size || '';
+ } else if(!isNaN(size) || !unitPattern.test(size)){
+ size = size + (this.defaultUnit || 'px');
+ }
+ return size;
+ },
+
+ /**
+ * <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element
+ * from a specified URL. Note that this is subject to the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin Policy</a></p>
+ * <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt><script></tt> elements. This is a browser restriction.</p>
+ * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying
+ * exactly how to request the HTML.
+ * @return {Ext.Element} this
+ */
+ load : function(url, params, cb){
+ Ext.Ajax.request(Ext.apply({
+ params: params,
+ url: url.url || url,
+ callback: cb,
+ el: this.dom,
+ indicatorText: url.indicatorText || ''
+ }, Ext.isObject(url) ? url : {}));
+ return this;
+ },
+
+ /**
+ * Tests various css rules/browsers to determine if this element uses a border box
+ * @return {Boolean}
+ */
+ isBorderBox : function(){
+ return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
+ },
+
+ /**
+ * <p>Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode}</p>
+ */
+ remove : function(){
+ var me = this,
+ dom = me.dom;
+
+ if (dom) {
+ delete me.dom;
+ Ext.removeNode(dom);
+ }
+ },
+
+ /**
+ * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
+ * @param {Function} overFn The function to call when the mouse enters the Element.
+ * @param {Function} outFn The function to call when the mouse leaves the Element.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the functions are executed. Defaults to the Element's DOM element.
+ * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
+ * @return {Ext.Element} this
+ */
+ hover : function(overFn, outFn, scope, options){
+ var me = this;
+ me.on('mouseenter', overFn, scope || me.dom, options);
+ me.on('mouseleave', outFn, scope || me.dom, options);
+ return me;
+ },
+
+ /**
+ * Returns true if this element is an ancestor of the passed element
+ * @param {HTMLElement/String} el The element to check
+ * @return {Boolean} True if this element is an ancestor of el, else false
+ */
+ contains : function(el){
+ return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
+ },
+
+ /**
+ * Returns the value of a namespaced attribute from the element's underlying DOM node.
+ * @param {String} namespace The namespace in which to look for the attribute
+ * @param {String} name The attribute name
+ * @return {String} The attribute value
+ * @deprecated
+ */
+ getAttributeNS : function(ns, name){
+ return this.getAttribute(name, ns);
+ },
+
+ /**
+ * Returns the value of an attribute from the element's underlying DOM node.
+ * @param {String} name The attribute name
+ * @param {String} namespace (optional) The namespace in which to look for the attribute
+ * @return {String} The attribute value
+ */
+ getAttribute : Ext.isIE ? function(name, ns){
+ var d = this.dom,
+ type = typeof d[ns + ":" + name];
+
+ if(['undefined', 'unknown'].indexOf(type) == -1){
+ return d[ns + ":" + name];
+ }
+ return d[name];
+ } : function(name, ns){
+ var d = this.dom;
+ return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
+ },
+
+ /**
+ * Update the innerHTML of this element
+ * @param {String} html The new HTML
+ * @return {Ext.Element} this
+ */
+ update : function(html) {
+ if (this.dom) {
+ this.dom.innerHTML = html;
+ }
+ return this;
+ }
+};
+
+var ep = El.prototype;
+
+El.addMethods = function(o){
+ Ext.apply(ep, o);
+};
+
+/**
+ * Appends an event handler (shorthand for {@link #addListener}).
+ * @param {String} eventName The name of event to handle.
+ * @param {Function} fn The handler function the event invokes.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
+ * @param {Object} options (optional) An object containing standard {@link #addListener} options
+ * @member Ext.Element
+ * @method on
+ */
+ep.on = ep.addListener;
+
+/**
+ * Removes an event handler from this element (see {@link #removeListener} for additional notes).
+ * @param {String} eventName The name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
+ * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @return {Ext.Element} this
+ * @member Ext.Element
+ * @method un
+ */
+ep.un = ep.removeListener;
+
+/**
+ * true to automatically adjust width and height settings for box-model issues (default to true)
+ */
+ep.autoBoxAdjust = true;
+
+// private
+var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
+ docEl;
+
+/**
+ * @private
+ */
+
+/**
+ * Retrieves Ext.Element objects.
+ * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
+ * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
+ * its ID, use {@link Ext.ComponentMgr#get}.</p>
+ * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
+ * object was recreated with the same id via AJAX or DOM.</p>
+ * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
+ * @return {Element} The Element object (or null if no matching element was found)
+ * @static
+ * @member Ext.Element
+ * @method get
+ */
+El.get = function(el){
+ var ex,
+ elm,
+ id;
+ if(!el){ return null; }
+ if (typeof el == "string") { // element id
+ if (!(elm = DOC.getElementById(el))) {
+ return null;
+ }
+ if (EC[el] && EC[el].el) {
+ ex = EC[el].el;
+ ex.dom = elm;
+ } else {
+ ex = El.addToCache(new El(elm));
+ }
+ return ex;
+ } else if (el.tagName) { // dom element
+ if(!(id = el.id)){
+ id = Ext.id(el);
+ }
+ if (EC[id] && EC[id].el) {
+ ex = EC[id].el;
+ ex.dom = el;
+ } else {
+ ex = El.addToCache(new El(el));
+ }
+ return ex;
+ } else if (el instanceof El) {
+ if(el != docEl){
+ // 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 = {};
+
+/**
+ * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
+ * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
+ * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
+ * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
+ * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
+ * @param {String/HTMLElement} el The dom node or id
+ * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
+ * (e.g. internally Ext uses "_global")
+ * @return {Element} The shared Element object (or null if no matching element was found)
+ * @member Ext.Element
+ * @method fly
+ */
+El.fly = function(el, named){
+ var ret = null;
+ named = named || '_global';
+
+ if (el = Ext.getDom(el)) {
+ (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
+ ret = El._flyweights[named];
+ }
+ return ret;
+};
+
+/**
+ * Retrieves Ext.Element objects.
+ * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
+ * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
+ * its ID, use {@link Ext.ComponentMgr#get}.</p>
+ * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
+ * object was recreated with the same id via AJAX or DOM.</p>
+ * Shorthand of {@link Ext.Element#get}
+ * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
+ * @return {Element} The Element object (or null if no matching element was found)
+ * @member Ext
+ * @method get
+ */
+Ext.get = El.get;
+
+/**
+ * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
+ * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
+ * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
+ * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
+ * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
+ * @param {String/HTMLElement} el The dom node or id
+ * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
+ * (e.g. internally Ext uses "_global")
+ * @return {Element} The shared Element object (or null if no matching element was found)
+ * @member Ext
+ * @method fly
+ */
+Ext.fly = El.fly;
+
+// speedy lookup for elements never to box adjust
+var noBoxAdjust = Ext.isStrict ? {
+ select:1
+} : {
+ input:1, select:1, textarea:1
+};
+if(Ext.isIE || Ext.isGecko){
+ noBoxAdjust['button'] = 1;
+}
+
+})();
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Stops the specified event(s) from bubbling and optionally prevents the default action
+ * @param {String/Array} eventName an event / array of events to stop from bubbling
+ * @param {Boolean} preventDefault (optional) true to prevent the default action too
+ * @return {Ext.Element} this
+ */
+ swallowEvent : function(eventName, preventDefault){
+ var me = this;
+ function fn(e){
+ e.stopPropagation();
+ if(preventDefault){
+ e.preventDefault();
+ }
+ }
+ if(Ext.isArray(eventName)){
+ Ext.each(eventName, function(e) {
+ me.on(e, fn);
+ });
+ return me;
+ }
+ me.on(eventName, fn);
+ return me;
+ },
+
+ /**
+ * Create an event handler on this element such that when the event fires and is handled by this element,
+ * it will be relayed to another object (i.e., fired again as if it originated from that object instead).
+ * @param {String} eventName The type of event to relay
+ * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
+ * for firing the relayed event
+ */
+ relayEvent : function(eventName, observable){
+ this.on(eventName, function(e){
+ observable.fireEvent(eventName, e);
+ });
+ },
+
+ /**
+ * Removes worthless text nodes
+ * @param {Boolean} forceReclean (optional) By default the element
+ * keeps track if it has been cleaned already so
+ * you can call this over and over. However, if you update the element and
+ * need to force a reclean, you can pass true.
+ */
+ clean : function(forceReclean){
+ var me = this,
+ dom = me.dom,
+ n = dom.firstChild,
+ ni = -1;
+
+ if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){
+ return me;
+ }
+
+ while(n){
+ var nx = n.nextSibling;
+ if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){
+ dom.removeChild(n);
+ }else{
+ n.nodeIndex = ++ni;
+ }
+ n = nx;
+ }
+ Ext.Element.data(dom, 'isCleaned', true);
+ return me;
+ },
+
+ /**
+ * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object
+ * parameter as {@link Ext.Updater#update}
+ * @return {Ext.Element} this
+ */
+ load : function(){
+ var um = this.getUpdater();
+ um.update.apply(um, arguments);
+ return this;
+ },
+
+ /**
+ * Gets this element's {@link Ext.Updater Updater}
+ * @return {Ext.Updater} The Updater
+ */
+ getUpdater : function(){
+ return this.updateManager || (this.updateManager = new Ext.Updater(this));
+ },
+
+ /**
+ * Update the innerHTML of this element, optionally searching for and processing scripts
+ * @param {String} html The new HTML
+ * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
+ * @param {Function} callback (optional) For async script loading you can be notified when the update completes
+ * @return {Ext.Element} this
+ */
+ update : function(html, loadScripts, callback){
+ if (!this.dom) {
+ return this;
+ }
+ html = html || "";
+
+ if(loadScripts !== true){
+ this.dom.innerHTML = html;
+ if(Ext.isFunction(callback)){
+ callback();
+ }
+ return this;
+ }
+
+ var id = Ext.id(),
+ dom = this.dom;
+
+ html += '<span id="' + id + '"></span>';
+
+ Ext.lib.Event.onAvailable(id, function(){
+ var DOC = document,
+ hd = DOC.getElementsByTagName("head")[0],
+ re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
+ srcRe = /\ssrc=([\'\"])(.*?)\1/i,
+ typeRe = /\stype=([\'\"])(.*?)\1/i,
+ match,
+ attrs,
+ srcMatch,
+ typeMatch,
+ el,
+ s;
+
+ while((match = re.exec(html))){
+ attrs = match[1];
+ srcMatch = attrs ? attrs.match(srcRe) : false;
+ if(srcMatch && srcMatch[2]){
+ s = DOC.createElement("script");
+ s.src = srcMatch[2];
+ typeMatch = attrs.match(typeRe);
+ if(typeMatch && typeMatch[2]){
+ s.type = typeMatch[2];
+ }
+ hd.appendChild(s);
+ }else if(match[2] && match[2].length > 0){
+ if(window.execScript) {
+ window.execScript(match[2]);
+ } else {
+ window.eval(match[2]);
+ }
+ }
+ }
+ el = DOC.getElementById(id);
+ if(el){Ext.removeNode(el);}
+ if(Ext.isFunction(callback)){
+ callback();
+ }
+ });
+ dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
+ return this;
+ },
+
+ // inherit docs, overridden so we can add removeAnchor
+ removeAllListeners : function(){
+ this.removeAnchor();
+ Ext.EventManager.removeAll(this.dom);
+ return this;
+ },
+
+ /**
+ * Creates a proxy element of this element
+ * @param {String/Object} config The class name of the proxy element or a DomHelper config object
+ * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
+ * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
+ * @return {Ext.Element} The new proxy element
+ */
+ createProxy : function(config, renderTo, matchBox){
+ config = Ext.isObject(config) ? config : {tag : "div", cls: config};
+
+ var me = this,
+ proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
+ Ext.DomHelper.insertBefore(me.dom, config, true);
+
+ if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
+ proxy.setBox(me.getBox());
+ }
+ return proxy;
+ }
+});
+
+Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Gets the x,y coordinates specified by the anchor position on the element.
+ * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
+ * for details on supported anchor positions.
+ * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
+ * of page coordinates
+ * @param {Object} size (optional) An object containing the size to use for calculating anchor position
+ * {width: (target width), height: (target height)} (defaults to the element's current size)
+ * @return {Array} [x, y] An array containing the element's x and y coordinates
+ */
+ getAnchorXY : function(anchor, local, s){
+ //Passing a different size is useful for pre-calculating anchors,
+ //especially for anchored animations that change the el size.
+ anchor = (anchor || "tl").toLowerCase();
+ s = s || {};
+
+ var me = this,
+ vp = me.dom == document.body || me.dom == document,
+ w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
+ h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
+ xy,
+ r = Math.round,
+ o = me.getXY(),
+ scroll = me.getScroll(),
+ extraX = vp ? scroll.left : !local ? o[0] : 0,
+ extraY = vp ? scroll.top : !local ? o[1] : 0,
+ hash = {
+ c : [r(w * 0.5), r(h * 0.5)],
+ t : [r(w * 0.5), 0],
+ l : [0, r(h * 0.5)],
+ r : [w, r(h * 0.5)],
+ b : [r(w * 0.5), h],
+ tl : [0, 0],
+ bl : [0, h],
+ br : [w, h],
+ tr : [w, 0]
+ };
+
+ xy = hash[anchor];
+ return [xy[0] + extraX, xy[1] + extraY];
+ },
+
+ /**
+ * Anchors an element to another element and realigns it when the window is resized.
+ * @param {Mixed} element The element to align to.
+ * @param {String} position The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
+ * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
+ * is a number, it is used as the buffer delay (defaults to 50ms).
+ * @param {Function} callback The function to call after the animation finishes
+ * @return {Ext.Element} this
+ */
+ anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
+ var me = this,
+ dom = me.dom,
+ scroll = !Ext.isEmpty(monitorScroll),
+ action = function(){
+ Ext.fly(dom).alignTo(el, alignment, offsets, animate);
+ Ext.callback(callback, Ext.fly(dom));
+ },
+ anchor = this.getAnchor();
+
+ // previous listener anchor, remove it
+ this.removeAnchor();
+ Ext.apply(anchor, {
+ fn: action,
+ scroll: scroll
+ });
+
+ Ext.EventManager.onWindowResize(action, null);
+
+ if(scroll){
+ Ext.EventManager.on(window, 'scroll', action, null,
+ {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
+ }
+ action.call(me); // align immediately
+ return me;
+ },
+
+ /**
+ * Remove any anchor to this element. See {@link #anchorTo}.
+ * @return {Ext.Element} this
+ */
+ removeAnchor : function(){
+ var me = this,
+ anchor = this.getAnchor();
+
+ if(anchor && anchor.fn){
+ Ext.EventManager.removeResizeListener(anchor.fn);
+ if(anchor.scroll){
+ Ext.EventManager.un(window, 'scroll', anchor.fn);
+ }
+ delete anchor.fn;
+ }
+ return me;
+ },
+
+ // private
+ getAnchor : function(){
+ var data = Ext.Element.data,
+ dom = this.dom;
+ if (!dom) {
+ return;
+ }
+ var anchor = data(dom, '_anchor');
+
+ if(!anchor){
+ anchor = data(dom, '_anchor', {});
+ }
+ return anchor;
+ },
+
+ /**
+ * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
+ * supported position values.
+ * @param {Mixed} element The element to align to.
+ * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @return {Array} [x, y]
+ */
+ getAlignToXY : function(el, p, o){
+ el = Ext.get(el);
+
+ if(!el || !el.dom){
+ throw "Element.alignToXY with an element that doesn't exist";
+ }
+
+ o = o || [0,0];
+ p = (!p || p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
+
+ var me = this,
+ d = me.dom,
+ a1,
+ a2,
+ x,
+ y,
+ //constrain the aligned el to viewport if necessary
+ w,
+ h,
+ r,
+ dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
+ dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
+ p1y,
+ p1x,
+ p2y,
+ p2x,
+ swapY,
+ swapX,
+ doc = document,
+ docElement = doc.documentElement,
+ docBody = doc.body,
+ scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
+ scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
+ c = false, //constrain to viewport
+ p1 = "",
+ p2 = "",
+ m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
+
+ if(!m){
+ throw "Element.alignTo with an invalid alignment " + p;
+ }
+
+ p1 = m[1];
+ p2 = m[2];
+ c = !!m[3];
+
+ //Subtract the aligned el's internal xy from the target's offset xy
+ //plus custom offset to get the aligned el's new offset xy
+ a1 = me.getAnchorXY(p1, true);
+ a2 = el.getAnchorXY(p2, false);
+
+ x = a2[0] - a1[0] + o[0];
+ y = a2[1] - a1[1] + o[1];
+
+ if(c){
+ w = me.getWidth();
+ h = me.getHeight();
+ r = el.getRegion();
+ //If we are at a viewport boundary and the aligned el is anchored on a target border that is
+ //perpendicular to the vp border, allow the aligned el to slide on that border,
+ //otherwise swap the aligned el to the opposite border of the target.
+ p1y = p1.charAt(0);
+ p1x = p1.charAt(p1.length-1);
+ p2y = p2.charAt(0);
+ p2x = p2.charAt(p2.length-1);
+ swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
+ swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
+
+
+ if (x + w > dw + scrollX) {
+ x = swapX ? r.left-w : dw+scrollX-w;
+ }
+ if (x < scrollX) {
+ x = swapX ? r.right : scrollX;
+ }
+ if (y + h > dh + scrollY) {
+ y = swapY ? r.top-h : dh+scrollY-h;
+ }
+ if (y < scrollY){
+ y = swapY ? r.bottom : scrollY;
+ }
+ }
+ return [x,y];
+ },
+
+ /**
+ * Aligns this element with another element relative to the specified anchor points. If the other element is the
+ * document it aligns it to the viewport.
+ * The position parameter is optional, and can be specified in any one of the following formats:
+ * <ul>
+ * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
+ * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
+ * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
+ * deprecated in favor of the newer two anchor syntax below</i>.</li>
+ * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
+ * element's anchor point, and the second value is used as the target's anchor point.</li>
+ * </ul>
+ * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
+ * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
+ * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
+ * that specified in order to enforce the viewport constraints.
+ * Following are all of the supported anchor positions:
+<pre>
+Value Description
+----- -----------------------------
+tl The top left corner (default)
+t The center of the top edge
+tr The top right corner
+l The center of the left edge
+c In the center of the element
+r The center of the right edge
+bl The bottom left corner
+b The center of the bottom edge
+br The bottom right corner
+</pre>
+Example Usage:
+<pre><code>
+// align el to other-el using the default positioning ("tl-bl", non-constrained)
+el.alignTo("other-el");
+
+// align the top left corner of el with the top right corner of other-el (constrained to viewport)
+el.alignTo("other-el", "tr?");
+
+// align the bottom right corner of el with the center left edge of other-el
+el.alignTo("other-el", "br-l?");
+
+// align the center of el with the bottom left corner of other-el and
+// adjust the x position by -6 pixels (and the y position by 0)
+el.alignTo("other-el", "c-bl", [-6, 0]);
+</code></pre>
+ * @param {Mixed} element The element to align to.
+ * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ alignTo : function(element, position, offsets, animate){
+ var me = this;
+ return me.setXY(me.getAlignToXY(element, position, offsets),
+ me.preanim && !!animate ? me.preanim(arguments, 3) : false);
+ },
+
+ // private ==> used outside of core
+ adjustForConstraints : function(xy, parent, offsets){
+ return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
+ },
+
+ // private ==> used outside of core
+ getConstrainToXY : function(el, local, offsets, proposedXY){
+ var os = {top:0, left:0, bottom:0, right: 0};
+
+ return function(el, local, offsets, proposedXY){
+ el = Ext.get(el);
+ offsets = offsets ? Ext.applyIf(offsets, os) : os;
+
+ var vw, vh, vx = 0, vy = 0;
+ if(el.dom == document.body || el.dom == document){
+ vw =Ext.lib.Dom.getViewWidth();
+ vh = Ext.lib.Dom.getViewHeight();
+ }else{
+ vw = el.dom.clientWidth;
+ vh = el.dom.clientHeight;
+ if(!local){
+ var vxy = el.getXY();
+ vx = vxy[0];
+ vy = vxy[1];
+ }
+ }
+
+ var s = el.getScroll();
+
+ vx += offsets.left + s.left;
+ vy += offsets.top + s.top;
+
+ vw -= offsets.right;
+ vh -= offsets.bottom;
+
+ var vr = vx+vw;
+ var vb = vy+vh;
+
+ var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
+ var x = xy[0], y = xy[1];
+ var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
+
+ // only move it if it needs it
+ var moved = false;
+
+ // first validate right/bottom
+ if((x + w) > vr){
+ x = vr - w;
+ moved = true;
+ }
+ if((y + h) > vb){
+ y = vb - h;
+ moved = true;
+ }
+ // then make sure top/left isn't negative
+ if(x < vx){
+ x = vx;
+ moved = true;
+ }
+ if(y < vy){
+ y = vy;
+ moved = true;
+ }
+ return moved ? [x, y] : false;
+ };
+ }(),
+
+
+
+// el = Ext.get(el);
+// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
+
+// var me = this,
+// doc = document,
+// s = el.getScroll(),
+// vxy = el.getXY(),
+// vx = offsets.left + s.left,
+// vy = offsets.top + s.top,
+// vw = -offsets.right,
+// vh = -offsets.bottom,
+// vr,
+// vb,
+// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
+// x = xy[0],
+// y = xy[1],
+// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
+// moved = false; // only move it if it needs it
+//
+//
+// if(el.dom == doc.body || el.dom == doc){
+// vw += Ext.lib.Dom.getViewWidth();
+// vh += Ext.lib.Dom.getViewHeight();
+// }else{
+// vw += el.dom.clientWidth;
+// vh += el.dom.clientHeight;
+// if(!local){
+// vx += vxy[0];
+// vy += vxy[1];
+// }
+// }
+
+// // first validate right/bottom
+// if(x + w > vx + vw){
+// x = vx + vw - w;
+// moved = true;
+// }
+// if(y + h > vy + vh){
+// y = vy + vh - h;
+// moved = true;
+// }
+// // then make sure top/left isn't negative
+// if(x < vx){
+// x = vx;
+// moved = true;
+// }
+// if(y < vy){
+// y = vy;
+// moved = true;
+// }
+// return moved ? [x, y] : false;
+// },
+
+ /**
+ * Calculates the x, y to center this element on the screen
+ * @return {Array} The x, y values [x, y]
+ */
+ getCenterXY : function(){
+ return this.getAlignToXY(document, 'c-c');
+ },
+
+ /**
+ * Centers the Element in either the viewport, or another Element.
+ * @param {Mixed} centerIn (optional) The element in which to center the element.
+ */
+ center : function(centerIn){
+ return this.alignTo(centerIn || document, 'c-c');
+ }
+});
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods(function(){
+ var PARENTNODE = 'parentNode',
+ NEXTSIBLING = 'nextSibling',
+ PREVIOUSSIBLING = 'previousSibling',
+ DQ = Ext.DomQuery,
+ GET = Ext.get;
+
+ return {
+ /**
+ * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+ * @param {String} selector The simple selector to test
+ * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
+ * @return {HTMLElement} The matching DOM node (or null if no match was found)
+ */
+ findParent : function(simpleSelector, maxDepth, returnEl){
+ var p = this.dom,
+ b = document.body,
+ depth = 0,
+ stopEl;
+ if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') {
+ return null;
+ }
+ maxDepth = maxDepth || 50;
+ if (isNaN(maxDepth)) {
+ stopEl = Ext.getDom(maxDepth);
+ maxDepth = Number.MAX_VALUE;
+ }
+ while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
+ if(DQ.is(p, simpleSelector)){
+ return returnEl ? GET(p) : p;
+ }
+ depth++;
+ p = p.parentNode;
+ }
+ return null;
+ },
+
+ /**
+ * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+ * @param {String} selector The simple selector to test
+ * @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} The matching DOM node (or null if no match was found)
+ */
+ findParentNode : function(simpleSelector, maxDepth, returnEl){
+ var p = Ext.fly(this.dom.parentNode, '_internal');
+ return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
+ },
+
+ /**
+ * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
+ * This is a shortcut for findParentNode() that always returns an Ext.Element.
+ * @param {String} selector The simple selector to test
+ * @param {Number/Mixed} maxDepth (optional) The max depth to
+ search as a number or element (defaults to 10 || document.body)
+ * @return {Ext.Element} The matching DOM node (or null if no match was found)
+ */
+ up : function(simpleSelector, maxDepth){
+ return this.findParentNode(simpleSelector, maxDepth, true);
+ },
+
+ /**
+ * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
+ * @param {String} selector The CSS selector
+ * @return {CompositeElement/CompositeElementLite} The composite element
+ */
+ select : function(selector){
+ return Ext.Element.select(selector, this.dom);
+ },
+
+ /**
+ * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
+ * @param {String} selector The CSS selector
+ * @return {Array} An array of the matched nodes
+ */
+ query : function(selector){
+ return DQ.select(selector, this.dom);
+ },
+
+ /**
+ * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
+ * @param {String} selector The CSS selector
+ * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
+ * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
+ */
+ child : function(selector, returnDom){
+ var n = DQ.selectNode(selector, this.dom);
+ return returnDom ? n : GET(n);
+ },
+
+ /**
+ * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
+ * @param {String} selector The CSS selector
+ * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
+ * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
+ */
+ down : function(selector, returnDom){
+ var n = DQ.selectNode(" > " + selector, this.dom);
+ return returnDom ? n : GET(n);
+ },
+
+ /**
+ * Gets the parent node for this element, optionally chaining up trying to match a selector
+ * @param {String} selector (optional) Find a parent node that matches the passed simple selector
+ * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
+ * @return {Ext.Element/HTMLElement} The parent node or null
+ */
+ parent : function(selector, returnDom){
+ return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom);
+ },
+
+ /**
+ * Gets the next sibling, skipping text nodes
+ * @param {String} selector (optional) Find the next sibling that matches the passed simple selector
+ * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
+ * @return {Ext.Element/HTMLElement} The next sibling or null
+ */
+ next : function(selector, returnDom){
+ return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom);
+ },
+
+ /**
+ * Gets the previous sibling, skipping text nodes
+ * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
+ * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
+ * @return {Ext.Element/HTMLElement} The previous sibling or null
+ */
+ prev : function(selector, returnDom){
+ return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom);
+ },
+
+
+ /**
+ * Gets the first child, skipping text nodes
+ * @param {String} selector (optional) Find the next sibling that matches the passed simple selector
+ * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
+ * @return {Ext.Element/HTMLElement} The first child or null
+ */
+ first : function(selector, returnDom){
+ return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom);
+ },
+
+ /**
+ * Gets the last child, skipping text nodes
+ * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
+ * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
+ * @return {Ext.Element/HTMLElement} The last child or null
+ */
+ last : function(selector, returnDom){
+ return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom);
+ },
+
+ matchNode : function(dir, start, selector, returnDom){
+ var n = this.dom[start];
+ while(n){
+ if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){
+ return !returnDom ? GET(n) : n;
+ }
+ n = n[dir];
+ }
+ return null;
+ }
+ }
+}());/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
+ * @param {String} selector The CSS selector
+ * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
+ * @return {CompositeElement/CompositeElementLite} The composite element
+ */
+ select : function(selector, unique){
+ return Ext.Element.select(selector, unique, this.dom);
+ }
+});/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods(
+function() {
+ var GETDOM = Ext.getDom,
+ GET = Ext.get,
+ DH = Ext.DomHelper;
+
+ return {
+ /**
+ * Appends the passed element(s) to this element
+ * @param {String/HTMLElement/Array/Element/CompositeElement} el
+ * @return {Ext.Element} this
+ */
+ appendChild: function(el){
+ return GET(el).appendTo(this);
+ },
+
+ /**
+ * Appends this element to the passed element
+ * @param {Mixed} el The new parent element
+ * @return {Ext.Element} this
+ */
+ appendTo: function(el){
+ GETDOM(el).appendChild(this.dom);
+ return this;
+ },
+
+ /**
+ * Inserts this element before the passed element in the DOM
+ * @param {Mixed} el The element before which this element will be inserted
+ * @return {Ext.Element} this
+ */
+ insertBefore: function(el){
+ (el = GETDOM(el)).parentNode.insertBefore(this.dom, el);
+ return this;
+ },
+
+ /**
+ * Inserts this element after the passed element in the DOM
+ * @param {Mixed} el The element to insert after
+ * @return {Ext.Element} this
+ */
+ insertAfter: function(el){
+ (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);
+ return this;
+ },
+
+ /**
+ * Inserts (or creates) an element (or DomHelper config) as the first child of this element
+ * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert
+ * @return {Ext.Element} The new child
+ */
+ insertFirst: function(el, returnDom){
+ el = el || {};
+ if(el.nodeType || el.dom || typeof el == 'string'){ // element
+ el = GETDOM(el);
+ this.dom.insertBefore(el, this.dom.firstChild);
+ return !returnDom ? GET(el) : el;
+ }else{ // dh config
+ return this.createChild(el, this.dom.firstChild, returnDom);
+ }
+ },
+
+ /**
+ * Replaces the passed element with this element
+ * @param {Mixed} el The element to replace
+ * @return {Ext.Element} this
+ */
+ replace: function(el){
+ el = GET(el);
+ this.insertBefore(el);
+ el.remove();
+ return this;
+ },
+
+ /**
+ * Replaces this element with the passed element
+ * @param {Mixed/Object} el The new element or a DomHelper config of an element to create
+ * @return {Ext.Element} this
+ */
+ replaceWith: function(el){
+ var me = this;
+
+ if(el.nodeType || el.dom || typeof el == 'string'){
+ el = GETDOM(el);
+ me.dom.parentNode.insertBefore(el, me.dom);
+ }else{
+ el = DH.insertBefore(me.dom, el);
+ }
+
+ delete Ext.elCache[me.id];
+ Ext.removeNode(me.dom);
+ me.id = Ext.id(me.dom = el);
+ Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me);
+ return me;
+ },
+
+ /**
+ * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
+ * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
+ * automatically generated with the specified attributes.
+ * @param {HTMLElement} insertBefore (optional) a child element of this element
+ * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
+ * @return {Ext.Element} The new child element
+ */
+ createChild: function(config, insertBefore, returnDom){
+ config = config || {tag:'div'};
+ return insertBefore ?
+ DH.insertBefore(insertBefore, config, returnDom !== true) :
+ DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);
+ },
+
+ /**
+ * Creates and wraps this element with another element
+ * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
+ * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
+ * @return {HTMLElement/Element} The newly created wrapper element
+ */
+ wrap: function(config, returnDom){
+ var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);
+ newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
+ return newEl;
+ },
+
+ /**
+ * Inserts an html fragment into this element
+ * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
+ * @param {String} html The HTML fragment
+ * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)
+ * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)
+ */
+ insertHtml : function(where, html, returnEl){
+ var el = DH.insertHtml(where, this.dom, html);
+ return returnEl ? Ext.get(el) : el;
+ }
+ }
+}());/**
+ * @class Ext.Element
+ */
+Ext.apply(Ext.Element.prototype, function() {
+ var GETDOM = Ext.getDom,
+ GET = Ext.get,
+ DH = Ext.DomHelper;
+
+ return {
+ /**
+ * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
+ * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.
+ * @param {String} where (optional) 'before' or 'after' defaults to before
+ * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
+ * @return {Ext.Element} The inserted Element. If an array is passed, the last inserted element is returned.
+ */
+ insertSibling: function(el, where, returnDom){
+ var me = this,
+ rt,
+ isAfter = (where || 'before').toLowerCase() == 'after',
+ insertEl;
+
+ if(Ext.isArray(el)){
+ insertEl = me;
+ Ext.each(el, function(e) {
+ rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);
+ if(isAfter){
+ insertEl = rt;
+ }
+ });
+ return rt;
+ }
+
+ el = el || {};
+
+ if(el.nodeType || el.dom){
+ rt = me.dom.parentNode.insertBefore(GETDOM(el), isAfter ? me.dom.nextSibling : me.dom);
+ if (!returnDom) {
+ rt = GET(rt);
+ }
+ }else{
+ if (isAfter && !me.dom.nextSibling) {
+ rt = DH.append(me.dom.parentNode, el, !returnDom);
+ } else {
+ rt = DH[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
+ }
+ }
+ return rt;
+ }
+ };
+}());/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods(function(){
+ // local style camelizing for speed
+ var propCache = {},
+ camelRe = /(-[a-z])/gi,
+ classReCache = {},
+ view = document.defaultView,
+ propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
+ opacityRe = /alpha\(opacity=(.*)\)/i,
+ trimRe = /^\s+|\s+$/g,
+ EL = Ext.Element,
+ PADDING = "padding",
+ MARGIN = "margin",
+ BORDER = "border",
+ LEFT = "-left",
+ RIGHT = "-right",
+ TOP = "-top",
+ BOTTOM = "-bottom",
+ WIDTH = "-width",
+ MATH = Math,
+ HIDDEN = 'hidden',
+ ISCLIPPED = 'isClipped',
+ OVERFLOW = 'overflow',
+ OVERFLOWX = 'overflow-x',
+ OVERFLOWY = 'overflow-y',
+ ORIGINALCLIP = 'originalClip',
+ // special markup used throughout Ext when box wrapping elements
+ borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
+ paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
+ margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
+ data = Ext.Element.data;
+
-Ext.EventManager.on = Ext.EventManager.addListener;
+ // private
+ function camelFn(m, a) {
+ return a.charAt(1).toUpperCase();
+ }
+ function chkCache(prop) {
+ return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
+ }
-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,
+ return {
+ // private ==> used by Fx
+ adjustWidth : function(width) {
+ var me = this;
+ var isNum = Ext.isNumber(width);
+ if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
+ width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
+ }
+ return (isNum && width < 0) ? 0 : width;
+ },
+
+ // private ==> used by Fx
+ adjustHeight : function(height) {
+ var me = this;
+ var isNum = Ext.isNumber(height);
+ if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
+ height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
+ }
+ return (isNum && height < 0) ? 0 : height;
+ },
+
+
+ /**
+ * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
+ * @param {String/Array} className The CSS class to add, or an array of classes
+ * @return {Ext.Element} this
+ */
+ addClass : function(className){
+ var me = this, i, len, v;
+ className = Ext.isArray(className) ? className : [className];
+ for (i=0, len = className.length; i < len; i++) {
+ v = className[i];
+ if (v) {
+ me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
+ };
+ };
+ return me;
+ },
+
+ /**
+ * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
+ * @param {String/Array} className The CSS class to add, or an array of classes
+ * @return {Ext.Element} this
+ */
+ radioClass : function(className){
+ var cn = this.dom.parentNode.childNodes, v;
+ className = Ext.isArray(className) ? className : [className];
+ for (var i=0, len = cn.length; i < len; i++) {
+ v = cn[i];
+ if(v && v.nodeType == 1) {
+ Ext.fly(v, '_internal').removeClass(className);
+ }
+ };
+ return this.addClass(className);
+ },
+
+ /**
+ * Removes one or more CSS classes from the element.
+ * @param {String/Array} className The CSS class to remove, or an array of classes
+ * @return {Ext.Element} this
+ */
+ removeClass : function(className){
+ var me = this, v;
+ className = Ext.isArray(className) ? className : [className];
+ if (me.dom && me.dom.className) {
+ for (var i=0, len=className.length; i < len; i++) {
+ v = className[i];
+ if(v) {
+ me.dom.className = me.dom.className.replace(
+ classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " "
+ );
+ }
+ };
+ }
+ return me;
+ },
- /** @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;
- },
+ /**
+ * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
+ * @param {String} className The CSS class to toggle
+ * @return {Ext.Element} this
+ */
+ toggleClass : function(className){
+ return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
+ },
- isSpecialKey : function(){
- var k = this.normalizeKey(this.keyCode);
- return (this.type == 'keypress' && this.ctrlKey) ||
- this.isNavKeyPress() ||
- (k == this.BACKSPACE) || // Backspace
- (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
- (k >= 44 && k <= 45); // Print Screen, Insert
- },
+ /**
+ * Checks if the specified CSS class exists on this element's DOM node.
+ * @param {String} className The CSS class to check for
+ * @return {Boolean} True if the class exists, else false
+ */
+ hasClass : function(className){
+ return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
+ },
- getPoint : function(){
- return new Ext.lib.Point(this.xy[0], this.xy[1]);
- },
+ /**
+ * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
+ * @param {String} oldClassName The CSS class to replace
+ * @param {String} newClassName The replacement CSS class
+ * @return {Ext.Element} this
+ */
+ replaceClass : function(oldClassName, newClassName){
+ return this.removeClass(oldClassName).addClass(newClassName);
+ },
- /**
- * Returns true if the control, meta, shift or alt key was pressed during this event.
- * @return {Boolean}
- */
- hasModifier : function(){
- return ((this.ctrlKey || this.altKey) || this.shiftKey);
- }
-});/**
- * @class Ext.Element
- * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
- * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
- * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
- * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
- * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
- * Usage:<br>
-<pre><code>
-// by id
-var el = Ext.get("my-div");
+ isStyle : function(style, val) {
+ return this.getStyle(style) == val;
+ },
-// by DOM element reference
-var el = Ext.get(myDivElement);
-</code></pre>
- * <b>Animations</b><br />
- * <p>When an element is manipulated, by default there is no animation.</p>
- * <pre><code>
-var el = Ext.get("my-div");
+ /**
+ * Normalizes currentStyle and computedStyle.
+ * @param {String} property The style property whose value is returned.
+ * @return {String} The current value of the style property for this element.
+ */
+ getStyle : function(){
+ return view && view.getComputedStyle ?
+ function(prop){
+ var el = this.dom,
+ v,
+ cs,
+ out,
+ display,
+ wk = Ext.isWebKit,
+ display;
+
+ if(el == document){
+ return null;
+ }
+ prop = chkCache(prop);
+ // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
+ if(wk && /marginRight/.test(prop)){
+ display = this.getStyle('display');
+ el.style.display = 'inline-block';
+ }
+ out = (v = el.style[prop]) ? v :
+ (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
-// no animation
-el.setWidth(100);
- * </code></pre>
- * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
- * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
- * <pre><code>
-// default animation
-el.setWidth(100, true);
- * </code></pre>
- *
- * <p>To configure the effects, an object literal with animation options to use as the Element animation
- * configuration object can also be specified. Note that the supported Element animation configuration
- * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported
- * Element animation configuration options are:</p>
-<pre>
-Option Default Description
---------- -------- ---------------------------------------------
-{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds
-{@link Ext.Fx#easing easing} easeOut The easing method
-{@link Ext.Fx#callback callback} none A function to execute when the anim completes
-{@link Ext.Fx#scope scope} this The scope (this) of the callback function
-</pre>
- *
- * <pre><code>
-// Element animation options object
-var opt = {
- {@link Ext.Fx#duration duration}: 1,
- {@link Ext.Fx#easing easing}: 'elasticIn',
- {@link Ext.Fx#callback callback}: this.foo,
- {@link Ext.Fx#scope scope}: this
-};
-// animation with some options set
-el.setWidth(100, opt);
- * </code></pre>
- * <p>The Element animation object being used for the animation will be set on the options
- * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
- * <pre><code>
-// using the "anim" property to get the Anim object
-if(opt.anim.isAnimated()){
- opt.anim.stop();
-}
- * </code></pre>
- * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
- * <p><b> Composite (Collections of) Elements</b></p>
- * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
- * @constructor Create a new Element directly.
- * @param {String/HTMLElement} element
- * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
- */
-(function(){
-var DOC = document;
+ // Webkit returns rgb values for transparent.
+ if(wk){
+ if(out == 'rgba(0, 0, 0, 0)'){
+ out = 'transparent';
+ }else if(display){
+ el.style.display = display;
+ }
+ }
+ return out;
+ } :
+ function(prop){
+ var el = this.dom,
+ m,
+ cs;
+
+ if(el == document) return null;
+ if (prop == 'opacity') {
+ if (el.style.filter.match) {
+ if(m = el.style.filter.match(opacityRe)){
+ var fv = parseFloat(m[1]);
+ if(!isNaN(fv)){
+ return fv ? fv / 100 : 0;
+ }
+ }
+ }
+ return 1;
+ }
+ prop = chkCache(prop);
+ return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+ };
+ }(),
+
+ /**
+ * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
+ * are convert to standard 6 digit hex color.
+ * @param {String} attr The css attribute
+ * @param {String} defaultValue The default value to use when a valid color isn't found
+ * @param {String} prefix (optional) defaults to #. Use an empty string when working with
+ * color anims.
+ */
+ getColor : function(attr, defaultValue, prefix){
+ var v = this.getStyle(attr),
+ color = Ext.isDefined(prefix) ? prefix : '#',
+ h;
+
+ if(!v || /transparent|inherit/.test(v)){
+ return defaultValue;
+ }
+ if(/^r/.test(v)){
+ Ext.each(v.slice(4, v.length -1).split(','), function(s){
+ h = parseInt(s, 10);
+ color += (h < 16 ? '0' : '') + h.toString(16);
+ });
+ }else{
+ v = v.replace('#', '');
+ color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
+ }
+ return(color.length > 5 ? color.toLowerCase() : defaultValue);
+ },
+
+ /**
+ * Wrapper for setting style properties, also takes single object parameter of multiple styles.
+ * @param {String/Object} property The style property to be set, or an object of multiple styles.
+ * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
+ * @return {Ext.Element} this
+ */
+ setStyle : function(prop, value){
+ var tmp,
+ style,
+ camel;
+ if (!Ext.isObject(prop)) {
+ tmp = {};
+ tmp[prop] = value;
+ prop = tmp;
+ }
+ for (style in prop) {
+ value = prop[style];
+ style == 'opacity' ?
+ this.setOpacity(value) :
+ this.dom.style[chkCache(style)] = value;
+ }
+ return this;
+ },
+
+ /**
+ * Set the opacity of the element
+ * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
+ * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
+ * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
+ * @return {Ext.Element} this
+ */
+ setOpacity : function(opacity, animate){
+ var me = this,
+ s = me.dom.style;
-Ext.Element = function(element, forceNew){
- var dom = typeof element == "string" ?
- DOC.getElementById(element) : element,
- id;
+ if(!animate || !me.anim){
+ if(Ext.isIE){
+ var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
+ val = s.filter.replace(opacityRe, '').replace(trimRe, '');
- if(!dom) return null;
+ s.zoom = 1;
+ s.filter = val + (val.length > 0 ? ' ' : '') + opac;
+ }else{
+ s.opacity = opacity;
+ }
+ }else{
+ me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
+ }
+ return me;
+ },
- id = dom.id;
+ /**
+ * Clears any opacity settings from this element. Required in some cases for IE.
+ * @return {Ext.Element} this
+ */
+ clearOpacity : function(){
+ var style = this.dom.style;
+ if(Ext.isIE){
+ if(!Ext.isEmpty(style.filter)){
+ style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
+ }
+ }else{
+ style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
+ }
+ return this;
+ },
- if(!forceNew && id && Ext.elCache[id]){ // element object already exists
- return Ext.elCache[id].el;
- }
+ /**
+ * Returns the offset height of the element
+ * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
+ * @return {Number} The element's height
+ */
+ getHeight : function(contentHeight){
+ var me = this,
+ dom = me.dom,
+ hidden = Ext.isIE && me.isStyle('display', 'none'),
+ h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;
- /**
- * The DOM element
- * @type HTMLElement
- */
- this.dom = dom;
+ h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
+ return h < 0 ? 0 : h;
+ },
- /**
- * The DOM element ID
- * @type String
- */
- this.id = id || Ext.id(dom);
-};
+ /**
+ * Returns the offset width of the element
+ * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
+ * @return {Number} The element's width
+ */
+ getWidth : function(contentWidth){
+ var me = this,
+ dom = me.dom,
+ hidden = Ext.isIE && me.isStyle('display', 'none'),
+ w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
+ w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
+ return w < 0 ? 0 : w;
+ },
-var D = Ext.lib.Dom,
- DH = Ext.DomHelper,
- E = Ext.lib.Event,
- A = Ext.lib.Anim,
- El = Ext.Element,
- EC = Ext.elCache;
+ /**
+ * Set the width of this Element.
+ * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
+ * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
+ * </ul></div>
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setWidth : function(width, animate){
+ var me = this;
+ width = me.adjustWidth(width);
+ !animate || !me.anim ?
+ me.dom.style.width = me.addUnits(width) :
+ me.anim({width : {to : width}}, me.preanim(arguments, 1));
+ return me;
+ },
-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;
+ /**
+ * Set the height of this Element.
+ * <pre><code>
+// change the height to 200px and animate with default configuration
+Ext.fly('elementId').setHeight(200, true);
- 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;
- },
+// change the height to 150px and animate with a custom configuration
+Ext.fly('elId').setHeight(150, {
+ duration : .5, // animation will have a duration of .5 seconds
+ // will change the content to "finished"
+ callback: function(){ this.{@link #update}("finished"); }
+});
+ * </code></pre>
+ * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
+ * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
+ * </ul></div>
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setHeight : function(height, animate){
+ var me = this;
+ height = me.adjustHeight(height);
+ !animate || !me.anim ?
+ me.dom.style.height = me.addUnits(height) :
+ me.anim({height : {to : height}}, me.preanim(arguments, 1));
+ return me;
+ },
-// 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.
- */
+ /**
+ * Gets the width of the border(s) for the specified side(s)
+ * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+ * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
+ * @return {Number} The width of the sides passed added together
+ */
+ getBorderWidth : function(side){
+ return this.addStyles(side, borders);
+ },
+
+ /**
+ * Gets the width of the padding(s) for the specified side(s)
+ * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+ * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
+ * @return {Number} The padding of the sides passed added together
+ */
+ getPadding : function(side){
+ return this.addStyles(side, paddings);
+ },
+
+ /**
+ * Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
+ * @return {Ext.Element} this
+ */
+ clip : function(){
+ var me = this,
+ dom = me.dom;
+
+ if(!data(dom, ISCLIPPED)){
+ data(dom, ISCLIPPED, true);
+ data(dom, ORIGINALCLIP, {
+ o: me.getStyle(OVERFLOW),
+ x: me.getStyle(OVERFLOWX),
+ y: me.getStyle(OVERFLOWY)
+ });
+ me.setStyle(OVERFLOW, HIDDEN);
+ me.setStyle(OVERFLOWX, HIDDEN);
+ me.setStyle(OVERFLOWY, HIDDEN);
+ }
+ return me;
+ },
-// 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.
- */
+ /**
+ * Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
+ * @return {Ext.Element} this
+ */
+ unclip : function(){
+ var me = this,
+ dom = me.dom;
+ if(data(dom, ISCLIPPED)){
+ data(dom, ISCLIPPED, false);
+ var o = data(dom, ORIGINALCLIP);
+ if(o.o){
+ me.setStyle(OVERFLOW, o.o);
+ }
+ if(o.x){
+ me.setStyle(OVERFLOWX, o.x);
+ }
+ if(o.y){
+ me.setStyle(OVERFLOWY, o.y);
+ }
+ }
+ return me;
+ },
-// 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.
- */
+ // private
+ addStyles : function(sides, styles){
+ var val = 0,
+ m = sides.match(/\w/g),
+ s;
+ for (var i=0, len=m.length; i<len; i++) {
+ s = m[i] && parseInt(this.getStyle(styles[m[i]]), 10);
+ if (s) {
+ val += MATH.abs(s);
+ }
+ }
+ return val;
+ },
-// 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.
- */
+ margins : margins
+ }
+}()
+);
+/**
+ * @class Ext.Element
+ */
-// 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.
- */
+// special markup used throughout Ext when box wrapping elements
+Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
-// 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.
- */
+Ext.Element.addMethods(function(){
+ var INTERNAL = "_internal",
+ pxMatch = /(\d+\.?\d+)px/;
+ return {
+ /**
+ * More flexible version of {@link #setStyle} for setting style properties.
+ * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+ * a function which returns such a specification.
+ * @return {Ext.Element} this
+ */
+ applyStyles : function(style){
+ Ext.DomHelper.applyStyles(this.dom, style);
+ return this;
+ },
+
+ /**
+ * Returns an object with properties matching the styles requested.
+ * For example, el.getStyles('color', 'font-size', 'width') might return
+ * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
+ * @param {String} style1 A style name
+ * @param {String} style2 A style name
+ * @param {String} etc.
+ * @return {Object} The style object
+ */
+ getStyles : function(){
+ var ret = {};
+ Ext.each(arguments, function(v) {
+ ret[v] = this.getStyle(v);
+ },
+ this);
+ return ret;
+ },
+
+ // private ==> used by ext full
+ setOverflow : function(v){
+ var dom = this.dom;
+ if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
+ dom.style.overflow = 'hidden';
+ (function(){dom.style.overflow = 'auto';}).defer(1);
+ }else{
+ dom.style.overflow = v;
+ }
+ },
+
+ /**
+ * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+ * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
+ * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
+ * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup
+ * is of this form:</p>
+ * <pre><code>
+ Ext.Element.boxMarkup =
+ '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
+ <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
+ <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+ * </code></pre>
+ * <p>Example usage:</p>
+ * <pre><code>
+ // Basic box wrap
+ Ext.get("foo").boxWrap();
+
+ // You can also add a custom class and use CSS inheritance rules to customize the box look.
+ // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+ // for how to create a custom box wrap style.
+ Ext.get("foo").boxWrap().addClass("x-box-blue");
+ * </code></pre>
+ * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
+ * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
+ * this name to make the overall effect work, so if you supply an alternate base class, make sure you
+ * also supply all of the necessary rules.
+ * @return {Ext.Element} The outermost wrapping element of the created box structure.
+ */
+ boxWrap : function(cls){
+ cls = cls || 'x-box';
+ var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
+ Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
+ return el;
+ },
+
+ /**
+ * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
+ * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
+ * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
+ * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
+ * </ul></div>
+ * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
+ * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
+ * </ul></div>
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setSize : function(width, height, animate){
+ var me = this;
+ if(Ext.isObject(width)){ // in case of object from getSize()
+ height = width.height;
+ width = width.width;
+ }
+ width = me.adjustWidth(width);
+ height = me.adjustHeight(height);
+ if(!animate || !me.anim){
+ me.dom.style.width = me.addUnits(width);
+ me.dom.style.height = me.addUnits(height);
+ }else{
+ me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
+ }
+ return me;
+ },
- /**
- * The default unit to append to CSS values where a unit isn't provided (defaults to px).
- * @type String
- */
- defaultUnit : "px",
+ /**
+ * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
+ * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
+ * if a height has not been set using CSS.
+ * @return {Number}
+ */
+ getComputedHeight : function(){
+ var me = this,
+ h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
+ if(!h){
+ h = parseFloat(me.getStyle('height')) || 0;
+ if(!me.isBorderBox()){
+ h += me.getFrameWidth('tb');
+ }
+ }
+ return h;
+ },
- /**
- * 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);
- },
+ /**
+ * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
+ * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
+ * if a width has not been set using CSS.
+ * @return {Number}
+ */
+ getComputedWidth : function(){
+ var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
+ if(!w){
+ w = parseFloat(this.getStyle('width')) || 0;
+ if(!this.isBorderBox()){
+ w += this.getFrameWidth('lr');
+ }
+ }
+ return w;
+ },
- /**
- * 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();
+ /**
+ * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
+ for more information about the sides.
+ * @param {String} sides
+ * @return {Number}
+ */
+ getFrameWidth : function(sides, onlyContentBox){
+ return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
+ },
+
+ /**
+ * Sets up event handlers to add and remove a css class when the mouse is over this element
+ * @param {String} className
+ * @return {Ext.Element} this
+ */
+ addClassOnOver : function(className){
+ this.hover(
+ function(){
+ Ext.fly(this, INTERNAL).addClass(className);
+ },
+ function(){
+ Ext.fly(this, INTERNAL).removeClass(className);
+ }
+ );
+ return this;
+ },
+
+ /**
+ * Sets up event handlers to add and remove a css class when this element has the focus
+ * @param {String} className
+ * @return {Ext.Element} this
+ */
+ addClassOnFocus : function(className){
+ this.on("focus", function(){
+ Ext.fly(this, INTERNAL).addClass(className);
+ }, this.dom);
+ this.on("blur", function(){
+ Ext.fly(this, INTERNAL).removeClass(className);
+ }, this.dom);
+ return this;
+ },
+
+ /**
+ * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
+ * @param {String} className
+ * @return {Ext.Element} this
+ */
+ addClassOnClick : function(className){
+ var dom = this.dom;
+ this.on("mousedown", function(){
+ Ext.fly(dom, INTERNAL).addClass(className);
+ var d = Ext.getDoc(),
+ fn = function(){
+ Ext.fly(dom, INTERNAL).removeClass(className);
+ d.removeListener("mouseup", fn);
+ };
+ d.on("mouseup", fn);
+ });
+ return this;
+ },
+
+ /**
+ * <p>Returns the dimensions of the element available to lay content out in.<p>
+ * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
+ * example:<pre><code>
+ var vpSize = Ext.getBody().getViewSize();
+
+ // all Windows created afterwards will have a default value of 90% height and 95% width
+ Ext.Window.override({
+ width: vpSize.width * 0.9,
+ height: vpSize.height * 0.95
+ });
+ // To handle window resizing you would have to hook onto onWindowResize.
+ * </code></pre>
+ *
+ * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
+ * To obtain the size including scrollbars, use getStyleSize
+ *
+ * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
+ */
+
+ getViewSize : function(){
+ var doc = document,
+ d = this.dom,
+ isDoc = (d == doc || d == doc.body);
+
+ // If the body, use Ext.lib.Dom
+ if (isDoc) {
+ var extdom = Ext.lib.Dom;
+ return {
+ width : extdom.getViewWidth(),
+ height : extdom.getViewHeight()
+ };
+
+ // Else use clientHeight/clientWidth
+ } else {
+ return {
+ width : d.clientWidth,
+ height : d.clientHeight
+ }
}
- }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;
- },
+ /**
+ * <p>Returns the dimensions of the element available to lay content out in.<p>
+ *
+ * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
+ * To obtain the size excluding scrollbars, use getViewSize
+ *
+ * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
+ */
- /**
- * 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;
- },
+ getStyleSize : function(){
+ var me = this,
+ w, h,
+ doc = document,
+ d = this.dom,
+ isDoc = (d == doc || d == doc.body),
+ s = d.style;
+
+ // If the body, use Ext.lib.Dom
+ if (isDoc) {
+ var extdom = Ext.lib.Dom;
+ return {
+ width : extdom.getViewWidth(),
+ height : extdom.getViewHeight()
+ }
+ }
+ // Use Styles if they are set
+ if(s.width && s.width != 'auto'){
+ w = parseFloat(s.width);
+ if(me.isBorderBox()){
+ w -= me.getFrameWidth('lr');
+ }
+ }
+ // Use Styles if they are set
+ if(s.height && s.height != 'auto'){
+ h = parseFloat(s.height);
+ if(me.isBorderBox()){
+ h -= me.getFrameWidth('tb');
+ }
+ }
+ // Use getWidth/getHeight if style not set.
+ return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
+ },
- /**
- * Appends an event handler to this element. The shorthand version {@link #on} is equivalent.
- * @param {String} eventName The name of event to handle.
- * @param {Function} fn The handler function the event invokes. This function is passed
- * the following parameters:<ul>
- * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
- * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
- * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
- * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
- * </ul>
- * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
- * <b>If omitted, defaults to this Element.</b>.
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:<ul>
- * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
- * <b>If omitted, defaults to this Element.</b></div></li>
- * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
- * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
- * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
- * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
- * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
- * <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
- * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
- * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
- * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
- * by the specified number of milliseconds. If the event fires again within that time, the original
- * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
- * </ul><br>
- * <p>
- * <b>Combining Options</b><br>
- * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
- * addListener. The two are equivalent. Using the options argument, it is possible to combine different
- * types of listeners:<br>
- * <br>
- * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
- * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
- * Code:<pre><code>
-el.on('click', this.onClick, this, {
- single: true,
- delay: 100,
- stopEvent : true,
- forumId: 4
-});</code></pre></p>
- * <p>
- * <b>Attaching multiple handlers in 1 call</b><br>
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple handlers.</p>
- * <p>
- * Code:<pre><code>
-el.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
-});</code></pre>
- * <p>
- * Or a shorthand syntax:<br>
- * Code:<pre><code></p>
-el.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
-});
- * </code></pre></p>
- * <p><b>delegate</b></p>
- * <p>This is a configuration option that you can pass along when registering a handler for
- * an event to assist with event delegation. Event delegation is a technique that is used to
- * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
- * for a container element as opposed to each element within a container. By setting this
- * configuration option to a simple selector, the target element will be filtered to look for
- * a descendant of the target.
- * For example:<pre><code>
-// using this markup:
-<div id='elId'>
- <p id='p1'>paragraph one</p>
- <p id='p2' class='clickable'>paragraph two</p>
- <p id='p3'>paragraph three</p>
-</div>
-// utilize event delegation to registering just one handler on the container element:
-el = Ext.get('elId');
-el.on(
- 'click',
- function(e,t) {
- // handle click
- console.info(t.id); // 'p2'
- },
- this,
- {
- // filter the target element to be a descendant with the class 'clickable'
- delegate: '.clickable'
- }
-);
- * </code></pre></p>
- * @return {Ext.Element} this
- */
- addListener : function(eventName, fn, scope, options){
- Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
- return this;
- },
+ /**
+ * Returns the size of the element.
+ * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
+ * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
+ */
+ getSize : function(contentSize){
+ return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
+ },
- /**
- * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
- * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
- * listener, the same scope must be specified here.
- * Example:
- * <pre><code>
-el.removeListener('click', this.handlerFn);
-// or
-el.un('click', this.handlerFn);
-</code></pre>
- * @param {String} eventName The name of the event from which to remove the handler.
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @return {Ext.Element} this
- */
- removeListener : function(eventName, fn, scope){
- Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
- return this;
- },
+ /**
+ * Forces the browser to repaint this element
+ * @return {Ext.Element} this
+ */
+ repaint : function(){
+ var dom = this.dom;
+ this.addClass("x-repaint");
+ setTimeout(function(){
+ Ext.fly(dom).removeClass("x-repaint");
+ }, 1);
+ return this;
+ },
- /**
- * Removes all previous added listeners from this element
- * @return {Ext.Element} this
- */
- removeAllListeners : function(){
- Ext.EventManager.removeAll(this.dom);
- return this;
- },
+ /**
+ * Disables text selection for this element (normalized across browsers)
+ * @return {Ext.Element} this
+ */
+ unselectable : function(){
+ this.dom.unselectable = "on";
+ return this.swallowEvent("selectstart", true).
+ applyStyles("-moz-user-select:none;-khtml-user-select:none;").
+ addClass("x-unselectable");
+ },
- /**
- * 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');
+ /**
+ * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
+ * then it returns the calculated width of the sides (see getPadding)
+ * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
+ * @return {Object/Number}
+ */
+ getMargins : function(side){
+ var me = this,
+ key,
+ hash = {t:"top", l:"left", r:"right", b: "bottom"},
+ o = {};
+
+ if (!side) {
+ for (key in me.margins){
+ o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
+ }
+ return o;
+ } else {
+ return me.addStyles.call(me, side, me.margins);
+ }
}
- return size;
+ };
+}());
+/**
+ * @class Ext.Element
+ */
+(function(){
+var D = Ext.lib.Dom,
+ LEFT = "left",
+ RIGHT = "right",
+ TOP = "top",
+ BOTTOM = "bottom",
+ POSITION = "position",
+ STATIC = "static",
+ RELATIVE = "relative",
+ AUTO = "auto",
+ ZINDEX = "z-index";
+
+Ext.Element.addMethods({
+ /**
+ * Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @return {Number} The X position of the element
+ */
+ getX : function(){
+ return D.getX(this.dom);
},
/**
- * <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element
- * from a specified URL. Note that this is subject to the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin Policy</a></p>
- * <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt><script></tt> elements. This is a browser restriction.</p>
- * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying
- * exactly how to request the HTML.
- * @return {Ext.Element} this
- */
- load : function(url, params, cb){
- Ext.Ajax.request(Ext.apply({
- params: params,
- url: url.url || url,
- callback: cb,
- el: this.dom,
- indicatorText: url.indicatorText || ''
- }, Ext.isObject(url) ? url : {}));
- return this;
+ * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @return {Number} The Y position of the element
+ */
+ getY : function(){
+ return D.getY(this.dom);
},
/**
- * 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;
+ * Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @return {Array} The XY position of the element
+ */
+ getXY : function(){
+ return D.getXY(this.dom);
},
/**
- * <p>Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode}</p>
- */
- remove : function(){
- var me = this,
- dom = me.dom;
-
- if (dom) {
- delete me.dom;
- Ext.removeNode(dom);
- }
+ * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.
+ * @param {Mixed} element The element to get the offsets from.
+ * @return {Array} The XY page offsets (e.g. [100, -200])
+ */
+ getOffsetsTo : function(el){
+ var o = this.getXY(),
+ e = Ext.fly(el, '_internal').getXY();
+ return [o[0]-e[0],o[1]-e[1]];
},
/**
- * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
- * @param {Function} overFn The function to call when the mouse enters the Element.
- * @param {Function} outFn The function to call when the mouse leaves the Element.
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the functions are executed. Defaults to the Element's DOM element.
- * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
+ * Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @param {Number} The X position of the element
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @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;
+ setX : function(x, animate){
+ return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));
},
/**
- * 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
+ * Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @param {Number} The Y position of the element
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
*/
- contains : function(el){
- return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
+ setY : function(y, animate){
+ return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));
},
/**
- * 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
+ * Sets the element's left position directly using CSS style (instead of {@link #setX}).
+ * @param {String} left The left CSS property value
+ * @return {Ext.Element} this
*/
- getAttributeNS : function(ns, name){
- return this.getAttribute(name, ns);
+ setLeft : function(left){
+ this.setStyle(LEFT, this.addUnits(left));
+ return this;
},
/**
- * 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
+ * Sets the element's top position directly using CSS style (instead of {@link #setY}).
+ * @param {String} top The top CSS property value
+ * @return {Ext.Element} this
*/
- 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];
+ setTop : function(top){
+ this.setStyle(TOP, this.addUnits(top));
+ return this;
},
/**
- * Update the innerHTML of this element
- * @param {String} html The new HTML
- * @return {Ext.Element} this
+ * Sets the element's CSS right style.
+ * @param {String} right The right CSS property value
+ * @return {Ext.Element} this
*/
- update : function(html) {
- if (this.dom) {
- this.dom.innerHTML = html;
- }
+ setRight : function(right){
+ this.setStyle(RIGHT, this.addUnits(right));
return this;
- }
-};
-
-var ep = El.prototype;
-
-El.addMethods = function(o){
- Ext.apply(ep, o);
-};
-
-/**
- * Appends an event handler (shorthand for {@link #addListener}).
- * @param {String} eventName The name of event to handle.
- * @param {Function} fn The handler function the event invokes.
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
- * @param {Object} options (optional) An object containing standard {@link #addListener} options
- * @member Ext.Element
- * @method on
- */
-ep.on = ep.addListener;
-
-/**
- * Removes an event handler from this element (see {@link #removeListener} for additional notes).
- * @param {String} eventName The name of the event from which to remove the handler.
- * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
- * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
- * then this must refer to the same object.
- * @return {Ext.Element} this
- * @member Ext.Element
- * @method un
- */
-ep.un = ep.removeListener;
-
-/**
- * true to automatically adjust width and height settings for box-model issues (default to true)
- */
-ep.autoBoxAdjust = true;
-
-// private
-var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
- docEl;
-
-/**
- * @private
- */
-
-/**
- * Retrieves Ext.Element objects.
- * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
- * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
- * its ID, use {@link Ext.ComponentMgr#get}.</p>
- * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
- * object was recreated with the same id via AJAX or DOM.</p>
- * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
- * @return {Element} The Element object (or null if no matching element was found)
- * @static
- * @member Ext.Element
- * @method get
- */
-El.get = function(el){
- var ex,
- elm,
- id;
- if(!el){ return null; }
- if (typeof el == "string") { // element id
- if (!(elm = DOC.getElementById(el))) {
- return null;
- }
- if (EC[el] && EC[el].el) {
- ex = EC[el].el;
- ex.dom = elm;
- } else {
- ex = El.addToCache(new El(elm));
- }
- return ex;
- } else if (el.tagName) { // dom element
- if(!(id = el.id)){
- id = Ext.id(el);
- }
- if (EC[id] && EC[id].el) {
- ex = EC[id].el;
- ex.dom = el;
- } else {
- ex = El.addToCache(new El(el));
- }
- return ex;
- } else if (el instanceof El) {
- if(el != docEl){
- el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
- // catch case where it hasn't been appended
- }
- return el;
- } else if(el.isComposite) {
- return el;
- } else if(Ext.isArray(el)) {
- return El.select(el);
- } else if(el == DOC) {
- // create a bogus element object representing the document object
- if(!docEl){
- var f = function(){};
- f.prototype = El.prototype;
- docEl = new f();
- docEl.dom = DOC;
- }
- return docEl;
- }
- return null;
-};
-
-El.addToCache = function(el, id){
- id = id || el.id;
- EC[id] = {
- el: el,
- data: {},
- events: {}
- };
- return el;
-};
-
-// private method for getting and setting element data
-El.data = function(el, key, value){
- el = El.get(el);
- if (!el) {
- return null;
- }
- var c = EC[el.id].data;
- if(arguments.length == 2){
- return c[key];
- }else{
- return (c[key] = value);
- }
-};
+ },
-// private
-// Garbage collection - uncache elements/purge listeners on orphaned elements
-// so we don't hold a reference and cause the browser to retain them
-function garbageCollect(){
- if(!Ext.enableGarbageCollector){
- clearInterval(El.collectorThreadId);
- } else {
- var eid,
- el,
- d,
- o;
+ /**
+ * Sets the element's CSS bottom style.
+ * @param {String} bottom The bottom CSS property value
+ * @return {Ext.Element} this
+ */
+ setBottom : function(bottom){
+ this.setStyle(BOTTOM, this.addUnits(bottom));
+ return this;
+ },
- 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;
+ /**
+ * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+ * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setXY : function(pos, animate){
+ var me = this;
+ if(!animate || !me.anim){
+ D.setXY(me.dom, pos);
+ }else{
+ me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');
}
- }
-}
-El.collectorThreadId = setInterval(garbageCollect, 30000);
+ return me;
+ },
-var flyFn = function(){};
-flyFn.prototype = El.prototype;
+ /**
+ * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+ * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @param {Number} x X value for new position (coordinates are page-based)
+ * @param {Number} y Y value for new position (coordinates are page-based)
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setLocation : function(x, y, animate){
+ return this.setXY([x, y], this.animTest(arguments, animate, 2));
+ },
-// dom is optional
-El.Flyweight = function(dom){
- this.dom = dom;
-};
+ /**
+ * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+ * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+ * @param {Number} x X value for new position (coordinates are page-based)
+ * @param {Number} y Y value for new position (coordinates are page-based)
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ moveTo : function(x, y, animate){
+ return this.setXY([x, y], this.animTest(arguments, animate, 2));
+ },
+
+ /**
+ * Gets the left X coordinate
+ * @param {Boolean} local True to get the local css position instead of page coordinate
+ * @return {Number}
+ */
+ getLeft : function(local){
+ return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;
+ },
-El.Flyweight.prototype = new flyFn();
-El.Flyweight.prototype.isFlyweight = true;
-El._flyweights = {};
+ /**
+ * Gets the right X coordinate of the element (element X position + element width)
+ * @param {Boolean} local True to get the local css position instead of page coordinate
+ * @return {Number}
+ */
+ getRight : function(local){
+ var me = this;
+ return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;
+ },
-/**
- * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
- * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
- * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
- * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
- * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
- * @param {String/HTMLElement} el The dom node or id
- * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
- * (e.g. internally Ext uses "_global")
- * @return {Element} The shared Element object (or null if no matching element was found)
- * @member Ext.Element
- * @method fly
- */
-El.fly = function(el, named){
- var ret = null;
- named = named || '_global';
+ /**
+ * Gets the top Y coordinate
+ * @param {Boolean} local True to get the local css position instead of page coordinate
+ * @return {Number}
+ */
+ getTop : function(local) {
+ return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;
+ },
- if (el = Ext.getDom(el)) {
- (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
- ret = El._flyweights[named];
- }
- return ret;
-};
+ /**
+ * Gets the bottom Y coordinate of the element (element Y position + element height)
+ * @param {Boolean} local True to get the local css position instead of page coordinate
+ * @return {Number}
+ */
+ getBottom : function(local){
+ var me = this;
+ return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
+ },
-/**
- * Retrieves Ext.Element objects.
- * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
- * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
- * its ID, use {@link Ext.ComponentMgr#get}.</p>
- * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
- * object was recreated with the same id via AJAX or DOM.</p>
- * Shorthand of {@link Ext.Element#get}
- * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
- * @return {Element} The Element object (or null if no matching element was found)
- * @member Ext
- * @method get
- */
-Ext.get = El.get;
+ /**
+ * Initializes positioning on this element. If a desired position is not passed, it will make the
+ * the element positioned relative IF it is not already positioned.
+ * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
+ * @param {Number} zIndex (optional) The zIndex to apply
+ * @param {Number} x (optional) Set the page X position
+ * @param {Number} y (optional) Set the page Y position
+ */
+ position : function(pos, zIndex, x, y){
+ var me = this;
+
+ if(!pos && me.isStyle(POSITION, STATIC)){
+ me.setStyle(POSITION, RELATIVE);
+ } else if(pos) {
+ me.setStyle(POSITION, pos);
+ }
+ if(zIndex){
+ me.setStyle(ZINDEX, zIndex);
+ }
+ if(x || y) me.setXY([x || false, y || false]);
+ },
-/**
- * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
- * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
- * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
- * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
- * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
- * @param {String/HTMLElement} el The dom node or id
- * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
- * (e.g. internally Ext uses "_global")
- * @return {Element} The shared Element object (or null if no matching element was found)
- * @member Ext
- * @method fly
+ /**
+ * Clear positioning back to the default when the document was loaded
+ * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
+ * @return {Ext.Element} this
+ */
+ clearPositioning : function(value){
+ value = value || '';
+ this.setStyle({
+ left : value,
+ right : value,
+ top : value,
+ bottom : value,
+ "z-index" : "",
+ position : STATIC
+ });
+ return this;
+ },
+
+ /**
+ * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
+ * snapshot before performing an update and then restoring the element.
+ * @return {Object}
+ */
+ getPositioning : function(){
+ var l = this.getStyle(LEFT);
+ var t = this.getStyle(TOP);
+ return {
+ "position" : this.getStyle(POSITION),
+ "left" : l,
+ "right" : l ? "" : this.getStyle(RIGHT),
+ "top" : t,
+ "bottom" : t ? "" : this.getStyle(BOTTOM),
+ "z-index" : this.getStyle(ZINDEX)
+ };
+ },
+
+ /**
+ * Set positioning with an object returned by getPositioning().
+ * @param {Object} posCfg
+ * @return {Ext.Element} this
+ */
+ setPositioning : function(pc){
+ var me = this,
+ style = me.dom.style;
+
+ me.setStyle(pc);
+
+ if(pc.right == AUTO){
+ style.right = "";
+ }
+ if(pc.bottom == AUTO){
+ style.bottom = "";
+ }
+
+ return me;
+ },
+
+ /**
+ * Translates the passed page coordinates into left/top css values for this element
+ * @param {Number/Array} x The page x or an array containing [x, y]
+ * @param {Number} y (optional) The page y, required if x is not an array
+ * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
+ */
+ translatePoints : function(x, y){
+ y = isNaN(x[1]) ? y : x[1];
+ x = isNaN(x[0]) ? x : x[0];
+ var me = this,
+ relative = me.isStyle(POSITION, RELATIVE),
+ o = me.getXY(),
+ l = parseInt(me.getStyle(LEFT), 10),
+ t = parseInt(me.getStyle(TOP), 10);
+
+ l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
+ t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
+
+ return {left: (x - o[0] + l), top: (y - o[1] + t)};
+ },
+
+ animTest : function(args, animate, i) {
+ return !!animate && this.preanim ? this.preanim(args, i) : false;
+ }
+});
+})();/**
+ * @class Ext.Element
*/
-Ext.fly = El.fly;
+Ext.Element.addMethods({
+ /**
+ * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
+ * @param {Object} box The box to fill {x, y, width, height}
+ * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setBox : function(box, adjust, animate){
+ var me = this,
+ w = box.width,
+ h = box.height;
+ if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
+ w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
+ h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
+ }
+ me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
+ return me;
+ },
-// 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;
+ /**
+ * Return an object defining the area of this Element which can be passed to {@link #setBox} to
+ * set another Element's size/location to match this element.
+ * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
+ * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
+ * @return {Object} box An object in the format<pre><code>
+{
+ x: <Element's X position>,
+ y: <Element's Y position>,
+ width: <Element's width>,
+ height: <Element's height>,
+ bottom: <Element's lower bound>,
+ right: <Element's rightmost bound>
}
+</code></pre>
+ * The returned object may also be addressed as an Array where index 0 contains the X position
+ * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
+ */
+ getBox : function(contentBox, local) {
+ var me = this,
+ xy,
+ left,
+ top,
+ getBorderWidth = me.getBorderWidth,
+ getPadding = me.getPadding,
+ l,
+ r,
+ t,
+ b;
+ if(!local){
+ xy = me.getXY();
+ }else{
+ left = parseInt(me.getStyle("left"), 10) || 0;
+ top = parseInt(me.getStyle("top"), 10) || 0;
+ xy = [left, top];
+ }
+ var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
+ if(!contentBox){
+ bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
+ }else{
+ l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
+ r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
+ t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
+ b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
+ bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
+ }
+ bx.right = bx.x + bx.width;
+ bx.bottom = bx.y + bx.height;
+ return bx;
+ },
+
+ /**
+ * Move this element relative to its current position.
+ * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
+ * @param {Number} distance How far to move the element in pixels
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ move : function(direction, distance, animate){
+ var me = this,
+ xy = me.getXY(),
+ x = xy[0],
+ y = xy[1],
+ left = [x - distance, y],
+ right = [x + distance, y],
+ top = [x, y - distance],
+ bottom = [x, y + distance],
+ hash = {
+ l : left,
+ left : left,
+ r : right,
+ right : right,
+ t : top,
+ top : top,
+ up : top,
+ b : bottom,
+ bottom : bottom,
+ down : bottom
+ };
+
+ direction = direction.toLowerCase();
+ me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
+ },
+
+ /**
+ * Quick set left and top adding default units
+ * @param {String} left The left CSS property value
+ * @param {String} top The top CSS property value
+ * @return {Ext.Element} this
+ */
+ setLeftTop : function(left, top){
+ var me = this,
+ style = me.dom.style;
+ style.left = me.addUnits(left);
+ style.top = me.addUnits(top);
+ return me;
+ },
+
+ /**
+ * Returns the region of the given element.
+ * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
+ * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
+ */
+ getRegion : function(){
+ return Ext.lib.Dom.getRegion(this.dom);
+ },
+
+ /**
+ * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
+ * @param {Number} x X value for new position (coordinates are page-based)
+ * @param {Number} y Y value for new position (coordinates are page-based)
+ * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>
+ * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
+ * </ul></div>
+ * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+ * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>
+ * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
+ * </ul></div>
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setBounds : function(x, y, width, height, animate){
+ var me = this;
+ if (!animate || !me.anim) {
+ me.setSize(width, height);
+ me.setLocation(x, y);
+ } else {
+ me.anim({points: {to: [x, y]},
+ width: {to: me.adjustWidth(width)},
+ height: {to: me.adjustHeight(height)}},
+ me.preanim(arguments, 4),
+ 'motion');
+ }
+ return me;
+ },
+
+ /**
+ * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
+ * @param {Ext.lib.Region} region The region to fill
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setRegion : function(region, animate) {
+ return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
+ }
+});/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Returns true if this element is scrollable.
+ * @return {Boolean}
+ */
+ isScrollable : function(){
+ var dom = this.dom;
+ return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
+ },
-})();
-/**
+ /**
+ * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
+ * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
+ * @param {Number} value The new scroll value.
+ * @return {Element} this
+ */
+ scrollTo : function(side, value){
+ this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
+ return this;
+ },
+
+ /**
+ * Returns the current scroll position of the element.
+ * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
+ */
+ getScroll : function(){
+ var d = this.dom,
+ doc = document,
+ body = doc.body,
+ docElement = doc.documentElement,
+ l,
+ t,
+ ret;
+
+ if(d == doc || d == body){
+ if(Ext.isIE && Ext.isStrict){
+ l = docElement.scrollLeft;
+ t = docElement.scrollTop;
+ }else{
+ l = window.pageXOffset;
+ t = window.pageYOffset;
+ }
+ ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
+ }else{
+ ret = {left: d.scrollLeft, top: d.scrollTop};
+ }
+ return ret;
+ }
+});/**
* @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
+ * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
+ * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
+ * @param {Number} value The new scroll value
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Element} this
+ */
+ scrollTo : function(side, value, animate){
+ var top = /top/i.test(side), //check if we're scrolling top or left
+ me = this,
+ dom = me.dom,
+ prop;
+ if (!animate || !me.anim) {
+ prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction
+ dom[prop] = value;
+ }else{
+ prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop
+ me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},
+ me.preanim(arguments, 2), 'scroll');
+ }
+ return me;
+ },
+
+ /**
+ * Scrolls this element into view within the passed container.
+ * @param {Mixed} container (optional) The container element to scroll (defaults to document.body). Should be a
+ * string (id), dom node, or Ext.Element.
+ * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
* @return {Ext.Element} this
*/
- swallowEvent : function(eventName, preventDefault){
- var me = this;
- function fn(e){
- e.stopPropagation();
- if(preventDefault){
- e.preventDefault();
- }
+ scrollIntoView : function(container, hscroll){
+ var c = Ext.getDom(container) || Ext.getBody().dom,
+ el = this.dom,
+ o = this.getOffsetsTo(c),
+ l = o[0] + c.scrollLeft,
+ t = o[1] + c.scrollTop,
+ b = t + el.offsetHeight,
+ r = l + el.offsetWidth,
+ ch = c.clientHeight,
+ ct = parseInt(c.scrollTop, 10),
+ cl = parseInt(c.scrollLeft, 10),
+ cb = ct + ch,
+ cr = cl + c.clientWidth;
+
+ if (el.offsetHeight > ch || t < ct) {
+ c.scrollTop = t;
+ } else if (b > cb){
+ c.scrollTop = b-ch;
}
- if(Ext.isArray(eventName)){
- Ext.each(eventName, function(e) {
- me.on(e, fn);
- });
- return me;
+ c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
+
+ if(hscroll !== false){
+ if(el.offsetWidth > c.clientWidth || l < cl){
+ c.scrollLeft = l;
+ }else if(r > cr){
+ c.scrollLeft = r - c.clientWidth;
+ }
+ c.scrollLeft = c.scrollLeft;
}
- me.on(eventName, fn);
- return me;
+ return this;
},
+ // private
+ scrollChildIntoView : function(child, hscroll){
+ Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
+ },
+
/**
- * 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
+ * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
+ * within this element's scrollable range.
+ * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
+ * @param {Number} distance How far to scroll the element in pixels
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Boolean} Returns true if a scroll was triggered or false if the element
+ * was scrolled as far as it could go.
*/
- relayEvent : function(eventName, observable){
- this.on(eventName, function(e){
- observable.fireEvent(eventName, e);
- });
+ scroll : function(direction, distance, animate){
+ if(!this.isScrollable()){
+ return;
+ }
+ var el = this.dom,
+ l = el.scrollLeft, t = el.scrollTop,
+ w = el.scrollWidth, h = el.scrollHeight,
+ cw = el.clientWidth, ch = el.clientHeight,
+ scrolled = false, v,
+ hash = {
+ l: Math.min(l + distance, w-cw),
+ r: v = Math.max(l - distance, 0),
+ t: Math.max(t - distance, 0),
+ b: Math.min(t + distance, h-ch)
+ };
+ hash.d = hash.b;
+ hash.u = hash.t;
+
+ direction = direction.substr(0, 1);
+ if((v = hash[direction]) > -1){
+ scrolled = true;
+ this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
+ }
+ return scrolled;
+ }
+});/**
+ * @class Ext.Element
+ */
+/**
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
+ * @static
+ * @type Number
+ */
+Ext.Element.VISIBILITY = 1;
+/**
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
+ * @static
+ * @type Number
+ */
+Ext.Element.DISPLAY = 2;
+
+Ext.Element.addMethods(function(){
+ var VISIBILITY = "visibility",
+ DISPLAY = "display",
+ HIDDEN = "hidden",
+ OFFSETS = "offsets",
+ NONE = "none",
+ ORIGINALDISPLAY = 'originalDisplay',
+ VISMODE = 'visibilityMode',
+ ELDISPLAY = Ext.Element.DISPLAY,
+ data = Ext.Element.data,
+ getDisplay = function(dom){
+ var d = data(dom, ORIGINALDISPLAY);
+ if(d === undefined){
+ data(dom, ORIGINALDISPLAY, d = '');
+ }
+ return d;
+ },
+ getVisMode = function(dom){
+ var m = data(dom, VISMODE);
+ if(m === undefined){
+ data(dom, VISMODE, m = 1);
+ }
+ return m;
+ };
+
+ return {
+ /**
+ * The element's default display mode (defaults to "")
+ * @type String
+ */
+ originalDisplay : "",
+ visibilityMode : 1,
+
+ /**
+ * Sets the element's visibility mode. When setVisible() is called it
+ * will use this to determine whether to set the visibility or the display property.
+ * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
+ * @return {Ext.Element} this
+ */
+ setVisibilityMode : function(visMode){
+ data(this.dom, VISMODE, visMode);
+ return this;
+ },
+
+ /**
+ * Perform custom animation on this element.
+ * <div><ul class="mdetail-params">
+ * <li><u>Animation Properties</u></li>
+ *
+ * <p>The Animation Control Object enables gradual transitions for any member of an
+ * element's style object that takes a numeric value including but not limited to
+ * these properties:</p><div><ul class="mdetail-params">
+ * <li><tt>bottom, top, left, right</tt></li>
+ * <li><tt>height, width</tt></li>
+ * <li><tt>margin, padding</tt></li>
+ * <li><tt>borderWidth</tt></li>
+ * <li><tt>opacity</tt></li>
+ * <li><tt>fontSize</tt></li>
+ * <li><tt>lineHeight</tt></li>
+ * </ul></div>
+ *
+ *
+ * <li><u>Animation Property Attributes</u></li>
+ *
+ * <p>Each Animation Property is a config object with optional properties:</p>
+ * <div><ul class="mdetail-params">
+ * <li><tt>by</tt>* : relative change - start at current value, change by this value</li>
+ * <li><tt>from</tt> : ignore current value, start from this value</li>
+ * <li><tt>to</tt>* : start at current value, go to this value</li>
+ * <li><tt>unit</tt> : any allowable unit specification</li>
+ * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
+ * </ul></div>
+ *
+ * <li><u>Animation Types</u></li>
+ *
+ * <p>The supported animation types:</p><div><ul class="mdetail-params">
+ * <li><tt>'run'</tt> : Default
+ * <pre><code>
+var el = Ext.get('complexEl');
+el.animate(
+ // animation control object
+ {
+ borderWidth: {to: 3, from: 0},
+ opacity: {to: .3, from: 1},
+ height: {to: 50, from: el.getHeight()},
+ width: {to: 300, from: el.getWidth()},
+ top : {by: - 100, unit: 'px'},
+ },
+ 0.35, // animation duration
+ null, // callback
+ 'easeOut', // easing method
+ 'run' // animation type ('run','color','motion','scroll')
+);
+ * </code></pre>
+ * </li>
+ * <li><tt>'color'</tt>
+ * <p>Animates transition of background, text, or border colors.</p>
+ * <pre><code>
+el.animate(
+ // animation control object
+ {
+ color: { to: '#06e' },
+ backgroundColor: { to: '#e06' }
+ },
+ 0.35, // animation duration
+ null, // callback
+ 'easeOut', // easing method
+ 'color' // animation type ('run','color','motion','scroll')
+);
+ * </code></pre>
+ * </li>
+ *
+ * <li><tt>'motion'</tt>
+ * <p>Animates the motion of an element to/from specific points using optional bezier
+ * way points during transit.</p>
+ * <pre><code>
+el.animate(
+ // animation control object
+ {
+ borderWidth: {to: 3, from: 0},
+ opacity: {to: .3, from: 1},
+ height: {to: 50, from: el.getHeight()},
+ width: {to: 300, from: el.getWidth()},
+ top : {by: - 100, unit: 'px'},
+ points: {
+ to: [50, 100], // go to this point
+ control: [ // optional bezier way points
+ [ 600, 800],
+ [-100, 200]
+ ]
+ }
+ },
+ 3000, // animation duration (milliseconds!)
+ null, // callback
+ 'easeOut', // easing method
+ 'motion' // animation type ('run','color','motion','scroll')
+);
+ * </code></pre>
+ * </li>
+ * <li><tt>'scroll'</tt>
+ * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
+ * <pre><code>
+el.animate(
+ // animation control object
+ {
+ scroll: {to: [400, 300]}
},
+ 0.35, // animation duration
+ null, // callback
+ 'easeOut', // easing method
+ 'scroll' // animation type ('run','color','motion','scroll')
+);
+ * </code></pre>
+ * </li>
+ * </ul></div>
+ *
+ * </ul></div>
+ *
+ * @param {Object} args The animation control args
+ * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
+ * @param {Function} onComplete (optional) Function to call when animation completes
+ * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
+ * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
+ * <tt>'motion'</tt>, or <tt>'scroll'</tt>
+ * @return {Ext.Element} this
+ */
+ animate : function(args, duration, onComplete, easing, animType){
+ this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
+ return this;
+ },
- /**
- * 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;
+ /*
+ * @private Internal animation call
+ */
+ anim : function(args, opt, animType, defaultDur, defaultEase, cb){
+ animType = animType || 'run';
+ opt = opt || {};
+ var me = this,
+ anim = Ext.lib.Anim[animType](
+ me.dom,
+ args,
+ (opt.duration || defaultDur) || .35,
+ (opt.easing || defaultEase) || 'easeOut',
+ function(){
+ if(cb) cb.call(me);
+ if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
+ },
+ me
+ );
+ opt.anim = anim;
+ return anim;
+ },
- if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){
+ // private legacy anim prep
+ preanim : function(a, i){
+ return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
+ },
+
+ /**
+ * Checks whether the element is currently visible using both visibility and display properties.
+ * @return {Boolean} True if the element is currently visible, else false
+ */
+ isVisible : function() {
+ return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
+ },
+
+ /**
+ * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
+ * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
+ * @param {Boolean} visible Whether the element is visible
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setVisible : function(visible, animate){
+ var me = this, isDisplay, isVisible, isOffsets,
+ dom = me.dom;
+
+ // hideMode string override
+ if (Ext.isString(animate)){
+ isDisplay = animate == DISPLAY;
+ isVisible = animate == VISIBILITY;
+ isOffsets = animate == OFFSETS;
+ animate = false;
+ } else {
+ isDisplay = getVisMode(this.dom) == ELDISPLAY;
+ isVisible = !isDisplay;
+ }
+
+ if (!animate || !me.anim) {
+ if (isDisplay){
+ me.setDisplayed(visible);
+ } else if (isOffsets){
+ if (!visible){
+ me.hideModeStyles = {
+ position: me.getStyle('position'),
+ top: me.getStyle('top'),
+ left: me.getStyle('left')
+ };
+
+ me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
+ } else {
+ me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
+ }
+ }else{
+ me.fixDisplay();
+ dom.style.visibility = visible ? "visible" : HIDDEN;
+ }
+ }else{
+ // closure for composites
+ if (visible){
+ me.setOpacity(.01);
+ me.setVisible(true);
+ }
+ me.anim({opacity: { to: (visible?1:0) }},
+ me.preanim(arguments, 1),
+ null,
+ .35,
+ 'easeIn',
+ function(){
+ if(!visible){
+ dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
+ Ext.fly(dom).setOpacity(1);
+ }
+ });
+ }
+ return me;
+ },
+
+ /**
+ * Toggles the element's visibility or display, depending on visibility mode.
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ toggle : function(animate){
+ var me = this;
+ me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
return me;
+ },
+
+ /**
+ * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
+ * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
+ * @return {Ext.Element} this
+ */
+ setDisplayed : function(value) {
+ if(typeof value == "boolean"){
+ value = value ? getDisplay(this.dom) : NONE;
+ }
+ this.setStyle(DISPLAY, value);
+ return this;
+ },
+
+ // private
+ fixDisplay : function(){
+ var me = this;
+ if(me.isStyle(DISPLAY, NONE)){
+ me.setStyle(VISIBILITY, HIDDEN);
+ me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
+ if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
+ me.setStyle(DISPLAY, "block");
+ }
+ }
+ },
+
+ /**
+ * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ hide : function(animate){
+ // hideMode override
+ if (Ext.isString(animate)){
+ this.setVisible(false, animate);
+ return this;
+ }
+ this.setVisible(false, this.preanim(arguments, 0));
+ return this;
+ },
+
+ /**
+ * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ show : function(animate){
+ // hideMode override
+ if (Ext.isString(animate)){
+ this.setVisible(true, animate);
+ return this;
+ }
+ this.setVisible(true, this.preanim(arguments, 0));
+ return this;
}
+ };
+}());/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods(
+function(){
+ var VISIBILITY = "visibility",
+ DISPLAY = "display",
+ HIDDEN = "hidden",
+ NONE = "none",
+ XMASKED = "x-masked",
+ XMASKEDRELATIVE = "x-masked-relative",
+ data = Ext.Element.data;
- while(n){
- var nx = n.nextSibling;
- if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){
- dom.removeChild(n);
- }else{
- n.nodeIndex = ++ni;
+ return {
+ /**
+ * Checks whether the element is currently visible using both visibility and display properties.
+ * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
+ * @return {Boolean} True if the element is currently visible, else false
+ */
+ isVisible : function(deep) {
+ var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
+ p = this.dom.parentNode;
+ if(deep !== true || !vis){
+ return vis;
+ }
+ while(p && !/^body/i.test(p.tagName)){
+ if(!Ext.fly(p, '_isVisible').isVisible()){
+ return false;
+ }
+ p = p.parentNode;
+ }
+ return true;
+ },
+
+ /**
+ * Returns true if display is not "none"
+ * @return {Boolean}
+ */
+ isDisplayed : function() {
+ return !this.isStyle(DISPLAY, NONE);
+ },
+
+ /**
+ * Convenience method for setVisibilityMode(Element.DISPLAY)
+ * @param {String} display (optional) What to set display to when visible
+ * @return {Ext.Element} this
+ */
+ enableDisplayMode : function(display){
+ this.setVisibilityMode(Ext.Element.DISPLAY);
+ if(!Ext.isEmpty(display)){
+ data(this.dom, 'originalDisplay', display);
}
- n = nx;
+ return this;
+ },
+
+ /**
+ * Puts a mask over this element to disable user interaction. Requires core.css.
+ * This method can only be applied to elements which accept child nodes.
+ * @param {String} msg (optional) A message to display in the mask
+ * @param {String} msgCls (optional) A css class to apply to the msg element
+ * @return {Element} The mask element
+ */
+ mask : function(msg, msgCls){
+ var me = this,
+ dom = me.dom,
+ dh = Ext.DomHelper,
+ EXTELMASKMSG = "ext-el-mask-msg",
+ el,
+ mask;
+
+ if(!/^body/i.test(dom.tagName) && me.getStyle('position') == 'static'){
+ me.addClass(XMASKEDRELATIVE);
+ }
+ if((el = data(dom, 'maskMsg'))){
+ el.remove();
+ }
+ if((el = data(dom, 'mask'))){
+ el.remove();
+ }
+
+ mask = dh.append(dom, {cls : "ext-el-mask"}, true);
+ data(dom, 'mask', mask);
+
+ me.addClass(XMASKED);
+ mask.setDisplayed(true);
+ if(typeof msg == 'string'){
+ var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
+ data(dom, 'maskMsg', mm);
+ mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
+ mm.dom.firstChild.innerHTML = msg;
+ mm.setDisplayed(true);
+ mm.center(me);
+ }
+ if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
+ mask.setSize(undefined, me.getHeight());
+ }
+ return mask;
+ },
+
+ /**
+ * Removes a previously applied mask.
+ */
+ unmask : function(){
+ var me = this,
+ dom = me.dom,
+ mask = data(dom, 'mask'),
+ maskMsg = data(dom, 'maskMsg');
+ if(mask){
+ if(maskMsg){
+ maskMsg.remove();
+ data(dom, 'maskMsg', undefined);
+ }
+ mask.remove();
+ data(dom, 'mask', undefined);
+ }
+ me.removeClass([XMASKED, XMASKEDRELATIVE]);
+ },
+
+ /**
+ * Returns true if this element is masked
+ * @return {Boolean}
+ */
+ isMasked : function(){
+ var m = data(this.dom, 'mask');
+ return m && m.isVisible();
+ },
+
+ /**
+ * Creates an iframe shim for this element to keep selects and other windowed objects from
+ * showing through.
+ * @return {Ext.Element} The new shim element
+ */
+ createShim : function(){
+ var el = document.createElement('iframe'),
+ shim;
+ el.frameBorder = '0';
+ el.className = 'ext-shim';
+ el.src = Ext.SSL_SECURE_URL;
+ shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
+ shim.autoBoxAdjust = false;
+ return shim;
+ }
+ };
+}());/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+ /**
+ * Convenience method for constructing a KeyMap
+ * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
+ * <code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code>
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.
+ * @return {Ext.KeyMap} The KeyMap created
+ */
+ addKeyListener : function(key, fn, scope){
+ var config;
+ if(!Ext.isObject(key) || Ext.isArray(key)){
+ config = {
+ key: key,
+ fn: fn,
+ scope: scope
+ };
+ }else{
+ config = {
+ key : key.key,
+ shift : key.shift,
+ ctrl : key.ctrl,
+ alt : key.alt,
+ fn: fn,
+ scope: scope
+ };
}
- Ext.Element.data(dom, 'isCleaned', true);
- return me;
+ return new Ext.KeyMap(this, config);
},
/**
- * 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
+ * Creates a KeyMap for this element
+ * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
+ * @return {Ext.KeyMap} The KeyMap created
*/
- load : function(){
- var um = this.getUpdater();
- um.update.apply(um, arguments);
- return this;
- },
+ addKeyMap : function(config){
+ return new Ext.KeyMap(this, config);
+ }
+});(function(){
+ // contants
+ var NULL = null,
+ UNDEFINED = undefined,
+ TRUE = true,
+ FALSE = false,
+ SETX = "setX",
+ SETY = "setY",
+ SETXY = "setXY",
+ LEFT = "left",
+ BOTTOM = "bottom",
+ TOP = "top",
+ RIGHT = "right",
+ HEIGHT = "height",
+ WIDTH = "width",
+ POINTS = "points",
+ HIDDEN = "hidden",
+ ABSOLUTE = "absolute",
+ VISIBLE = "visible",
+ MOTION = "motion",
+ POSITION = "position",
+ EASEOUT = "easeOut",
+ /*
+ * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
+ */
+ flyEl = new Ext.Element.Flyweight(),
+ queues = {},
+ getObject = function(o){
+ return o || {};
+ },
+ fly = function(dom){
+ flyEl.dom = dom;
+ flyEl.id = Ext.id(dom);
+ return flyEl;
+ },
+ /*
+ * Queueing now stored outside of the element due to closure issues
+ */
+ getQueue = function(id){
+ if(!queues[id]){
+ queues[id] = [];
+ }
+ return queues[id];
+ },
+ setQueue = function(id, value){
+ queues[id] = value;
+ };
+
+//Notifies Element that fx methods are available
+Ext.enableFx = TRUE;
- /**
- * Gets this element's {@link Ext.Updater Updater}
- * @return {Ext.Updater} The Updater
- */
- getUpdater : function(){
- return this.updateManager || (this.updateManager = new Ext.Updater(this));
+/**
+ * @class Ext.Fx
+ * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
+ * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
+ * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
+ * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
+ *
+ * <p><b><u>Method Chaining</u></b></p>
+ * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
+ * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
+ * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
+ * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
+ * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
+ * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/>
+ *
+ * <p><b><u>Anchor Options for Motion Effects</u></b></p>
+ * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
+ * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
+<pre>
+Value Description
+----- -----------------------------
+tl The top left corner
+t The center of the top edge
+tr The top right corner
+l The center of the left edge
+r The center of the right edge
+bl The bottom left corner
+b The center of the bottom edge
+br The bottom right corner
+</pre>
+ * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options
+ * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
+ *
+ * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the
+ * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
+ * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
+ * el.slideIn().highlight();
+ * </code></pre>
+ * The callback is intended for any additional code that should run once a particular effect has completed. The Element
+ * being operated upon is passed as the first parameter.
+ *
+ * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.
+ *
+ * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
+ * <li><b><tt>backBoth</tt></b></li>
+ * <li><b><tt>backIn</tt></b></li>
+ * <li><b><tt>backOut</tt></b></li>
+ * <li><b><tt>bounceBoth</tt></b></li>
+ * <li><b><tt>bounceIn</tt></b></li>
+ * <li><b><tt>bounceOut</tt></b></li>
+ * <li><b><tt>easeBoth</tt></b></li>
+ * <li><b><tt>easeBothStrong</tt></b></li>
+ * <li><b><tt>easeIn</tt></b></li>
+ * <li><b><tt>easeInStrong</tt></b></li>
+ * <li><b><tt>easeNone</tt></b></li>
+ * <li><b><tt>easeOut</tt></b></li>
+ * <li><b><tt>easeOutStrong</tt></b></li>
+ * <li><b><tt>elasticBoth</tt></b></li>
+ * <li><b><tt>elasticIn</tt></b></li>
+ * <li><b><tt>elasticOut</tt></b></li>
+ * </ul></div>
+ *
+ * @cfg {String} afterCls A css class to apply after the effect
+ * @cfg {Number} duration The length of time (in seconds) that the effect should last
+ *
+ * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
+ * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
+ *
+ * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
+ * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
+ * effects that end with the element being visually hidden, ignored otherwise)
+ * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
+ * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
+ * Element after the effect finishes.
+ * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
+ * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
+ * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
+ */
+Ext.Fx = {
+
+ // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.
+ // this is useful for replacing switch statements (for example).
+ switchStatements : function(key, fn, argHash){
+ return fn.apply(this, argHash[key]);
},
-
+
/**
- * 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
+ * Slides the element into view. An anchor point can be optionally passed to set the point of
+ * origin for the slide effect. This function automatically handles wrapping the element with
+ * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
+ * Usage:
+ *<pre><code>
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+ easing: 'easeOut',
+ duration: .5
+});
+</code></pre>
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
*/
- update : function(html, loadScripts, callback){
- if (!this.dom) {
- return this;
- }
- html = html || "";
+ slideIn : function(anchor, o){
+ o = getObject(o);
+ var me = this,
+ dom = me.dom,
+ st = dom.style,
+ xy,
+ r,
+ b,
+ wrap,
+ after,
+ st,
+ args,
+ pt,
+ bw,
+ bh;
+
+ anchor = anchor || "t";
- if(loadScripts !== true){
- this.dom.innerHTML = html;
- if(Ext.isFunction(callback)){
- callback();
+ me.queueFx(o, function(){
+ xy = fly(dom).getXY();
+ // fix display to visibility
+ fly(dom).fixDisplay();
+
+ // restore values after effect
+ r = fly(dom).getFxRestore();
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
+ b.right = b.x + b.width;
+ b.bottom = b.y + b.height;
+
+ // fixed size for slide
+ fly(dom).setWidth(b.width).setHeight(b.height);
+
+ // wrap if needed
+ wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
+
+ st.visibility = VISIBLE;
+ st.position = ABSOLUTE;
+
+ // clear out temp styles after slide and unwrap
+ function after(){
+ fly(dom).fxUnwrap(wrap, r.pos, o);
+ st.width = r.width;
+ st.height = r.height;
+ fly(dom).afterFx(o);
}
- return this;
- }
-
- var id = Ext.id(),
- dom = this.dom;
-
- html += '<span id="' + id + '"></span>';
-
- Ext.lib.Event.onAvailable(id, function(){
- var DOC = document,
- hd = DOC.getElementsByTagName("head")[0],
- re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
- srcRe = /\ssrc=([\'\"])(.*?)\1/i,
- typeRe = /\stype=([\'\"])(.*?)\1/i,
- match,
- attrs,
- srcMatch,
- typeMatch,
- el,
- s;
-
- while((match = re.exec(html))){
- attrs = match[1];
- srcMatch = attrs ? attrs.match(srcRe) : false;
- if(srcMatch && srcMatch[2]){
- s = DOC.createElement("script");
- s.src = srcMatch[2];
- typeMatch = attrs.match(typeRe);
- if(typeMatch && typeMatch[2]){
- s.type = typeMatch[2];
- }
- hd.appendChild(s);
- }else if(match[2] && match[2].length > 0){
- if(window.execScript) {
- window.execScript(match[2]);
- } else {
- window.eval(match[2]);
- }
+
+ // time to calculate the positions
+ pt = {to: [b.x, b.y]};
+ bw = {to: b.width};
+ bh = {to: b.height};
+
+ function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
+ var ret = {};
+ fly(wrap).setWidth(ww).setHeight(wh);
+ if(fly(wrap)[sXY]){
+ fly(wrap)[sXY](sXYval);
}
- }
- el = DOC.getElementById(id);
- if(el){Ext.removeNode(el);}
- if(Ext.isFunction(callback)){
- callback();
- }
- });
- dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
- return this;
- },
+ style[s1] = style[s2] = "0";
+ if(w){
+ ret.width = w
+ };
+ if(h){
+ ret.height = h;
+ }
+ if(p){
+ ret.points = p;
+ }
+ return ret;
+ };
- // inherit docs, overridden so we can add removeAnchor
- removeAllListeners : function(){
- this.removeAnchor();
- Ext.EventManager.removeAll(this.dom);
- return this;
+ args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
+ t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
+ l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
+ r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
+ b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
+ tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
+ bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
+ br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
+ tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
+ });
+
+ st.visibility = VISIBLE;
+ fly(wrap).show();
+
+ arguments.callee.anim = fly(wrap).fxanim(args,
+ o,
+ MOTION,
+ .5,
+ EASEOUT,
+ after);
+ });
+ return me;
},
-
+
/**
- * Creates a proxy element of this element
- * @param {String/Object} config The class name of the proxy element or a DomHelper config object
- * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
- * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
- * @return {Ext.Element} The new proxy element
+ * Slides the element out of view. An anchor point can be optionally passed to set the end point
+ * for the slide effect. When the effect is completed, the element will be hidden (visibility =
+ * 'hidden') but block elements will still take up space in the document. The element must be removed
+ * from the DOM using the 'remove' config option if desired. This function automatically handles
+ * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
+ * Usage:
+ *<pre><code>
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+</code></pre>
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
*/
- createProxy : function(config, renderTo, matchBox){
- config = Ext.isObject(config) ? config : {tag : "div", cls: config};
-
+ slideOut : function(anchor, o){
+ o = getObject(o);
var me = this,
- proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
- Ext.DomHelper.insertBefore(me.dom, config, true);
-
- if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
- proxy.setBox(me.getBox());
- }
- return proxy;
- }
-});
+ dom = me.dom,
+ st = dom.style,
+ xy = me.getXY(),
+ wrap,
+ r,
+ b,
+ a,
+ zero = {to: 0};
+
+ anchor = anchor || "t";
+
+ me.queueFx(o, function(){
+
+ // restore values after effect
+ r = fly(dom).getFxRestore();
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
+ b.right = b.x + b.width;
+ b.bottom = b.y + b.height;
+
+ // fixed size for slide
+ fly(dom).setWidth(b.width).setHeight(b.height);
-Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;
-/**
- * @class Ext.Element
- */
-Ext.Element.addMethods({
- /**
- * Gets the x,y coordinates specified by the anchor position on the element.
- * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
- * for details on supported anchor positions.
- * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
- * of page coordinates
- * @param {Object} size (optional) An object containing the size to use for calculating anchor position
- * {width: (target width), height: (target height)} (defaults to the element's current size)
- * @return {Array} [x, y] An array containing the element's x and y coordinates
- */
- getAnchorXY : function(anchor, local, s){
- //Passing a different size is useful for pre-calculating anchors,
- //especially for anchored animations that change the el size.
- anchor = (anchor || "tl").toLowerCase();
- s = s || {};
-
- var me = this,
- vp = me.dom == document.body || me.dom == document,
- w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
- h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
- xy,
- r = Math.round,
- o = me.getXY(),
- scroll = me.getScroll(),
- extraX = vp ? scroll.left : !local ? o[0] : 0,
- extraY = vp ? scroll.top : !local ? o[1] : 0,
- hash = {
- c : [r(w * 0.5), r(h * 0.5)],
- t : [r(w * 0.5), 0],
- l : [0, r(h * 0.5)],
- r : [w, r(h * 0.5)],
- b : [r(w * 0.5), h],
- tl : [0, 0],
- bl : [0, h],
- br : [w, h],
- tr : [w, 0]
- };
-
- xy = hash[anchor];
- return [xy[0] + extraX, xy[1] + extraY];
+ // wrap if needed
+ wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
+
+ st.visibility = VISIBLE;
+ st.position = ABSOLUTE;
+ fly(wrap).setWidth(b.width).setHeight(b.height);
+
+ function after(){
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
+ fly(dom).fxUnwrap(wrap, r.pos, o);
+ st.width = r.width;
+ st.height = r.height;
+ fly(dom).afterFx(o);
+ }
+
+ function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
+ var ret = {};
+
+ style[s1] = style[s2] = "0";
+ ret[p1] = v1;
+ if(p2){
+ ret[p2] = v2;
+ }
+ if(p3){
+ ret[p3] = v3;
+ }
+
+ return ret;
+ };
+
+ a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
+ t : [st, LEFT, BOTTOM, HEIGHT, zero],
+ l : [st, RIGHT, TOP, WIDTH, zero],
+ r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
+ b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
+ tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
+ bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
+ br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
+ tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
+ });
+
+ arguments.callee.anim = fly(wrap).fxanim(a,
+ o,
+ MOTION,
+ .5,
+ EASEOUT,
+ after);
+ });
+ return me;
},
/**
- * Anchors an element to another element and realigns it when the window is resized.
- * @param {Mixed} element The element to align to.
- * @param {String} position The position to align to.
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
- * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
- * is a number, it is used as the buffer delay (defaults to 50ms).
- * @param {Function} callback The function to call after the animation finishes
- * @return {Ext.Element} this
+ * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
+ * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
+ * The element must be removed from the DOM using the 'remove' config option if desired.
+ * Usage:
+ *<pre><code>
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+</code></pre>
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
*/
- anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
- var me = this,
+ puff : function(o){
+ o = getObject(o);
+ var me = this,
dom = me.dom,
- scroll = !Ext.isEmpty(monitorScroll),
- action = function(){
- Ext.fly(dom).alignTo(el, alignment, offsets, animate);
- Ext.callback(callback, Ext.fly(dom));
- },
- anchor = this.getAnchor();
+ st = dom.style,
+ width,
+ height,
+ r;
+
+ me.queueFx(o, function(){
+ width = fly(dom).getWidth();
+ height = fly(dom).getHeight();
+ fly(dom).clearOpacity();
+ fly(dom).show();
+
+ // restore values after effect
+ r = fly(dom).getFxRestore();
- // previous listener anchor, remove it
- this.removeAnchor();
- Ext.apply(anchor, {
- fn: action,
- scroll: scroll
+ function after(){
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
+ fly(dom).clearOpacity();
+ fly(dom).setPositioning(r.pos);
+ st.width = r.width;
+ st.height = r.height;
+ st.fontSize = '';
+ fly(dom).afterFx(o);
+ }
+
+ arguments.callee.anim = fly(dom).fxanim({
+ width : {to : fly(dom).adjustWidth(width * 2)},
+ height : {to : fly(dom).adjustHeight(height * 2)},
+ points : {by : [-width * .5, -height * .5]},
+ opacity : {to : 0},
+ fontSize: {to : 200, unit: "%"}
+ },
+ o,
+ MOTION,
+ .5,
+ EASEOUT,
+ after);
});
-
- Ext.EventManager.onWindowResize(action, null);
-
- if(scroll){
- Ext.EventManager.on(window, 'scroll', action, null,
- {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
- }
- action.call(me); // align immediately
return me;
},
-
+
/**
- * Remove any anchor to this element. See {@link #anchorTo}.
- * @return {Ext.Element} this
+ * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
+ * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
+ * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
+ * Usage:
+ *<pre><code>
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+ easing: 'easeIn',
+ duration: .3,
+ remove: false,
+ useDisplay: false
+});
+</code></pre>
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
*/
- removeAnchor : function(){
+ switchOff : function(o){
+ o = getObject(o);
var me = this,
- anchor = this.getAnchor();
-
- if(anchor && anchor.fn){
- Ext.EventManager.removeResizeListener(anchor.fn);
- if(anchor.scroll){
- Ext.EventManager.un(window, 'scroll', anchor.fn);
- }
- delete anchor.fn;
- }
+ dom = me.dom,
+ st = dom.style,
+ r;
+
+ me.queueFx(o, function(){
+ fly(dom).clearOpacity();
+ fly(dom).clip();
+
+ // restore values after effect
+ r = fly(dom).getFxRestore();
+
+ function after(){
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
+ fly(dom).clearOpacity();
+ fly(dom).setPositioning(r.pos);
+ st.width = r.width;
+ st.height = r.height;
+ fly(dom).afterFx(o);
+ };
+
+ fly(dom).fxanim({opacity : {to : 0.3}},
+ NULL,
+ NULL,
+ .1,
+ NULL,
+ function(){
+ fly(dom).clearOpacity();
+ (function(){
+ fly(dom).fxanim({
+ height : {to : 1},
+ points : {by : [0, fly(dom).getHeight() * .5]}
+ },
+ o,
+ MOTION,
+ 0.3,
+ 'easeIn',
+ after);
+ }).defer(100);
+ });
+ });
return me;
},
-
- // private
- getAnchor : function(){
- var data = Ext.Element.data,
- dom = this.dom;
- if (!dom) {
- return;
- }
- var anchor = data(dom, '_anchor');
+
+ /**
+ * Highlights the Element by setting a color (applies to the background-color by default, but can be
+ * changed using the "attr" config option) and then fading back to the original color. If no original
+ * color is available, you should provide the "endColor" config option which will be cleared after the animation.
+ * Usage:
+<pre><code>
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight("0000ff", { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight("ffff9c", {
+ attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
+ endColor: (current color) or "ffffff",
+ easing: 'easeIn',
+ duration: 1
+});
+</code></pre>
+ * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ highlight : function(color, o){
+ o = getObject(o);
+ var me = this,
+ dom = me.dom,
+ attr = o.attr || "backgroundColor",
+ a = {},
+ restore;
+
+ me.queueFx(o, function(){
+ fly(dom).clearOpacity();
+ fly(dom).show();
+
+ function after(){
+ dom.style[attr] = restore;
+ fly(dom).afterFx(o);
+ }
+ restore = dom.style[attr];
+ a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
+ arguments.callee.anim = fly(dom).fxanim(a,
+ o,
+ 'color',
+ 1,
+ 'easeIn',
+ after);
+ });
+ return me;
+ },
+
+ /**
+ * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+ * Usage:
+<pre><code>
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame("ff0000", 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame("C3DAF9", 1, {
+ duration: 1 //duration of each individual ripple.
+ // Note: Easing is not configurable and will be ignored if included
+});
+</code></pre>
+ * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
+ * @param {Number} count (optional) The number of ripples to display (defaults to 1)
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ frame : function(color, count, o){
+ o = getObject(o);
+ var me = this,
+ dom = me.dom,
+ proxy,
+ active;
+
+ me.queueFx(o, function(){
+ color = color || '#C3DAF9';
+ if(color.length == 6){
+ color = '#' + color;
+ }
+ count = count || 1;
+ fly(dom).show();
+
+ var xy = fly(dom).getXY(),
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
+ queue = function(){
+ proxy = fly(document.body || document.documentElement).createChild({
+ style:{
+ position : ABSOLUTE,
+ 'z-index': 35000, // yee haw
+ border : '0px solid ' + color
+ }
+ });
+ return proxy.queueFx({}, animFn);
+ };
- if(!anchor){
- anchor = data(dom, '_anchor', {});
- }
- return anchor;
+
+ arguments.callee.anim = {
+ isAnimated: true,
+ stop: function() {
+ count = 0;
+ proxy.stopFx();
+ }
+ };
+
+ function animFn(){
+ var scale = Ext.isBorderBox ? 2 : 1;
+ active = proxy.anim({
+ top : {from : b.y, to : b.y - 20},
+ left : {from : b.x, to : b.x - 20},
+ borderWidth : {from : 0, to : 10},
+ opacity : {from : 1, to : 0},
+ height : {from : b.height, to : b.height + 20 * scale},
+ width : {from : b.width, to : b.width + 20 * scale}
+ },{
+ duration: o.duration || 1,
+ callback: function() {
+ proxy.remove();
+ --count > 0 ? queue() : fly(dom).afterFx(o);
+ }
+ });
+ arguments.callee.anim = {
+ isAnimated: true,
+ stop: function(){
+ active.stop();
+ }
+ };
+ };
+ queue();
+ });
+ return me;
},
- /**
- * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
- * supported position values.
- * @param {Mixed} element The element to align to.
- * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @return {Array} [x, y]
- */
- getAlignToXY : function(el, p, o){
- el = Ext.get(el);
-
- if(!el || !el.dom){
- throw "Element.alignToXY with an element that doesn't exist";
- }
-
- o = o || [0,0];
- p = (!p || p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
-
+ /**
+ * Creates a pause before any subsequent queued effects begin. If there are
+ * no effects queued after the pause it will have no effect.
+ * Usage:
+<pre><code>
+el.pause(1);
+</code></pre>
+ * @param {Number} seconds The length of time to pause (in seconds)
+ * @return {Ext.Element} The Element
+ */
+ pause : function(seconds){
+ var dom = this.dom,
+ t;
+
+ this.queueFx({}, function(){
+ t = setTimeout(function(){
+ fly(dom).afterFx({});
+ }, seconds * 1000);
+ arguments.callee.anim = {
+ isAnimated: true,
+ stop: function(){
+ clearTimeout(t);
+ fly(dom).afterFx({});
+ }
+ };
+ });
+ return this;
+ },
+
+ /**
+ * Fade an element in (from transparent to opaque). The ending opacity can be specified
+ * using the <tt>{@link #endOpacity}</tt> config option.
+ * Usage:
+<pre><code>
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+ endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5
+});
+</code></pre>
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ fadeIn : function(o){
+ o = getObject(o);
var me = this,
- d = me.dom,
- a1,
- a2,
- x,
- y,
- //constrain the aligned el to viewport if necessary
- w,
- h,
- r,
- dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
- dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
- p1y,
- p1x,
- p2y,
- p2x,
- swapY,
- swapX,
- doc = document,
- docElement = doc.documentElement,
- docBody = doc.body,
- scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
- scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
- c = false, //constrain to viewport
- p1 = "",
- p2 = "",
- m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
-
- if(!m){
- throw "Element.alignTo with an invalid alignment " + p;
- }
+ dom = me.dom,
+ to = o.endOpacity || 1;
- p1 = m[1];
- p2 = m[2];
- c = !!m[3];
-
- //Subtract the aligned el's internal xy from the target's offset xy
- //plus custom offset to get the aligned el's new offset xy
- a1 = me.getAnchorXY(p1, true);
- a2 = el.getAnchorXY(p2, false);
+ me.queueFx(o, function(){
+ fly(dom).setOpacity(0);
+ fly(dom).fixDisplay();
+ dom.style.visibility = VISIBLE;
+ arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
+ o, NULL, .5, EASEOUT, function(){
+ if(to == 1){
+ fly(dom).clearOpacity();
+ }
+ fly(dom).afterFx(o);
+ });
+ });
+ return me;
+ },
- x = a2[0] - a1[0] + o[0];
- y = a2[1] - a1[1] + o[1];
+ /**
+ * Fade an element out (from opaque to transparent). The ending opacity can be specified
+ * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require
+ * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
+ * Usage:
+<pre><code>
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+ endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+</code></pre>
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ fadeOut : function(o){
+ o = getObject(o);
+ var me = this,
+ dom = me.dom,
+ style = dom.style,
+ to = o.endOpacity || 0;
+
+ me.queueFx(o, function(){
+ arguments.callee.anim = fly(dom).fxanim({
+ opacity : {to : to}},
+ o,
+ NULL,
+ .5,
+ EASEOUT,
+ function(){
+ if(to == 0){
+ Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
+ style.display = "none" :
+ style.visibility = HIDDEN;
+
+ fly(dom).clearOpacity();
+ }
+ fly(dom).afterFx(o);
+ });
+ });
+ return me;
+ },
- if(c){
- w = me.getWidth();
- h = me.getHeight();
- r = el.getRegion();
- //If we are at a viewport boundary and the aligned el is anchored on a target border that is
- //perpendicular to the vp border, allow the aligned el to slide on that border,
- //otherwise swap the aligned el to the opposite border of the target.
- p1y = p1.charAt(0);
- p1x = p1.charAt(p1.length-1);
- p2y = p2.charAt(0);
- p2x = p2.charAt(p2.length-1);
- swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
- swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
-
+ /**
+ * Animates the transition of an element's dimensions from a starting height/width
+ * to an ending height/width. This method is a convenience implementation of {@link shift}.
+ * Usage:
+<pre><code>
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values. The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+ [element's width],
+ [element's height], {
+ easing: 'easeOut',
+ duration: .35
+ }
+);
+</code></pre>
+ * @param {Number} width The new width (pass undefined to keep the original width)
+ * @param {Number} height The new height (pass undefined to keep the original height)
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ scale : function(w, h, o){
+ this.shift(Ext.apply({}, o, {
+ width: w,
+ height: h
+ }));
+ return this;
+ },
- if (x + w > dw + scrollX) {
- x = swapX ? r.left-w : dw+scrollX-w;
- }
- if (x < scrollX) {
- x = swapX ? r.right : scrollX;
- }
- if (y + h > dh + scrollY) {
- y = swapY ? r.top-h : dh+scrollY-h;
+ /**
+ * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+ * Any of these properties not specified in the config object will not be changed. This effect
+ * requires that at least one new dimension, position or opacity setting must be passed in on
+ * the config object in order for the function to have any effect.
+ * Usage:
+<pre><code>
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+ width: [element's width],
+ height: [element's height],
+ x: [element's x position],
+ y: [element's y position],
+ opacity: [element's opacity],
+ easing: 'easeOut',
+ duration: .35
+});
+</code></pre>
+ * @param {Object} options Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ shift : function(o){
+ o = getObject(o);
+ var dom = this.dom,
+ a = {};
+
+ this.queueFx(o, function(){
+ for (var prop in o) {
+ if (o[prop] != UNDEFINED) {
+ a[prop] = {to : o[prop]};
+ }
+ }
+
+ a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
+ a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;
+
+ if (a.x || a.y || a.xy) {
+ a.points = a.xy ||
+ {to : [ a.x ? a.x.to : fly(dom).getX(),
+ a.y ? a.y.to : fly(dom).getY()]};
}
- if (y < scrollY){
- y = swapY ? r.bottom : scrollY;
- }
- }
- return [x,y];
+
+ arguments.callee.anim = fly(dom).fxanim(a,
+ o,
+ MOTION,
+ .35,
+ EASEOUT,
+ function(){
+ fly(dom).afterFx(o);
+ });
+ });
+ return this;
},
/**
- * Aligns this element with another element relative to the specified anchor points. If the other element is the
- * document it aligns it to the viewport.
- * The position parameter is optional, and can be specified in any one of the following formats:
- * <ul>
- * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
- * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
- * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
- * deprecated in favor of the newer two anchor syntax below</i>.</li>
- * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
- * element's anchor point, and the second value is used as the target's anchor point.</li>
- * </ul>
- * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
- * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
- * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
- * that specified in order to enforce the viewport constraints.
- * Following are all of the supported anchor positions:
-<pre>
-Value Description
------ -----------------------------
-tl The top left corner (default)
-t The center of the top edge
-tr The top right corner
-l The center of the left edge
-c In the center of the element
-r The center of the right edge
-bl The bottom left corner
-b The center of the bottom edge
-br The bottom right corner
-</pre>
-Example Usage:
-<pre><code>
-// align el to other-el using the default positioning ("tl-bl", non-constrained)
-el.alignTo("other-el");
+ * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
+ * ending point of the effect.
+ * Usage:
+ *<pre><code>
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+</code></pre>
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ ghost : function(anchor, o){
+ o = getObject(o);
+ var me = this,
+ dom = me.dom,
+ st = dom.style,
+ a = {opacity: {to: 0}, points: {}},
+ pt = a.points,
+ r,
+ w,
+ h;
+
+ anchor = anchor || "b";
+
+ me.queueFx(o, function(){
+ // restore values after effect
+ r = fly(dom).getFxRestore();
+ w = fly(dom).getWidth();
+ h = fly(dom).getHeight();
+
+ function after(){
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
+ fly(dom).clearOpacity();
+ fly(dom).setPositioning(r.pos);
+ st.width = r.width;
+ st.height = r.height;
+ fly(dom).afterFx(o);
+ }
+
+ pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
+ t : [0, -h],
+ l : [-w, 0],
+ r : [w, 0],
+ b : [0, h],
+ tl : [-w, -h],
+ bl : [-w, h],
+ br : [w, h],
+ tr : [w, -h]
+ });
+
+ arguments.callee.anim = fly(dom).fxanim(a,
+ o,
+ MOTION,
+ .5,
+ EASEOUT, after);
+ });
+ return me;
+ },
-// align the top left corner of el with the top right corner of other-el (constrained to viewport)
-el.alignTo("other-el", "tr?");
+ /**
+ * Ensures that all effects queued after syncFx is called on the element are
+ * run concurrently. This is the opposite of {@link #sequenceFx}.
+ * @return {Ext.Element} The Element
+ */
+ syncFx : function(){
+ var me = this;
+ me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
+ block : FALSE,
+ concurrent : TRUE,
+ stopFx : FALSE
+ });
+ return me;
+ },
-// align the bottom right corner of el with the center left edge of other-el
-el.alignTo("other-el", "br-l?");
+ /**
+ * Ensures that all effects queued after sequenceFx is called on the element are
+ * run in sequence. This is the opposite of {@link #syncFx}.
+ * @return {Ext.Element} The Element
+ */
+ sequenceFx : function(){
+ var me = this;
+ me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
+ block : FALSE,
+ concurrent : FALSE,
+ stopFx : FALSE
+ });
+ return me;
+ },
-// align the center of el with the bottom left corner of other-el and
-// adjust the x position by -6 pixels (and the y position by 0)
-el.alignTo("other-el", "c-bl", [-6, 0]);
-</code></pre>
- * @param {Mixed} element The element to align to.
- * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
+ /* @private */
+ nextFx : function(){
+ var ef = getQueue(this.dom.id)[0];
+ if(ef){
+ ef.call(this);
+ }
+ },
+
+ /**
+ * Returns true if the element has any effects actively running or queued, else returns false.
+ * @return {Boolean} True if element has active effects, else false
*/
- alignTo : function(element, position, offsets, animate){
- var me = this;
- return me.setXY(me.getAlignToXY(element, position, offsets),
- me.preanim && !!animate ? me.preanim(arguments, 3) : false);
+ hasActiveFx : function(){
+ return getQueue(this.dom.id)[0];
},
-
- // private ==> used outside of core
- adjustForConstraints : function(xy, parent, offsets){
- return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
+
+ /**
+ * Stops any running effects and clears the element's internal effects queue if it contains
+ * any additional effects that haven't started yet.
+ * @return {Ext.Element} The Element
+ */
+ stopFx : function(finish){
+ var me = this,
+ id = me.dom.id;
+ if(me.hasActiveFx()){
+ var cur = getQueue(id)[0];
+ if(cur && cur.anim){
+ if(cur.anim.isAnimated){
+ setQueue(id, [cur]); //clear
+ cur.anim.stop(finish !== undefined ? finish : TRUE);
+ }else{
+ setQueue(id, []);
+ }
+ }
+ }
+ return me;
},
- // private ==> used outside of core
- getConstrainToXY : function(el, local, offsets, proposedXY){
- var os = {top:0, left:0, bottom:0, right: 0};
+ /* @private */
+ beforeFx : function(o){
+ if(this.hasActiveFx() && !o.concurrent){
+ if(o.stopFx){
+ this.stopFx();
+ return TRUE;
+ }
+ return FALSE;
+ }
+ return TRUE;
+ },
- return function(el, local, offsets, proposedXY){
- el = Ext.get(el);
- offsets = offsets ? Ext.applyIf(offsets, os) : os;
+ /**
+ * Returns true if the element is currently blocking so that no other effect can be queued
+ * until this effect is finished, else returns false if blocking is not set. This is commonly
+ * used to ensure that an effect initiated by a user action runs to completion prior to the
+ * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
+ * @return {Boolean} True if blocking, else false
+ */
+ hasFxBlock : function(){
+ var q = getQueue(this.dom.id);
+ return q && q[0] && q[0].block;
+ },
- var vw, vh, vx = 0, vy = 0;
- if(el.dom == document.body || el.dom == document){
- vw =Ext.lib.Dom.getViewWidth();
- vh = Ext.lib.Dom.getViewHeight();
- }else{
- vw = el.dom.clientWidth;
- vh = el.dom.clientHeight;
- if(!local){
- var vxy = el.getXY();
- vx = vxy[0];
- vy = vxy[1];
+ /* @private */
+ queueFx : function(o, fn){
+ var me = fly(this.dom);
+ if(!me.hasFxBlock()){
+ Ext.applyIf(o, me.fxDefaults);
+ if(!o.concurrent){
+ var run = me.beforeFx(o);
+ fn.block = o.block;
+ getQueue(me.dom.id).push(fn);
+ if(run){
+ me.nextFx();
}
+ }else{
+ fn.call(me);
}
+ }
+ return me;
+ },
- var s = el.getScroll();
+ /* @private */
+ fxWrap : function(pos, o, vis){
+ var dom = this.dom,
+ wrap,
+ wrapXY;
+ if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
+ if(o.fixPosition){
+ wrapXY = fly(dom).getXY();
+ }
+ var div = document.createElement("div");
+ div.style.visibility = vis;
+ wrap = dom.parentNode.insertBefore(div, dom);
+ fly(wrap).setPositioning(pos);
+ if(fly(wrap).isStyle(POSITION, "static")){
+ fly(wrap).position("relative");
+ }
+ fly(dom).clearPositioning('auto');
+ fly(wrap).clip();
+ wrap.appendChild(dom);
+ if(wrapXY){
+ fly(wrap).setXY(wrapXY);
+ }
+ }
+ return wrap;
+ },
- vx += offsets.left + s.left;
- vy += offsets.top + s.top;
+ /* @private */
+ fxUnwrap : function(wrap, pos, o){
+ var dom = this.dom;
+ fly(dom).clearPositioning();
+ fly(dom).setPositioning(pos);
+ if(!o.wrap){
+ var pn = fly(wrap).dom.parentNode;
+ pn.insertBefore(dom, wrap);
+ fly(wrap).remove();
+ }
+ },
- vw -= offsets.right;
- vh -= offsets.bottom;
+ /* @private */
+ getFxRestore : function(){
+ var st = this.dom.style;
+ return {pos: this.getPositioning(), width: st.width, height : st.height};
+ },
- var vr = vx+vw;
- var vb = vy+vh;
+ /* @private */
+ afterFx : function(o){
+ var dom = this.dom,
+ id = dom.id;
+ if(o.afterStyle){
+ fly(dom).setStyle(o.afterStyle);
+ }
+ if(o.afterCls){
+ fly(dom).addClass(o.afterCls);
+ }
+ if(o.remove == TRUE){
+ fly(dom).remove();
+ }
+ if(o.callback){
+ o.callback.call(o.scope, fly(dom));
+ }
+ if(!o.concurrent){
+ getQueue(id).shift();
+ fly(dom).nextFx();
+ }
+ },
- var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
- var x = xy[0], y = xy[1];
- var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
+ /* @private */
+ fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
+ animType = animType || 'run';
+ opt = opt || {};
+ var anim = Ext.lib.Anim[animType](
+ this.dom,
+ args,
+ (opt.duration || defaultDur) || .35,
+ (opt.easing || defaultEase) || EASEOUT,
+ cb,
+ this
+ );
+ opt.anim = anim;
+ return anim;
+ }
+};
- // only move it if it needs it
- var moved = false;
+// backwards compat
+Ext.Fx.resize = Ext.Fx.scale;
- // first validate right/bottom
- if((x + w) > vr){
- x = vr - w;
- moved = true;
- }
- if((y + h) > vb){
- y = vb - h;
- moved = true;
- }
- // then make sure top/left isn't negative
- if(x < vx){
- x = vx;
- moved = true;
+//When included, Ext.Fx is automatically applied to Element so that all basic
+//effects are available directly via the Element API
+Ext.Element.addMethods(Ext.Fx);
+})();
+/**
+ * @class Ext.CompositeElementLite
+ * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
+ * members, or to perform collective actions upon the whole set.</p>
+ * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
+ * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>
+ * Example:<pre><code>
+var els = Ext.select("#some-el div.some-class");
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class');
+
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+</code>
+ */
+Ext.CompositeElementLite = function(els, root){
+ /**
+ * <p>The Array of DOM elements which this CompositeElement encapsulates. Read-only.</p>
+ * <p>This will not <i>usually</i> be accessed in developers' code, but developers wishing
+ * to augment the capabilities of the CompositeElementLite class may use it when adding
+ * methods to the class.</p>
+ * <p>For example to add the <code>nextAll</code> method to the class to <b>add</b> all
+ * following siblings of selected elements, the code would be</p><code><pre>
+Ext.override(Ext.CompositeElementLite, {
+ nextAll: function() {
+ var els = this.elements, i, l = els.length, n, r = [], ri = -1;
+
+// Loop through all elements in this Composite, accumulating
+// an Array of all siblings.
+ for (i = 0; i < l; i++) {
+ for (n = els[i].nextSibling; n; n = n.nextSibling) {
+ r[++ri] = n;
}
- if(y < vy){
- y = vy;
- moved = true;
+ }
+
+// Add all found siblings to this Composite
+ return this.add(r);
+ }
+});</pre></code>
+ * @type Array
+ * @property elements
+ */
+ this.elements = [];
+ this.add(els, root);
+ this.el = new Ext.Element.Flyweight();
+};
+
+Ext.CompositeElementLite.prototype = {
+ isComposite: true,
+
+ // private
+ getElement : function(el){
+ // Set the shared flyweight dom property to the current element
+ var e = this.el;
+ e.dom = el;
+ e.id = el.id;
+ return e;
+ },
+
+ // private
+ transformElement : function(el){
+ return Ext.getDom(el);
+ },
+
+ /**
+ * Returns the number of elements in this Composite.
+ * @return Number
+ */
+ getCount : function(){
+ return this.elements.length;
+ },
+ /**
+ * Adds elements to this Composite object.
+ * @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.
+ * @return {CompositeElement} This Composite object.
+ */
+ add : function(els, root){
+ var me = this,
+ elements = me.elements;
+ if(!els){
+ return this;
+ }
+ if(Ext.isString(els)){
+ els = Ext.Element.selectorFunction(els, root);
+ }else if(els.isComposite){
+ els = els.elements;
+ }else if(!Ext.isIterable(els)){
+ els = [els];
+ }
+
+ for(var i = 0, len = els.length; i < len; ++i){
+ elements.push(me.transformElement(els[i]));
+ }
+ return me;
+ },
+
+ invoke : function(fn, args){
+ var me = this,
+ els = me.elements,
+ len = els.length,
+ e,
+ i;
+
+ for(i = 0; i < len; i++) {
+ e = els[i];
+ if(e){
+ Ext.Element.prototype[fn].apply(me.getElement(e), args);
}
- return moved ? [x, y] : false;
- };
- }(),
-
-
-
-// el = Ext.get(el);
-// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
+ }
+ return me;
+ },
+ /**
+ * Returns a flyweight Element of the dom element object at the specified index
+ * @param {Number} index
+ * @return {Ext.Element}
+ */
+ item : function(index){
+ var me = this,
+ el = me.elements[index],
+ out = null;
-// var me = this,
-// doc = document,
-// s = el.getScroll(),
-// vxy = el.getXY(),
-// vx = offsets.left + s.left,
-// vy = offsets.top + s.top,
-// vw = -offsets.right,
-// vh = -offsets.bottom,
-// vr,
-// vb,
-// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
-// x = xy[0],
-// y = xy[1],
-// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
-// moved = false; // only move it if it needs it
-//
-//
-// if(el.dom == doc.body || el.dom == doc){
-// vw += Ext.lib.Dom.getViewWidth();
-// vh += Ext.lib.Dom.getViewHeight();
-// }else{
-// vw += el.dom.clientWidth;
-// vh += el.dom.clientHeight;
-// if(!local){
-// vx += vxy[0];
-// vy += vxy[1];
-// }
-// }
+ if(el){
+ out = me.getElement(el);
+ }
+ return out;
+ },
-// // first validate right/bottom
-// if(x + w > vx + vw){
-// x = vx + vw - w;
-// moved = true;
-// }
-// if(y + h > vy + vh){
-// y = vy + vh - h;
-// moved = true;
-// }
-// // then make sure top/left isn't negative
-// if(x < vx){
-// x = vx;
-// moved = true;
-// }
-// if(y < vy){
-// y = vy;
-// moved = true;
-// }
-// return moved ? [x, y] : false;
-// },
+ // fixes scope with flyweight
+ addListener : function(eventName, handler, scope, opt){
+ var els = this.elements,
+ len = els.length,
+ i, e;
+
+ for(i = 0; i<len; i++) {
+ e = els[i];
+ if(e) {
+ Ext.EventManager.on(e, eventName, handler, scope || e, opt);
+ }
+ }
+ return this;
+ },
+ /**
+ * <p>Calls the passed function for each element in this composite.</p>
+ * @param {Function} fn The function to call. The function is passed the following parameters:<ul>
+ * <li><b>el</b> : Element<div class="sub-desc">The current Element in the iteration.
+ * <b>This is the flyweight (shared) Ext.Element instance, so if you require a
+ * a reference to the dom node, use el.dom.</b></div></li>
+ * <li><b>c</b> : Composite<div class="sub-desc">This Composite object.</div></li>
+ * <li><b>idx</b> : Number<div class="sub-desc">The zero-based index in the iteration.</div></li>
+ * </ul>
+ * @param {Object} scope (optional) The scope (<i>this</i> reference) in which the function is executed. (defaults to the Element)
+ * @return {CompositeElement} this
+ */
+ each : function(fn, scope){
+ var me = this,
+ els = me.elements,
+ len = els.length,
+ i, e;
+
+ for(i = 0; i<len; i++) {
+ e = els[i];
+ if(e){
+ e = this.getElement(e);
+ if(fn.call(scope || e, e, me, i) === false){
+ break;
+ }
+ }
+ }
+ return me;
+ },
+
+ /**
+ * Clears this Composite and adds the elements passed.
+ * @param {Mixed} els Either an array of DOM elements, or another Composite from which to fill this Composite.
+ * @return {CompositeElement} this
+ */
+ fill : function(els){
+ var me = this;
+ me.elements = [];
+ me.add(els);
+ return me;
+ },
+
+ /**
+ * Filters this composite to only elements that match the passed selector.
+ * @param {String/Function} selector A string CSS selector or a comparison function.
+ * The comparison function will be called with the following arguments:<ul>
+ * <li><code>el</code> : Ext.Element<div class="sub-desc">The current DOM element.</div></li>
+ * <li><code>index</code> : Number<div class="sub-desc">The current index within the collection.</div></li>
+ * </ul>
+ * @return {CompositeElement} this
+ */
+ filter : function(selector){
+ var els = [],
+ me = this,
+ elements = me.elements,
+ fn = Ext.isFunction(selector) ? selector
+ : function(el){
+ return el.is(selector);
+ };
+
+
+ me.each(function(el, self, i){
+ if(fn(el, i) !== false){
+ els[els.length] = me.transformElement(el);
+ }
+ });
+ me.elements = els;
+ return me;
+ },
/**
- * Calculates the x, y to center this element on the screen
- * @return {Array} The x, y values [x, y]
- */
- getCenterXY : function(){
- return this.getAlignToXY(document, 'c-c');
+ * Find the index of the passed element within the composite collection.
+ * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
+ * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
+ */
+ indexOf : function(el){
+ return this.elements.indexOf(this.transformElement(el));
},
-
+
/**
- * Centers the Element in either the viewport, or another Element.
- * @param {Mixed} centerIn (optional) The element in which to center the element.
- */
- center : function(centerIn){
- return this.alignTo(centerIn || document, 'c-c');
- }
-});
-/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods(function(){\r
- var PARENTNODE = 'parentNode',\r
- NEXTSIBLING = 'nextSibling',\r
- PREVIOUSSIBLING = 'previousSibling',\r
- DQ = Ext.DomQuery,\r
- GET = Ext.get;\r
- \r
- return {\r
- /**\r
- * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)\r
- * @param {String} selector The simple selector to test\r
- * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)\r
- * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node\r
- * @return {HTMLElement} The matching DOM node (or null if no match was found)\r
- */\r
- findParent : function(simpleSelector, maxDepth, returnEl){\r
- var p = this.dom,\r
- b = document.body, \r
- depth = 0, \r
- stopEl; \r
- if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') {\r
- return null;\r
- }\r
- maxDepth = maxDepth || 50;\r
- if (isNaN(maxDepth)) {\r
- stopEl = Ext.getDom(maxDepth);\r
- maxDepth = Number.MAX_VALUE;\r
- }\r
- while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){\r
- if(DQ.is(p, simpleSelector)){\r
- return returnEl ? GET(p) : p;\r
- }\r
- depth++;\r
- p = p.parentNode;\r
- }\r
- return null;\r
- },\r
- \r
- /**\r
- * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)\r
- * @param {String} selector The simple selector to test\r
- * @param {Number/Mixed} maxDepth (optional) The max depth to\r
- search as a number or element (defaults to 10 || document.body)\r
- * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node\r
- * @return {HTMLElement} The matching DOM node (or null if no match was found)\r
- */\r
- findParentNode : function(simpleSelector, maxDepth, returnEl){\r
- var p = Ext.fly(this.dom.parentNode, '_internal');\r
- return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;\r
- },\r
- \r
- /**\r
- * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).\r
- * This is a shortcut for findParentNode() that always returns an Ext.Element.\r
- * @param {String} selector The simple selector to test\r
- * @param {Number/Mixed} maxDepth (optional) The max depth to\r
- search as a number or element (defaults to 10 || document.body)\r
- * @return {Ext.Element} The matching DOM node (or null if no match was found)\r
- */\r
- up : function(simpleSelector, maxDepth){\r
- return this.findParentNode(simpleSelector, maxDepth, true);\r
- },\r
- \r
- /**\r
- * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).\r
- * @param {String} selector The CSS selector\r
- * @return {CompositeElement/CompositeElementLite} The composite element\r
- */\r
- select : function(selector){\r
- return Ext.Element.select(selector, this.dom);\r
- },\r
- \r
- /**\r
- * Selects child nodes based on the passed CSS selector (the selector should not contain an id).\r
- * @param {String} selector The CSS selector\r
- * @return {Array} An array of the matched nodes\r
- */\r
- query : function(selector){\r
- return DQ.select(selector, this.dom);\r
- },\r
- \r
- /**\r
- * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).\r
- * @param {String} selector The CSS selector\r
- * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)\r
- * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)\r
- */\r
- child : function(selector, returnDom){\r
- var n = DQ.selectNode(selector, this.dom);\r
- return returnDom ? n : GET(n);\r
- },\r
- \r
- /**\r
- * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).\r
- * @param {String} selector The CSS selector\r
- * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)\r
- * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)\r
- */\r
- down : function(selector, returnDom){\r
- var n = DQ.selectNode(" > " + selector, this.dom);\r
- return returnDom ? n : GET(n);\r
- },\r
- \r
- /**\r
- * Gets the parent node for this element, optionally chaining up trying to match a selector\r
- * @param {String} selector (optional) Find a parent node that matches the passed simple selector\r
- * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element\r
- * @return {Ext.Element/HTMLElement} The parent node or null\r
- */\r
- parent : function(selector, returnDom){\r
- return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom);\r
- },\r
- \r
- /**\r
- * Gets the next sibling, skipping text nodes\r
- * @param {String} selector (optional) Find the next sibling that matches the passed simple selector\r
- * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element\r
- * @return {Ext.Element/HTMLElement} The next sibling or null\r
- */\r
- next : function(selector, returnDom){\r
- return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom);\r
- },\r
- \r
- /**\r
- * Gets the previous sibling, skipping text nodes\r
- * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector\r
- * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element\r
- * @return {Ext.Element/HTMLElement} The previous sibling or null\r
- */\r
- prev : function(selector, returnDom){\r
- return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom);\r
- },\r
- \r
- \r
- /**\r
- * Gets the first child, skipping text nodes\r
- * @param {String} selector (optional) Find the next sibling that matches the passed simple selector\r
- * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element\r
- * @return {Ext.Element/HTMLElement} The first child or null\r
- */\r
- first : function(selector, returnDom){\r
- return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom);\r
- },\r
- \r
- /**\r
- * Gets the last child, skipping text nodes\r
- * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector\r
- * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element\r
- * @return {Ext.Element/HTMLElement} The last child or null\r
- */\r
- last : function(selector, returnDom){\r
- return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom);\r
- },\r
- \r
- matchNode : function(dir, start, selector, returnDom){\r
- var n = this.dom[start];\r
- while(n){\r
- if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){\r
- return !returnDom ? GET(n) : n;\r
- }\r
- n = n[dir];\r
- }\r
- return null;\r
- } \r
- }\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).\r
- * @param {String} selector The CSS selector\r
- * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)\r
- * @return {CompositeElement/CompositeElementLite} The composite element\r
- */\r
- select : function(selector, unique){\r
- return Ext.Element.select(selector, unique, this.dom);\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods(\r
-function() {\r
- var GETDOM = Ext.getDom,\r
- GET = Ext.get,\r
- DH = Ext.DomHelper;\r
- \r
- return {\r
- /**\r
- * Appends the passed element(s) to this element\r
- * @param {String/HTMLElement/Array/Element/CompositeElement} el\r
- * @return {Ext.Element} this\r
- */\r
- appendChild: function(el){ \r
- return GET(el).appendTo(this); \r
- },\r
- \r
- /**\r
- * Appends this element to the passed element\r
- * @param {Mixed} el The new parent element\r
- * @return {Ext.Element} this\r
- */\r
- appendTo: function(el){ \r
- GETDOM(el).appendChild(this.dom); \r
- return this;\r
- },\r
- \r
- /**\r
- * Inserts this element before the passed element in the DOM\r
- * @param {Mixed} el The element before which this element will be inserted\r
- * @return {Ext.Element} this\r
- */\r
- insertBefore: function(el){ \r
- (el = GETDOM(el)).parentNode.insertBefore(this.dom, el);\r
- return this;\r
- },\r
- \r
- /**\r
- * Inserts this element after the passed element in the DOM\r
- * @param {Mixed} el The element to insert after\r
- * @return {Ext.Element} this\r
- */\r
- insertAfter: function(el){\r
- (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);\r
- return this;\r
- },\r
- \r
- /**\r
- * Inserts (or creates) an element (or DomHelper config) as the first child of this element\r
- * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert\r
- * @return {Ext.Element} The new child\r
- */\r
- insertFirst: function(el, returnDom){\r
- el = el || {};\r
- if(el.nodeType || el.dom || typeof el == 'string'){ // element\r
- el = GETDOM(el);\r
- this.dom.insertBefore(el, this.dom.firstChild);\r
- return !returnDom ? GET(el) : el;\r
- }else{ // dh config\r
- return this.createChild(el, this.dom.firstChild, returnDom);\r
- }\r
- },\r
- \r
- /**\r
- * Replaces the passed element with this element\r
- * @param {Mixed} el The element to replace\r
- * @return {Ext.Element} this\r
- */\r
- replace: function(el){\r
- el = GET(el);\r
- this.insertBefore(el);\r
- el.remove();\r
- return this;\r
- },\r
- \r
- /**\r
- * Replaces this element with the passed element\r
- * @param {Mixed/Object} el The new element or a DomHelper config of an element to create\r
- * @return {Ext.Element} this\r
- */\r
- replaceWith: function(el){\r
- var me = this;\r
- \r
- if(el.nodeType || el.dom || typeof el == 'string'){\r
- el = GETDOM(el);\r
- me.dom.parentNode.insertBefore(el, me.dom);\r
- }else{\r
- el = DH.insertBefore(me.dom, el);\r
- }\r
- \r
- delete Ext.elCache[me.id];\r
- Ext.removeNode(me.dom); \r
- me.id = Ext.id(me.dom = el);\r
- Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me); \r
- return me;\r
- },\r
- \r
- /**\r
- * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.\r
- * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be\r
- * automatically generated with the specified attributes.\r
- * @param {HTMLElement} insertBefore (optional) a child element of this element\r
- * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element\r
- * @return {Ext.Element} The new child element\r
- */\r
- createChild: function(config, insertBefore, returnDom){\r
- config = config || {tag:'div'};\r
- return insertBefore ? \r
- DH.insertBefore(insertBefore, config, returnDom !== true) : \r
- DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);\r
- },\r
- \r
- /**\r
- * Creates and wraps this element with another element\r
- * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div\r
- * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element\r
- * @return {HTMLElement/Element} The newly created wrapper element\r
- */\r
- wrap: function(config, returnDom){ \r
- var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);\r
- newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);\r
- return newEl;\r
- },\r
- \r
- /**\r
- * Inserts an html fragment into this element\r
- * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.\r
- * @param {String} html The HTML fragment\r
- * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)\r
- * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)\r
- */\r
- insertHtml : function(where, html, returnEl){\r
- var el = DH.insertHtml(where, this.dom, html);\r
- return returnEl ? Ext.get(el) : el;\r
- }\r
- }\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.apply(Ext.Element.prototype, function() {\r
- var GETDOM = Ext.getDom,\r
- GET = Ext.get,\r
- DH = Ext.DomHelper;\r
- \r
- return { \r
- /**\r
- * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element\r
- * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.\r
- * @param {String} where (optional) 'before' or 'after' defaults to before\r
- * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element\r
- * @return {Ext.Element} The inserted Element. If an array is passed, the last inserted element is returned.\r
- */\r
- insertSibling: function(el, where, returnDom){\r
- var me = this,\r
- rt,\r
- isAfter = (where || 'before').toLowerCase() == 'after',\r
- insertEl;\r
- \r
- if(Ext.isArray(el)){\r
- insertEl = me;\r
- Ext.each(el, function(e) {\r
- rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);\r
- if(isAfter){\r
- insertEl = rt;\r
- }\r
- });\r
- return rt;\r
- }\r
- \r
- el = el || {};\r
- \r
- if(el.nodeType || el.dom){\r
- rt = me.dom.parentNode.insertBefore(GETDOM(el), isAfter ? me.dom.nextSibling : me.dom);\r
- if (!returnDom) {\r
- rt = GET(rt);\r
- }\r
- }else{\r
- if (isAfter && !me.dom.nextSibling) {\r
- rt = DH.append(me.dom.parentNode, el, !returnDom);\r
- } else { \r
- rt = DH[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);\r
- }\r
- }\r
- return rt;\r
- }\r
- };\r
-}());/**
- * @class Ext.Element
- */
-Ext.Element.addMethods(function(){
- // local style camelizing for speed
- var propCache = {},
- camelRe = /(-[a-z])/gi,
- classReCache = {},
- view = document.defaultView,
- propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
- opacityRe = /alpha\(opacity=(.*)\)/i,
- trimRe = /^\s+|\s+$/g,
- EL = Ext.Element,
- PADDING = "padding",
- MARGIN = "margin",
- BORDER = "border",
- LEFT = "-left",
- RIGHT = "-right",
- TOP = "-top",
- BOTTOM = "-bottom",
- WIDTH = "-width",
- MATH = Math,
- HIDDEN = 'hidden',
- ISCLIPPED = 'isClipped',
- OVERFLOW = 'overflow',
- OVERFLOWX = 'overflow-x',
- OVERFLOWY = 'overflow-y',
- ORIGINALCLIP = 'originalClip',
- // special markup used throughout Ext when box wrapping elements
- borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
- paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
- margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
- data = Ext.Element.data;
-
-
- // private
- function camelFn(m, a) {
- return a.charAt(1).toUpperCase();
- }
-
- function chkCache(prop) {
- return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
- }
-
- return {
- // private ==> used by Fx
- adjustWidth : function(width) {
- var me = this;
- var isNum = Ext.isNumber(width);
- if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
- width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
- }
- return (isNum && width < 0) ? 0 : width;
- },
-
- // private ==> used by Fx
- adjustHeight : function(height) {
- var me = this;
- var isNum = Ext.isNumber(height);
- if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
- height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
+ * Replaces the specified element with the passed element.
+ * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
+ * to replace.
+ * @param {Mixed} replacement The id of an element or the Element itself.
+ * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
+ * @return {CompositeElement} this
+ */
+ replaceElement : function(el, replacement, domReplace){
+ var index = !isNaN(el) ? el : this.indexOf(el),
+ d;
+ if(index > -1){
+ replacement = Ext.getDom(replacement);
+ if(domReplace){
+ d = this.elements[index];
+ d.parentNode.insertBefore(replacement, d);
+ Ext.removeNode(d);
}
- return (isNum && height < 0) ? 0 : height;
- },
+ this.elements.splice(index, 1, replacement);
+ }
+ return this;
+ },
+
+ /**
+ * Removes all elements.
+ */
+ clear : function(){
+ this.elements = [];
+ }
+};
+Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
- /**
- * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
- * @param {String/Array} className The CSS class to add, or an array of classes
- * @return {Ext.Element} this
- */
- addClass : function(className){
- var me = this, i, len, v;
- className = Ext.isArray(className) ? className : [className];
- for (i=0, len = className.length; i < len; i++) {
- v = className[i];
- if (v) {
- me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
- };
+(function(){
+var fnName,
+ ElProto = Ext.Element.prototype,
+ CelProto = Ext.CompositeElementLite.prototype;
+
+for(fnName in ElProto){
+ if(Ext.isFunction(ElProto[fnName])){
+ (function(fnName){
+ CelProto[fnName] = CelProto[fnName] || function(){
+ return this.invoke(fnName, arguments);
};
- return me;
- },
+ }).call(CelProto, fnName);
+
+ }
+}
+})();
- /**
- * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
- * @param {String/Array} className The CSS class to add, or an array of classes
- * @return {Ext.Element} this
- */
- radioClass : function(className){
- var cn = this.dom.parentNode.childNodes, v;
- className = Ext.isArray(className) ? className : [className];
- for (var i=0, len = cn.length; i < len; i++) {
- v = cn[i];
- if(v && v.nodeType == 1) {
- Ext.fly(v, '_internal').removeClass(className);
- }
- };
- return this.addClass(className);
- },
+if(Ext.DomQuery){
+ Ext.Element.selectorFunction = Ext.DomQuery.select;
+}
- /**
- * Removes one or more CSS classes from the element.
- * @param {String/Array} className The CSS class to remove, or an array of classes
- * @return {Ext.Element} this
- */
- removeClass : function(className){
- var me = this, v;
- className = Ext.isArray(className) ? className : [className];
- if (me.dom && me.dom.className) {
- for (var i=0, len=className.length; i < len; i++) {
- v = className[i];
- if(v) {
- me.dom.className = me.dom.className.replace(
- classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " "
- );
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext.Element
+ * @method select
+ */
+Ext.Element.select = function(selector, root){
+ var els;
+ if(typeof selector == "string"){
+ els = Ext.Element.selectorFunction(selector, root);
+ }else if(selector.length !== undefined){
+ els = selector;
+ }else{
+ throw "Invalid selector";
+ }
+ return new Ext.CompositeElementLite(els);
+};
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext
+ * @method select
+ */
+Ext.select = Ext.Element.select;/**
+ * @class Ext.CompositeElementLite
+ */
+Ext.apply(Ext.CompositeElementLite.prototype, {
+ addElements : function(els, root){
+ if(!els){
+ return this;
+ }
+ if(typeof els == "string"){
+ els = Ext.Element.selectorFunction(els, root);
+ }
+ var yels = this.elements;
+ Ext.each(els, function(e) {
+ yels.push(Ext.get(e));
+ });
+ return this;
+ },
+
+ /**
+ * Returns the first Element
+ * @return {Ext.Element}
+ */
+ first : function(){
+ return this.item(0);
+ },
+
+ /**
+ * Returns the last Element
+ * @return {Ext.Element}
+ */
+ last : function(){
+ return this.item(this.getCount()-1);
+ },
+
+ /**
+ * Returns true if this composite contains the passed element
+ * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
+ * @return Boolean
+ */
+ contains : function(el){
+ return this.indexOf(el) != -1;
+ },
+
+ /**
+ * Removes the specified element(s).
+ * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
+ * or an array of any of those.
+ * @param {Boolean} removeDom (optional) True to also remove the element from the document
+ * @return {CompositeElement} this
+ */
+ removeElement : function(keys, removeDom){
+ var me = this,
+ els = this.elements,
+ el;
+ Ext.each(keys, function(val){
+ if ((el = (els[val] || els[val = me.indexOf(val)]))) {
+ if(removeDom){
+ if(el.dom){
+ el.remove();
+ }else{
+ Ext.removeNode(el);
}
- };
- }
- return me;
- },
-
- /**
- * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
- * @param {String} className The CSS class to toggle
- * @return {Ext.Element} this
- */
- toggleClass : function(className){
- return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
- },
-
- /**
- * Checks if the specified CSS class exists on this element's DOM node.
- * @param {String} className The CSS class to check for
- * @return {Boolean} True if the class exists, else false
- */
- hasClass : function(className){
- return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
- },
+ }
+ els.splice(val, 1);
+ }
+ });
+ return this;
+ }
+});
+/**
+ * @class Ext.CompositeElement
+ * @extends Ext.CompositeElementLite
+ * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
+ * members, or to perform collective actions upon the whole set.</p>
+ * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
+ * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>
+ * <p>All methods return <i>this</i> and can be chained.</p>
+ * Usage:
+<pre><code>
+var els = Ext.select("#some-el div.some-class", true);
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class', true);
- /**
- * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
- * @param {String} oldClassName The CSS class to replace
- * @param {String} newClassName The replacement CSS class
- * @return {Ext.Element} this
- */
- replaceClass : function(oldClassName, newClassName){
- return this.removeClass(oldClassName).addClass(newClassName);
- },
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+</code></pre>
+ */
+Ext.CompositeElement = function(els, root){
+ this.elements = [];
+ this.add(els, root);
+};
- isStyle : function(style, val) {
- return this.getStyle(style) == val;
- },
+Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {
+
+ // private
+ getElement : function(el){
+ // In this case just return it, since we already have a reference to it
+ return el;
+ },
+
+ // private
+ transformElement : function(el){
+ return Ext.get(el);
+ }
- /**
- * Normalizes currentStyle and computedStyle.
- * @param {String} property The style property whose value is returned.
- * @return {String} The current value of the style property for this element.
- */
- getStyle : function(){
- return view && view.getComputedStyle ?
- function(prop){
- var el = this.dom,
- v,
- cs,
- out,
- display,
- wk = Ext.isWebKit,
- display;
-
- if(el == document){
- return null;
- }
- prop = chkCache(prop);
- // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
- if(wk && /marginRight/.test(prop)){
- display = this.getStyle('display');
- el.style.display = 'inline-block';
- }
- out = (v = el.style[prop]) ? v :
- (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
+ /**
+ * Adds elements to this composite.
+ * @param {String/Array} els A string CSS selector, an array of elements or an element
+ * @return {CompositeElement} this
+ */
- // Webkit returns rgb values for transparent.
- if(wk){
- if(out == 'rgba(0, 0, 0, 0)'){
- out = 'transparent';
- }else if(display){
- el.style.display = display;
- }
- }
- return out;
- } :
- function(prop){
- var el = this.dom,
- m,
- cs;
+ /**
+ * Returns the Element object at the specified index
+ * @param {Number} index
+ * @return {Ext.Element}
+ */
- if(el == document) return null;
- if (prop == 'opacity') {
- if (el.style.filter.match) {
- if(m = el.style.filter.match(opacityRe)){
- var fv = parseFloat(m[1]);
- if(!isNaN(fv)){
- return fv ? fv / 100 : 0;
- }
- }
- }
- return 1;
- }
- prop = chkCache(prop);
- return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
- };
- }(),
+ /**
+ * Iterates each <code>element</code> in this <code>composite</code>
+ * calling the supplied function using {@link Ext#each}.
+ * @param {Function} fn The function to be called with each
+ * <code>element</code>. If the supplied function returns <tt>false</tt>,
+ * iteration stops. This function is called with the following arguments:
+ * <div class="mdetail-params"><ul>
+ * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>
+ * in the <code>composite</code></div></li>
+ * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>
+ * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>
+ * </ul></div>
+ * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.
+ * Defaults to the <code>element</code> at the current <code>index</code>
+ * within the composite.
+ * @return {CompositeElement} this
+ */
+});
- /**
- * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
- * are convert to standard 6 digit hex color.
- * @param {String} attr The css attribute
- * @param {String} defaultValue The default value to use when a valid color isn't found
- * @param {String} prefix (optional) defaults to #. Use an empty string when working with
- * color anims.
- */
- getColor : function(attr, defaultValue, prefix){
- var v = this.getStyle(attr),
- color = Ext.isDefined(prefix) ? prefix : '#',
- h;
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext.Element
+ * @method select
+ */
+Ext.Element.select = function(selector, unique, root){
+ var els;
+ if(typeof selector == "string"){
+ els = Ext.Element.selectorFunction(selector, root);
+ }else if(selector.length !== undefined){
+ els = selector;
+ }else{
+ throw "Invalid selector";
+ }
- if(!v || /transparent|inherit/.test(v)){
- return defaultValue;
- }
- if(/^r/.test(v)){
- Ext.each(v.slice(4, v.length -1).split(','), function(s){
- h = parseInt(s, 10);
- color += (h < 16 ? '0' : '') + h.toString(16);
- });
- }else{
- v = v.replace('#', '');
- color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
- }
- return(color.length > 5 ? color.toLowerCase() : defaultValue);
- },
+ return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
+};
+
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext.Element
+ * @method select
+ */
+Ext.select = Ext.Element.select;(function(){
+ var BEFOREREQUEST = "beforerequest",
+ REQUESTCOMPLETE = "requestcomplete",
+ REQUESTEXCEPTION = "requestexception",
+ UNDEFINED = undefined,
+ LOAD = 'load',
+ POST = 'POST',
+ GET = 'GET',
+ WINDOW = window;
+
+ /**
+ * @class Ext.data.Connection
+ * @extends Ext.util.Observable
+ * <p>The class encapsulates a connection to the page's originating domain, allowing requests to be made
+ * either to a configured URL, or to a URL specified at request time.</p>
+ * <p>Requests made by this class are asynchronous, and will return immediately. No data from
+ * the server will be available to the statement immediately following the {@link #request} call.
+ * To process returned data, use a
+ * <a href="#request-option-success" ext:member="request-option-success" ext:cls="Ext.data.Connection">success callback</a>
+ * in the request options object,
+ * or an {@link #requestcomplete event listener}.</p>
+ * <p><h3>File Uploads</h3><a href="#request-option-isUpload" ext:member="request-option-isUpload" ext:cls="Ext.data.Connection">File uploads</a> are not performed using normal "Ajax" techniques, that
+ * is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard
+ * manner with the DOM <tt><form></tt> element temporarily modified to have its
+ * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
+ * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
+ * but removed after the return data has been gathered.</p>
+ * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
+ * server is using JSON to send the return object, then the
+ * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
+ * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
+ * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
+ * "<" as "&lt;", "&" as "&amp;" etc.</p>
+ * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
+ * is created containing a <tt>responseText</tt> property in order to conform to the
+ * requirements of event handlers and callbacks.</p>
+ * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
+ * and some server technologies (notably JEE) may require some custom processing in order to
+ * retrieve parameter names and parameter values from the packet content.</p>
+ * @constructor
+ * @param {Object} config a configuration object.
+ */
+ Ext.data.Connection = function(config){
+ Ext.apply(this, config);
+ this.addEvents(
+ /**
+ * @event beforerequest
+ * Fires before a network request is made to retrieve a data object.
+ * @param {Connection} conn This Connection object.
+ * @param {Object} options The options config object passed to the {@link #request} method.
+ */
+ BEFOREREQUEST,
+ /**
+ * @event requestcomplete
+ * Fires if the request was successfully completed.
+ * @param {Connection} conn This Connection object.
+ * @param {Object} response The XHR object containing the response data.
+ * See <a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object</a>
+ * for details.
+ * @param {Object} options The options config object passed to the {@link #request} method.
+ */
+ REQUESTCOMPLETE,
+ /**
+ * @event requestexception
+ * Fires if an error HTTP status was returned from the server.
+ * See <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">HTTP Status Code Definitions</a>
+ * for details of HTTP status codes.
+ * @param {Connection} conn This Connection object.
+ * @param {Object} response The XHR object containing the response data.
+ * See <a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object</a>
+ * for details.
+ * @param {Object} options The options config object passed to the {@link #request} method.
+ */
+ REQUESTEXCEPTION
+ );
+ Ext.data.Connection.superclass.constructor.call(this);
+ };
+ Ext.extend(Ext.data.Connection, Ext.util.Observable, {
/**
- * Wrapper for setting style properties, also takes single object parameter of multiple styles.
- * @param {String/Object} property The style property to be set, or an object of multiple styles.
- * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
- * @return {Ext.Element} this
+ * @cfg {String} url (Optional) <p>The default URL to be used for requests to the server. Defaults to undefined.</p>
+ * <p>The <code>url</code> config may be a function which <i>returns</i> the URL to use for the Ajax request. The scope
+ * (<code><b>this</b></code> reference) of the function is the <code>scope</code> option passed to the {@link #request} method.</p>
*/
- setStyle : function(prop, value){
- var tmp,
- style,
- camel;
- if (!Ext.isObject(prop)) {
- tmp = {};
- tmp[prop] = value;
- prop = tmp;
- }
- for (style in prop) {
- value = prop[style];
- style == 'opacity' ?
- this.setOpacity(value) :
- this.dom.style[chkCache(style)] = value;
- }
- return this;
- },
-
/**
- * Set the opacity of the element
- * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
- * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
- * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
- * @return {Ext.Element} this
+ * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+ * extra parameters to each request made by this object. (defaults to undefined)
*/
- setOpacity : function(opacity, animate){
- var me = this,
- s = me.dom.style;
-
- if(!animate || !me.anim){
- if(Ext.isIE){
- var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
- val = s.filter.replace(opacityRe, '').replace(trimRe, '');
-
- s.zoom = 1;
- s.filter = val + (val.length > 0 ? ' ' : '') + opac;
- }else{
- s.opacity = opacity;
- }
- }else{
- me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
- }
- return me;
- },
-
/**
- * Clears any opacity settings from this element. Required in some cases for IE.
- * @return {Ext.Element} this
+ * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+ * to each request made by this object. (defaults to undefined)
*/
- clearOpacity : function(){
- var style = this.dom.style;
- if(Ext.isIE){
- if(!Ext.isEmpty(style.filter)){
- style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
- }
- }else{
- style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
- }
- return this;
- },
-
/**
- * Returns the offset height of the element
- * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
- * @return {Number} The element's height
+ * @cfg {String} method (Optional) The default HTTP method to be used for requests.
+ * (defaults to undefined; if not set, but {@link #request} params are present, POST will be used;
+ * otherwise, GET will be used.)
*/
- getHeight : function(contentHeight){
- var me = this,
- dom = me.dom,
- hidden = Ext.isIE && me.isStyle('display', 'none'),
- h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;
-
- h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
- return h < 0 ? 0 : h;
- },
+ /**
+ * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
+ */
+ timeout : 30000,
+ /**
+ * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+ * @type Boolean
+ */
+ autoAbort:false,
/**
- * Returns the offset width of the element
- * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
- * @return {Number} The element's width
+ * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
+ * @type Boolean
*/
- getWidth : function(contentWidth){
- var me = this,
- dom = me.dom,
- hidden = Ext.isIE && me.isStyle('display', 'none'),
- w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
- w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
- return w < 0 ? 0 : w;
- },
+ disableCaching: true,
/**
- * Set the width of this Element.
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
- * </ul></div>
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
+ * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching
+ * through a cache buster. Defaults to '_dc'
+ * @type String
*/
- setWidth : function(width, animate){
- var me = this;
- width = me.adjustWidth(width);
- !animate || !me.anim ?
- me.dom.style.width = me.addUnits(width) :
- me.anim({width : {to : width}}, me.preanim(arguments, 1));
- return me;
- },
+ disableCachingParam: '_dc',
/**
- * Set the height of this Element.
+ * <p>Sends an HTTP request to a remote server.</p>
+ * <p><b>Important:</b> Ajax server requests are asynchronous, and this call will
+ * return before the response has been received. Process any returned data
+ * in a callback function.</p>
* <pre><code>
-// change the height to 200px and animate with default configuration
-Ext.fly('elementId').setHeight(200, true);
-
-// change the height to 150px and animate with a custom configuration
-Ext.fly('elId').setHeight(150, {
- duration : .5, // animation will have a duration of .5 seconds
- // will change the content to "finished"
- callback: function(){ this.{@link #update}("finished"); }
+Ext.Ajax.request({
+ url: 'ajax_demo/sample.json',
+ success: function(response, opts) {
+ var obj = Ext.decode(response.responseText);
+ console.dir(obj);
+ },
+ failure: function(response, opts) {
+ console.log('server-side failure with status code ' + response.status);
+ }
});
* </code></pre>
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
- * </ul></div>
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
+ * <p>To execute a callback function in the correct scope, use the <tt>scope</tt> option.</p>
+ * @param {Object} options An object which may contain the following properties:<ul>
+ * <li><b>url</b> : String/Function (Optional)<div class="sub-desc">The URL to
+ * which to send the request, or a function to call which returns a URL string. The scope of the
+ * function is specified by the <tt>scope</tt> option. Defaults to the configured
+ * <tt>{@link #url}</tt>.</div></li>
+ * <li><b>params</b> : Object/String/Function (Optional)<div class="sub-desc">
+ * An object containing properties which are used as parameters to the
+ * request, a url encoded string or a function to call to get either. The scope of the function
+ * is specified by the <tt>scope</tt> option.</div></li>
+ * <li><b>method</b> : String (Optional)<div class="sub-desc">The HTTP method to use
+ * for the request. Defaults to the configured method, or if no method was configured,
+ * "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that
+ * the method name is case-sensitive and should be all caps.</div></li>
+ * <li><b>callback</b> : Function (Optional)<div class="sub-desc">The
+ * function to be called upon receipt of the HTTP response. The callback is
+ * called regardless of success or failure and is passed the following
+ * parameters:<ul>
+ * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>
+ * <li><b>success</b> : Boolean<div class="sub-desc">True if the request succeeded.</div></li>
+ * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.
+ * See <a href="http://www.w3.org/TR/XMLHttpRequest/">http://www.w3.org/TR/XMLHttpRequest/</a> for details about
+ * accessing elements of the response.</div></li>
+ * </ul></div></li>
+ * <li><a id="request-option-success"></a><b>success</b> : Function (Optional)<div class="sub-desc">The function
+ * to be called upon success of the request. The callback is passed the following
+ * parameters:<ul>
+ * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.</div></li>
+ * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>
+ * </ul></div></li>
+ * <li><b>failure</b> : Function (Optional)<div class="sub-desc">The function
+ * to be called upon failure of the request. The callback is passed the
+ * following parameters:<ul>
+ * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.</div></li>
+ * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>
+ * </ul></div></li>
+ * <li><b>scope</b> : Object (Optional)<div class="sub-desc">The scope in
+ * which to execute the callbacks: The "this" object for the callback function. If the <tt>url</tt>, or <tt>params</tt> options were
+ * specified as functions from which to draw values, then this also serves as the scope for those function calls.
+ * Defaults to the browser window.</div></li>
+ * <li><b>timeout</b> : Number (Optional)<div class="sub-desc">The timeout in milliseconds to be used for this request. Defaults to 30 seconds.</div></li>
+ * <li><b>form</b> : Element/HTMLElement/String (Optional)<div class="sub-desc">The <tt><form></tt>
+ * Element or the id of the <tt><form></tt> to pull parameters from.</div></li>
+ * <li><a id="request-option-isUpload"></a><b>isUpload</b> : Boolean (Optional)<div class="sub-desc"><b>Only meaningful when used
+ * with the <tt>form</tt> option</b>.
+ * <p>True if the form object is a file upload (will be set automatically if the form was
+ * configured with <b><tt>enctype</tt></b> "multipart/form-data").</p>
+ * <p>File uploads are not performed using normal "Ajax" techniques, that is they are <b>not</b>
+ * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
+ * DOM <tt><form></tt> element temporarily modified to have its
+ * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
+ * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
+ * but removed after the return data has been gathered.</p>
+ * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
+ * server is using JSON to send the return object, then the
+ * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
+ * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
+ * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
+ * is created containing a <tt>responseText</tt> property in order to conform to the
+ * requirements of event handlers and callbacks.</p>
+ * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
+ * and some server technologies (notably JEE) may require some custom processing in order to
+ * retrieve parameter names and parameter values from the packet content.</p>
+ * </div></li>
+ * <li><b>headers</b> : Object (Optional)<div class="sub-desc">Request
+ * headers to set for the request.</div></li>
+ * <li><b>xmlData</b> : Object (Optional)<div class="sub-desc">XML document
+ * to use for the post. Note: This will be used instead of params for the post
+ * data. Any params will be appended to the URL.</div></li>
+ * <li><b>jsonData</b> : Object/String (Optional)<div class="sub-desc">JSON
+ * data to use as the post. Note: This will be used instead of params for the post
+ * data. Any params will be appended to the URL.</div></li>
+ * <li><b>disableCaching</b> : Boolean (Optional)<div class="sub-desc">True
+ * to add a unique cache-buster param to GET requests.</div></li>
+ * </ul></p>
+ * <p>The options object may also contain any other property which might be needed to perform
+ * postprocessing in a callback because it is passed to callback functions.</p>
+ * @return {Number} transactionId The id of the server transaction. This may be used
+ * to cancel the request.
*/
- setHeight : function(height, animate){
+ request : function(o){
var me = this;
- height = me.adjustHeight(height);
- !animate || !me.anim ?
- me.dom.style.height = me.addUnits(height) :
- me.anim({height : {to : height}}, me.preanim(arguments, 1));
- return me;
- },
+ if(me.fireEvent(BEFOREREQUEST, me, o)){
+ if (o.el) {
+ if(!Ext.isEmpty(o.indicatorText)){
+ me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";
+ }
+ if(me.indicatorText) {
+ Ext.getDom(o.el).innerHTML = me.indicatorText;
+ }
+ o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {
+ Ext.getDom(o.el).innerHTML = response.responseText;
+ });
+ }
- /**
- * Gets the width of the border(s) for the specified side(s)
- * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
- * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
- * @return {Number} The width of the sides passed added together
- */
- getBorderWidth : function(side){
- return this.addStyles(side, borders);
- },
+ var p = o.params,
+ url = o.url || me.url,
+ method,
+ cb = {success: me.handleResponse,
+ failure: me.handleFailure,
+ scope: me,
+ argument: {options: o},
+ timeout : o.timeout || me.timeout
+ },
+ form,
+ serForm;
+
+
+ if (Ext.isFunction(p)) {
+ p = p.call(o.scope||WINDOW, o);
+ }
- /**
- * Gets the width of the padding(s) for the specified side(s)
- * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
- * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
- * @return {Number} The padding of the sides passed added together
- */
- getPadding : function(side){
- return this.addStyles(side, paddings);
- },
+ p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);
- /**
- * Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
- * @return {Ext.Element} this
- */
- clip : function(){
- var me = this,
- dom = me.dom;
+ if (Ext.isFunction(url)) {
+ url = url.call(o.scope || WINDOW, o);
+ }
- if(!data(dom, ISCLIPPED)){
- data(dom, ISCLIPPED, true);
- data(dom, ORIGINALCLIP, {
- o: me.getStyle(OVERFLOW),
- x: me.getStyle(OVERFLOWX),
- y: me.getStyle(OVERFLOWY)
- });
- me.setStyle(OVERFLOW, HIDDEN);
- me.setStyle(OVERFLOWX, HIDDEN);
- me.setStyle(OVERFLOWY, HIDDEN);
+ if((form = Ext.getDom(o.form))){
+ url = url || form.action;
+ if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {
+ return me.doFormUpload.call(me, o, p, url);
+ }
+ serForm = Ext.lib.Ajax.serializeForm(form);
+ p = p ? (p + '&' + serForm) : serForm;
+ }
+
+ method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
+
+ if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
+ var dcp = o.disableCachingParam || me.disableCachingParam;
+ url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));
+ }
+
+ o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});
+
+ if(o.autoAbort === true || me.autoAbort) {
+ me.abort();
+ }
+
+ if((method == GET || o.xmlData || o.jsonData) && p){
+ url = Ext.urlAppend(url, p);
+ p = '';
+ }
+ return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));
+ }else{
+ return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null;
}
- return me;
},
/**
- * Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
- * @return {Ext.Element} this
+ * Determine whether this object has a request outstanding.
+ * @param {Number} transactionId (Optional) defaults to the last transaction
+ * @return {Boolean} True if there is an outstanding request.
+ */
+ isLoading : function(transId){
+ return transId ? Ext.lib.Ajax.isCallInProgress(transId) : !! this.transId;
+ },
+
+ /**
+ * Aborts any outstanding request.
+ * @param {Number} transactionId (Optional) defaults to the last transaction
*/
- unclip : function(){
- var me = this,
- dom = me.dom;
+ abort : function(transId){
+ if(transId || this.isLoading()){
+ Ext.lib.Ajax.abort(transId || this.transId);
+ }
+ },
- if(data(dom, ISCLIPPED)){
- data(dom, ISCLIPPED, false);
- var o = data(dom, ORIGINALCLIP);
- if(o.o){
- me.setStyle(OVERFLOW, o.o);
- }
- if(o.x){
- me.setStyle(OVERFLOWX, o.x);
- }
- if(o.y){
- me.setStyle(OVERFLOWY, o.y);
- }
+ // private
+ handleResponse : function(response){
+ this.transId = false;
+ var options = response.argument.options;
+ response.argument = options ? options.argument : null;
+ this.fireEvent(REQUESTCOMPLETE, this, response, options);
+ if(options.success){
+ options.success.call(options.scope, response, options);
+ }
+ if(options.callback){
+ options.callback.call(options.scope, options, true, response);
}
- return me;
},
// private
- addStyles : function(sides, styles){
- var val = 0,
- m = sides.match(/\w/g),
- s;
- for (var i=0, len=m.length; i<len; i++) {
- s = m[i] && parseInt(this.getStyle(styles[m[i]]), 10);
- if (s) {
- val += MATH.abs(s);
- }
+ handleFailure : function(response, e){
+ this.transId = false;
+ var options = response.argument.options;
+ response.argument = options ? options.argument : null;
+ this.fireEvent(REQUESTEXCEPTION, this, response, options, e);
+ if(options.failure){
+ options.failure.call(options.scope, response, options);
+ }
+ if(options.callback){
+ options.callback.call(options.scope, options, false, response);
}
- return val;
},
- margins : margins
- }
-}()
-);
-/**\r
- * @class Ext.Element\r
- */\r
-\r
-// special markup used throughout Ext when box wrapping elements\r
-Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
-\r
-Ext.Element.addMethods(function(){\r
- var INTERNAL = "_internal",\r
- pxMatch = /(\d+\.?\d+)px/;\r
- return {\r
- /**\r
- * More flexible version of {@link #setStyle} for setting style properties.\r
- * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
- * a function which returns such a specification.\r
- * @return {Ext.Element} this\r
- */\r
- applyStyles : function(style){\r
- Ext.DomHelper.applyStyles(this.dom, style);\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns an object with properties matching the styles requested.\r
- * For example, el.getStyles('color', 'font-size', 'width') might return\r
- * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
- * @param {String} style1 A style name\r
- * @param {String} style2 A style name\r
- * @param {String} etc.\r
- * @return {Object} The style object\r
- */\r
- getStyles : function(){\r
- var ret = {};\r
- Ext.each(arguments, function(v) {\r
- ret[v] = this.getStyle(v);\r
- },\r
- this);\r
- return ret;\r
- },\r
-\r
- // private ==> used by ext full\r
- setOverflow : function(v){\r
- var dom = this.dom;\r
- if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
- dom.style.overflow = 'hidden';\r
- (function(){dom.style.overflow = 'auto';}).defer(1);\r
- }else{\r
- dom.style.overflow = v;\r
- }\r
- },\r
-\r
- /**\r
- * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
- * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
- * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
- * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup\r
- * is of this form:</p>\r
- * <pre><code>\r
- Ext.Element.boxMarkup =\r
- '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>\r
- <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>\r
- <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
- * </code></pre>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
- // Basic box wrap\r
- Ext.get("foo").boxWrap();\r
-\r
- // You can also add a custom class and use CSS inheritance rules to customize the box look.\r
- // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
- // for how to create a custom box wrap style.\r
- Ext.get("foo").boxWrap().addClass("x-box-blue");\r
- * </code></pre>\r
- * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
- * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
- * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
- * also supply all of the necessary rules.\r
- * @return {Ext.Element} The outermost wrapping element of the created box structure.\r
- */\r
- boxWrap : function(cls){\r
- cls = cls || 'x-box';\r
- var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));\r
- Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
- return el;\r
- },\r
-\r
- /**\r
- * Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
- * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>\r
- * </ul></div>\r
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
- * </ul></div>\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setSize : function(width, height, animate){\r
- var me = this;\r
- if(Ext.isObject(width)){ // in case of object from getSize()\r
- height = width.height;\r
- width = width.width;\r
- }\r
- width = me.adjustWidth(width);\r
- height = me.adjustHeight(height);\r
- if(!animate || !me.anim){\r
- me.dom.style.width = me.addUnits(width);\r
- me.dom.style.height = me.addUnits(height);\r
- }else{\r
- me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
- * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
- * if a height has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedHeight : function(){\r
- var me = this,\r
- h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
- if(!h){\r
- h = parseFloat(me.getStyle('height')) || 0;\r
- if(!me.isBorderBox()){\r
- h += me.getFrameWidth('tb');\r
- }\r
- }\r
- return h;\r
- },\r
-\r
- /**\r
- * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
- * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
- * if a width has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedWidth : function(){\r
- var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
- if(!w){\r
- w = parseFloat(this.getStyle('width')) || 0;\r
- if(!this.isBorderBox()){\r
- w += this.getFrameWidth('lr');\r
- }\r
- }\r
- return w;\r
- },\r
-\r
- /**\r
- * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
- for more information about the sides.\r
- * @param {String} sides\r
- * @return {Number}\r
- */\r
- getFrameWidth : function(sides, onlyContentBox){\r
- return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
- },\r
-\r
- /**\r
- * Sets up event handlers to add and remove a css class when the mouse is over this element\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnOver : function(className){\r
- this.hover(\r
- function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- },\r
- function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }\r
- );\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets up event handlers to add and remove a css class when this element has the focus\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnFocus : function(className){\r
- this.on("focus", function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- }, this.dom);\r
- this.on("blur", function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }, this.dom);\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnClick : function(className){\r
- var dom = this.dom;\r
- this.on("mousedown", function(){\r
- Ext.fly(dom, INTERNAL).addClass(className);\r
- var d = Ext.getDoc(),\r
- fn = function(){\r
- Ext.fly(dom, INTERNAL).removeClass(className);\r
- d.removeListener("mouseup", fn);\r
- };\r
- d.on("mouseup", fn);\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * <p>Returns the dimensions of the element available to lay content out in.<p>\r
- * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>\r
- * example:<pre><code>\r
- var vpSize = Ext.getBody().getViewSize();\r
-\r
- // all Windows created afterwards will have a default value of 90% height and 95% width\r
- Ext.Window.override({\r
- width: vpSize.width * 0.9,\r
- height: vpSize.height * 0.95\r
- });\r
- // To handle window resizing you would have to hook onto onWindowResize.\r
- * </code></pre>\r
- *\r
- * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.\r
- * To obtain the size including scrollbars, use getStyleSize\r
- *\r
- * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
- */\r
-\r
- getViewSize : function(){\r
- var doc = document,\r
- d = this.dom,\r
- isDoc = (d == doc || d == doc.body);\r
-\r
- // If the body, use Ext.lib.Dom\r
- if (isDoc) {\r
- var extdom = Ext.lib.Dom;\r
- return {\r
- width : extdom.getViewWidth(),\r
- height : extdom.getViewHeight()\r
- }\r
-\r
- // Else use clientHeight/clientWidth\r
- } else {\r
- return {\r
- width : d.clientWidth,\r
- height : d.clientHeight\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * <p>Returns the dimensions of the element available to lay content out in.<p>\r
- *\r
- * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.\r
- * To obtain the size excluding scrollbars, use getViewSize\r
- *\r
- * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
- */\r
-\r
- getStyleSize : function(){\r
- var me = this,\r
- w, h,\r
- doc = document,\r
- d = this.dom,\r
- isDoc = (d == doc || d == doc.body),\r
- s = d.style;\r
-\r
- // If the body, use Ext.lib.Dom\r
- if (isDoc) {\r
- var extdom = Ext.lib.Dom;\r
- return {\r
- width : extdom.getViewWidth(),\r
- height : extdom.getViewHeight()\r
- }\r
- }\r
- // Use Styles if they are set\r
- if(s.width && s.width != 'auto'){\r
- w = parseFloat(s.width);\r
- if(me.isBorderBox()){\r
- w -= me.getFrameWidth('lr');\r
- }\r
- }\r
- // Use Styles if they are set\r
- if(s.height && s.height != 'auto'){\r
- h = parseFloat(s.height);\r
- if(me.isBorderBox()){\r
- h -= me.getFrameWidth('tb');\r
- }\r
- }\r
- // Use getWidth/getHeight if style not set.\r
- return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
- },\r
-\r
- /**\r
- * Returns the size of the element.\r
- * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
- * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
- */\r
- getSize : function(contentSize){\r
- return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
- },\r
-\r
- /**\r
- * Forces the browser to repaint this element\r
- * @return {Ext.Element} this\r
- */\r
- repaint : function(){\r
- var dom = this.dom;\r
- this.addClass("x-repaint");\r
- setTimeout(function(){\r
- Ext.fly(dom).removeClass("x-repaint");\r
- }, 1);\r
- return this;\r
- },\r
-\r
- /**\r
- * Disables text selection for this element (normalized across browsers)\r
- * @return {Ext.Element} this\r
- */\r
- unselectable : function(){\r
- this.dom.unselectable = "on";\r
- return this.swallowEvent("selectstart", true).\r
- applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
- addClass("x-unselectable");\r
- },\r
-\r
- /**\r
- * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
- * then it returns the calculated width of the sides (see getPadding)\r
- * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
- * @return {Object/Number}\r
- */\r
- getMargins : function(side){\r
- var me = this,\r
- key,\r
- hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
- o = {};\r
-\r
- if (!side) {\r
- for (key in me.margins){\r
- o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;\r
- }\r
- return o;\r
- } else {\r
- return me.addStyles.call(me, side, me.margins);\r
- }\r
- }\r
- };\r
-}());\r
-/**\r
- * @class Ext.Element\r
- */\r
-(function(){\r
-var D = Ext.lib.Dom,\r
- LEFT = "left",\r
- RIGHT = "right",\r
- TOP = "top",\r
- BOTTOM = "bottom",\r
- POSITION = "position",\r
- STATIC = "static",\r
- RELATIVE = "relative",\r
- AUTO = "auto",\r
- ZINDEX = "z-index";\r
-\r
-Ext.Element.addMethods({\r
- /**\r
- * Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @return {Number} The X position of the element\r
- */\r
- getX : function(){\r
- return D.getX(this.dom);\r
- },\r
-\r
- /**\r
- * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @return {Number} The Y position of the element\r
- */\r
- getY : function(){\r
- return D.getY(this.dom);\r
- },\r
-\r
- /**\r
- * Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @return {Array} The XY position of the element\r
- */\r
- getXY : function(){\r
- return D.getXY(this.dom);\r
- },\r
-\r
- /**\r
- * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.\r
- * @param {Mixed} element The element to get the offsets from.\r
- * @return {Array} The XY page offsets (e.g. [100, -200])\r
- */\r
- getOffsetsTo : function(el){\r
- var o = this.getXY(),\r
- e = Ext.fly(el, '_internal').getXY();\r
- return [o[0]-e[0],o[1]-e[1]];\r
- },\r
-\r
- /**\r
- * Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} The X position of the element\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setX : function(x, animate){ \r
- return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));\r
- },\r
-\r
- /**\r
- * Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} The Y position of the element\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setY : function(y, animate){ \r
- return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));\r
- },\r
-\r
- /**\r
- * Sets the element's left position directly using CSS style (instead of {@link #setX}).\r
- * @param {String} left The left CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setLeft : function(left){\r
- this.setStyle(LEFT, this.addUnits(left));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's top position directly using CSS style (instead of {@link #setY}).\r
- * @param {String} top The top CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setTop : function(top){\r
- this.setStyle(TOP, this.addUnits(top));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's CSS right style.\r
- * @param {String} right The right CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setRight : function(right){\r
- this.setStyle(RIGHT, this.addUnits(right));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's CSS bottom style.\r
- * @param {String} bottom The bottom CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setBottom : function(bottom){\r
- this.setStyle(BOTTOM, this.addUnits(bottom));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setXY : function(pos, animate){\r
- var me = this;\r
- if(!animate || !me.anim){\r
- D.setXY(me.dom, pos);\r
- }else{\r
- me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setLocation : function(x, y, animate){\r
- return this.setXY([x, y], this.animTest(arguments, animate, 2));\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- moveTo : function(x, y, animate){\r
- return this.setXY([x, y], this.animTest(arguments, animate, 2)); \r
- }, \r
- \r
- /**\r
- * Gets the left X coordinate\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getLeft : function(local){\r
- return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;\r
- },\r
-\r
- /**\r
- * Gets the right X coordinate of the element (element X position + element width)\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getRight : function(local){\r
- var me = this;\r
- return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;\r
- },\r
-\r
- /**\r
- * Gets the top Y coordinate\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getTop : function(local) {\r
- return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;\r
- },\r
-\r
- /**\r
- * Gets the bottom Y coordinate of the element (element Y position + element height)\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getBottom : function(local){\r
- var me = this;\r
- return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;\r
- },\r
-\r
- /**\r
- * Initializes positioning on this element. If a desired position is not passed, it will make the\r
- * the element positioned relative IF it is not already positioned.\r
- * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"\r
- * @param {Number} zIndex (optional) The zIndex to apply\r
- * @param {Number} x (optional) Set the page X position\r
- * @param {Number} y (optional) Set the page Y position\r
- */\r
- position : function(pos, zIndex, x, y){\r
- var me = this;\r
- \r
- if(!pos && me.isStyle(POSITION, STATIC)){ \r
- me.setStyle(POSITION, RELATIVE); \r
- } else if(pos) {\r
- me.setStyle(POSITION, pos);\r
- }\r
- if(zIndex){\r
- me.setStyle(ZINDEX, zIndex);\r
- }\r
- if(x || y) me.setXY([x || false, y || false]);\r
- },\r
-\r
- /**\r
- * Clear positioning back to the default when the document was loaded\r
- * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.\r
- * @return {Ext.Element} this\r
- */\r
- clearPositioning : function(value){\r
- value = value || '';\r
- this.setStyle({\r
- left : value,\r
- right : value,\r
- top : value,\r
- bottom : value,\r
- "z-index" : "",\r
- position : STATIC\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Gets an object with all CSS positioning properties. Useful along with setPostioning to get\r
- * snapshot before performing an update and then restoring the element.\r
- * @return {Object}\r
- */\r
- getPositioning : function(){\r
- var l = this.getStyle(LEFT);\r
- var t = this.getStyle(TOP);\r
- return {\r
- "position" : this.getStyle(POSITION),\r
- "left" : l,\r
- "right" : l ? "" : this.getStyle(RIGHT),\r
- "top" : t,\r
- "bottom" : t ? "" : this.getStyle(BOTTOM),\r
- "z-index" : this.getStyle(ZINDEX)\r
- };\r
- },\r
- \r
- /**\r
- * Set positioning with an object returned by getPositioning().\r
- * @param {Object} posCfg\r
- * @return {Ext.Element} this\r
- */\r
- setPositioning : function(pc){\r
- var me = this,\r
- style = me.dom.style;\r
- \r
- me.setStyle(pc);\r
- \r
- if(pc.right == AUTO){\r
- style.right = "";\r
- }\r
- if(pc.bottom == AUTO){\r
- style.bottom = "";\r
- }\r
- \r
- return me;\r
- }, \r
- \r
- /**\r
- * Translates the passed page coordinates into left/top css values for this element\r
- * @param {Number/Array} x The page x or an array containing [x, y]\r
- * @param {Number} y (optional) The page y, required if x is not an array\r
- * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}\r
- */\r
- translatePoints : function(x, y){ \r
- y = isNaN(x[1]) ? y : x[1];\r
- x = isNaN(x[0]) ? x : x[0];\r
- var me = this,\r
- relative = me.isStyle(POSITION, RELATIVE),\r
- o = me.getXY(),\r
- l = parseInt(me.getStyle(LEFT), 10),\r
- t = parseInt(me.getStyle(TOP), 10);\r
- \r
- l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);\r
- t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); \r
-\r
- return {left: (x - o[0] + l), top: (y - o[1] + t)}; \r
- },\r
- \r
- animTest : function(args, animate, i) {\r
- return !!animate && this.preanim ? this.preanim(args, i) : false;\r
- }\r
-});\r
-})();/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.\r
- * @param {Object} box The box to fill {x, y, width, height}\r
- * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setBox : function(box, adjust, animate){\r
- var me = this,\r
- w = box.width, \r
- h = box.height;\r
- if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){\r
- w -= (me.getBorderWidth("lr") + me.getPadding("lr"));\r
- h -= (me.getBorderWidth("tb") + me.getPadding("tb"));\r
- }\r
- me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));\r
- return me;\r
- },\r
-\r
- /**\r
- * Return an object defining the area of this Element which can be passed to {@link #setBox} to\r
- * set another Element's size/location to match this element.\r
- * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.\r
- * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.\r
- * @return {Object} box An object in the format<pre><code>\r
-{\r
- x: <Element's X position>,\r
- y: <Element's Y position>,\r
- width: <Element's width>,\r
- height: <Element's height>,\r
- bottom: <Element's lower bound>,\r
- right: <Element's rightmost bound>\r
-}\r
-</code></pre>\r
- * The returned object may also be addressed as an Array where index 0 contains the X position\r
- * and index 1 contains the Y position. So the result may also be used for {@link #setXY}\r
- */\r
- getBox : function(contentBox, local) { \r
- var me = this,\r
- xy,\r
- left,\r
- top,\r
- getBorderWidth = me.getBorderWidth,\r
- getPadding = me.getPadding, \r
- l,\r
- r,\r
- t,\r
- b;\r
- if(!local){\r
- xy = me.getXY();\r
- }else{\r
- left = parseInt(me.getStyle("left"), 10) || 0;\r
- top = parseInt(me.getStyle("top"), 10) || 0;\r
- xy = [left, top];\r
- }\r
- var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;\r
- if(!contentBox){\r
- bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};\r
- }else{\r
- l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");\r
- r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");\r
- t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");\r
- b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");\r
- bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};\r
- }\r
- bx.right = bx.x + bx.width;\r
- bx.bottom = bx.y + bx.height;\r
- return bx;\r
- },\r
- \r
- /**\r
- * Move this element relative to its current position.\r
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").\r
- * @param {Number} distance How far to move the element in pixels\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- move : function(direction, distance, animate){\r
- var me = this, \r
- xy = me.getXY(),\r
- x = xy[0],\r
- y = xy[1], \r
- left = [x - distance, y],\r
- right = [x + distance, y],\r
- top = [x, y - distance],\r
- bottom = [x, y + distance],\r
- hash = {\r
- l : left,\r
- left : left,\r
- r : right,\r
- right : right,\r
- t : top,\r
- top : top,\r
- up : top,\r
- b : bottom, \r
- bottom : bottom,\r
- down : bottom \r
- };\r
- \r
- direction = direction.toLowerCase(); \r
- me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));\r
- },\r
- \r
- /**\r
- * Quick set left and top adding default units\r
- * @param {String} left The left CSS property value\r
- * @param {String} top The top CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setLeftTop : function(left, top){\r
- var me = this,\r
- style = me.dom.style;\r
- style.left = me.addUnits(left);\r
- style.top = me.addUnits(top);\r
- return me;\r
- },\r
- \r
- /**\r
- * Returns the region of the given element.\r
- * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).\r
- * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.\r
- */\r
- getRegion : function(){\r
- return Ext.lib.Dom.getRegion(this.dom);\r
- },\r
- \r
- /**\r
- * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>\r
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
- * </ul></div>\r
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>\r
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
- * </ul></div>\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setBounds : function(x, y, width, height, animate){\r
- var me = this;\r
- if (!animate || !me.anim) {\r
- me.setSize(width, height);\r
- me.setLocation(x, y);\r
- } else {\r
- me.anim({points: {to: [x, y]}, \r
- width: {to: me.adjustWidth(width)}, \r
- height: {to: me.adjustHeight(height)}},\r
- me.preanim(arguments, 4), \r
- 'motion');\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.\r
- * @param {Ext.lib.Region} region The region to fill\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setRegion : function(region, animate) {\r
- return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Returns true if this element is scrollable.\r
- * @return {Boolean}\r
- */\r
- isScrollable : function(){\r
- var dom = this.dom;\r
- return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;\r
- },\r
-\r
- /**\r
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().\r
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.\r
- * @param {Number} value The new scroll value.\r
- * @return {Element} this\r
- */\r
- scrollTo : function(side, value){\r
- this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns the current scroll position of the element.\r
- * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}\r
- */\r
- getScroll : function(){\r
- var d = this.dom, \r
- doc = document,\r
- body = doc.body,\r
- docElement = doc.documentElement,\r
- l,\r
- t,\r
- ret;\r
-\r
- if(d == doc || d == body){\r
- if(Ext.isIE && Ext.isStrict){\r
- l = docElement.scrollLeft; \r
- t = docElement.scrollTop;\r
- }else{\r
- l = window.pageXOffset;\r
- t = window.pageYOffset;\r
- }\r
- ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};\r
- }else{\r
- ret = {left: d.scrollLeft, top: d.scrollTop};\r
- }\r
- return ret;\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().\r
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.\r
- * @param {Number} value The new scroll value\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Element} this\r
- */\r
- scrollTo : function(side, value, animate){\r
- var top = /top/i.test(side), //check if we're scrolling top or left\r
- me = this,\r
- dom = me.dom,\r
- prop;\r
- if (!animate || !me.anim) {\r
- prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction\r
- dom[prop] = value;\r
- }else{\r
- prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop\r
- me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},\r
- me.preanim(arguments, 2), 'scroll');\r
- }\r
- return me;\r
- },\r
- \r
- /**\r
- * Scrolls this element into view within the passed container.\r
- * @param {Mixed} container (optional) The container element to scroll (defaults to document.body). Should be a\r
- * string (id), dom node, or Ext.Element.\r
- * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)\r
- * @return {Ext.Element} this\r
- */\r
- scrollIntoView : function(container, hscroll){\r
- var c = Ext.getDom(container) || Ext.getBody().dom,\r
- el = this.dom,\r
- o = this.getOffsetsTo(c),\r
- l = o[0] + c.scrollLeft,\r
- t = o[1] + c.scrollTop,\r
- b = t + el.offsetHeight,\r
- r = l + el.offsetWidth,\r
- ch = c.clientHeight,\r
- ct = parseInt(c.scrollTop, 10),\r
- cl = parseInt(c.scrollLeft, 10),\r
- cb = ct + ch,\r
- cr = cl + c.clientWidth;\r
-\r
- if (el.offsetHeight > ch || t < ct) {\r
- c.scrollTop = t;\r
- } else if (b > cb){\r
- c.scrollTop = b-ch;\r
- }\r
- c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore\r
-\r
- if(hscroll !== false){\r
- if(el.offsetWidth > c.clientWidth || l < cl){\r
- c.scrollLeft = l;\r
- }else if(r > cr){\r
- c.scrollLeft = r - c.clientWidth;\r
- }\r
- c.scrollLeft = c.scrollLeft;\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- scrollChildIntoView : function(child, hscroll){\r
- Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);\r
- },\r
- \r
- /**\r
- * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is\r
- * within this element's scrollable range.\r
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").\r
- * @param {Number} distance How far to scroll the element in pixels\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Boolean} Returns true if a scroll was triggered or false if the element\r
- * was scrolled as far as it could go.\r
- */\r
- scroll : function(direction, distance, animate){\r
- if(!this.isScrollable()){\r
- return;\r
- }\r
- var el = this.dom,\r
- l = el.scrollLeft, t = el.scrollTop,\r
- w = el.scrollWidth, h = el.scrollHeight,\r
- cw = el.clientWidth, ch = el.clientHeight,\r
- scrolled = false, v,\r
- hash = {\r
- l: Math.min(l + distance, w-cw),\r
- r: v = Math.max(l - distance, 0),\r
- t: Math.max(t - distance, 0),\r
- b: Math.min(t + distance, h-ch)\r
- };\r
- hash.d = hash.b;\r
- hash.u = hash.t;\r
- \r
- direction = direction.substr(0, 1);\r
- if((v = hash[direction]) > -1){\r
- scrolled = true;\r
- this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));\r
- }\r
- return scrolled;\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.VISIBILITY = 1;\r
-/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.DISPLAY = 2;\r
-\r
-Ext.Element.addMethods(function(){\r
- var VISIBILITY = "visibility",\r
- DISPLAY = "display",\r
- HIDDEN = "hidden",\r
- NONE = "none", \r
- ORIGINALDISPLAY = 'originalDisplay',\r
- VISMODE = 'visibilityMode',\r
- ELDISPLAY = Ext.Element.DISPLAY,\r
- data = Ext.Element.data,\r
- getDisplay = function(dom){\r
- var d = data(dom, ORIGINALDISPLAY);\r
- if(d === undefined){\r
- data(dom, ORIGINALDISPLAY, d = '');\r
- }\r
- return d;\r
- },\r
- getVisMode = function(dom){\r
- var m = data(dom, VISMODE);\r
- if(m === undefined){\r
- data(dom, VISMODE, m = 1)\r
- }\r
- return m;\r
- };\r
- \r
- return {\r
- /**\r
- * The element's default display mode (defaults to "")\r
- * @type String\r
- */\r
- originalDisplay : "",\r
- visibilityMode : 1,\r
- \r
- /**\r
- * Sets the element's visibility mode. When setVisible() is called it\r
- * will use this to determine whether to set the visibility or the display property.\r
- * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY\r
- * @return {Ext.Element} this\r
- */\r
- setVisibilityMode : function(visMode){ \r
- data(this.dom, VISMODE, visMode);\r
- return this;\r
- },\r
- \r
- /**\r
- * Perform custom animation on this element.\r
- * <div><ul class="mdetail-params">\r
- * <li><u>Animation Properties</u></li>\r
- * \r
- * <p>The Animation Control Object enables gradual transitions for any member of an\r
- * element's style object that takes a numeric value including but not limited to\r
- * these properties:</p><div><ul class="mdetail-params">\r
- * <li><tt>bottom, top, left, right</tt></li>\r
- * <li><tt>height, width</tt></li>\r
- * <li><tt>margin, padding</tt></li>\r
- * <li><tt>borderWidth</tt></li>\r
- * <li><tt>opacity</tt></li>\r
- * <li><tt>fontSize</tt></li>\r
- * <li><tt>lineHeight</tt></li>\r
- * </ul></div>\r
- * \r
- * \r
- * <li><u>Animation Property Attributes</u></li>\r
- * \r
- * <p>Each Animation Property is a config object with optional properties:</p>\r
- * <div><ul class="mdetail-params">\r
- * <li><tt>by</tt>* : relative change - start at current value, change by this value</li>\r
- * <li><tt>from</tt> : ignore current value, start from this value</li>\r
- * <li><tt>to</tt>* : start at current value, go to this value</li>\r
- * <li><tt>unit</tt> : any allowable unit specification</li>\r
- * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
- * </ul></div>\r
- * \r
- * <li><u>Animation Types</u></li>\r
- * \r
- * <p>The supported animation types:</p><div><ul class="mdetail-params">\r
- * <li><tt>'run'</tt> : Default\r
- * <pre><code>\r
-var el = Ext.get('complexEl');\r
-el.animate(\r
- // animation control object\r
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: 'px'},\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'run' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre>\r
- * </li>\r
- * <li><tt>'color'</tt>\r
- * <p>Animates transition of background, text, or border colors.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- color: { to: '#06e' },\r
- backgroundColor: { to: '#e06' }\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'color' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * \r
- * <li><tt>'motion'</tt>\r
- * <p>Animates the motion of an element to/from specific points using optional bezier\r
- * way points during transit.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: 'px'},\r
- points: {\r
- to: [50, 100], // go to this point\r
- control: [ // optional bezier way points\r
- [ 600, 800],\r
- [-100, 200]\r
- ]\r
- }\r
- },\r
- 3000, // animation duration (milliseconds!)\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'motion' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * <li><tt>'scroll'</tt>\r
- * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- scroll: {to: [400, 300]}\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'scroll' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * </ul></div>\r
- * \r
- * </ul></div>\r
- * \r
- * @param {Object} args The animation control args\r
- * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)\r
- * @param {Function} onComplete (optional) Function to call when animation completes\r
- * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)\r
- * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
- * <tt>'motion'</tt>, or <tt>'scroll'</tt>\r
- * @return {Ext.Element} this\r
- */\r
- animate : function(args, duration, onComplete, easing, animType){ \r
- this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);\r
- return this;\r
- },\r
- \r
- /*\r
- * @private Internal animation call\r
- */\r
- anim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
- animType = animType || 'run';\r
- opt = opt || {};\r
- var me = this, \r
- anim = Ext.lib.Anim[animType](\r
- me.dom, \r
- args,\r
- (opt.duration || defaultDur) || .35,\r
- (opt.easing || defaultEase) || 'easeOut',\r
- function(){\r
- if(cb) cb.call(me);\r
- if(opt.callback) opt.callback.call(opt.scope || me, me, opt);\r
- },\r
- me\r
- );\r
- opt.anim = anim;\r
- return anim;\r
- },\r
- \r
- // private legacy anim prep\r
- preanim : function(a, i){\r
- return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});\r
- },\r
- \r
- /**\r
- * Checks whether the element is currently visible using both visibility and display properties. \r
- * @return {Boolean} True if the element is currently visible, else false\r
- */\r
- isVisible : function() {\r
- return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);\r
- },\r
- \r
- /**\r
- * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\r
- * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.\r
- * @param {Boolean} visible Whether the element is visible\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setVisible : function(visible, animate){\r
- var me = this,\r
- dom = me.dom,\r
- isDisplay = getVisMode(this.dom) == ELDISPLAY;\r
- \r
- if (!animate || !me.anim) {\r
- if(isDisplay){\r
- me.setDisplayed(visible);\r
- }else{\r
- me.fixDisplay();\r
- dom.style.visibility = visible ? "visible" : HIDDEN;\r
- }\r
- }else{\r
- // closure for composites \r
- if(visible){\r
- me.setOpacity(.01);\r
- me.setVisible(true);\r
- }\r
- me.anim({opacity: { to: (visible?1:0) }},\r
- me.preanim(arguments, 1),\r
- null,\r
- .35,\r
- 'easeIn',\r
- function(){\r
- if(!visible){\r
- dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN; \r
- Ext.fly(dom).setOpacity(1);\r
- }\r
- });\r
- }\r
- return me;\r
- },\r
- \r
- /**\r
- * Toggles the element's visibility or display, depending on visibility mode.\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- toggle : function(animate){\r
- var me = this;\r
- me.setVisible(!me.isVisible(), me.preanim(arguments, 0));\r
- return me;\r
- },\r
- \r
- /**\r
- * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.\r
- * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.\r
- * @return {Ext.Element} this\r
- */\r
- setDisplayed : function(value) { \r
- if(typeof value == "boolean"){\r
- value = value ? getDisplay(this.dom) : NONE;\r
- }\r
- this.setStyle(DISPLAY, value);\r
- return this;\r
- },\r
- \r
- // private\r
- fixDisplay : function(){\r
- var me = this;\r
- if(me.isStyle(DISPLAY, NONE)){\r
- me.setStyle(VISIBILITY, HIDDEN);\r
- me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default\r
- if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block\r
- me.setStyle(DISPLAY, "block");\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- hide : function(animate){\r
- this.setVisible(false, this.preanim(arguments, 0));\r
- return this;\r
- },\r
- \r
- /**\r
- * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- show : function(animate){\r
- this.setVisible(true, this.preanim(arguments, 0));\r
- return this;\r
- }\r
- }\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods(\r
-function(){\r
- var VISIBILITY = "visibility",\r
- DISPLAY = "display",\r
- HIDDEN = "hidden",\r
- NONE = "none",\r
- XMASKED = "x-masked",\r
- XMASKEDRELATIVE = "x-masked-relative",\r
- data = Ext.Element.data;\r
-\r
- return {\r
- /**\r
- * Checks whether the element is currently visible using both visibility and display properties.\r
- * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)\r
- * @return {Boolean} True if the element is currently visible, else false\r
- */\r
- isVisible : function(deep) {\r
- var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),\r
- p = this.dom.parentNode;\r
- if(deep !== true || !vis){\r
- return vis;\r
- }\r
- while(p && !/^body/i.test(p.tagName)){\r
- if(!Ext.fly(p, '_isVisible').isVisible()){\r
- return false;\r
- }\r
- p = p.parentNode;\r
- }\r
- return true;\r
- },\r
-\r
- /**\r
- * Returns true if display is not "none"\r
- * @return {Boolean}\r
- */\r
- isDisplayed : function() {\r
- return !this.isStyle(DISPLAY, NONE);\r
- },\r
-\r
- /**\r
- * Convenience method for setVisibilityMode(Element.DISPLAY)\r
- * @param {String} display (optional) What to set display to when visible\r
- * @return {Ext.Element} this\r
- */\r
- enableDisplayMode : function(display){\r
- this.setVisibilityMode(Ext.Element.DISPLAY);\r
- if(!Ext.isEmpty(display)){\r
- data(this.dom, 'originalDisplay', display);\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Puts a mask over this element to disable user interaction. Requires core.css.\r
- * This method can only be applied to elements which accept child nodes.\r
- * @param {String} msg (optional) A message to display in the mask\r
- * @param {String} msgCls (optional) A css class to apply to the msg element\r
- * @return {Element} The mask element\r
- */\r
- mask : function(msg, msgCls){\r
- var me = this,\r
- dom = me.dom,\r
- dh = Ext.DomHelper,\r
- EXTELMASKMSG = "ext-el-mask-msg",\r
- el,\r
- mask;\r
-\r
- if(me.getStyle("position") == "static"){\r
- me.addClass(XMASKEDRELATIVE);\r
- }\r
- if((el = data(dom, 'maskMsg'))){\r
- el.remove();\r
- }\r
- if((el = data(dom, 'mask'))){\r
- el.remove();\r
- }\r
-\r
- mask = dh.append(dom, {cls : "ext-el-mask"}, true);\r
- data(dom, 'mask', mask);\r
-\r
- me.addClass(XMASKED);\r
- mask.setDisplayed(true);\r
- if(typeof msg == 'string'){\r
- var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);\r
- data(dom, 'maskMsg', mm);\r
- mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;\r
- mm.dom.firstChild.innerHTML = msg;\r
- mm.setDisplayed(true);\r
- mm.center(me);\r
- }\r
- if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically\r
- mask.setSize(undefined, me.getHeight());\r
- }\r
- return mask;\r
- },\r
-\r
- /**\r
- * Removes a previously applied mask.\r
- */\r
- unmask : function(){\r
- var me = this,\r
- dom = me.dom,\r
- mask = data(dom, 'mask'),\r
- maskMsg = data(dom, 'maskMsg');\r
- if(mask){\r
- if(maskMsg){\r
- maskMsg.remove();\r
- data(dom, 'maskMsg', undefined);\r
- }\r
- mask.remove();\r
- data(dom, 'mask', undefined);\r
- }\r
- me.removeClass([XMASKED, XMASKEDRELATIVE]);\r
- },\r
-\r
- /**\r
- * Returns true if this element is masked\r
- * @return {Boolean}\r
- */\r
- isMasked : function(){\r
- var m = data(this.dom, 'mask');\r
- return m && m.isVisible();\r
- },\r
-\r
- /**\r
- * Creates an iframe shim for this element to keep selects and other windowed objects from\r
- * showing through.\r
- * @return {Ext.Element} The new shim element\r
- */\r
- createShim : function(){\r
- var el = document.createElement('iframe'),\r
- shim;\r
- el.frameBorder = '0';\r
- el.className = 'ext-shim';\r
- el.src = Ext.SSL_SECURE_URL;\r
- shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));\r
- shim.autoBoxAdjust = false;\r
- return shim;\r
- }\r
- };\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Convenience method for constructing a KeyMap\r
- * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:\r
- * <code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code>\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.\r
- * @return {Ext.KeyMap} The KeyMap created\r
- */\r
- addKeyListener : function(key, fn, scope){\r
- var config;\r
- if(!Ext.isObject(key) || Ext.isArray(key)){\r
- config = {\r
- key: key,\r
- fn: fn,\r
- scope: scope\r
- };\r
- }else{\r
- config = {\r
- key : key.key,\r
- shift : key.shift,\r
- ctrl : key.ctrl,\r
- alt : key.alt,\r
- fn: fn,\r
- scope: scope\r
- };\r
- }\r
- return new Ext.KeyMap(this, config);\r
- },\r
-\r
- /**\r
- * Creates a KeyMap for this element\r
- * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details\r
- * @return {Ext.KeyMap} The KeyMap created\r
- */\r
- addKeyMap : function(config){\r
- return new Ext.KeyMap(this, config);\r
- }\r
-});(function(){\r
- // contants\r
- var NULL = null,\r
- UNDEFINED = undefined,\r
- TRUE = true,\r
- FALSE = false,\r
- SETX = "setX",\r
- SETY = "setY",\r
- SETXY = "setXY",\r
- LEFT = "left",\r
- BOTTOM = "bottom",\r
- TOP = "top",\r
- RIGHT = "right",\r
- HEIGHT = "height",\r
- WIDTH = "width",\r
- POINTS = "points",\r
- HIDDEN = "hidden",\r
- ABSOLUTE = "absolute",\r
- VISIBLE = "visible",\r
- MOTION = "motion",\r
- POSITION = "position",\r
- EASEOUT = "easeOut",\r
- /*\r
- * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element\r
- */\r
- flyEl = new Ext.Element.Flyweight(),\r
- queues = {},\r
- getObject = function(o){\r
- return o || {};\r
- },\r
- fly = function(dom){\r
- flyEl.dom = dom;\r
- flyEl.id = Ext.id(dom);\r
- return flyEl;\r
- },\r
- /*\r
- * Queueing now stored outside of the element due to closure issues\r
- */\r
- getQueue = function(id){\r
- if(!queues[id]){\r
- queues[id] = [];\r
- }\r
- return queues[id];\r
- },\r
- setQueue = function(id, value){\r
- queues[id] = value;\r
- };\r
- \r
-//Notifies Element that fx methods are available\r
-Ext.enableFx = TRUE;\r
-\r
-/**\r
- * @class Ext.Fx\r
- * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied\r
- * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.\r
- * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be\r
- * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>\r
- * \r
- * <p><b><u>Method Chaining</u></b></p>\r
- * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that\r
- * they return the Element object itself as the method return value, it is not always possible to mix the two in a single\r
- * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.\r
- * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,\r
- * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the\r
- * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/>\r
- *\r
- * <p><b><u>Anchor Options for Motion Effects</u></b></p>\r
- * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element\r
- * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>\r
-<pre>\r
-Value Description\r
------ -----------------------------\r
-tl The top left corner\r
-t The center of the top edge\r
-tr The top right corner\r
-l The center of the left edge\r
-r The center of the right edge\r
-bl The bottom left corner\r
-b The center of the bottom edge\r
-br The bottom right corner\r
-</pre>\r
- * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options\r
- * section below are common options that can be passed to any Fx method unless otherwise noted.</b>\r
- * \r
- * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the\r
- * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together\r
- * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>\r
- * el.slideIn().highlight();\r
- * </code></pre>\r
- * The callback is intended for any additional code that should run once a particular effect has completed. The Element\r
- * being operated upon is passed as the first parameter.\r
- * \r
- * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.\r
- * \r
- * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>\r
- * <li><b><tt>backBoth</tt></b></li>\r
- * <li><b><tt>backIn</tt></b></li>\r
- * <li><b><tt>backOut</tt></b></li>\r
- * <li><b><tt>bounceBoth</tt></b></li>\r
- * <li><b><tt>bounceIn</tt></b></li>\r
- * <li><b><tt>bounceOut</tt></b></li>\r
- * <li><b><tt>easeBoth</tt></b></li>\r
- * <li><b><tt>easeBothStrong</tt></b></li>\r
- * <li><b><tt>easeIn</tt></b></li>\r
- * <li><b><tt>easeInStrong</tt></b></li>\r
- * <li><b><tt>easeNone</tt></b></li>\r
- * <li><b><tt>easeOut</tt></b></li>\r
- * <li><b><tt>easeOutStrong</tt></b></li>\r
- * <li><b><tt>elasticBoth</tt></b></li>\r
- * <li><b><tt>elasticIn</tt></b></li>\r
- * <li><b><tt>elasticOut</tt></b></li>\r
- * </ul></div>\r
- *\r
- * @cfg {String} afterCls A css class to apply after the effect\r
- * @cfg {Number} duration The length of time (in seconds) that the effect should last\r
- * \r
- * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between\r
- * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.\r
- * \r
- * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes\r
- * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to \r
- * effects that end with the element being visually hidden, ignored otherwise)\r
- * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object\r
- * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the\r
- * Element after the effect finishes.\r
- * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs\r
- * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence\r
- * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)\r
- */\r
-Ext.Fx = {\r
- \r
- // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.\r
- // this is useful for replacing switch statements (for example).\r
- switchStatements : function(key, fn, argHash){\r
- return fn.apply(this, argHash[key]);\r
- },\r
- \r
- /**\r
- * Slides the element into view. An anchor point can be optionally passed to set the point of\r
- * origin for the slide effect. This function automatically handles wrapping the element with\r
- * a fixed-size container if needed. See the Fx class overview for valid anchor point options.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element in from the top\r
-el.slideIn();\r
-\r
-// custom: slide the element in from the right with a 2-second duration\r
-el.slideIn('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideIn('t', {\r
- easing: 'easeOut',\r
- duration: .5\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- slideIn : function(anchor, o){ \r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- xy,\r
- r,\r
- b, \r
- wrap, \r
- after,\r
- st,\r
- args, \r
- pt,\r
- bw,\r
- bh;\r
- \r
- anchor = anchor || "t";\r
-\r
- me.queueFx(o, function(){ \r
- xy = fly(dom).getXY();\r
- // fix display to visibility\r
- fly(dom).fixDisplay(); \r
- \r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
- b.right = b.x + b.width;\r
- b.bottom = b.y + b.height;\r
- \r
- // fixed size for slide\r
- fly(dom).setWidth(b.width).setHeight(b.height); \r
- \r
- // wrap if needed\r
- wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);\r
- \r
- st.visibility = VISIBLE;\r
- st.position = ABSOLUTE;\r
- \r
- // clear out temp styles after slide and unwrap\r
- function after(){\r
- fly(dom).fxUnwrap(wrap, r.pos, o);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- }\r
- \r
- // time to calculate the positions \r
- pt = {to: [b.x, b.y]}; \r
- bw = {to: b.width};\r
- bh = {to: b.height};\r
- \r
- function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ \r
- var ret = {};\r
- fly(wrap).setWidth(ww).setHeight(wh);\r
- if(fly(wrap)[sXY]){\r
- fly(wrap)[sXY](sXYval); \r
- }\r
- style[s1] = style[s2] = "0"; \r
- if(w){\r
- ret.width = w\r
- };\r
- if(h){\r
- ret.height = h;\r
- }\r
- if(p){\r
- ret.points = p;\r
- }\r
- return ret;\r
- };\r
-\r
- args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
- t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],\r
- l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],\r
- r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],\r
- b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],\r
- tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],\r
- bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],\r
- br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],\r
- tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]\r
- });\r
- \r
- st.visibility = VISIBLE;\r
- fly(wrap).show();\r
-\r
- arguments.callee.anim = fly(wrap).fxanim(args,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, \r
- after);\r
- });\r
- return me;\r
- },\r
- \r
- /**\r
- * Slides the element out of view. An anchor point can be optionally passed to set the end point\r
- * for the slide effect. When the effect is completed, the element will be hidden (visibility = \r
- * 'hidden') but block elements will still take up space in the document. The element must be removed\r
- * from the DOM using the 'remove' config option if desired. This function automatically handles \r
- * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element out to the top\r
-el.slideOut();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.slideOut('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideOut('t', {\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- slideOut : function(anchor, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- xy = me.getXY(),\r
- wrap,\r
- r,\r
- b,\r
- a,\r
- zero = {to: 0}; \r
- \r
- anchor = anchor || "t";\r
-\r
- me.queueFx(o, function(){\r
- \r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
- b.right = b.x + b.width;\r
- b.bottom = b.y + b.height;\r
- \r
- // fixed size for slide \r
- fly(dom).setWidth(b.width).setHeight(b.height);\r
-\r
- // wrap if needed\r
- wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);\r
- \r
- st.visibility = VISIBLE;\r
- st.position = ABSOLUTE;\r
- fly(wrap).setWidth(b.width).setHeight(b.height); \r
-\r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).fxUnwrap(wrap, r.pos, o);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- } \r
- \r
- function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ \r
- var ret = {};\r
- \r
- style[s1] = style[s2] = "0";\r
- ret[p1] = v1; \r
- if(p2){\r
- ret[p2] = v2; \r
- }\r
- if(p3){\r
- ret[p3] = v3;\r
- }\r
- \r
- return ret;\r
- };\r
- \r
- a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
- t : [st, LEFT, BOTTOM, HEIGHT, zero],\r
- l : [st, RIGHT, TOP, WIDTH, zero],\r
- r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],\r
- b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
- tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],\r
- bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
- br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],\r
- tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]\r
- });\r
- \r
- arguments.callee.anim = fly(wrap).fxanim(a,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, \r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Fades the element out while slowly expanding it in all directions. When the effect is completed, the \r
- * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. \r
- * The element must be removed from the DOM using the 'remove' config option if desired.\r
- * Usage:\r
- *<pre><code>\r
-// default\r
-el.puff();\r
-\r
-// common config options shown with default values\r
-el.puff({\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- puff : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- width,\r
- height,\r
- r;\r
-\r
- me.queueFx(o, function(){\r
- width = fly(dom).getWidth();\r
- height = fly(dom).getHeight();\r
- fly(dom).clearOpacity();\r
- fly(dom).show();\r
-\r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity(); \r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height;\r
- st.fontSize = '';\r
- fly(dom).afterFx(o);\r
- } \r
-\r
- arguments.callee.anim = fly(dom).fxanim({\r
- width : {to : fly(dom).adjustWidth(width * 2)},\r
- height : {to : fly(dom).adjustHeight(height * 2)},\r
- points : {by : [-width * .5, -height * .5]},\r
- opacity : {to : 0},\r
- fontSize: {to : 200, unit: "%"}\r
- },\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT,\r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).\r
- * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still \r
- * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.\r
- * Usage:\r
- *<pre><code>\r
-// default\r
-el.switchOff();\r
-\r
-// all config options shown with default values\r
-el.switchOff({\r
- easing: 'easeIn',\r
- duration: .3,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- switchOff : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- r;\r
-\r
- me.queueFx(o, function(){\r
- fly(dom).clearOpacity();\r
- fly(dom).clip();\r
-\r
- // restore values after effect\r
- r = fly(dom).getFxRestore();\r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity();\r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height; \r
- fly(dom).afterFx(o);\r
- };\r
-\r
- fly(dom).fxanim({opacity : {to : 0.3}}, \r
- NULL, \r
- NULL, \r
- .1, \r
- NULL, \r
- function(){ \r
- fly(dom).clearOpacity();\r
- (function(){ \r
- fly(dom).fxanim({\r
- height : {to : 1},\r
- points : {by : [0, fly(dom).getHeight() * .5]}\r
- }, \r
- o, \r
- MOTION, \r
- 0.3, \r
- 'easeIn', \r
- after);\r
- }).defer(100);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Highlights the Element by setting a color (applies to the background-color by default, but can be\r
- * changed using the "attr" config option) and then fading back to the original color. If no original\r
- * color is available, you should provide the "endColor" config option which will be cleared after the animation.\r
- * Usage:\r
-<pre><code>\r
-// default: highlight background to yellow\r
-el.highlight();\r
-\r
-// custom: highlight foreground text to blue for 2 seconds\r
-el.highlight("0000ff", { attr: 'color', duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.highlight("ffff9c", {\r
- attr: "background-color", //can be any valid CSS property (attribute) that supports a color value\r
- endColor: (current color) or "ffffff",\r
- easing: 'easeIn',\r
- duration: 1\r
-});\r
-</code></pre>\r
- * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */ \r
- highlight : function(color, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- attr = o.attr || "backgroundColor",\r
- a = {},\r
- restore;\r
-\r
- me.queueFx(o, function(){\r
- fly(dom).clearOpacity();\r
- fly(dom).show();\r
-\r
- function after(){\r
- dom.style[attr] = restore;\r
- fly(dom).afterFx(o);\r
- } \r
- restore = dom.style[attr];\r
- a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};\r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o,\r
- 'color',\r
- 1,\r
- 'easeIn', \r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Shows a ripple of exploding, attenuating borders to draw attention to an Element.\r
- * Usage:\r
-<pre><code>\r
-// default: a single light blue ripple\r
-el.frame();\r
-\r
-// custom: 3 red ripples lasting 3 seconds total\r
-el.frame("ff0000", 3, { duration: 3 });\r
-\r
-// common config options shown with default values\r
-el.frame("C3DAF9", 1, {\r
- duration: 1 //duration of each individual ripple.\r
- // Note: Easing is not configurable and will be ignored if included\r
-});\r
-</code></pre>\r
- * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').\r
- * @param {Number} count (optional) The number of ripples to display (defaults to 1)\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- frame : function(color, count, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- proxy,\r
- active;\r
-\r
- me.queueFx(o, function(){\r
- color = color || '#C3DAF9';\r
- if(color.length == 6){\r
- color = '#' + color;\r
- } \r
- count = count || 1;\r
- fly(dom).show();\r
-\r
- var xy = fly(dom).getXY(),\r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},\r
- queue = function(){\r
- proxy = fly(document.body || document.documentElement).createChild({\r
- style:{\r
- position : ABSOLUTE,\r
- 'z-index': 35000, // yee haw\r
- border : '0px solid ' + color\r
- }\r
- });\r
- return proxy.queueFx({}, animFn);\r
- };\r
- \r
- \r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function() {\r
- count = 0;\r
- proxy.stopFx();\r
- }\r
- };\r
- \r
- function animFn(){\r
- var scale = Ext.isBorderBox ? 2 : 1;\r
- active = proxy.anim({\r
- top : {from : b.y, to : b.y - 20},\r
- left : {from : b.x, to : b.x - 20},\r
- borderWidth : {from : 0, to : 10},\r
- opacity : {from : 1, to : 0},\r
- height : {from : b.height, to : b.height + 20 * scale},\r
- width : {from : b.width, to : b.width + 20 * scale}\r
- },{\r
- duration: o.duration || 1,\r
- callback: function() {\r
- proxy.remove();\r
- --count > 0 ? queue() : fly(dom).afterFx(o);\r
- }\r
- });\r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function(){\r
- active.stop();\r
- }\r
- };\r
- };\r
- queue();\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Creates a pause before any subsequent queued effects begin. If there are\r
- * no effects queued after the pause it will have no effect.\r
- * Usage:\r
-<pre><code>\r
-el.pause(1);\r
-</code></pre>\r
- * @param {Number} seconds The length of time to pause (in seconds)\r
- * @return {Ext.Element} The Element\r
- */\r
- pause : function(seconds){ \r
- var dom = this.dom,\r
- t;\r
-\r
- this.queueFx({}, function(){\r
- t = setTimeout(function(){\r
- fly(dom).afterFx({});\r
- }, seconds * 1000);\r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function(){\r
- clearTimeout(t);\r
- fly(dom).afterFx({});\r
- }\r
- };\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Fade an element in (from transparent to opaque). The ending opacity can be specified\r
- * using the <tt>{@link #endOpacity}</tt> config option.\r
- * Usage:\r
-<pre><code>\r
-// default: fade in from opacity 0 to 100%\r
-el.fadeIn();\r
-\r
-// custom: fade in from opacity 0 to 75% over 2 seconds\r
-el.fadeIn({ endOpacity: .75, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeIn({\r
- endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)\r
- easing: 'easeOut',\r
- duration: .5\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- fadeIn : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- to = o.endOpacity || 1;\r
- \r
- me.queueFx(o, function(){\r
- fly(dom).setOpacity(0);\r
- fly(dom).fixDisplay();\r
- dom.style.visibility = VISIBLE;\r
- arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},\r
- o, NULL, .5, EASEOUT, function(){\r
- if(to == 1){\r
- fly(dom).clearOpacity();\r
- }\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Fade an element out (from opaque to transparent). The ending opacity can be specified\r
- * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require\r
- * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.\r
- * Usage:\r
-<pre><code>\r
-// default: fade out from the element's current opacity to 0\r
-el.fadeOut();\r
-\r
-// custom: fade out from the element's current opacity to 25% over 2 seconds\r
-el.fadeOut({ endOpacity: .25, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeOut({\r
- endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- fadeOut : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- style = dom.style,\r
- to = o.endOpacity || 0; \r
- \r
- me.queueFx(o, function(){ \r
- arguments.callee.anim = fly(dom).fxanim({ \r
- opacity : {to : to}},\r
- o, \r
- NULL, \r
- .5, \r
- EASEOUT, \r
- function(){\r
- if(to == 0){\r
- Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? \r
- style.display = "none" :\r
- style.visibility = HIDDEN;\r
- \r
- fly(dom).clearOpacity();\r
- }\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Animates the transition of an element's dimensions from a starting height/width\r
- * to an ending height/width. This method is a convenience implementation of {@link shift}.\r
- * Usage:\r
-<pre><code>\r
-// change height and width to 100x100 pixels\r
-el.scale(100, 100);\r
-\r
-// common config options shown with default values. The height and width will default to\r
-// the element's existing values if passed as null.\r
-el.scale(\r
- [element's width],\r
- [element's height], {\r
- easing: 'easeOut',\r
- duration: .35\r
- }\r
-);\r
-</code></pre>\r
- * @param {Number} width The new width (pass undefined to keep the original width)\r
- * @param {Number} height The new height (pass undefined to keep the original height)\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- scale : function(w, h, o){\r
- this.shift(Ext.apply({}, o, {\r
- width: w,\r
- height: h\r
- }));\r
- return this;\r
- },\r
-\r
- /**\r
- * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.\r
- * Any of these properties not specified in the config object will not be changed. This effect \r
- * requires that at least one new dimension, position or opacity setting must be passed in on\r
- * the config object in order for the function to have any effect.\r
- * Usage:\r
-<pre><code>\r
-// slide the element horizontally to x position 200 while changing the height and opacity\r
-el.shift({ x: 200, height: 50, opacity: .8 });\r
-\r
-// common config options shown with default values.\r
-el.shift({\r
- width: [element's width],\r
- height: [element's height],\r
- x: [element's x position],\r
- y: [element's y position],\r
- opacity: [element's opacity],\r
- easing: 'easeOut',\r
- duration: .35\r
-});\r
-</code></pre>\r
- * @param {Object} options Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- shift : function(o){\r
- o = getObject(o);\r
- var dom = this.dom,\r
- a = {};\r
- \r
- this.queueFx(o, function(){\r
- for (var prop in o) {\r
- if (o[prop] != UNDEFINED) { \r
- a[prop] = {to : o[prop]}; \r
- }\r
- } \r
- \r
- a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;\r
- a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; \r
- \r
- if (a.x || a.y || a.xy) {\r
- a.points = a.xy || \r
- {to : [ a.x ? a.x.to : fly(dom).getX(),\r
- a.y ? a.y.to : fly(dom).getY()]}; \r
- }\r
-\r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o, \r
- MOTION, \r
- .35, \r
- EASEOUT, \r
- function(){\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Slides the element while fading it out of view. An anchor point can be optionally passed to set the \r
- * ending point of the effect.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element downward while fading out\r
-el.ghost();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.ghost('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.ghost('b', {\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- ghost : function(anchor, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- a = {opacity: {to: 0}, points: {}},\r
- pt = a.points,\r
- r,\r
- w,\r
- h;\r
- \r
- anchor = anchor || "b";\r
-\r
- me.queueFx(o, function(){\r
- // restore values after effect\r
- r = fly(dom).getFxRestore();\r
- w = fly(dom).getWidth();\r
- h = fly(dom).getHeight();\r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity();\r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- }\r
- \r
- pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {\r
- t : [0, -h],\r
- l : [-w, 0],\r
- r : [w, 0],\r
- b : [0, h],\r
- tl : [-w, -h],\r
- bl : [-w, h],\r
- br : [w, h],\r
- tr : [w, -h] \r
- });\r
- \r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Ensures that all effects queued after syncFx is called on the element are\r
- * run concurrently. This is the opposite of {@link #sequenceFx}.\r
- * @return {Ext.Element} The Element\r
- */\r
- syncFx : function(){\r
- var me = this;\r
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
- block : FALSE,\r
- concurrent : TRUE,\r
- stopFx : FALSE\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Ensures that all effects queued after sequenceFx is called on the element are\r
- * run in sequence. This is the opposite of {@link #syncFx}.\r
- * @return {Ext.Element} The Element\r
- */\r
- sequenceFx : function(){\r
- var me = this;\r
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
- block : FALSE,\r
- concurrent : FALSE,\r
- stopFx : FALSE\r
- });\r
- return me;\r
- },\r
-\r
- /* @private */\r
- nextFx : function(){ \r
- var ef = getQueue(this.dom.id)[0];\r
- if(ef){\r
- ef.call(this);\r
- }\r
- },\r
-\r
- /**\r
- * Returns true if the element has any effects actively running or queued, else returns false.\r
- * @return {Boolean} True if element has active effects, else false\r
- */\r
- hasActiveFx : function(){\r
- return getQueue(this.dom.id)[0];\r
- },\r
-\r
- /**\r
- * Stops any running effects and clears the element's internal effects queue if it contains\r
- * any additional effects that haven't started yet.\r
- * @return {Ext.Element} The Element\r
- */\r
- stopFx : function(finish){\r
- var me = this,\r
- id = me.dom.id;\r
- if(me.hasActiveFx()){\r
- var cur = getQueue(id)[0];\r
- if(cur && cur.anim){\r
- if(cur.anim.isAnimated){\r
- setQueue(id, [cur]); //clear\r
- cur.anim.stop(finish !== undefined ? finish : TRUE);\r
- }else{\r
- setQueue(id, []);\r
- }\r
- }\r
- }\r
- return me;\r
- },\r
-\r
- /* @private */\r
- beforeFx : function(o){\r
- if(this.hasActiveFx() && !o.concurrent){\r
- if(o.stopFx){\r
- this.stopFx();\r
- return TRUE;\r
- }\r
- return FALSE;\r
- }\r
- return TRUE;\r
- },\r
-\r
- /**\r
- * Returns true if the element is currently blocking so that no other effect can be queued\r
- * until this effect is finished, else returns false if blocking is not set. This is commonly\r
- * used to ensure that an effect initiated by a user action runs to completion prior to the\r
- * same effect being restarted (e.g., firing only one effect even if the user clicks several times).\r
- * @return {Boolean} True if blocking, else false\r
- */\r
- hasFxBlock : function(){\r
- var q = getQueue(this.dom.id);\r
- return q && q[0] && q[0].block;\r
- },\r
-\r
- /* @private */\r
- queueFx : function(o, fn){\r
- var me = fly(this.dom);\r
- if(!me.hasFxBlock()){\r
- Ext.applyIf(o, me.fxDefaults);\r
- if(!o.concurrent){\r
- var run = me.beforeFx(o);\r
- fn.block = o.block;\r
- getQueue(me.dom.id).push(fn);\r
- if(run){\r
- me.nextFx();\r
- }\r
- }else{\r
- fn.call(me);\r
- }\r
- }\r
- return me;\r
- },\r
-\r
- /* @private */\r
- fxWrap : function(pos, o, vis){ \r
- var dom = this.dom,\r
- wrap,\r
- wrapXY;\r
- if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ \r
- if(o.fixPosition){\r
- wrapXY = fly(dom).getXY();\r
- }\r
- var div = document.createElement("div");\r
- div.style.visibility = vis;\r
- wrap = dom.parentNode.insertBefore(div, dom);\r
- fly(wrap).setPositioning(pos);\r
- if(fly(wrap).isStyle(POSITION, "static")){\r
- fly(wrap).position("relative");\r
- }\r
- fly(dom).clearPositioning('auto');\r
- fly(wrap).clip();\r
- wrap.appendChild(dom);\r
- if(wrapXY){\r
- fly(wrap).setXY(wrapXY);\r
- }\r
- }\r
- return wrap;\r
- },\r
-\r
- /* @private */\r
- fxUnwrap : function(wrap, pos, o){ \r
- var dom = this.dom;\r
- fly(dom).clearPositioning();\r
- fly(dom).setPositioning(pos);\r
- if(!o.wrap){\r
- var pn = fly(wrap).dom.parentNode;
- pn.insertBefore(dom, wrap); \r
- fly(wrap).remove();\r
- }\r
- },\r
-\r
- /* @private */\r
- getFxRestore : function(){\r
- var st = this.dom.style;\r
- return {pos: this.getPositioning(), width: st.width, height : st.height};\r
- },\r
-\r
- /* @private */\r
- afterFx : function(o){\r
- var dom = this.dom,\r
- id = dom.id;\r
- if(o.afterStyle){\r
- fly(dom).setStyle(o.afterStyle); \r
- }\r
- if(o.afterCls){\r
- fly(dom).addClass(o.afterCls);\r
- }\r
- if(o.remove == TRUE){\r
- fly(dom).remove();\r
- }\r
- if(o.callback){\r
- o.callback.call(o.scope, fly(dom));\r
- }\r
- if(!o.concurrent){\r
- getQueue(id).shift();\r
- fly(dom).nextFx();\r
- }\r
- },\r
-\r
- /* @private */\r
- fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
- animType = animType || 'run';\r
- opt = opt || {};\r
- var anim = Ext.lib.Anim[animType](\r
- this.dom, \r
- args,\r
- (opt.duration || defaultDur) || .35,\r
- (opt.easing || defaultEase) || EASEOUT,\r
- cb, \r
- this\r
- );\r
- opt.anim = anim;\r
- return anim;\r
- }\r
-};\r
-\r
-// backwards compat\r
-Ext.Fx.resize = Ext.Fx.scale;\r
-\r
-//When included, Ext.Fx is automatically applied to Element so that all basic\r
-//effects are available directly via the Element API\r
-Ext.Element.addMethods(Ext.Fx);\r
+ // private
+ doFormUpload : function(o, ps, url){
+ var id = Ext.id(),
+ doc = document,
+ frame = doc.createElement('iframe'),
+ form = Ext.getDom(o.form),
+ hiddens = [],
+ hd,
+ encoding = 'multipart/form-data',
+ buf = {
+ target: form.target,
+ method: form.method,
+ encoding: form.encoding,
+ enctype: form.enctype,
+ action: form.action
+ };
+
+ Ext.fly(frame).set({
+ id: id,
+ name: id,
+ cls: 'x-hidden'
+
+ });
+
+ doc.body.appendChild(frame);
+
+ //Reset the Frame to neutral domain
+ Ext.fly(frame).set({
+ src : Ext.SSL_SECURE_URL
+ });
+
+ // This is required so that IE doesn't pop the response up in a new window.
+ if(Ext.isIE){
+ document.frames[id].name = id;
+ }
+
+
+ Ext.fly(form).set({
+ target: id,
+ method: POST,
+ enctype: encoding,
+ encoding: encoding,
+ action: url || buf.action
+ });
+
+ // add dynamic params
+ Ext.iterate(Ext.urlDecode(ps, false), function(k, v){
+ hd = doc.createElement('input');
+ Ext.fly(hd).set({
+ type: 'hidden',
+ value: v,
+ name: k
+ });
+ form.appendChild(hd);
+ hiddens.push(hd);
+ });
+
+ function cb(){
+ var me = this,
+ // bogus response object
+ r = {responseText : '',
+ responseXML : null,
+ argument : o.argument},
+ doc,
+ firstChild;
+
+ try{
+ doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
+ if(doc){
+ if(doc.body){
+ if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea
+ r.responseText = firstChild.value;
+ }else{
+ r.responseText = doc.body.innerHTML;
+ }
+ }
+ //in IE the document may still have a body even if returns XML.
+ r.responseXML = doc.XMLDocument || doc;
+ }
+ }
+ catch(e) {}
+
+ Ext.EventManager.removeListener(frame, LOAD, cb, me);
+
+ me.fireEvent(REQUESTCOMPLETE, me, r, o);
+
+ function runCallback(fn, scope, args){
+ if(Ext.isFunction(fn)){
+ fn.apply(scope, args);
+ }
+ }
+
+ runCallback(o.success, o.scope, [r, o]);
+ runCallback(o.callback, o.scope, [o, true, r]);
+
+ if(!me.debugUploads){
+ setTimeout(function(){Ext.removeNode(frame);}, 100);
+ }
+ }
+
+ Ext.EventManager.on(frame, LOAD, cb, this);
+ form.submit();
+
+ Ext.fly(form).set(buf);
+ Ext.each(hiddens, function(h) {
+ Ext.removeNode(h);
+ });
+ }
+ });
})();
-/**\r
- * @class Ext.CompositeElementLite\r
- * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter\r
- * members, or to perform collective actions upon the whole set.</p>\r
- * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and\r
- * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>\r
- * Example:<pre><code>\r
-var els = Ext.select("#some-el div.some-class");\r
-// or select directly from an existing element\r
-var el = Ext.get('some-el');\r
-el.select('div.some-class');\r
-\r
-els.setWidth(100); // all elements become 100 width\r
-els.hide(true); // all elements fade out and hide\r
-// or\r
-els.setWidth(100).hide(true);\r
-</code>\r
- */\r
-Ext.CompositeElementLite = function(els, root){\r
- /**\r
- * <p>The Array of DOM elements which this CompositeElement encapsulates. Read-only.</p>\r
- * <p>This will not <i>usually</i> be accessed in developers' code, but developers wishing\r
- * to augment the capabilities of the CompositeElementLite class may use it when adding\r
- * methods to the class.</p>\r
- * <p>For example to add the <code>nextAll</code> method to the class to <b>add</b> all\r
- * following siblings of selected elements, the code would be</p><code><pre>\r
-Ext.override(Ext.CompositeElementLite, {\r
- nextAll: function() {\r
- var els = this.elements, i, l = els.length, n, r = [], ri = -1;\r
-\r
-// Loop through all elements in this Composite, accumulating\r
-// an Array of all siblings.\r
- for (i = 0; i < l; i++) {\r
- for (n = els[i].nextSibling; n; n = n.nextSibling) {\r
- r[++ri] = n;\r
- }\r
- }\r
-\r
-// Add all found siblings to this Composite\r
- return this.add(r);\r
- }\r
-});</pre></code>\r
- * @type Array\r
- * @property elements\r
- */\r
- this.elements = [];\r
- this.add(els, root);\r
- this.el = new Ext.Element.Flyweight();\r
-};\r
-\r
-Ext.CompositeElementLite.prototype = {\r
- isComposite: true, \r
- \r
- // private\r
- getElement : function(el){\r
- // Set the shared flyweight dom property to the current element\r
- var e = this.el;\r
- e.dom = el;\r
- e.id = el.id;\r
- return e;\r
- },\r
- \r
- // private\r
- transformElement : function(el){\r
- return Ext.getDom(el);\r
- },\r
- \r
- /**\r
- * Returns the number of elements in this Composite.\r
- * @return Number\r
- */\r
- getCount : function(){\r
- return this.elements.length;\r
- }, \r
- /**\r
- * Adds elements to this Composite object.\r
- * @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.\r
- * @return {CompositeElement} This Composite object.\r
- */\r
- add : function(els, root){\r
- var me = this,\r
- elements = me.elements;\r
- if(!els){\r
- return this;\r
- }\r
- if(Ext.isString(els)){\r
- els = Ext.Element.selectorFunction(els, root);\r
- }else if(els.isComposite){\r
- els = els.elements;\r
- }else if(!Ext.isIterable(els)){\r
- els = [els];\r
- }\r
- \r
- for(var i = 0, len = els.length; i < len; ++i){\r
- elements.push(me.transformElement(els[i]));\r
- }\r
- return me;\r
- },\r
- \r
- invoke : function(fn, args){\r
- var me = this,\r
- els = me.elements,\r
- len = els.length, \r
- e, \r
- i;\r
- \r
- for(i = 0; i < len; i++) {\r
- e = els[i];\r
- if(e){\r
- Ext.Element.prototype[fn].apply(me.getElement(e), args);\r
- }\r
- }\r
- return me;\r
- },\r
- /**\r
- * Returns a flyweight Element of the dom element object at the specified index\r
- * @param {Number} index\r
- * @return {Ext.Element}\r
- */\r
- item : function(index){\r
- var me = this,\r
- el = me.elements[index],\r
- out = null;\r
-\r
- if(el){\r
- out = me.getElement(el);\r
- }\r
- return out;\r
- },\r
-\r
- // fixes scope with flyweight\r
- addListener : function(eventName, handler, scope, opt){\r
- var els = this.elements,\r
- len = els.length,\r
- i, e;\r
- \r
- for(i = 0; i<len; i++) {\r
- e = els[i];\r
- if(e) {\r
- Ext.EventManager.on(e, eventName, handler, scope || e, opt);\r
- }\r
- }\r
- return this;\r
- },\r
- /**\r
- * <p>Calls the passed function for each element in this composite.</p>\r
- * @param {Function} fn The function to call. The function is passed the following parameters:<ul>\r
- * <li><b>el</b> : Element<div class="sub-desc">The current Element in the iteration.\r
- * <b>This is the flyweight (shared) Ext.Element instance, so if you require a\r
- * a reference to the dom node, use el.dom.</b></div></li>\r
- * <li><b>c</b> : Composite<div class="sub-desc">This Composite object.</div></li>\r
- * <li><b>idx</b> : Number<div class="sub-desc">The zero-based index in the iteration.</div></li>\r
- * </ul>\r
- * @param {Object} scope (optional) The scope (<i>this</i> reference) in which the function is executed. (defaults to the Element)\r
- * @return {CompositeElement} this\r
- */\r
- each : function(fn, scope){ \r
- var me = this,\r
- els = me.elements,\r
- len = els.length,\r
- i, e;\r
- \r
- for(i = 0; i<len; i++) {\r
- e = els[i];\r
- if(e){\r
- e = this.getElement(e);\r
- if(fn.call(scope || e, e, me, i) === false){\r
- break;\r
- }\r
- }\r
- }\r
- return me;\r
- },\r
- \r
- /**\r
- * Clears this Composite and adds the elements passed.\r
- * @param {Mixed} els Either an array of DOM elements, or another Composite from which to fill this Composite.\r
- * @return {CompositeElement} this\r
- */\r
- fill : function(els){\r
- var me = this;\r
- me.elements = [];\r
- me.add(els);\r
- return me;\r
- },\r
- \r
- /**\r
- * Filters this composite to only elements that match the passed selector.\r
- * @param {String/Function} selector A string CSS selector or a comparison function.\r
- * The comparison function will be called with the following arguments:<ul>\r
- * <li><code>el</code> : Ext.Element<div class="sub-desc">The current DOM element.</div></li>\r
- * <li><code>index</code> : Number<div class="sub-desc">The current index within the collection.</div></li>\r
- * </ul>\r
- * @return {CompositeElement} this\r
- */\r
- filter : function(selector){\r
- var els = [],\r
- me = this,\r
- elements = me.elements,\r
- fn = Ext.isFunction(selector) ? selector\r
- : function(el){\r
- return el.is(selector);\r
- };\r
- \r
- \r
- me.each(function(el, self, i){\r
- if(fn(el, i) !== false){\r
- els[els.length] = me.transformElement(el);\r
- }\r
- });\r
- me.elements = els;\r
- return me;\r
- },\r
- \r
- /**\r
- * Find the index of the passed element within the composite collection.\r
- * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.\r
- * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.\r
- */\r
- indexOf : function(el){\r
- return this.elements.indexOf(this.transformElement(el));\r
- },\r
- \r
- /**\r
- * Replaces the specified element with the passed element.\r
- * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite\r
- * to replace.\r
- * @param {Mixed} replacement The id of an element or the Element itself.\r
- * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.\r
- * @return {CompositeElement} this\r
- */ \r
- replaceElement : function(el, replacement, domReplace){\r
- var index = !isNaN(el) ? el : this.indexOf(el),\r
- d;\r
- if(index > -1){\r
- replacement = Ext.getDom(replacement);\r
- if(domReplace){\r
- d = this.elements[index];\r
- d.parentNode.insertBefore(replacement, d);\r
- Ext.removeNode(d);\r
- }\r
- this.elements.splice(index, 1, replacement);\r
- }\r
- return this;\r
- },\r
- \r
- /**\r
- * Removes all elements.\r
- */\r
- clear : function(){\r
- this.elements = [];\r
- }\r
-};\r
-\r
-Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;\r
-\r
-(function(){\r
-var fnName,\r
- ElProto = Ext.Element.prototype,\r
- CelProto = Ext.CompositeElementLite.prototype;\r
- \r
-for(fnName in ElProto){\r
- if(Ext.isFunction(ElProto[fnName])){\r
- (function(fnName){ \r
- CelProto[fnName] = CelProto[fnName] || function(){\r
- return this.invoke(fnName, arguments);\r
- };\r
- }).call(CelProto, fnName);\r
- \r
- }\r
-}\r
-})();\r
-\r
-if(Ext.DomQuery){\r
- Ext.Element.selectorFunction = Ext.DomQuery.select;\r
-} \r
-\r
-/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext.Element\r
- * @method select\r
- */\r
-Ext.Element.select = function(selector, root){\r
- var els;\r
- if(typeof selector == "string"){\r
- els = Ext.Element.selectorFunction(selector, root);\r
- }else if(selector.length !== undefined){\r
- els = selector;\r
- }else{\r
- throw "Invalid selector";\r
- }\r
- return new Ext.CompositeElementLite(els);\r
-};\r
-/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext\r
- * @method select\r
- */\r
-Ext.select = Ext.Element.select;/**\r
- * @class Ext.CompositeElementLite\r
- */\r
-Ext.apply(Ext.CompositeElementLite.prototype, { \r
- addElements : function(els, root){\r
- if(!els){\r
- return this;\r
- }\r
- if(typeof els == "string"){\r
- els = Ext.Element.selectorFunction(els, root);\r
- }\r
- var yels = this.elements; \r
- Ext.each(els, function(e) {\r
- yels.push(Ext.get(e));\r
- });\r
- return this;\r
- },\r
- \r
- /**\r
- * Returns the first Element\r
- * @return {Ext.Element}\r
- */\r
- first : function(){\r
- return this.item(0);\r
- }, \r
- \r
- /**\r
- * Returns the last Element\r
- * @return {Ext.Element}\r
- */\r
- last : function(){\r
- return this.item(this.getCount()-1);\r
- },\r
- \r
- /**\r
- * Returns true if this composite contains the passed element\r
- * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.\r
- * @return Boolean\r
- */\r
- contains : function(el){\r
- return this.indexOf(el) != -1;\r
- },
-
- /**\r
- * Removes the specified element(s).\r
- * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite\r
- * or an array of any of those.\r
- * @param {Boolean} removeDom (optional) True to also remove the element from the document\r
- * @return {CompositeElement} this\r
- */\r
- removeElement : function(keys, removeDom){\r
- var me = this,\r
- els = this.elements, \r
- el; \r
- Ext.each(keys, function(val){\r
- if ((el = (els[val] || els[val = me.indexOf(val)]))) {\r
- if(removeDom){\r
- if(el.dom){\r
- el.remove();\r
- }else{\r
- Ext.removeNode(el);\r
- }\r
- }\r
- els.splice(val, 1); \r
- }\r
- });\r
- return this;\r
- } \r
+
+/**
+ * @class Ext.Ajax
+ * @extends Ext.data.Connection
+ * <p>The global Ajax request class that provides a simple way to make Ajax requests
+ * with maximum flexibility.</p>
+ * <p>Since Ext.Ajax is a singleton, you can set common properties/events for it once
+ * and override them at the request function level only if necessary.</p>
+ * <p>Common <b>Properties</b> you may want to set are:<div class="mdetail-params"><ul>
+ * <li><b><tt>{@link #method}</tt></b><p class="sub-desc"></p></li>
+ * <li><b><tt>{@link #extraParams}</tt></b><p class="sub-desc"></p></li>
+ * <li><b><tt>{@link #url}</tt></b><p class="sub-desc"></p></li>
+ * </ul></div>
+ * <pre><code>
+// Default headers to pass in every request
+Ext.Ajax.defaultHeaders = {
+ 'Powered-By': 'Ext'
+};
+ * </code></pre>
+ * </p>
+ * <p>Common <b>Events</b> you may want to set are:<div class="mdetail-params"><ul>
+ * <li><b><tt>{@link Ext.data.Connection#beforerequest beforerequest}</tt></b><p class="sub-desc"></p></li>
+ * <li><b><tt>{@link Ext.data.Connection#requestcomplete requestcomplete}</tt></b><p class="sub-desc"></p></li>
+ * <li><b><tt>{@link Ext.data.Connection#requestexception requestexception}</tt></b><p class="sub-desc"></p></li>
+ * </ul></div>
+ * <pre><code>
+// Example: show a spinner during all Ajax requests
+Ext.Ajax.on('beforerequest', this.showSpinner, this);
+Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
+Ext.Ajax.on('requestexception', this.hideSpinner, this);
+ * </code></pre>
+ * </p>
+ * <p>An example request:</p>
+ * <pre><code>
+// Basic request
+Ext.Ajax.{@link Ext.data.Connection#request request}({
+ url: 'foo.php',
+ success: someFn,
+ failure: otherFn,
+ headers: {
+ 'my-header': 'foo'
+ },
+ params: { foo: 'bar' }
+});
+
+// Simple ajax form submission
+Ext.Ajax.{@link Ext.data.Connection#request request}({
+ form: 'some-form',
+ params: 'foo=bar'
+});
+ * </code></pre>
+ * </p>
+ * @singleton
+ */
+Ext.Ajax = new Ext.data.Connection({
+ /**
+ * @cfg {String} url @hide
+ */
+ /**
+ * @cfg {Object} extraParams @hide
+ */
+ /**
+ * @cfg {Object} defaultHeaders @hide
+ */
+ /**
+ * @cfg {String} method (Optional) @hide
+ */
+ /**
+ * @cfg {Number} timeout (Optional) @hide
+ */
+ /**
+ * @cfg {Boolean} autoAbort (Optional) @hide
+ */
+
+ /**
+ * @cfg {Boolean} disableCaching (Optional) @hide
+ */
+
+ /**
+ * @property disableCaching
+ * True to add a unique cache-buster param to GET requests. (defaults to true)
+ * @type Boolean
+ */
+ /**
+ * @property url
+ * The default URL to be used for requests to the server. (defaults to undefined)
+ * If the server receives all requests through one URL, setting this once is easier than
+ * entering it on every request.
+ * @type String
+ */
+ /**
+ * @property extraParams
+ * An object containing properties which are used as extra parameters to each request made
+ * by this object (defaults to undefined). Session information and other data that you need
+ * to pass with each request are commonly put here.
+ * @type Object
+ */
+ /**
+ * @property defaultHeaders
+ * An object containing request headers which are added to each request made by this object
+ * (defaults to undefined).
+ * @type Object
+ */
+ /**
+ * @property method
+ * The default HTTP method to be used for requests. Note that this is case-sensitive and
+ * should be all caps (defaults to undefined; if not set but params are present will use
+ * <tt>"POST"</tt>, otherwise will use <tt>"GET"</tt>.)
+ * @type String
+ */
+ /**
+ * @property timeout
+ * The timeout in milliseconds to be used for requests. (defaults to 30000)
+ * @type Number
+ */
+
+ /**
+ * @property autoAbort
+ * Whether a new request should abort any pending requests. (defaults to false)
+ * @type Boolean
+ */
+ autoAbort : false,
+
+ /**
+ * Serialize the passed form into a url encoded string
+ * @param {String/HTMLElement} form
+ * @return {String}
+ */
+ serializeForm : function(form){
+ return Ext.lib.Ajax.serializeForm(form);
+ }
});
-/**\r
- * @class Ext.CompositeElement\r
- * @extends Ext.CompositeElementLite\r
- * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter\r
- * members, or to perform collective actions upon the whole set.</p>\r
- * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and\r
- * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>\r
- * <p>All methods return <i>this</i> and can be chained.</p>\r
- * Usage:\r
-<pre><code>\r
-var els = Ext.select("#some-el div.some-class", true);\r
-// or select directly from an existing element\r
-var el = Ext.get('some-el');\r
-el.select('div.some-class', true);\r
-\r
-els.setWidth(100); // all elements become 100 width\r
-els.hide(true); // all elements fade out and hide\r
-// or\r
-els.setWidth(100).hide(true);\r
-</code></pre>\r
- */\r
-Ext.CompositeElement = function(els, root){\r
- this.elements = [];\r
- this.add(els, root);\r
-};\r
-\r
-Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {\r
- \r
- // private\r
- getElement : function(el){\r
- // In this case just return it, since we already have a reference to it\r
- return el;\r
- },\r
- \r
- // private\r
- transformElement : function(el){\r
- return Ext.get(el);\r
- }\r
-\r
- /**\r
- * Adds elements to this composite.\r
- * @param {String/Array} els A string CSS selector, an array of elements or an element\r
- * @return {CompositeElement} this\r
- */\r
-\r
- /**\r
- * Returns the Element object at the specified index\r
- * @param {Number} index\r
- * @return {Ext.Element}\r
- */\r
-\r
- /**\r
- * Iterates each <code>element</code> in this <code>composite</code>\r
- * calling the supplied function using {@link Ext#each}.\r
- * @param {Function} fn The function to be called with each\r
- * <code>element</code>. If the supplied function returns <tt>false</tt>,\r
- * iteration stops. This function is called with the following arguments:\r
- * <div class="mdetail-params"><ul>\r
- * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>\r
- * in the <code>composite</code></div></li>\r
- * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>\r
- * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>\r
- * </ul></div>\r
- * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.\r
- * Defaults to the <code>element</code> at the current <code>index</code>\r
- * within the composite.\r
- * @return {CompositeElement} this\r
- */\r
-});\r
-\r
-/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext.Element\r
- * @method select\r
- */\r
-Ext.Element.select = function(selector, unique, root){\r
- var els;\r
- if(typeof selector == "string"){\r
- els = Ext.Element.selectorFunction(selector, root);\r
- }else if(selector.length !== undefined){\r
- els = selector;\r
- }else{\r
- throw "Invalid selector";\r
- }\r
-\r
- return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);\r
-};\r
-\r
-/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext.Element\r
- * @method select\r
- */\r
-Ext.select = Ext.Element.select;(function(){\r
- var BEFOREREQUEST = "beforerequest",\r
- REQUESTCOMPLETE = "requestcomplete",\r
- REQUESTEXCEPTION = "requestexception",\r
- UNDEFINED = undefined,\r
- LOAD = 'load',\r
- POST = 'POST',\r
- GET = 'GET',\r
- WINDOW = window;\r
-\r
- /**\r
- * @class Ext.data.Connection\r
- * @extends Ext.util.Observable\r
- * <p>The class encapsulates a connection to the page's originating domain, allowing requests to be made\r
- * either to a configured URL, or to a URL specified at request time.</p>\r
- * <p>Requests made by this class are asynchronous, and will return immediately. No data from\r
- * the server will be available to the statement immediately following the {@link #request} call.\r
- * To process returned data, use a\r
- * <a href="#request-option-success" ext:member="request-option-success" ext:cls="Ext.data.Connection">success callback</a>\r
- * in the request options object,\r
- * or an {@link #requestcomplete event listener}.</p>\r
- * <p><h3>File Uploads</h3><a href="#request-option-isUpload" ext:member="request-option-isUpload" ext:cls="Ext.data.Connection">File uploads</a> are not performed using normal "Ajax" techniques, that\r
- * is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard\r
- * manner with the DOM <tt><form></tt> element temporarily modified to have its\r
- * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer\r
- * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document\r
- * but removed after the return data has been gathered.</p>\r
- * <p>The server response is parsed by the browser to create the document for the IFRAME. If the\r
- * server is using JSON to send the return object, then the\r
- * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header\r
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>\r
- * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode\r
- * "<" as "&lt;", "&" as "&amp;" etc.</p>\r
- * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object\r
- * is created containing a <tt>responseText</tt> property in order to conform to the\r
- * requirements of event handlers and callbacks.</p>\r
- * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>\r
- * and some server technologies (notably JEE) may require some custom processing in order to\r
- * retrieve parameter names and parameter values from the packet content.</p>\r
- * @constructor\r
- * @param {Object} config a configuration object.\r
- */\r
- Ext.data.Connection = function(config){\r
- Ext.apply(this, config);\r
- this.addEvents(\r
- /**\r
- * @event beforerequest\r
- * Fires before a network request is made to retrieve a data object.\r
- * @param {Connection} conn This Connection object.\r
- * @param {Object} options The options config object passed to the {@link #request} method.\r
- */\r
- BEFOREREQUEST,\r
- /**\r
- * @event requestcomplete\r
- * Fires if the request was successfully completed.\r
- * @param {Connection} conn This Connection object.\r
- * @param {Object} response The XHR object containing the response data.\r
- * See <a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object</a>\r
- * for details.\r
- * @param {Object} options The options config object passed to the {@link #request} method.\r
- */\r
- REQUESTCOMPLETE,\r
- /**\r
- * @event requestexception\r
- * Fires if an error HTTP status was returned from the server.\r
- * See <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">HTTP Status Code Definitions</a>\r
- * for details of HTTP status codes.\r
- * @param {Connection} conn This Connection object.\r
- * @param {Object} response The XHR object containing the response data.\r
- * See <a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object</a>\r
- * for details.\r
- * @param {Object} options The options config object passed to the {@link #request} method.\r
- */\r
- REQUESTEXCEPTION\r
- );\r
- Ext.data.Connection.superclass.constructor.call(this);\r
- };\r
-\r
- Ext.extend(Ext.data.Connection, Ext.util.Observable, {\r
- /**\r
- * @cfg {String} url (Optional) <p>The default URL to be used for requests to the server. Defaults to undefined.</p>\r
- * <p>The <code>url</code> config may be a function which <i>returns</i> the URL to use for the Ajax request. The scope\r
- * (<code><b>this</b></code> reference) of the function is the <code>scope</code> option passed to the {@link #request} method.</p>\r
- */\r
- /**\r
- * @cfg {Object} extraParams (Optional) An object containing properties which are used as\r
- * extra parameters to each request made by this object. (defaults to undefined)\r
- */\r
- /**\r
- * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added\r
- * to each request made by this object. (defaults to undefined)\r
- */\r
- /**\r
- * @cfg {String} method (Optional) The default HTTP method to be used for requests.\r
- * (defaults to undefined; if not set, but {@link #request} params are present, POST will be used;\r
- * otherwise, GET will be used.)\r
- */\r
- /**\r
- * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)\r
- */\r
- timeout : 30000,\r
- /**\r
- * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)\r
- * @type Boolean\r
- */\r
- autoAbort:false,\r
-\r
- /**\r
- * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)\r
- * @type Boolean\r
- */\r
- disableCaching: true,\r
-\r
- /**\r
- * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching\r
- * through a cache buster. Defaults to '_dc'\r
- * @type String\r
- */\r
- disableCachingParam: '_dc',\r
-\r
- /**\r
- * <p>Sends an HTTP request to a remote server.</p>\r
- * <p><b>Important:</b> Ajax server requests are asynchronous, and this call will\r
- * return before the response has been received. Process any returned data\r
- * in a callback function.</p>\r
- * <pre><code>\r
-Ext.Ajax.request({\r
- url: 'ajax_demo/sample.json',\r
- success: function(response, opts) {\r
- var obj = Ext.decode(response.responseText);\r
- console.dir(obj);\r
- },\r
- failure: function(response, opts) {\r
- console.log('server-side failure with status code ' + response.status);\r
- }\r
-});\r
- * </code></pre>\r
- * <p>To execute a callback function in the correct scope, use the <tt>scope</tt> option.</p>\r
- * @param {Object} options An object which may contain the following properties:<ul>\r
- * <li><b>url</b> : String/Function (Optional)<div class="sub-desc">The URL to\r
- * which to send the request, or a function to call which returns a URL string. The scope of the\r
- * function is specified by the <tt>scope</tt> option. Defaults to the configured\r
- * <tt>{@link #url}</tt>.</div></li>\r
- * <li><b>params</b> : Object/String/Function (Optional)<div class="sub-desc">\r
- * An object containing properties which are used as parameters to the\r
- * request, a url encoded string or a function to call to get either. The scope of the function\r
- * is specified by the <tt>scope</tt> option.</div></li>\r
- * <li><b>method</b> : String (Optional)<div class="sub-desc">The HTTP method to use\r
- * for the request. Defaults to the configured method, or if no method was configured,\r
- * "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that\r
- * the method name is case-sensitive and should be all caps.</div></li>\r
- * <li><b>callback</b> : Function (Optional)<div class="sub-desc">The\r
- * function to be called upon receipt of the HTTP response. The callback is\r
- * called regardless of success or failure and is passed the following\r
- * parameters:<ul>\r
- * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>\r
- * <li><b>success</b> : Boolean<div class="sub-desc">True if the request succeeded.</div></li>\r
- * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.\r
- * See <a href="http://www.w3.org/TR/XMLHttpRequest/">http://www.w3.org/TR/XMLHttpRequest/</a> for details about\r
- * accessing elements of the response.</div></li>\r
- * </ul></div></li>\r
- * <li><a id="request-option-success"></a><b>success</b> : Function (Optional)<div class="sub-desc">The function\r
- * to be called upon success of the request. The callback is passed the following\r
- * parameters:<ul>\r
- * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.</div></li>\r
- * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>\r
- * </ul></div></li>\r
- * <li><b>failure</b> : Function (Optional)<div class="sub-desc">The function\r
- * to be called upon failure of the request. The callback is passed the\r
- * following parameters:<ul>\r
- * <li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.</div></li>\r
- * <li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>\r
- * </ul></div></li>\r
- * <li><b>scope</b> : Object (Optional)<div class="sub-desc">The scope in\r
- * which to execute the callbacks: The "this" object for the callback function. If the <tt>url</tt>, or <tt>params</tt> options were\r
- * specified as functions from which to draw values, then this also serves as the scope for those function calls.\r
- * Defaults to the browser window.</div></li>\r
- * <li><b>timeout</b> : Number (Optional)<div class="sub-desc">The timeout in milliseconds to be used for this request. Defaults to 30 seconds.</div></li>\r
- * <li><b>form</b> : Element/HTMLElement/String (Optional)<div class="sub-desc">The <tt><form></tt>\r
- * Element or the id of the <tt><form></tt> to pull parameters from.</div></li>\r
- * <li><a id="request-option-isUpload"></a><b>isUpload</b> : Boolean (Optional)<div class="sub-desc"><b>Only meaningful when used\r
- * with the <tt>form</tt> option</b>.\r
- * <p>True if the form object is a file upload (will be set automatically if the form was\r
- * configured with <b><tt>enctype</tt></b> "multipart/form-data").</p>\r
- * <p>File uploads are not performed using normal "Ajax" techniques, that is they are <b>not</b>\r
- * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the\r
- * DOM <tt><form></tt> element temporarily modified to have its\r
- * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer\r
- * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document\r
- * but removed after the return data has been gathered.</p>\r
- * <p>The server response is parsed by the browser to create the document for the IFRAME. If the\r
- * server is using JSON to send the return object, then the\r
- * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header\r
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>\r
- * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object\r
- * is created containing a <tt>responseText</tt> property in order to conform to the\r
- * requirements of event handlers and callbacks.</p>\r
- * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>\r
- * and some server technologies (notably JEE) may require some custom processing in order to\r
- * retrieve parameter names and parameter values from the packet content.</p>\r
- * </div></li>\r
- * <li><b>headers</b> : Object (Optional)<div class="sub-desc">Request\r
- * headers to set for the request.</div></li>\r
- * <li><b>xmlData</b> : Object (Optional)<div class="sub-desc">XML document\r
- * to use for the post. Note: This will be used instead of params for the post\r
- * data. Any params will be appended to the URL.</div></li>\r
- * <li><b>jsonData</b> : Object/String (Optional)<div class="sub-desc">JSON\r
- * data to use as the post. Note: This will be used instead of params for the post\r
- * data. Any params will be appended to the URL.</div></li>\r
- * <li><b>disableCaching</b> : Boolean (Optional)<div class="sub-desc">True\r
- * to add a unique cache-buster param to GET requests.</div></li>\r
- * </ul></p>\r
- * <p>The options object may also contain any other property which might be needed to perform\r
- * postprocessing in a callback because it is passed to callback functions.</p>\r
- * @return {Number} transactionId The id of the server transaction. This may be used\r
- * to cancel the request.\r
- */\r
- request : function(o){\r
- var me = this;\r
- if(me.fireEvent(BEFOREREQUEST, me, o)){\r
- if (o.el) {\r
- if(!Ext.isEmpty(o.indicatorText)){\r
- me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";\r
- }\r
- if(me.indicatorText) {\r
- Ext.getDom(o.el).innerHTML = me.indicatorText;\r
- }\r
- o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {\r
- Ext.getDom(o.el).innerHTML = response.responseText;\r
- });\r
- }\r
-\r
- var p = o.params,\r
- url = o.url || me.url,\r
- method,\r
- cb = {success: me.handleResponse,\r
- failure: me.handleFailure,\r
- scope: me,\r
- argument: {options: o},\r
- timeout : o.timeout || me.timeout\r
- },\r
- form,\r
- serForm;\r
-\r
-\r
- if (Ext.isFunction(p)) {\r
- p = p.call(o.scope||WINDOW, o);\r
- }\r
-\r
- p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);\r
-\r
- if (Ext.isFunction(url)) {\r
- url = url.call(o.scope || WINDOW, o);\r
- }\r
-\r
- if((form = Ext.getDom(o.form))){\r
- url = url || form.action;\r
- if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {\r
- return me.doFormUpload.call(me, o, p, url);\r
- }\r
- serForm = Ext.lib.Ajax.serializeForm(form);\r
- p = p ? (p + '&' + serForm) : serForm;\r
- }\r
-\r
- method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);\r
-\r
- if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){\r
- var dcp = o.disableCachingParam || me.disableCachingParam;\r
- url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));\r
- }\r
-\r
- o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});\r
-\r
- if(o.autoAbort === true || me.autoAbort) {\r
- me.abort();\r
- }\r
-\r
- if((method == GET || o.xmlData || o.jsonData) && p){\r
- url = Ext.urlAppend(url, p);\r
- p = '';\r
- }\r
- return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));\r
- }else{\r
- return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null;\r
- }\r
- },\r
-\r
- /**\r
- * Determine whether this object has a request outstanding.\r
- * @param {Number} transactionId (Optional) defaults to the last transaction\r
- * @return {Boolean} True if there is an outstanding request.\r
- */\r
- isLoading : function(transId){\r
- return transId ? Ext.lib.Ajax.isCallInProgress(transId) : !! this.transId;\r
- },\r
-\r
- /**\r
- * Aborts any outstanding request.\r
- * @param {Number} transactionId (Optional) defaults to the last transaction\r
- */\r
- abort : function(transId){\r
- if(transId || this.isLoading()){\r
- Ext.lib.Ajax.abort(transId || this.transId);\r
- }\r
- },\r
-\r
- // private\r
- handleResponse : function(response){\r
- this.transId = false;\r
- var options = response.argument.options;\r
- response.argument = options ? options.argument : null;\r
- this.fireEvent(REQUESTCOMPLETE, this, response, options);\r
- if(options.success){\r
- options.success.call(options.scope, response, options);\r
- }\r
- if(options.callback){\r
- options.callback.call(options.scope, options, true, response);\r
- }\r
- },\r
-\r
- // private\r
- handleFailure : function(response, e){\r
- this.transId = false;\r
- var options = response.argument.options;\r
- response.argument = options ? options.argument : null;\r
- this.fireEvent(REQUESTEXCEPTION, this, response, options, e);\r
- if(options.failure){\r
- options.failure.call(options.scope, response, options);\r
- }\r
- if(options.callback){\r
- options.callback.call(options.scope, options, false, response);\r
- }\r
- },\r
-\r
- // private\r
- doFormUpload : function(o, ps, url){\r
- var id = Ext.id(),\r
- doc = document,\r
- frame = doc.createElement('iframe'),\r
- form = Ext.getDom(o.form),\r
- hiddens = [],\r
- hd,\r
- encoding = 'multipart/form-data',\r
- buf = {\r
- target: form.target,\r
- method: form.method,\r
- encoding: form.encoding,\r
- enctype: form.enctype,\r
- action: form.action\r
- };\r
-\r
- Ext.fly(frame).set({\r
- id: id,\r
- name: id,\r
- cls: 'x-hidden'\r
-\r
- });\r
-\r
- doc.body.appendChild(frame);\r
-\r
- //Reset the Frame to neutral domain\r
- Ext.fly(frame).set({\r
- src : Ext.SSL_SECURE_URL\r
- });\r
-\r
- // This is required so that IE doesn't pop the response up in a new window.\r
- if(Ext.isIE){\r
- document.frames[id].name = id;\r
- }\r
-\r
-\r
- Ext.fly(form).set({\r
- target: id,\r
- method: POST,\r
- enctype: encoding,\r
- encoding: encoding,\r
- action: url || buf.action\r
- });\r
-\r
- // add dynamic params\r
- Ext.iterate(Ext.urlDecode(ps, false), function(k, v){\r
- hd = doc.createElement('input');\r
- Ext.fly(hd).set({\r
- type: 'hidden',\r
- value: v,\r
- name: k\r
- });\r
- form.appendChild(hd);\r
- hiddens.push(hd);\r
- });\r
-\r
- function cb(){\r
- var me = this,\r
- // bogus response object\r
- r = {responseText : '',\r
- responseXML : null,\r
- argument : o.argument},\r
- doc,\r
- firstChild;\r
-\r
- try{\r
- doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;\r
- if(doc){\r
- if(doc.body){\r
- if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea\r
- r.responseText = firstChild.value;\r
- }else{\r
- r.responseText = doc.body.innerHTML;\r
- }\r
- }\r
- //in IE the document may still have a body even if returns XML.\r
- r.responseXML = doc.XMLDocument || doc;\r
- }\r
- }\r
- catch(e) {}\r
-\r
- Ext.EventManager.removeListener(frame, LOAD, cb, me);\r
-\r
- me.fireEvent(REQUESTCOMPLETE, me, r, o);\r
-\r
- function runCallback(fn, scope, args){\r
- if(Ext.isFunction(fn)){\r
- fn.apply(scope, args);\r
- }\r
- }\r
-\r
- runCallback(o.success, o.scope, [r, o]);\r
- runCallback(o.callback, o.scope, [o, true, r]);\r
-\r
- if(!me.debugUploads){\r
- setTimeout(function(){Ext.removeNode(frame);}, 100);\r
- }\r
- }\r
-\r
- Ext.EventManager.on(frame, LOAD, cb, this);\r
- form.submit();\r
-\r
- Ext.fly(form).set(buf);\r
- Ext.each(hiddens, function(h) {\r
- Ext.removeNode(h);\r
- });\r
- }\r
- });\r
-})();\r
-\r
-/**\r
- * @class Ext.Ajax\r
- * @extends Ext.data.Connection\r
- * <p>The global Ajax request class that provides a simple way to make Ajax requests\r
- * with maximum flexibility.</p>\r
- * <p>Since Ext.Ajax is a singleton, you can set common properties/events for it once\r
- * and override them at the request function level only if necessary.</p>\r
- * <p>Common <b>Properties</b> you may want to set are:<div class="mdetail-params"><ul>\r
- * <li><b><tt>{@link #method}</tt></b><p class="sub-desc"></p></li>\r
- * <li><b><tt>{@link #extraParams}</tt></b><p class="sub-desc"></p></li>\r
- * <li><b><tt>{@link #url}</tt></b><p class="sub-desc"></p></li>\r
- * </ul></div>\r
- * <pre><code>\r
-// Default headers to pass in every request\r
-Ext.Ajax.defaultHeaders = {\r
- 'Powered-By': 'Ext'\r
-};\r
- * </code></pre>\r
- * </p>\r
- * <p>Common <b>Events</b> you may want to set are:<div class="mdetail-params"><ul>\r
- * <li><b><tt>{@link Ext.data.Connection#beforerequest beforerequest}</tt></b><p class="sub-desc"></p></li>\r
- * <li><b><tt>{@link Ext.data.Connection#requestcomplete requestcomplete}</tt></b><p class="sub-desc"></p></li>\r
- * <li><b><tt>{@link Ext.data.Connection#requestexception requestexception}</tt></b><p class="sub-desc"></p></li>\r
- * </ul></div>\r
- * <pre><code>\r
-// Example: show a spinner during all Ajax requests\r
-Ext.Ajax.on('beforerequest', this.showSpinner, this);\r
-Ext.Ajax.on('requestcomplete', this.hideSpinner, this);\r
-Ext.Ajax.on('requestexception', this.hideSpinner, this);\r
- * </code></pre>\r
- * </p>\r
- * <p>An example request:</p>\r
- * <pre><code>\r
-// Basic request\r
-Ext.Ajax.{@link Ext.data.Connection#request request}({\r
- url: 'foo.php',\r
- success: someFn,\r
- failure: otherFn,\r
- headers: {\r
- 'my-header': 'foo'\r
- },\r
- params: { foo: 'bar' }\r
-});\r
-\r
-// Simple ajax form submission\r
-Ext.Ajax.{@link Ext.data.Connection#request request}({\r
- form: 'some-form',\r
- params: 'foo=bar'\r
-});\r
- * </code></pre>\r
- * </p>\r
- * @singleton\r
- */\r
-Ext.Ajax = new Ext.data.Connection({\r
- /**\r
- * @cfg {String} url @hide\r
- */\r
- /**\r
- * @cfg {Object} extraParams @hide\r
- */\r
- /**\r
- * @cfg {Object} defaultHeaders @hide\r
- */\r
- /**\r
- * @cfg {String} method (Optional) @hide\r
- */\r
- /**\r
- * @cfg {Number} timeout (Optional) @hide\r
- */\r
- /**\r
- * @cfg {Boolean} autoAbort (Optional) @hide\r
- */\r
-\r
- /**\r
- * @cfg {Boolean} disableCaching (Optional) @hide\r
- */\r
-\r
- /**\r
- * @property disableCaching\r
- * True to add a unique cache-buster param to GET requests. (defaults to true)\r
- * @type Boolean\r
- */\r
- /**\r
- * @property url\r
- * The default URL to be used for requests to the server. (defaults to undefined)\r
- * If the server receives all requests through one URL, setting this once is easier than\r
- * entering it on every request.\r
- * @type String\r
- */\r
- /**\r
- * @property extraParams\r
- * An object containing properties which are used as extra parameters to each request made\r
- * by this object (defaults to undefined). Session information and other data that you need\r
- * to pass with each request are commonly put here.\r
- * @type Object\r
- */\r
- /**\r
- * @property defaultHeaders\r
- * An object containing request headers which are added to each request made by this object\r
- * (defaults to undefined).\r
- * @type Object\r
- */\r
- /**\r
- * @property method\r
- * The default HTTP method to be used for requests. Note that this is case-sensitive and\r
- * should be all caps (defaults to undefined; if not set but params are present will use\r
- * <tt>"POST"</tt>, otherwise will use <tt>"GET"</tt>.)\r
- * @type String\r
- */\r
- /**\r
- * @property timeout\r
- * The timeout in milliseconds to be used for requests. (defaults to 30000)\r
- * @type Number\r
- */\r
-\r
- /**\r
- * @property autoAbort\r
- * Whether a new request should abort any pending requests. (defaults to false)\r
- * @type Boolean\r
- */\r
- autoAbort : false,\r
-\r
- /**\r
- * Serialize the passed form into a url encoded string\r
- * @param {String/HTMLElement} form\r
- * @return {String}\r
- */\r
- serializeForm : function(form){\r
- return Ext.lib.Ajax.serializeForm(form);\r
- }\r
-});\r
/**
* @class Ext.Updater
* @extends Ext.util.Observable
* @param {Boolean} forceNew (optional) By default the constructor checks to see if the passed element already
* has an Updater and if it does it returns the same instance. This will skip that check (useful for extending this class).
*/
-Ext.UpdateManager = Ext.Updater = Ext.extend(Ext.util.Observable,
+Ext.UpdateManager = Ext.Updater = Ext.extend(Ext.util.Observable,
function() {
- var BEFOREUPDATE = "beforeupdate",
- UPDATE = "update",
- FAILURE = "failure";
-
- // private
- function processSuccess(response){
- var me = this;
+ var BEFOREUPDATE = "beforeupdate",
+ UPDATE = "update",
+ FAILURE = "failure";
+
+ // private
+ function processSuccess(response){
+ var me = this;
me.transaction = null;
if (response.argument.form && response.argument.reset) {
try { // put in try/catch since some older FF releases had problems with this
updateComplete.call(me, response);
}
}
-
+
// private
function updateComplete(response, type, success){
this.fireEvent(type || UPDATE, this.el, response);
}
// private
- function processFailure(response){
+ function processFailure(response){
updateComplete.call(this, response, FAILURE, !!(this.transaction = null));
}
-
- return {
- constructor: function(el, forceNew){
- var me = this;
- el = Ext.get(el);
- if(!forceNew && el.updateManager){
- return el.updateManager;
- }
- /**
- * The Element object
- * @type Ext.Element
- */
- me.el = el;
- /**
- * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
- * @type String
- */
- me.defaultUrl = null;
-
- me.addEvents(
- /**
- * @event beforeupdate
- * Fired before an update is made, return false from your handler and the update is cancelled.
- * @param {Ext.Element} el
- * @param {String/Object/Function} url
- * @param {String/Object} params
- */
- BEFOREUPDATE,
- /**
- * @event update
- * Fired after successful update is made.
- * @param {Ext.Element} el
- * @param {Object} oResponseObject The response Object
- */
- UPDATE,
- /**
- * @event failure
- * Fired on update failure.
- * @param {Ext.Element} el
- * @param {Object} oResponseObject The response Object
- */
- FAILURE
- );
-
- Ext.apply(me, Ext.Updater.defaults);
- /**
- * Blank page URL to use with SSL file uploads (defaults to {@link Ext.Updater.defaults#sslBlankUrl}).
- * @property sslBlankUrl
- * @type String
- */
- /**
- * Whether to append unique parameter on get request to disable caching (defaults to {@link Ext.Updater.defaults#disableCaching}).
- * @property disableCaching
- * @type Boolean
- */
- /**
- * Text for loading indicator (defaults to {@link Ext.Updater.defaults#indicatorText}).
- * @property indicatorText
- * @type String
- */
- /**
- * Whether to show indicatorText when loading (defaults to {@link Ext.Updater.defaults#showLoadIndicator}).
- * @property showLoadIndicator
- * @type String
- */
- /**
- * Timeout for requests or form posts in seconds (defaults to {@link Ext.Updater.defaults#timeout}).
- * @property timeout
- * @type Number
- */
- /**
- * True to process scripts in the output (defaults to {@link Ext.Updater.defaults#loadScripts}).
- * @property loadScripts
- * @type Boolean
- */
-
- /**
- * Transaction object of the current executing transaction, or null if there is no active transaction.
- */
- me.transaction = null;
- /**
- * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
- * @type Function
- */
- me.refreshDelegate = me.refresh.createDelegate(me);
- /**
- * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
- * @type Function
- */
- me.updateDelegate = me.update.createDelegate(me);
- /**
- * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
- * @type Function
- */
- me.formUpdateDelegate = (me.formUpdate || function(){}).createDelegate(me);
-
- /**
- * The renderer for this Updater (defaults to {@link Ext.Updater.BasicRenderer}).
- */
- me.renderer = me.renderer || me.getDefaultRenderer();
-
- Ext.Updater.superclass.constructor.call(me);
- },
-
- /**
- * Sets the content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
- * @param {Object} renderer The object implementing the render() method
- */
- setRenderer : function(renderer){
- this.renderer = renderer;
- },
-
- /**
- * Returns the current content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
- * @return {Object}
- */
- getRenderer : function(){
- return this.renderer;
- },
- /**
- * This is an overrideable method which returns a reference to a default
- * renderer class if none is specified when creating the Ext.Updater.
- * Defaults to {@link Ext.Updater.BasicRenderer}
- */
- getDefaultRenderer: function() {
- return new Ext.Updater.BasicRenderer();
- },
-
- /**
- * Sets the default URL used for updates.
- * @param {String/Function} defaultUrl The url or a function to call to get the url
- */
- setDefaultUrl : function(defaultUrl){
- this.defaultUrl = defaultUrl;
- },
-
- /**
- * Get the Element this Updater is bound to
- * @return {Ext.Element} The element
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Performs an <b>asynchronous</b> request, updating this element with the response.
- * If params are specified it uses POST, otherwise it uses GET.<br><br>
- * <b>Note:</b> Due to the asynchronous nature of remote server requests, the Element
- * will not have been fully updated when the function returns. To post-process the returned
- * data, use the callback option, or an <b><code>update</code></b> event handler.
- * @param {Object} options A config object containing any of the following options:<ul>
- * <li>url : <b>String/Function</b><p class="sub-desc">The URL to request or a function which
- * <i>returns</i> the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).</p></li>
- * <li>method : <b>String</b><p class="sub-desc">The HTTP method to
- * use. Defaults to POST if the <code>params</code> argument is present, otherwise GET.</p></li>
- * <li>params : <b>String/Object/Function</b><p class="sub-desc">The
- * parameters to pass to the server (defaults to none). These may be specified as a url-encoded
- * string, or as an object containing properties which represent parameters,
- * or as a function, which returns such an object.</p></li>
- * <li>scripts : <b>Boolean</b><p class="sub-desc">If <code>true</code>
- * any <script> tags embedded in the response text will be extracted
- * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified,
- * the callback will be called <i>after</i> the execution of the scripts.</p></li>
- * <li>callback : <b>Function</b><p class="sub-desc">A function to
- * be called when the response from the server arrives. The following
- * parameters are passed:<ul>
- * <li><b>el</b> : Ext.Element<p class="sub-desc">The Element being updated.</p></li>
- * <li><b>success</b> : Boolean<p class="sub-desc">True for success, false for failure.</p></li>
- * <li><b>response</b> : XMLHttpRequest<p class="sub-desc">The XMLHttpRequest which processed the update.</p></li>
- * <li><b>options</b> : Object<p class="sub-desc">The config object passed to the update call.</p></li></ul>
- * </p></li>
- * <li>scope : <b>Object</b><p class="sub-desc">The scope in which
- * to execute the callback (The callback's <code>this</code> reference.) If the
- * <code>params</code> argument is a function, this scope is used for that function also.</p></li>
- * <li>discardUrl : <b>Boolean</b><p class="sub-desc">By default, the URL of this request becomes
- * the default URL for this Updater object, and will be subsequently used in {@link #refresh}
- * calls. To bypass this behavior, pass <code>discardUrl:true</code> (defaults to false).</p></li>
- * <li>timeout : <b>Number</b><p class="sub-desc">The number of seconds to wait for a response before
- * timing out (defaults to {@link Ext.Updater.defaults#timeout}).</p></li>
- * <li>text : <b>String</b><p class="sub-desc">The text to use as the innerHTML of the
- * {@link Ext.Updater.defaults#indicatorText} div (defaults to 'Loading...'). To replace the entire div, not
- * just the text, override {@link Ext.Updater.defaults#indicatorText} directly.</p></li>
- * <li>nocache : <b>Boolean</b><p class="sub-desc">Only needed for GET
- * requests, this option causes an extra, auto-generated parameter to be appended to the request
- * to defeat caching (defaults to {@link Ext.Updater.defaults#disableCaching}).</p></li></ul>
- * <p>
- * For example:
- <pre><code>
- um.update({
- url: "your-url.php",
- params: {param1: "foo", param2: "bar"}, // or a URL encoded string
- callback: yourFunction,
- scope: yourObject, //(optional scope)
- discardUrl: true,
- nocache: true,
- text: "Loading...",
- timeout: 60,
- scripts: false // Save time by avoiding RegExp execution.
- });
- </code></pre>
- */
- update : function(url, params, callback, discardUrl){
- var me = this,
- cfg,
- callerScope;
-
- if(me.fireEvent(BEFOREUPDATE, me.el, url, params) !== false){
- if(Ext.isObject(url)){ // must be config object
- cfg = url;
- url = cfg.url;
- params = params || cfg.params;
- callback = callback || cfg.callback;
- discardUrl = discardUrl || cfg.discardUrl;
- callerScope = cfg.scope;
- if(!Ext.isEmpty(cfg.nocache)){me.disableCaching = cfg.nocache;};
- if(!Ext.isEmpty(cfg.text)){me.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
- if(!Ext.isEmpty(cfg.scripts)){me.loadScripts = cfg.scripts;};
- if(!Ext.isEmpty(cfg.timeout)){me.timeout = cfg.timeout;};
- }
- me.showLoading();
-
- if(!discardUrl){
- me.defaultUrl = url;
- }
- if(Ext.isFunction(url)){
- url = url.call(me);
- }
-
- var o = Ext.apply({}, {
- url : url,
- params: (Ext.isFunction(params) && callerScope) ? params.createDelegate(callerScope) : params,
- success: processSuccess,
- failure: processFailure,
- scope: me,
- callback: undefined,
- timeout: (me.timeout*1000),
- disableCaching: me.disableCaching,
- argument: {
- "options": cfg,
- "url": url,
- "form": null,
- "callback": callback,
- "scope": callerScope || window,
- "params": params
- }
- }, cfg);
-
- me.transaction = Ext.Ajax.request(o);
- }
- },
+ return {
+ constructor: function(el, forceNew){
+ var me = this;
+ el = Ext.get(el);
+ if(!forceNew && el.updateManager){
+ return el.updateManager;
+ }
+ /**
+ * The Element object
+ * @type Ext.Element
+ */
+ me.el = el;
+ /**
+ * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
+ * @type String
+ */
+ me.defaultUrl = null;
+
+ me.addEvents(
+ /**
+ * @event beforeupdate
+ * Fired before an update is made, return false from your handler and the update is cancelled.
+ * @param {Ext.Element} el
+ * @param {String/Object/Function} url
+ * @param {String/Object} params
+ */
+ BEFOREUPDATE,
+ /**
+ * @event update
+ * Fired after successful update is made.
+ * @param {Ext.Element} el
+ * @param {Object} oResponseObject The response Object
+ */
+ UPDATE,
+ /**
+ * @event failure
+ * Fired on update failure.
+ * @param {Ext.Element} el
+ * @param {Object} oResponseObject The response Object
+ */
+ FAILURE
+ );
+
+ Ext.apply(me, Ext.Updater.defaults);
+ /**
+ * Blank page URL to use with SSL file uploads (defaults to {@link Ext.Updater.defaults#sslBlankUrl}).
+ * @property sslBlankUrl
+ * @type String
+ */
+ /**
+ * Whether to append unique parameter on get request to disable caching (defaults to {@link Ext.Updater.defaults#disableCaching}).
+ * @property disableCaching
+ * @type Boolean
+ */
+ /**
+ * Text for loading indicator (defaults to {@link Ext.Updater.defaults#indicatorText}).
+ * @property indicatorText
+ * @type String
+ */
+ /**
+ * Whether to show indicatorText when loading (defaults to {@link Ext.Updater.defaults#showLoadIndicator}).
+ * @property showLoadIndicator
+ * @type String
+ */
+ /**
+ * Timeout for requests or form posts in seconds (defaults to {@link Ext.Updater.defaults#timeout}).
+ * @property timeout
+ * @type Number
+ */
+ /**
+ * True to process scripts in the output (defaults to {@link Ext.Updater.defaults#loadScripts}).
+ * @property loadScripts
+ * @type Boolean
+ */
+
+ /**
+ * Transaction object of the current executing transaction, or null if there is no active transaction.
+ */
+ me.transaction = null;
+ /**
+ * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
+ * @type Function
+ */
+ me.refreshDelegate = me.refresh.createDelegate(me);
+ /**
+ * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
+ * @type Function
+ */
+ me.updateDelegate = me.update.createDelegate(me);
+ /**
+ * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
+ * @type Function
+ */
+ me.formUpdateDelegate = (me.formUpdate || function(){}).createDelegate(me);
+
+ /**
+ * The renderer for this Updater (defaults to {@link Ext.Updater.BasicRenderer}).
+ */
+ me.renderer = me.renderer || me.getDefaultRenderer();
+
+ Ext.Updater.superclass.constructor.call(me);
+ },
+
+ /**
+ * Sets the content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
+ * @param {Object} renderer The object implementing the render() method
+ */
+ setRenderer : function(renderer){
+ this.renderer = renderer;
+ },
+
+ /**
+ * Returns the current content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
+ * @return {Object}
+ */
+ getRenderer : function(){
+ return this.renderer;
+ },
+
+ /**
+ * This is an overrideable method which returns a reference to a default
+ * renderer class if none is specified when creating the Ext.Updater.
+ * Defaults to {@link Ext.Updater.BasicRenderer}
+ */
+ getDefaultRenderer: function() {
+ return new Ext.Updater.BasicRenderer();
+ },
+
+ /**
+ * Sets the default URL used for updates.
+ * @param {String/Function} defaultUrl The url or a function to call to get the url
+ */
+ setDefaultUrl : function(defaultUrl){
+ this.defaultUrl = defaultUrl;
+ },
+
+ /**
+ * Get the Element this Updater is bound to
+ * @return {Ext.Element} The element
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Performs an <b>asynchronous</b> request, updating this element with the response.
+ * If params are specified it uses POST, otherwise it uses GET.<br><br>
+ * <b>Note:</b> Due to the asynchronous nature of remote server requests, the Element
+ * will not have been fully updated when the function returns. To post-process the returned
+ * data, use the callback option, or an <b><code>update</code></b> event handler.
+ * @param {Object} options A config object containing any of the following options:<ul>
+ * <li>url : <b>String/Function</b><p class="sub-desc">The URL to request or a function which
+ * <i>returns</i> the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).</p></li>
+ * <li>method : <b>String</b><p class="sub-desc">The HTTP method to
+ * use. Defaults to POST if the <code>params</code> argument is present, otherwise GET.</p></li>
+ * <li>params : <b>String/Object/Function</b><p class="sub-desc">The
+ * parameters to pass to the server (defaults to none). These may be specified as a url-encoded
+ * string, or as an object containing properties which represent parameters,
+ * or as a function, which returns such an object.</p></li>
+ * <li>scripts : <b>Boolean</b><p class="sub-desc">If <code>true</code>
+ * any <script> tags embedded in the response text will be extracted
+ * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified,
+ * the callback will be called <i>after</i> the execution of the scripts.</p></li>
+ * <li>callback : <b>Function</b><p class="sub-desc">A function to
+ * be called when the response from the server arrives. The following
+ * parameters are passed:<ul>
+ * <li><b>el</b> : Ext.Element<p class="sub-desc">The Element being updated.</p></li>
+ * <li><b>success</b> : Boolean<p class="sub-desc">True for success, false for failure.</p></li>
+ * <li><b>response</b> : XMLHttpRequest<p class="sub-desc">The XMLHttpRequest which processed the update.</p></li>
+ * <li><b>options</b> : Object<p class="sub-desc">The config object passed to the update call.</p></li></ul>
+ * </p></li>
+ * <li>scope : <b>Object</b><p class="sub-desc">The scope in which
+ * to execute the callback (The callback's <code>this</code> reference.) If the
+ * <code>params</code> argument is a function, this scope is used for that function also.</p></li>
+ * <li>discardUrl : <b>Boolean</b><p class="sub-desc">By default, the URL of this request becomes
+ * the default URL for this Updater object, and will be subsequently used in {@link #refresh}
+ * calls. To bypass this behavior, pass <code>discardUrl:true</code> (defaults to false).</p></li>
+ * <li>timeout : <b>Number</b><p class="sub-desc">The number of seconds to wait for a response before
+ * timing out (defaults to {@link Ext.Updater.defaults#timeout}).</p></li>
+ * <li>text : <b>String</b><p class="sub-desc">The text to use as the innerHTML of the
+ * {@link Ext.Updater.defaults#indicatorText} div (defaults to 'Loading...'). To replace the entire div, not
+ * just the text, override {@link Ext.Updater.defaults#indicatorText} directly.</p></li>
+ * <li>nocache : <b>Boolean</b><p class="sub-desc">Only needed for GET
+ * requests, this option causes an extra, auto-generated parameter to be appended to the request
+ * to defeat caching (defaults to {@link Ext.Updater.defaults#disableCaching}).</p></li></ul>
+ * <p>
+ * For example:
+ <pre><code>
+ um.update({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: true,
+ nocache: true,
+ text: "Loading...",
+ timeout: 60,
+ scripts: false // Save time by avoiding RegExp execution.
+ });
+ </code></pre>
+ */
+ update : function(url, params, callback, discardUrl){
+ var me = this,
+ cfg,
+ callerScope;
+
+ if(me.fireEvent(BEFOREUPDATE, me.el, url, params) !== false){
+ if(Ext.isObject(url)){ // must be config object
+ cfg = url;
+ url = cfg.url;
+ params = params || cfg.params;
+ callback = callback || cfg.callback;
+ discardUrl = discardUrl || cfg.discardUrl;
+ callerScope = cfg.scope;
+ if(!Ext.isEmpty(cfg.nocache)){me.disableCaching = cfg.nocache;};
+ if(!Ext.isEmpty(cfg.text)){me.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
+ if(!Ext.isEmpty(cfg.scripts)){me.loadScripts = cfg.scripts;};
+ if(!Ext.isEmpty(cfg.timeout)){me.timeout = cfg.timeout;};
+ }
+ me.showLoading();
+
+ if(!discardUrl){
+ me.defaultUrl = url;
+ }
+ if(Ext.isFunction(url)){
+ url = url.call(me);
+ }
+
+ var o = Ext.apply({}, {
+ url : url,
+ params: (Ext.isFunction(params) && callerScope) ? params.createDelegate(callerScope) : params,
+ success: processSuccess,
+ failure: processFailure,
+ scope: me,
+ callback: undefined,
+ timeout: (me.timeout*1000),
+ disableCaching: me.disableCaching,
+ argument: {
+ "options": cfg,
+ "url": url,
+ "form": null,
+ "callback": callback,
+ "scope": callerScope || window,
+ "params": params
+ }
+ }, cfg);
+
+ me.transaction = Ext.Ajax.request(o);
+ }
+ },
+
+ /**
+ * <p>Performs an asynchronous form post, updating this element with the response. If the form has the attribute
+ * enctype="<a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>", it assumes it's a file upload.
+ * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.</p>
+ * <p>File uploads are not performed using normal "Ajax" techniques, that is they are <b>not</b>
+ * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
+ * DOM <code><form></code> element temporarily modified to have its
+ * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
+ * to a dynamically generated, hidden <code><iframe></code> which is inserted into the document
+ * but removed after the return data has been gathered.</p>
+ * <p>Be aware that file upload packets, sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>
+ * and some server technologies (notably JEE) may require some custom processing in order to
+ * retrieve parameter names and parameter values from the packet content.</p>
+ * @param {String/HTMLElement} form The form Id or form element
+ * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
+ * @param {Boolean} reset (optional) Whether to try to reset the form after the update
+ * @param {Function} callback (optional) Callback when transaction is complete. The following
+ * parameters are passed:<ul>
+ * <li><b>el</b> : Ext.Element<p class="sub-desc">The Element being updated.</p></li>
+ * <li><b>success</b> : Boolean<p class="sub-desc">True for success, false for failure.</p></li>
+ * <li><b>response</b> : XMLHttpRequest<p class="sub-desc">The XMLHttpRequest which processed the update.</p></li></ul>
+ */
+ formUpdate : function(form, url, reset, callback){
+ var me = this;
+ if(me.fireEvent(BEFOREUPDATE, me.el, form, url) !== false){
+ if(Ext.isFunction(url)){
+ url = url.call(me);
+ }
+ form = Ext.getDom(form);
+ me.transaction = Ext.Ajax.request({
+ form: form,
+ url:url,
+ success: processSuccess,
+ failure: processFailure,
+ scope: me,
+ timeout: (me.timeout*1000),
+ argument: {
+ "url": url,
+ "form": form,
+ "callback": callback,
+ "reset": reset
+ }
+ });
+ me.showLoading.defer(1, me);
+ }
+ },
+
+ /**
+ * Set this element to auto refresh. Can be canceled by calling {@link #stopAutoRefresh}.
+ * @param {Number} interval How often to update (in seconds).
+ * @param {String/Object/Function} url (optional) The url for this request, a config object in the same format
+ * supported by {@link #load}, or a function to call to get the url (defaults to the last used url). Note that while
+ * the url used in a load call can be reused by this method, other load config options will not be reused and must be
+ * sepcified as part of a config object passed as this paramter if needed.
+ * @param {String/Object} params (optional) The parameters to pass as either a url encoded string
+ * "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
+ * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
+ * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
+ */
+ startAutoRefresh : function(interval, url, params, callback, refreshNow){
+ var me = this;
+ if(refreshNow){
+ me.update(url || me.defaultUrl, params, callback, true);
+ }
+ if(me.autoRefreshProcId){
+ clearInterval(me.autoRefreshProcId);
+ }
+ me.autoRefreshProcId = setInterval(me.update.createDelegate(me, [url || me.defaultUrl, params, callback, true]), interval * 1000);
+ },
+
+ /**
+ * Stop auto refresh on this element.
+ */
+ stopAutoRefresh : function(){
+ if(this.autoRefreshProcId){
+ clearInterval(this.autoRefreshProcId);
+ delete this.autoRefreshProcId;
+ }
+ },
+
+ /**
+ * Returns true if the Updater is currently set to auto refresh its content (see {@link #startAutoRefresh}), otherwise false.
+ */
+ isAutoRefreshing : function(){
+ return !!this.autoRefreshProcId;
+ },
+
+ /**
+ * Display the element's "loading" state. By default, the element is updated with {@link #indicatorText}. This
+ * method may be overridden to perform a custom action while this Updater is actively updating its contents.
+ */
+ showLoading : function(){
+ if(this.showLoadIndicator){
+ this.el.dom.innerHTML = this.indicatorText;
+ }
+ },
- /**
- * <p>Performs an asynchronous form post, updating this element with the response. If the form has the attribute
- * enctype="<a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>", it assumes it's a file upload.
- * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.</p>
- * <p>File uploads are not performed using normal "Ajax" techniques, that is they are <b>not</b>
- * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
- * DOM <code><form></code> element temporarily modified to have its
- * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
- * to a dynamically generated, hidden <code><iframe></code> which is inserted into the document
- * but removed after the return data has been gathered.</p>
- * <p>Be aware that file upload packets, sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form-data</a>
- * and some server technologies (notably JEE) may require some custom processing in order to
- * retrieve parameter names and parameter values from the packet content.</p>
- * @param {String/HTMLElement} form The form Id or form element
- * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
- * @param {Boolean} reset (optional) Whether to try to reset the form after the update
- * @param {Function} callback (optional) Callback when transaction is complete. The following
- * parameters are passed:<ul>
- * <li><b>el</b> : Ext.Element<p class="sub-desc">The Element being updated.</p></li>
- * <li><b>success</b> : Boolean<p class="sub-desc">True for success, false for failure.</p></li>
- * <li><b>response</b> : XMLHttpRequest<p class="sub-desc">The XMLHttpRequest which processed the update.</p></li></ul>
- */
- formUpdate : function(form, url, reset, callback){
- var me = this;
- if(me.fireEvent(BEFOREUPDATE, me.el, form, url) !== false){
- if(Ext.isFunction(url)){
- url = url.call(me);
- }
- form = Ext.getDom(form)
- me.transaction = Ext.Ajax.request({
- form: form,
- url:url,
- success: processSuccess,
- failure: processFailure,
- scope: me,
- timeout: (me.timeout*1000),
- argument: {
- "url": url,
- "form": form,
- "callback": callback,
- "reset": reset
- }
- });
- me.showLoading.defer(1, me);
- }
- },
-
- /**
- * Set this element to auto refresh. Can be canceled by calling {@link #stopAutoRefresh}.
- * @param {Number} interval How often to update (in seconds).
- * @param {String/Object/Function} url (optional) The url for this request, a config object in the same format
- * supported by {@link #load}, or a function to call to get the url (defaults to the last used url). Note that while
- * the url used in a load call can be reused by this method, other load config options will not be reused and must be
- * sepcified as part of a config object passed as this paramter if needed.
- * @param {String/Object} params (optional) The parameters to pass as either a url encoded string
- * "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
- * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
- * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
- */
- startAutoRefresh : function(interval, url, params, callback, refreshNow){
- var me = this;
- if(refreshNow){
- me.update(url || me.defaultUrl, params, callback, true);
- }
- if(me.autoRefreshProcId){
- clearInterval(me.autoRefreshProcId);
- }
- me.autoRefreshProcId = setInterval(me.update.createDelegate(me, [url || me.defaultUrl, params, callback, true]), interval * 1000);
- },
-
- /**
- * Stop auto refresh on this element.
- */
- stopAutoRefresh : function(){
- if(this.autoRefreshProcId){
- clearInterval(this.autoRefreshProcId);
- delete this.autoRefreshProcId;
- }
- },
-
- /**
- * Returns true if the Updater is currently set to auto refresh its content (see {@link #startAutoRefresh}), otherwise false.
- */
- isAutoRefreshing : function(){
- return !!this.autoRefreshProcId;
- },
-
- /**
- * Display the element's "loading" state. By default, the element is updated with {@link #indicatorText}. This
- * method may be overridden to perform a custom action while this Updater is actively updating its contents.
- */
- showLoading : function(){
- if(this.showLoadIndicator){
- this.el.dom.innerHTML = this.indicatorText;
- }
- },
-
- /**
- * Aborts the currently executing transaction, if any.
- */
- abort : function(){
- if(this.transaction){
- Ext.Ajax.abort(this.transaction);
- }
- },
-
- /**
- * Returns true if an update is in progress, otherwise false.
- * @return {Boolean}
- */
- isUpdating : function(){
- return this.transaction ? Ext.Ajax.isLoading(this.transaction) : false;
- },
-
- /**
- * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
- * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
- */
- refresh : function(callback){
- if(this.defaultUrl){
- this.update(this.defaultUrl, null, callback, true);
- }
- }
+ /**
+ * Aborts the currently executing transaction, if any.
+ */
+ abort : function(){
+ if(this.transaction){
+ Ext.Ajax.abort(this.transaction);
+ }
+ },
+
+ /**
+ * Returns true if an update is in progress, otherwise false.
+ * @return {Boolean}
+ */
+ isUpdating : function(){
+ return this.transaction ? Ext.Ajax.isLoading(this.transaction) : false;
+ },
+
+ /**
+ * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
+ * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
+ */
+ refresh : function(callback){
+ if(this.defaultUrl){
+ this.update(this.defaultUrl, null, callback, true);
+ }
+ }
}
}());
* Timeout for requests or form posts in seconds (defaults to 30 seconds).
* @type Number
*/
- timeout : 30,
+ timeout : 30,
/**
* True to append a unique parameter to GET requests to disable caching (defaults to false).
* @type Boolean
* Blank page URL to use with SSL file uploads (defaults to {@link Ext#SSL_SECURE_URL} if set, or "javascript:false").
* @type String
*/
- sslBlankUrl : Ext.SSL_SECURE_URL
+ sslBlankUrl : Ext.SSL_SECURE_URL
};
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
*/
- render : function(el, response, updateManager, callback){
+ render : function(el, response, updateManager, callback){
el.update(response.responseText, updateManager.loadScripts, callback);
}
};/**
Date.parseCodes[character] = p; // reassign function result to prevent repeated execution
}
- return p? Ext.applyIf({
- c: p.c? xf(p.c, currentGroup || "{0}") : p.c
+ return p ? Ext.applyIf({
+ c: p.c ? xf(p.c, currentGroup || "{0}") : p.c
}, p) : {
g:0,
c:null,
s:Ext.escapeRe(character) // treat unrecognised characters as literals
}
-}
+};
// private shorthand for Date.formatCodeToRegex since we'll be using it fairly often
var $f = Date.formatCodeToRegex;
* may be used as a format string to {@link #format}. Example:</p><pre><code>
Date.formatFunctions['x-date-format'] = myDateFormatter;
</code></pre>
- * <p>A formatting function should return a string rep
esentation of the passed Date object:<div class="mdetail-params"><ul>
+ * <p>A formatting function should return a string rep
resentation of the passed Date object, and is passed the following parameters:<div class="mdetail-params"><ul>
* <li><code>date</code> : Date<div class="sub-desc">The Date to format.</div></li>
* </ul></div></p>
* <p>To enable date strings to also be <i>parsed</i> according to that format, a corresponding
}
}
- Date.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$", "i");
+ Date.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$");
Date.parseFunctions[format] = new Function("input", "strict", xf(code, regexNum, calc.join('')));
}
}(),
console.log('Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)= %o', Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)); // strict date parsing with invalid month value
console.groupEnd();
-//*//**
+//*/
+/**
* @class Ext.util.MixedCollection
* @extends Ext.util.Observable
* A Collection class that maintains both numeric indexes and keys and exposes events.
/**
* @private
+ * Performs the actual sorting based on a direction and a sorting function. Internally,
+ * this creates a temporary array of all items in the MixedCollection, sorts it and then writes
+ * the sorted array data back into this.items and this.keys
* @param {String} property Property to sort by ('key', 'value', or 'index')
* @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.
* @param {Function} fn (optional) Comparison function that defines the sort order.
* Defaults to sorting by numeric value.
*/
_sort : function(property, dir, fn){
- var i,
- len,
- dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
- c = [], k = this.keys, items = this.items;
-
- fn = fn || function(a, b){
- return a-b;
+ var i, len,
+ dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
+
+ //this is a temporary array used to apply the sorting function
+ c = [],
+ keys = this.keys,
+ items = this.items;
+
+ //default to a simple sorter function if one is not provided
+ fn = fn || function(a, b) {
+ return a - b;
};
+
+ //copy all the items into a temporary array, which we will sort
for(i = 0, len = items.length; i < len; i++){
- c[c.length] = {key: k[i], value: items[i], index: i};
+ c[c.length] = {
+ key : keys[i],
+ value: items[i],
+ index: i
+ };
}
+
+ //sort the temporary array
c.sort(function(a, b){
var v = fn(a[property], b[property]) * dsc;
if(v === 0){
}
return v;
});
+
+ //copy the temporary array back into the main this.items and this.keys objects
for(i = 0, len = c.length; i < len; i++){
items[i] = c[i].value;
- k[i] = c[i].key;
+ keys[i] = c[i].key;
}
+
this.fireEvent('sort', this);
},
sort : function(dir, fn){
this._sort('value', dir, fn);
},
+
+ /**
+ * Reorders each of the items based on a mapping from old index to new index. Internally this
+ * just translates into a sort. The 'sort' event is fired whenever reordering has occured.
+ * @param {Object} mapping Mapping from old item index to new item index
+ */
+ reorder: function(mapping) {
+ this.suspendEvents();
+
+ var items = this.items,
+ index = 0,
+ length = items.length,
+ order = [],
+ remaining = [];
+
+ //object of {oldPosition: newPosition} reversed to {newPosition: oldPosition}
+ for (oldIndex in mapping) {
+ order[mapping[oldIndex]] = items[oldIndex];
+ }
+
+ for (index = 0; index < length; index++) {
+ if (mapping[index] == undefined) {
+ remaining.push(items[index]);
+ }
+ }
+
+ for (index = 0; index < length; index++) {
+ if (order[index] == undefined) {
+ order[index] = remaining.shift();
+ }
+ }
+
+ this.clear();
+ this.addAll(order);
+
+ this.resumeEvents();
+ this.fireEvent('sort', this);
+ },
/**
* Sorts this collection by <b>key</b>s.
return -1;
},
- // private
+ /**
+ * Returns a regular expression based on the given value and matching options. This is used internally for finding and filtering,
+ * and by Ext.data.Store#filter
+ * @private
+ * @param {String} value The value to create the regex for. This is escaped using Ext.escapeRe
+ * @param {Boolean} anyMatch True to allow any match - no regex start/end line anchors will be added. Defaults to false
+ * @param {Boolean} caseSensitive True to make the regex case sensitive (adds 'i' switch to regex). Defaults to false.
+ * @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
+ */
createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
if (!value.exec) { // not a regex
var er = Ext.escapeRe;
value = String(value);
+
if (anyMatch === true) {
value = er(value);
} else {
return a.join("");
};
- /**
- * <p>Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression.
- * <b>The returned value includes enclosing double quotation marks.</b></p>
- * <p>The default return format is "yyyy-mm-ddThh:mm:ss".</p>
- * <p>To override this:</p><pre><code>
-Ext.util.JSON.encodeDate = function(d) {
- return d.format('"Y-m-d"');
-};
-</code></pre>
- * @param {Date} d The Date to encode
- * @return {String} The string literal to use in a JSON string.
- */
- this.encodeDate = function(o){
- return '"' + o.getFullYear() + "-" +
- pad(o.getMonth() + 1) + "-" +
- pad(o.getDate()) + "T" +
- pad(o.getHours()) + ":" +
- pad(o.getMinutes()) + ":" +
- pad(o.getSeconds()) + '"';
- };
+ /**
+ * <p>Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression.
+ * <b>The returned value includes enclosing double quotation marks.</b></p>
+ * <p>The default return format is "yyyy-mm-ddThh:mm:ss".</p>
+ * <p>To override this:</p><pre><code>
+Ext.util.JSON.encodeDate = function(d) {
+ return d.format('"Y-m-d"');
+};
+</code></pre>
+ * @param {Date} d The Date to encode
+ * @return {String} The string literal to use in a JSON string.
+ */
+ this.encodeDate = function(o){
+ return '"' + o.getFullYear() + "-" +
+ pad(o.getMonth() + 1) + "-" +
+ pad(o.getDate()) + "T" +
+ pad(o.getHours()) + ":" +
+ pad(o.getMinutes()) + ":" +
+ pad(o.getSeconds()) + '"';
+ };
+
+ /**
+ * Encodes an Object, Array or other value
+ * @param {Mixed} o The variable to encode
+ * @return {String} The JSON string
+ */
+ this.encode = function() {
+ var ec;
+ return function(o) {
+ if (!ec) {
+ // setup encoding function on first access
+ ec = isNative() ? JSON.stringify : doEncode;
+ }
+ return ec(o);
+ };
+ }();
+
+
+ /**
+ * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
+ * @param {String} json The JSON string
+ * @return {Object} The resulting object
+ */
+ this.decode = function() {
+ var dc;
+ return function(json) {
+ if (!dc) {
+ // setup decoding function on first access
+ dc = isNative() ? JSON.parse : doDecode;
+ }
+ return dc(json);
+ };
+ }();
+
+})();
+/**
+ * Shorthand for {@link Ext.util.JSON#encode}
+ * @param {Mixed} o The variable to encode
+ * @return {String} The JSON string
+ * @member Ext
+ * @method encode
+ */
+Ext.encode = Ext.util.JSON.encode;
+/**
+ * Shorthand for {@link Ext.util.JSON#decode}
+ * @param {String} json The JSON string
+ * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
+ * @return {Object} The resulting object
+ * @member Ext
+ * @method decode
+ */
+Ext.decode = Ext.util.JSON.decode;
+/**
+ * @class Ext.util.Format
+ * Reusable data formatting functions
+ * @singleton
+ */
+Ext.util.Format = function(){
+ var trimRe = /^\s+|\s+$/g,
+ stripTagsRE = /<\/?[^>]+>/gi,
+ stripScriptsRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,
+ nl2brRe = /\r?\n/g;
+
+ return {
+ /**
+ * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
+ * @param {String} value The string to truncate
+ * @param {Number} length The maximum length to allow before truncating
+ * @param {Boolean} word True to try to find a common work break
+ * @return {String} The converted text
+ */
+ ellipsis : function(value, len, word){
+ if(value && value.length > len){
+ if(word){
+ var vs = value.substr(0, len - 2),
+ index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));
+ if(index == -1 || index < (len - 15)){
+ return value.substr(0, len - 3) + "...";
+ }else{
+ return vs.substr(0, index) + "...";
+ }
+ } else{
+ return value.substr(0, len - 3) + "...";
+ }
+ }
+ return value;
+ },
+
+ /**
+ * Checks a reference and converts it to empty string if it is undefined
+ * @param {Mixed} value Reference to check
+ * @return {Mixed} Empty string if converted, otherwise the original value
+ */
+ undef : function(value){
+ return value !== undefined ? value : "";
+ },
+
+ /**
+ * Checks a reference and converts it to the default value if it's empty
+ * @param {Mixed} value Reference to check
+ * @param {String} defaultValue The value to insert of it's undefined (defaults to "")
+ * @return {String}
+ */
+ defaultValue : function(value, defaultValue){
+ return value !== undefined && value !== '' ? value : defaultValue;
+ },
+
+ /**
+ * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
+ * @param {String} value The string to encode
+ * @return {String} The encoded text
+ */
+ htmlEncode : function(value){
+ return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
+ },
+
+ /**
+ * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
+ * @param {String} value The string to decode
+ * @return {String} The decoded text
+ */
+ htmlDecode : function(value){
+ return !value ? value : String(value).replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"').replace(/&/g, "&");
+ },
+
+ /**
+ * Trims any whitespace from either side of a string
+ * @param {String} value The text to trim
+ * @return {String} The trimmed text
+ */
+ trim : function(value){
+ return String(value).replace(trimRe, "");
+ },
+
+ /**
+ * Returns a substring from within an original string
+ * @param {String} value The original text
+ * @param {Number} start The start index of the substring
+ * @param {Number} length The length of the substring
+ * @return {String} The substring
+ */
+ substr : function(value, start, length){
+ return String(value).substr(start, length);
+ },
+
+ /**
+ * Converts a string to all lower case letters
+ * @param {String} value The text to convert
+ * @return {String} The converted text
+ */
+ lowercase : function(value){
+ return String(value).toLowerCase();
+ },
+
+ /**
+ * Converts a string to all upper case letters
+ * @param {String} value The text to convert
+ * @return {String} The converted text
+ */
+ uppercase : function(value){
+ return String(value).toUpperCase();
+ },
+
+ /**
+ * Converts the first character only of a string to upper case
+ * @param {String} value The text to convert
+ * @return {String} The converted text
+ */
+ capitalize : function(value){
+ return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
+ },
+
+ // private
+ call : function(value, fn){
+ if(arguments.length > 2){
+ var args = Array.prototype.slice.call(arguments, 2);
+ args.unshift(value);
+ return eval(fn).apply(window, args);
+ }else{
+ return eval(fn).call(window, value);
+ }
+ },
+
+ /**
+ * Format a number as US currency
+ * @param {Number/String} value The numeric value to format
+ * @return {String} The formatted currency string
+ */
+ usMoney : function(v){
+ v = (Math.round((v-0)*100))/100;
+ v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
+ v = String(v);
+ var ps = v.split('.'),
+ whole = ps[0],
+ sub = ps[1] ? '.'+ ps[1] : '.00',
+ r = /(\d+)(\d{3})/;
+ while (r.test(whole)) {
+ whole = whole.replace(r, '$1' + ',' + '$2');
+ }
+ v = whole + sub;
+ if(v.charAt(0) == '-'){
+ return '-$' + v.substr(1);
+ }
+ return "$" + v;
+ },
+
+ /**
+ * Parse a value into a formatted date using the specified format pattern.
+ * @param {String/Date} value The value to format (Strings must conform to the format expected by the javascript Date object's <a href="http://www.w3schools.com/jsref/jsref_parse.asp">parse()</a> method)
+ * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
+ * @return {String} The formatted date string
+ */
+ date : function(v, format){
+ if(!v){
+ return "";
+ }
+ if(!Ext.isDate(v)){
+ v = new Date(Date.parse(v));
+ }
+ return v.dateFormat(format || "m/d/Y");
+ },
+
+ /**
+ * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
+ * @param {String} format Any valid date format string
+ * @return {Function} The date formatting function
+ */
+ dateRenderer : function(format){
+ return function(v){
+ return Ext.util.Format.date(v, format);
+ };
+ },
+
+ /**
+ * Strips all HTML tags
+ * @param {Mixed} value The text from which to strip tags
+ * @return {String} The stripped text
+ */
+ stripTags : function(v){
+ return !v ? v : String(v).replace(stripTagsRE, "");
+ },
+
+ /**
+ * Strips all script tags
+ * @param {Mixed} value The text from which to strip script tags
+ * @return {String} The stripped text
+ */
+ stripScripts : function(v){
+ return !v ? v : String(v).replace(stripScriptsRe, "");
+ },
+
+ /**
+ * Simple format for a file size (xxx bytes, xxx KB, xxx MB)
+ * @param {Number/String} size The numeric value to format
+ * @return {String} The formatted file size
+ */
+ fileSize : function(size){
+ if(size < 1024) {
+ return size + " bytes";
+ } else if(size < 1048576) {
+ return (Math.round(((size*10) / 1024))/10) + " KB";
+ } else {
+ return (Math.round(((size*10) / 1048576))/10) + " MB";
+ }
+ },
+
+ /**
+ * It does simple math for use in a template, for example:<pre><code>
+ * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
+ * </code></pre>
+ * @return {Function} A function that operates on the passed value.
+ */
+ math : function(){
+ var fns = {};
+ return function(v, a){
+ if(!fns[a]){
+ fns[a] = new Function('v', 'return v ' + a + ';');
+ }
+ return fns[a](v);
+ }
+ }(),
+
+ /**
+ * Rounds the passed number to the required decimal precision.
+ * @param {Number/String} value The numeric value to round.
+ * @param {Number} precision The number of decimal places to which to round the first parameter's value.
+ * @return {Number} The rounded value.
+ */
+ round : function(value, precision) {
+ var result = Number(value);
+ if (typeof precision == 'number') {
+ precision = Math.pow(10, precision);
+ result = Math.round(value * precision) / precision;
+ }
+ return result;
+ },
+
+ /**
+ * Formats the number according to the format string.
+ * <div style="margin-left:40px">examples (123456.789):
+ * <div style="margin-left:10px">
+ * 0 - (123456) show only digits, no precision<br>
+ * 0.00 - (123456.78) show only digits, 2 precision<br>
+ * 0.0000 - (123456.7890) show only digits, 4 precision<br>
+ * 0,000 - (123,456) show comma and digits, no precision<br>
+ * 0,000.00 - (123,456.78) show comma and digits, 2 precision<br>
+ * 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision<br>
+ * To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.
+ * For example: 0.000,00/i
+ * </div></div>
+ * @param {Number} v The number to format.
+ * @param {String} format The way you would like to format this text.
+ * @return {String} The formatted number.
+ */
+ number: function(v, format) {
+ if(!format){
+ return v;
+ }
+ v = Ext.num(v, NaN);
+ if (isNaN(v)){
+ return '';
+ }
+ var comma = ',',
+ dec = '.',
+ i18n = false,
+ neg = v < 0;
+
+ v = Math.abs(v);
+ if(format.substr(format.length - 2) == '/i'){
+ format = format.substr(0, format.length - 2);
+ i18n = true;
+ comma = '.';
+ dec = ',';
+ }
- /**
- * Encodes an Object, Array or other value
- * @param {Mixed} o The variable to encode
- * @return {String} The JSON string
- */
- this.encode = function() {
- var ec;
- return function(o) {
- if (!ec) {
- // setup encoding function on first access
- ec = isNative() ? JSON.stringify : doEncode;
+ var hasComma = format.indexOf(comma) != -1,
+ psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);
+
+ if(1 < psplit.length){
+ v = v.toFixed(psplit[1].length);
+ }else if(2 < psplit.length){
+ throw ('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);
+ }else{
+ v = v.toFixed(0);
}
- return ec(o);
- };
- }();
+ var fnum = v.toString();
- /**
- * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
- * @param {String} json The JSON string
- * @return {Object} The resulting object
- */
- this.decode = function() {
- var dc;
- return function(json) {
- if (!dc) {
- // setup decoding function on first access
- dc = isNative() ? JSON.parse : doDecode;
+ psplit = fnum.split('.');
+
+ if (hasComma) {
+ var cnum = psplit[0], parr = [], j = cnum.length, m = Math.floor(j / 3), n = cnum.length % 3 || 3;
+
+ for (var i = 0; i < j; i += n) {
+ if (i != 0) {
+ n = 3;
+ }
+ parr[parr.length] = cnum.substr(i, n);
+ m -= 1;
+ }
+ fnum = parr.join(comma);
+ if (psplit[1]) {
+ fnum += dec + psplit[1];
+ }
+ } else {
+ if (psplit[1]) {
+ fnum = psplit[0] + dec + psplit[1];
+ }
}
- return dc(json);
- };
- }();
-})();
-/**
- * Shorthand for {@link Ext.util.JSON#encode}
- * @param {Mixed} o The variable to encode
- * @return {String} The JSON string
- * @member Ext
- * @method encode
- */
-Ext.encode = Ext.util.JSON.encode;
-/**
- * Shorthand for {@link Ext.util.JSON#decode}
- * @param {String} json The JSON string
- * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
- * @return {Object} The resulting object
- * @member Ext
- * @method decode
- */
-Ext.decode = Ext.util.JSON.decode;
-/**\r
- * @class Ext.util.Format\r
- * Reusable data formatting functions\r
- * @singleton\r
- */\r
-Ext.util.Format = function(){\r
- var trimRe = /^\s+|\s+$/g,\r
- stripTagsRE = /<\/?[^>]+>/gi,\r
- stripScriptsRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,\r
- nl2brRe = /\r?\n/g;\r
- \r
- return {\r
- /**\r
- * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length\r
- * @param {String} value The string to truncate\r
- * @param {Number} length The maximum length to allow before truncating\r
- * @param {Boolean} word True to try to find a common work break\r
- * @return {String} The converted text\r
- */\r
- ellipsis : function(value, len, word){\r
- if(value && value.length > len){\r
- if(word){\r
- var vs = value.substr(0, len - 2),\r
- index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));\r
- if(index == -1 || index < (len - 15)){\r
- return value.substr(0, len - 3) + "...";\r
- }else{\r
- return vs.substr(0, index) + "...";\r
- }\r
- } else{\r
- return value.substr(0, len - 3) + "...";\r
- }\r
- }\r
- return value;\r
- },\r
-\r
- /**\r
- * Checks a reference and converts it to empty string if it is undefined\r
- * @param {Mixed} value Reference to check\r
- * @return {Mixed} Empty string if converted, otherwise the original value\r
- */\r
- undef : function(value){\r
- return value !== undefined ? value : "";\r
- },\r
-\r
- /**\r
- * Checks a reference and converts it to the default value if it's empty\r
- * @param {Mixed} value Reference to check\r
- * @param {String} defaultValue The value to insert of it's undefined (defaults to "")\r
- * @return {String}\r
- */\r
- defaultValue : function(value, defaultValue){\r
- return value !== undefined && value !== '' ? value : defaultValue;\r
- },\r
-\r
- /**\r
- * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.\r
- * @param {String} value The string to encode\r
- * @return {String} The encoded text\r
- */\r
- htmlEncode : function(value){\r
- return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);\r
- },\r
-\r
- /**\r
- * Convert certain characters (&, <, >, and ') from their HTML character equivalents.\r
- * @param {String} value The string to decode\r
- * @return {String} The decoded text\r
- */\r
- htmlDecode : function(value){\r
- return !value ? value : String(value).replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"').replace(/&/g, "&");\r
- },\r
-\r
- /**\r
- * Trims any whitespace from either side of a string\r
- * @param {String} value The text to trim\r
- * @return {String} The trimmed text\r
- */\r
- trim : function(value){\r
- return String(value).replace(trimRe, "");\r
- },\r
-\r
- /**\r
- * Returns a substring from within an original string\r
- * @param {String} value The original text\r
- * @param {Number} start The start index of the substring\r
- * @param {Number} length The length of the substring\r
- * @return {String} The substring\r
- */\r
- substr : function(value, start, length){\r
- return String(value).substr(start, length);\r
- },\r
-\r
- /**\r
- * Converts a string to all lower case letters\r
- * @param {String} value The text to convert\r
- * @return {String} The converted text\r
- */\r
- lowercase : function(value){\r
- return String(value).toLowerCase();\r
- },\r
-\r
- /**\r
- * Converts a string to all upper case letters\r
- * @param {String} value The text to convert\r
- * @return {String} The converted text\r
- */\r
- uppercase : function(value){\r
- return String(value).toUpperCase();\r
- },\r
-\r
- /**\r
- * Converts the first character only of a string to upper case\r
- * @param {String} value The text to convert\r
- * @return {String} The converted text\r
- */\r
- capitalize : function(value){\r
- return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();\r
- },\r
-\r
- // private\r
- call : function(value, fn){\r
- if(arguments.length > 2){\r
- var args = Array.prototype.slice.call(arguments, 2);\r
- args.unshift(value);\r
- return eval(fn).apply(window, args);\r
- }else{\r
- return eval(fn).call(window, value);\r
- }\r
- },\r
-\r
- /**\r
- * Format a number as US currency\r
- * @param {Number/String} value The numeric value to format\r
- * @return {String} The formatted currency string\r
- */\r
- usMoney : function(v){\r
- v = (Math.round((v-0)*100))/100;\r
- v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);\r
- v = String(v);\r
- var ps = v.split('.'),\r
- whole = ps[0],\r
- sub = ps[1] ? '.'+ ps[1] : '.00',\r
- r = /(\d+)(\d{3})/;\r
- while (r.test(whole)) {\r
- whole = whole.replace(r, '$1' + ',' + '$2');\r
- }\r
- v = whole + sub;\r
- if(v.charAt(0) == '-'){\r
- return '-$' + v.substr(1);\r
- }\r
- return "$" + v;\r
- },\r
-\r
- /**\r
- * Parse a value into a formatted date using the specified format pattern.\r
- * @param {String/Date} value The value to format (Strings must conform to the format expected by the javascript Date object's <a href="http://www.w3schools.com/jsref/jsref_parse.asp">parse()</a> method)\r
- * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')\r
- * @return {String} The formatted date string\r
- */\r
- date : function(v, format){\r
- if(!v){\r
- return "";\r
- }\r
- if(!Ext.isDate(v)){\r
- v = new Date(Date.parse(v));\r
- }\r
- return v.dateFormat(format || "m/d/Y");\r
- },\r
-\r
- /**\r
- * Returns a date rendering function that can be reused to apply a date format multiple times efficiently\r
- * @param {String} format Any valid date format string\r
- * @return {Function} The date formatting function\r
- */\r
- dateRenderer : function(format){\r
- return function(v){\r
- return Ext.util.Format.date(v, format);\r
- };\r
- },\r
- \r
- /**\r
- * Strips all HTML tags\r
- * @param {Mixed} value The text from which to strip tags\r
- * @return {String} The stripped text\r
- */\r
- stripTags : function(v){\r
- return !v ? v : String(v).replace(stripTagsRE, "");\r
- },\r
-\r
- /**\r
- * Strips all script tags\r
- * @param {Mixed} value The text from which to strip script tags\r
- * @return {String} The stripped text\r
- */\r
- stripScripts : function(v){\r
- return !v ? v : String(v).replace(stripScriptsRe, "");\r
- },\r
-\r
- /**\r
- * Simple format for a file size (xxx bytes, xxx KB, xxx MB)\r
- * @param {Number/String} size The numeric value to format\r
- * @return {String} The formatted file size\r
- */\r
- fileSize : function(size){\r
- if(size < 1024) {\r
- return size + " bytes";\r
- } else if(size < 1048576) {\r
- return (Math.round(((size*10) / 1024))/10) + " KB";\r
- } else {\r
- return (Math.round(((size*10) / 1048576))/10) + " MB";\r
- }\r
- },\r
-\r
- /**\r
- * It does simple math for use in a template, for example:<pre><code>\r
- * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');\r
- * </code></pre>\r
- * @return {Function} A function that operates on the passed value.\r
- */\r
- math : function(){\r
- var fns = {};\r
- return function(v, a){\r
- if(!fns[a]){\r
- fns[a] = new Function('v', 'return v ' + a + ';');\r
- }\r
- return fns[a](v);\r
- }\r
- }(),\r
-\r
- /**\r
- * Rounds the passed number to the required decimal precision.\r
- * @param {Number/String} value The numeric value to round.\r
- * @param {Number} precision The number of decimal places to which to round the first parameter's value.\r
- * @return {Number} The rounded value.\r
- */\r
- round : function(value, precision) {\r
- var result = Number(value);\r
- if (typeof precision == 'number') {\r
- precision = Math.pow(10, precision);\r
- result = Math.round(value * precision) / precision;\r
- }\r
- return result;\r
- },\r
-\r
- /**\r
- * Formats the number according to the format string.\r
- * <div style="margin-left:40px">examples (123456.789):\r
- * <div style="margin-left:10px">\r
- * 0 - (123456) show only digits, no precision<br>\r
- * 0.00 - (123456.78) show only digits, 2 precision<br>\r
- * 0.0000 - (123456.7890) show only digits, 4 precision<br>\r
- * 0,000 - (123,456) show comma and digits, no precision<br>\r
- * 0,000.00 - (123,456.78) show comma and digits, 2 precision<br>\r
- * 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision<br>\r
- * To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.\r
- * For example: 0.000,00/i\r
- * </div></div>\r
- * @param {Number} v The number to format.\r
- * @param {String} format The way you would like to format this text.\r
- * @return {String} The formatted number.\r
- */\r
- number: function(v, format) {\r
- if(!format){\r
- return v;\r
- }\r
- v = Ext.num(v, NaN);\r
- if (isNaN(v)){\r
- return '';\r
- }\r
- var comma = ',',\r
- dec = '.',\r
- i18n = false,\r
- neg = v < 0;\r
- \r
- v = Math.abs(v);\r
- if(format.substr(format.length - 2) == '/i'){\r
- format = format.substr(0, format.length - 2);\r
- i18n = true;\r
- comma = '.';\r
- dec = ',';\r
- }\r
- \r
- var hasComma = format.indexOf(comma) != -1, \r
- psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);\r
- \r
- if(1 < psplit.length){\r
- v = v.toFixed(psplit[1].length);\r
- }else if(2 < psplit.length){\r
- throw ('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);\r
- }else{\r
- v = v.toFixed(0);\r
- }\r
- \r
- var fnum = v.toString();\r
- if(hasComma){\r
- psplit = fnum.split('.');\r
- \r
- var cnum = psplit[0], parr = [], j = cnum.length, m = Math.floor(j / 3), n = cnum.length % 3 || 3;\r
- \r
- for(var i = 0; i < j; i += n){\r
- if(i != 0){\r
- n = 3;\r
- }\r
- parr[parr.length] = cnum.substr(i, n);\r
- m -= 1;\r
- }\r
- fnum = parr.join(comma);\r
- if(psplit[1]){\r
- fnum += dec + psplit[1];\r
- }\r
- }\r
- \r
- return (neg ? '-' : '') + format.replace(/[\d,?\.?]+/, fnum);\r
- },\r
-\r
- /**\r
- * Returns a number rendering function that can be reused to apply a number format multiple times efficiently\r
- * @param {String} format Any valid number format string for {@link #number}\r
- * @return {Function} The number formatting function\r
- */\r
- numberRenderer : function(format){\r
- return function(v){\r
- return Ext.util.Format.number(v, format);\r
- };\r
- },\r
-\r
- /**\r
- * Selectively do a plural form of a word based on a numeric value. For example, in a template,\r
- * {commentCount:plural("Comment")} would result in "1 Comment" if commentCount was 1 or would be "x Comments"\r
- * if the value is 0 or greater than 1.\r
- * @param {Number} value The value to compare against\r
- * @param {String} singular The singular form of the word\r
- * @param {String} plural (optional) The plural form of the word (defaults to the singular with an "s")\r
- */\r
- plural : function(v, s, p){\r
- return v +' ' + (v == 1 ? s : (p ? p : s+'s'));\r
- },\r
- \r
- /**\r
- * Converts newline characters to the HTML tag <br/>\r
- * @param {String} The string value to format.\r
- * @return {String} The string with embedded <br/> tags in place of newlines.\r
- */\r
- nl2br : function(v){\r
- return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '<br/>');\r
- }\r
- }\r
-}();\r
+ return (neg ? '-' : '') + format.replace(/[\d,?\.?]+/, fnum);
+ },
+
+ /**
+ * Returns a number rendering function that can be reused to apply a number format multiple times efficiently
+ * @param {String} format Any valid number format string for {@link #number}
+ * @return {Function} The number formatting function
+ */
+ numberRenderer : function(format){
+ return function(v){
+ return Ext.util.Format.number(v, format);
+ };
+ },
+
+ /**
+ * Selectively do a plural form of a word based on a numeric value. For example, in a template,
+ * {commentCount:plural("Comment")} would result in "1 Comment" if commentCount was 1 or would be "x Comments"
+ * if the value is 0 or greater than 1.
+ * @param {Number} value The value to compare against
+ * @param {String} singular The singular form of the word
+ * @param {String} plural (optional) The plural form of the word (defaults to the singular with an "s")
+ */
+ plural : function(v, s, p){
+ return v +' ' + (v == 1 ? s : (p ? p : s+'s'));
+ },
+
+ /**
+ * Converts newline characters to the HTML tag <br/>
+ * @param {String} The string value to format.
+ * @return {String} The string with embedded <br/> tags in place of newlines.
+ */
+ nl2br : function(v){
+ return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '<br/>');
+ }
+ }
+}();
/**
* @class Ext.XTemplate
* @extends Ext.Template
Ext.XTemplate.from = function(el){
el = Ext.getDom(el);
return new Ext.XTemplate(el.value || el.innerHTML);
-};/**\r
- * @class Ext.util.CSS\r
- * Utility class for manipulating CSS rules\r
- * @singleton\r
- */\r
-Ext.util.CSS = function(){\r
- var rules = null;\r
- var doc = document;\r
-\r
- var camelRe = /(-[a-z])/gi;\r
- var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };\r
-\r
- return {\r
- /**\r
- * Creates a stylesheet from a text blob of rules.\r
- * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.\r
- * @param {String} cssText The text containing the css rules\r
- * @param {String} id An id to add to the stylesheet for later removal\r
- * @return {StyleSheet}\r
- */\r
- createStyleSheet : function(cssText, id){\r
- var ss;\r
- var head = doc.getElementsByTagName("head")[0];\r
- var rules = doc.createElement("style");\r
- rules.setAttribute("type", "text/css");\r
- if(id){\r
- rules.setAttribute("id", id);\r
- }\r
- if(Ext.isIE){\r
- head.appendChild(rules);\r
- ss = rules.styleSheet;\r
- ss.cssText = cssText;\r
- }else{\r
- try{\r
- rules.appendChild(doc.createTextNode(cssText));\r
- }catch(e){\r
- rules.cssText = cssText;\r
- }\r
- head.appendChild(rules);\r
- ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);\r
- }\r
- this.cacheStyleSheet(ss);\r
- return ss;\r
- },\r
-\r
- /**\r
- * Removes a style or link tag by id\r
- * @param {String} id The id of the tag\r
- */\r
- removeStyleSheet : function(id){\r
- var existing = doc.getElementById(id);\r
- if(existing){\r
- existing.parentNode.removeChild(existing);\r
- }\r
- },\r
-\r
- /**\r
- * Dynamically swaps an existing stylesheet reference for a new one\r
- * @param {String} id The id of an existing link tag to remove\r
- * @param {String} url The href of the new stylesheet to include\r
- */\r
- swapStyleSheet : function(id, url){\r
- this.removeStyleSheet(id);\r
- var ss = doc.createElement("link");\r
- ss.setAttribute("rel", "stylesheet");\r
- ss.setAttribute("type", "text/css");\r
- ss.setAttribute("id", id);\r
- ss.setAttribute("href", url);\r
- doc.getElementsByTagName("head")[0].appendChild(ss);\r
- },\r
- \r
- /**\r
- * Refresh the rule cache if you have dynamically added stylesheets\r
- * @return {Object} An object (hash) of rules indexed by selector\r
- */\r
- refreshCache : function(){\r
- return this.getRules(true);\r
- },\r
-\r
- // private\r
- cacheStyleSheet : function(ss){\r
- if(!rules){\r
- rules = {};\r
- }\r
- try{// try catch for cross domain access issue\r
- var ssRules = ss.cssRules || ss.rules;\r
- for(var j = ssRules.length-1; j >= 0; --j){\r
- rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j];\r
- }\r
- }catch(e){}\r
- },\r
- \r
- /**\r
- * Gets all css rules for the document\r
- * @param {Boolean} refreshCache true to refresh the internal cache\r
- * @return {Object} An object (hash) of rules indexed by selector\r
- */\r
- getRules : function(refreshCache){\r
- if(rules === null || refreshCache){\r
- rules = {};\r
- var ds = doc.styleSheets;\r
- for(var i =0, len = ds.length; i < len; i++){\r
- try{\r
- this.cacheStyleSheet(ds[i]);\r
- }catch(e){} \r
- }\r
- }\r
- return rules;\r
- },\r
- \r
- /**\r
- * Gets an an individual CSS rule by selector(s)\r
- * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.\r
- * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically\r
- * @return {CSSRule} The CSS rule or null if one is not found\r
- */\r
- getRule : function(selector, refreshCache){\r
- var rs = this.getRules(refreshCache);\r
- if(!Ext.isArray(selector)){\r
- return rs[selector.toLowerCase()];\r
- }\r
- for(var i = 0; i < selector.length; i++){\r
- if(rs[selector[i]]){\r
- return rs[selector[i].toLowerCase()];\r
- }\r
- }\r
- return null;\r
- },\r
- \r
- \r
- /**\r
- * Updates a rule property\r
- * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.\r
- * @param {String} property The css property\r
- * @param {String} value The new value for the property\r
- * @return {Boolean} true If a rule was found and updated\r
- */\r
- updateRule : function(selector, property, value){\r
- if(!Ext.isArray(selector)){\r
- var rule = this.getRule(selector);\r
- if(rule){\r
- rule.style[property.replace(camelRe, camelFn)] = value;\r
- return true;\r
- }\r
- }else{\r
- for(var i = 0; i < selector.length; i++){\r
- if(this.updateRule(selector[i], property, value)){\r
- return true;\r
- }\r
- }\r
- }\r
- return false;\r
- }\r
- }; \r
+};/**
+ * @class Ext.util.CSS
+ * Utility class for manipulating CSS rules
+ * @singleton
+ */
+Ext.util.CSS = function(){
+ var rules = null;
+ var doc = document;
+
+ var camelRe = /(-[a-z])/gi;
+ var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
+
+ return {
+ /**
+ * Creates a stylesheet from a text blob of rules.
+ * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
+ * @param {String} cssText The text containing the css rules
+ * @param {String} id An id to add to the stylesheet for later removal
+ * @return {StyleSheet}
+ */
+ createStyleSheet : function(cssText, id){
+ var ss;
+ var head = doc.getElementsByTagName("head")[0];
+ var rules = doc.createElement("style");
+ rules.setAttribute("type", "text/css");
+ if(id){
+ rules.setAttribute("id", id);
+ }
+ if(Ext.isIE){
+ head.appendChild(rules);
+ ss = rules.styleSheet;
+ ss.cssText = cssText;
+ }else{
+ try{
+ rules.appendChild(doc.createTextNode(cssText));
+ }catch(e){
+ rules.cssText = cssText;
+ }
+ head.appendChild(rules);
+ ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
+ }
+ this.cacheStyleSheet(ss);
+ return ss;
+ },
+
+ /**
+ * Removes a style or link tag by id
+ * @param {String} id The id of the tag
+ */
+ removeStyleSheet : function(id){
+ var existing = doc.getElementById(id);
+ if(existing){
+ existing.parentNode.removeChild(existing);
+ }
+ },
+
+ /**
+ * Dynamically swaps an existing stylesheet reference for a new one
+ * @param {String} id The id of an existing link tag to remove
+ * @param {String} url The href of the new stylesheet to include
+ */
+ swapStyleSheet : function(id, url){
+ this.removeStyleSheet(id);
+ var ss = doc.createElement("link");
+ ss.setAttribute("rel", "stylesheet");
+ ss.setAttribute("type", "text/css");
+ ss.setAttribute("id", id);
+ ss.setAttribute("href", url);
+ doc.getElementsByTagName("head")[0].appendChild(ss);
+ },
+
+ /**
+ * Refresh the rule cache if you have dynamically added stylesheets
+ * @return {Object} An object (hash) of rules indexed by selector
+ */
+ refreshCache : function(){
+ return this.getRules(true);
+ },
+
+ // private
+ cacheStyleSheet : function(ss){
+ if(!rules){
+ rules = {};
+ }
+ try{// try catch for cross domain access issue
+ var ssRules = ss.cssRules || ss.rules;
+ for(var j = ssRules.length-1; j >= 0; --j){
+ rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j];
+ }
+ }catch(e){}
+ },
+
+ /**
+ * Gets all css rules for the document
+ * @param {Boolean} refreshCache true to refresh the internal cache
+ * @return {Object} An object (hash) of rules indexed by selector
+ */
+ getRules : function(refreshCache){
+ if(rules === null || refreshCache){
+ rules = {};
+ var ds = doc.styleSheets;
+ for(var i =0, len = ds.length; i < len; i++){
+ try{
+ this.cacheStyleSheet(ds[i]);
+ }catch(e){}
+ }
+ }
+ return rules;
+ },
+
+ /**
+ * Gets an an individual CSS rule by selector(s)
+ * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
+ * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
+ * @return {CSSRule} The CSS rule or null if one is not found
+ */
+ getRule : function(selector, refreshCache){
+ var rs = this.getRules(refreshCache);
+ if(!Ext.isArray(selector)){
+ return rs[selector.toLowerCase()];
+ }
+ for(var i = 0; i < selector.length; i++){
+ if(rs[selector[i]]){
+ return rs[selector[i].toLowerCase()];
+ }
+ }
+ return null;
+ },
+
+
+ /**
+ * Updates a rule property
+ * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
+ * @param {String} property The css property
+ * @param {String} value The new value for the property
+ * @return {Boolean} true If a rule was found and updated
+ */
+ updateRule : function(selector, property, value){
+ if(!Ext.isArray(selector)){
+ var rule = this.getRule(selector);
+ if(rule){
+ rule.style[property.replace(camelRe, camelFn)] = value;
+ return true;
+ }
+ }else{
+ for(var i = 0; i < selector.length; i++){
+ if(this.updateRule(selector[i], property, value)){
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+ };
}();/**
@class Ext.util.ClickRepeater
@extends Ext.util.Observable
enable: function(){
if(this.disabled){
this.el.on('mousedown', this.handleMouseDown, this);
+ if (Ext.isIE){
+ this.el.on('dblclick', this.handleDblClick, this);
+ }
if(this.preventDefault || this.stopDefault){
this.el.on('click', this.eventOptions, this);
}
}
this.disabled = false;
},
-
+
/**
* Disables the repeater and stops events from firing.
*/
}
this.disabled = true;
},
-
+
/**
* Convenience function for setting disabled/enabled by boolean.
* @param {Boolean} disabled
*/
setDisabled: function(disabled){
- this[disabled ? 'disable' : 'enable']();
+ this[disabled ? 'disable' : 'enable']();
},
-
+
eventOptions: function(e){
if(this.preventDefault){
e.preventDefault();
}
if(this.stopDefault){
e.stopEvent();
- }
+ }
},
-
+
// private
destroy : function() {
this.disable(true);
Ext.destroy(this.el);
this.purgeListeners();
},
-
+
+ handleDblClick : function(){
+ clearTimeout(this.timer);
+ this.el.blur();
+
+ this.fireEvent("mousedown", this);
+ this.fireEvent("click", this);
+ },
+
// private
handleMouseDown : function(){
clearTimeout(this.timer);
this.fireEvent("mousedown", this);
this.fireEvent("click", this);
-// Do not honor delay or interval if acceleration wanted.
+ // Do not honor delay or interval if acceleration wanted.
if (this.accelerate) {
this.delay = 400;
- }
+ }
this.timer = this.click.defer(this.delay || this.interval, this);
},
return this.forceKeyDown || Ext.EventManager.useKeydown;
}
};
-/**\r
- * @class Ext.KeyMap\r
- * Handles mapping keys to actions for an element. One key map can be used for multiple actions.\r
- * The constructor accepts the same config object as defined by {@link #addBinding}.\r
- * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key\r
- * combination it will call the function with this signature (if the match is a multi-key\r
- * combination the callback will still be called only once): (String key, Ext.EventObject e)\r
- * A KeyMap can also handle a string representation of keys.<br />\r
- * Usage:\r
- <pre><code>\r
-// map one key by key code\r
-var map = new Ext.KeyMap("my-element", {\r
- key: 13, // or Ext.EventObject.ENTER\r
- fn: myHandler,\r
- scope: myObject\r
-});\r
-\r
-// map multiple keys to one action by string\r
-var map = new Ext.KeyMap("my-element", {\r
- key: "a\r\n\t",\r
- fn: myHandler,\r
- scope: myObject\r
-});\r
-\r
-// map multiple keys to multiple actions by strings and array of codes\r
-var map = new Ext.KeyMap("my-element", [\r
- {\r
- key: [10,13],\r
- fn: function(){ alert("Return was pressed"); }\r
- }, {\r
- key: "abc",\r
- fn: function(){ alert('a, b or c was pressed'); }\r
- }, {\r
- key: "\t",\r
- ctrl:true,\r
- shift:true,\r
- fn: function(){ alert('Control + shift + tab was pressed.'); }\r
- }\r
-]);\r
-</code></pre>\r
- * <b>Note: A KeyMap starts enabled</b>\r
- * @constructor\r
- * @param {Mixed} el The element to bind to\r
- * @param {Object} config The config (see {@link #addBinding})\r
- * @param {String} eventName (optional) The event to bind to (defaults to "keydown")\r
- */\r
-Ext.KeyMap = function(el, config, eventName){\r
- this.el = Ext.get(el);\r
- this.eventName = eventName || "keydown";\r
- this.bindings = [];\r
- if(config){\r
- this.addBinding(config);\r
- }\r
- this.enable();\r
-};\r
-\r
-Ext.KeyMap.prototype = {\r
- /**\r
- * True to stop the event from bubbling and prevent the default browser action if the\r
- * key was handled by the KeyMap (defaults to false)\r
- * @type Boolean\r
- */\r
- stopEvent : false,\r
-\r
- /**\r
- * Add a new binding to this KeyMap. The following config object properties are supported:\r
- * <pre>\r
-Property Type Description\r
----------- --------------- ----------------------------------------------------------------------\r
-key String/Array A single keycode or an array of keycodes to handle\r
-shift Boolean True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)\r
-ctrl Boolean True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)\r
-alt Boolean True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)\r
-handler Function The function to call when KeyMap finds the expected key combination\r
-fn Function Alias of handler (for backwards-compatibility)\r
-scope Object The scope of the callback function\r
-stopEvent Boolean True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)\r
-</pre>\r
- *\r
- * Usage:\r
- * <pre><code>\r
-// Create a KeyMap\r
-var map = new Ext.KeyMap(document, {\r
- key: Ext.EventObject.ENTER,\r
- fn: handleKey,\r
- scope: this\r
-});\r
-\r
-//Add a new binding to the existing KeyMap later\r
-map.addBinding({\r
- key: 'abc',\r
- shift: true,\r
- fn: handleKey,\r
- scope: this\r
-});\r
-</code></pre>\r
- * @param {Object/Array} config A single KeyMap config or an array of configs\r
- */\r
- addBinding : function(config){\r
- if(Ext.isArray(config)){\r
- Ext.each(config, function(c){\r
- this.addBinding(c);\r
- }, this);\r
- return;\r
- }\r
- var keyCode = config.key,\r
- fn = config.fn || config.handler,\r
- scope = config.scope;\r
-\r
- if (config.stopEvent) {\r
- this.stopEvent = config.stopEvent; \r
- } \r
-\r
- if(typeof keyCode == "string"){\r
- var ks = [];\r
- var keyString = keyCode.toUpperCase();\r
- for(var j = 0, len = keyString.length; j < len; j++){\r
- ks.push(keyString.charCodeAt(j));\r
- }\r
- keyCode = ks;\r
- }\r
- var keyArray = Ext.isArray(keyCode);\r
- \r
- var handler = function(e){\r
- if(this.checkModifiers(config, e)){\r
- var k = e.getKey();\r
- if(keyArray){\r
- for(var i = 0, len = keyCode.length; i < len; i++){\r
- if(keyCode[i] == k){\r
- if(this.stopEvent){\r
- e.stopEvent();\r
- }\r
- fn.call(scope || window, k, e);\r
- return;\r
- }\r
- }\r
- }else{\r
- if(k == keyCode){\r
- if(this.stopEvent){\r
- e.stopEvent();\r
- }\r
- fn.call(scope || window, k, e);\r
- }\r
- }\r
- }\r
- };\r
- this.bindings.push(handler);\r
- },\r
- \r
- // private\r
- checkModifiers: function(config, e){\r
- var val, key, keys = ['shift', 'ctrl', 'alt'];\r
- for (var i = 0, len = keys.length; i < len; ++i){\r
- key = keys[i];\r
- val = config[key];\r
- if(!(val === undefined || (val === e[key + 'Key']))){\r
- return false;\r
- }\r
- }\r
- return true;\r
- },\r
-\r
- /**\r
- * Shorthand for adding a single key listener\r
- * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the\r
- * following options:\r
- * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.\r
- */\r
- on : function(key, fn, scope){\r
- var keyCode, shift, ctrl, alt;\r
- if(typeof key == "object" && !Ext.isArray(key)){\r
- keyCode = key.key;\r
- shift = key.shift;\r
- ctrl = key.ctrl;\r
- alt = key.alt;\r
- }else{\r
- keyCode = key;\r
- }\r
- this.addBinding({\r
- key: keyCode,\r
- shift: shift,\r
- ctrl: ctrl,\r
- alt: alt,\r
- fn: fn,\r
- scope: scope\r
- });\r
- },\r
-\r
- // private\r
- handleKeyDown : function(e){\r
- if(this.enabled){ //just in case\r
- var b = this.bindings;\r
- for(var i = 0, len = b.length; i < len; i++){\r
- b[i].call(this, e);\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Returns true if this KeyMap is enabled\r
- * @return {Boolean}\r
- */\r
- isEnabled : function(){\r
- return this.enabled;\r
- },\r
-\r
- /**\r
- * Enables this KeyMap\r
- */\r
- enable: function(){\r
- if(!this.enabled){\r
- this.el.on(this.eventName, this.handleKeyDown, this);\r
- this.enabled = true;\r
- }\r
- },\r
-\r
- /**\r
- * Disable this KeyMap\r
- */\r
- disable: function(){\r
- if(this.enabled){\r
- this.el.removeListener(this.eventName, this.handleKeyDown, this);\r
- this.enabled = false;\r
- }\r
- },\r
- \r
- /**\r
- * Convenience function for setting disabled/enabled by boolean.\r
- * @param {Boolean} disabled\r
- */\r
- setDisabled : function(disabled){\r
- this[disabled ? "disable" : "enable"]();\r
- }\r
+/**
+ * @class Ext.KeyMap
+ * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
+ * The constructor accepts the same config object as defined by {@link #addBinding}.
+ * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
+ * combination it will call the function with this signature (if the match is a multi-key
+ * combination the callback will still be called only once): (String key, Ext.EventObject e)
+ * A KeyMap can also handle a string representation of keys.<br />
+ * Usage:
+ <pre><code>
+// map one key by key code
+var map = new Ext.KeyMap("my-element", {
+ key: 13, // or Ext.EventObject.ENTER
+ fn: myHandler,
+ scope: myObject
+});
+
+// map multiple keys to one action by string
+var map = new Ext.KeyMap("my-element", {
+ key: "a\r\n\t",
+ fn: myHandler,
+ scope: myObject
+});
+
+// map multiple keys to multiple actions by strings and array of codes
+var map = new Ext.KeyMap("my-element", [
+ {
+ key: [10,13],
+ fn: function(){ alert("Return was pressed"); }
+ }, {
+ key: "abc",
+ fn: function(){ alert('a, b or c was pressed'); }
+ }, {
+ key: "\t",
+ ctrl:true,
+ shift:true,
+ fn: function(){ alert('Control + shift + tab was pressed.'); }
+ }
+]);
+</code></pre>
+ * <b>Note: A KeyMap starts enabled</b>
+ * @constructor
+ * @param {Mixed} el The element to bind to
+ * @param {Object} config The config (see {@link #addBinding})
+ * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
+ */
+Ext.KeyMap = function(el, config, eventName){
+ this.el = Ext.get(el);
+ this.eventName = eventName || "keydown";
+ this.bindings = [];
+ if(config){
+ this.addBinding(config);
+ }
+ this.enable();
+};
+
+Ext.KeyMap.prototype = {
+ /**
+ * True to stop the event from bubbling and prevent the default browser action if the
+ * key was handled by the KeyMap (defaults to false)
+ * @type Boolean
+ */
+ stopEvent : false,
+
+ /**
+ * Add a new binding to this KeyMap. The following config object properties are supported:
+ * <pre>
+Property Type Description
+---------- --------------- ----------------------------------------------------------------------
+key String/Array A single keycode or an array of keycodes to handle
+shift Boolean True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)
+ctrl Boolean True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)
+alt Boolean True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)
+handler Function The function to call when KeyMap finds the expected key combination
+fn Function Alias of handler (for backwards-compatibility)
+scope Object The scope of the callback function
+stopEvent Boolean True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)
+</pre>
+ *
+ * Usage:
+ * <pre><code>
+// Create a KeyMap
+var map = new Ext.KeyMap(document, {
+ key: Ext.EventObject.ENTER,
+ fn: handleKey,
+ scope: this
+});
+
+//Add a new binding to the existing KeyMap later
+map.addBinding({
+ key: 'abc',
+ shift: true,
+ fn: handleKey,
+ scope: this
+});
+</code></pre>
+ * @param {Object/Array} config A single KeyMap config or an array of configs
+ */
+ addBinding : function(config){
+ if(Ext.isArray(config)){
+ Ext.each(config, function(c){
+ this.addBinding(c);
+ }, this);
+ return;
+ }
+ var keyCode = config.key,
+ fn = config.fn || config.handler,
+ scope = config.scope;
+
+ if (config.stopEvent) {
+ this.stopEvent = config.stopEvent;
+ }
+
+ if(typeof keyCode == "string"){
+ var ks = [];
+ var keyString = keyCode.toUpperCase();
+ for(var j = 0, len = keyString.length; j < len; j++){
+ ks.push(keyString.charCodeAt(j));
+ }
+ keyCode = ks;
+ }
+ var keyArray = Ext.isArray(keyCode);
+
+ var handler = function(e){
+ if(this.checkModifiers(config, e)){
+ var k = e.getKey();
+ if(keyArray){
+ for(var i = 0, len = keyCode.length; i < len; i++){
+ if(keyCode[i] == k){
+ if(this.stopEvent){
+ e.stopEvent();
+ }
+ fn.call(scope || window, k, e);
+ return;
+ }
+ }
+ }else{
+ if(k == keyCode){
+ if(this.stopEvent){
+ e.stopEvent();
+ }
+ fn.call(scope || window, k, e);
+ }
+ }
+ }
+ };
+ this.bindings.push(handler);
+ },
+
+ // private
+ checkModifiers: function(config, e){
+ var val, key, keys = ['shift', 'ctrl', 'alt'];
+ for (var i = 0, len = keys.length; i < len; ++i){
+ key = keys[i];
+ val = config[key];
+ if(!(val === undefined || (val === e[key + 'Key']))){
+ return false;
+ }
+ }
+ return true;
+ },
+
+ /**
+ * Shorthand for adding a single key listener
+ * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
+ * following options:
+ * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.
+ */
+ on : function(key, fn, scope){
+ var keyCode, shift, ctrl, alt;
+ if(typeof key == "object" && !Ext.isArray(key)){
+ keyCode = key.key;
+ shift = key.shift;
+ ctrl = key.ctrl;
+ alt = key.alt;
+ }else{
+ keyCode = key;
+ }
+ this.addBinding({
+ key: keyCode,
+ shift: shift,
+ ctrl: ctrl,
+ alt: alt,
+ fn: fn,
+ scope: scope
+ });
+ },
+
+ // private
+ handleKeyDown : function(e){
+ if(this.enabled){ //just in case
+ var b = this.bindings;
+ for(var i = 0, len = b.length; i < len; i++){
+ b[i].call(this, e);
+ }
+ }
+ },
+
+ /**
+ * Returns true if this KeyMap is enabled
+ * @return {Boolean}
+ */
+ isEnabled : function(){
+ return this.enabled;
+ },
+
+ /**
+ * Enables this KeyMap
+ */
+ enable: function(){
+ if(!this.enabled){
+ this.el.on(this.eventName, this.handleKeyDown, this);
+ this.enabled = true;
+ }
+ },
+
+ /**
+ * Disable this KeyMap
+ */
+ disable: function(){
+ if(this.enabled){
+ this.el.removeListener(this.eventName, this.handleKeyDown, this);
+ this.enabled = false;
+ }
+ },
+
+ /**
+ * Convenience function for setting disabled/enabled by boolean.
+ * @param {Boolean} disabled
+ */
+ setDisabled : function(disabled){
+ this[disabled ? "disable" : "enable"]();
+ }
};/**
* @class Ext.util.TextMetrics
* Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);
}
});
-/**\r
- * @class Ext.util.Cookies\r
- * Utility class for managing and interacting with cookies.\r
- * @singleton\r
- */\r
-Ext.util.Cookies = {\r
- /**\r
- * Create a cookie with the specified name and value. Additional settings\r
- * for the cookie may be optionally specified (for example: expiration,\r
- * access restriction, SSL).\r
- * @param {String} name The name of the cookie to set. \r
- * @param {Mixed} value The value to set for the cookie.\r
- * @param {Object} expires (Optional) Specify an expiration date the\r
- * cookie is to persist until. Note that the specified Date object will\r
- * be converted to Greenwich Mean Time (GMT). \r
- * @param {String} path (Optional) Setting a path on the cookie restricts\r
- * access to pages that match that path. Defaults to all pages (<tt>'/'</tt>). \r
- * @param {String} domain (Optional) Setting a domain restricts access to\r
- * pages on a given domain (typically used to allow cookie access across\r
- * subdomains). For example, "extjs.com" will create a cookie that can be\r
- * accessed from any subdomain of extjs.com, including www.extjs.com,\r
- * support.extjs.com, etc.\r
- * @param {Boolean} secure (Optional) Specify true to indicate that the cookie\r
- * should only be accessible via SSL on a page using the HTTPS protocol.\r
- * Defaults to <tt>false</tt>. Note that this will only work if the page\r
- * calling this code uses the HTTPS protocol, otherwise the cookie will be\r
- * created with default options.\r
- */\r
- set : function(name, value){\r
- var argv = arguments;\r
- var argc = arguments.length;\r
- var expires = (argc > 2) ? argv[2] : null;\r
- var path = (argc > 3) ? argv[3] : '/';\r
- var domain = (argc > 4) ? argv[4] : null;\r
- var secure = (argc > 5) ? argv[5] : false;\r
- document.cookie = name + "=" + escape(value) + ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) + ((path === null) ? "" : ("; path=" + path)) + ((domain === null) ? "" : ("; domain=" + domain)) + ((secure === true) ? "; secure" : "");\r
- },\r
-\r
- /**\r
- * Retrieves cookies that are accessible by the current page. If a cookie\r
- * does not exist, <code>get()</code> returns <tt>null</tt>. The following\r
- * example retrieves the cookie called "valid" and stores the String value\r
- * in the variable <tt>validStatus</tt>.\r
- * <pre><code>\r
- * var validStatus = Ext.util.Cookies.get("valid");\r
- * </code></pre>\r
- * @param {String} name The name of the cookie to get\r
- * @return {Mixed} Returns the cookie value for the specified name;\r
- * null if the cookie name does not exist.\r
- */\r
- get : function(name){\r
- var arg = name + "=";\r
- var alen = arg.length;\r
- var clen = document.cookie.length;\r
- var i = 0;\r
- var j = 0;\r
- while(i < clen){\r
- j = i + alen;\r
- if(document.cookie.substring(i, j) == arg){\r
- return Ext.util.Cookies.getCookieVal(j);\r
- }\r
- i = document.cookie.indexOf(" ", i) + 1;\r
- if(i === 0){\r
- break;\r
- }\r
- }\r
- return null;\r
- },\r
-\r
- /**\r
- * Removes a cookie with the provided name from the browser\r
- * if found by setting its expiration date to sometime in the past. \r
- * @param {String} name The name of the cookie to remove\r
- */\r
- clear : function(name){\r
- if(Ext.util.Cookies.get(name)){\r
- document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";\r
- }\r
- },\r
- /**\r
- * @private\r
- */\r
- getCookieVal : function(offset){\r
- var endstr = document.cookie.indexOf(";", offset);\r
- if(endstr == -1){\r
- endstr = document.cookie.length;\r
- }\r
- return unescape(document.cookie.substring(offset, endstr));\r
- }\r
+/**
+ * @class Ext.util.Cookies
+ * Utility class for managing and interacting with cookies.
+ * @singleton
+ */
+Ext.util.Cookies = {
+ /**
+ * Create a cookie with the specified name and value. Additional settings
+ * for the cookie may be optionally specified (for example: expiration,
+ * access restriction, SSL).
+ * @param {String} name The name of the cookie to set.
+ * @param {Mixed} value The value to set for the cookie.
+ * @param {Object} expires (Optional) Specify an expiration date the
+ * cookie is to persist until. Note that the specified Date object will
+ * be converted to Greenwich Mean Time (GMT).
+ * @param {String} path (Optional) Setting a path on the cookie restricts
+ * access to pages that match that path. Defaults to all pages (<tt>'/'</tt>).
+ * @param {String} domain (Optional) Setting a domain restricts access to
+ * pages on a given domain (typically used to allow cookie access across
+ * subdomains). For example, "extjs.com" will create a cookie that can be
+ * accessed from any subdomain of extjs.com, including www.extjs.com,
+ * support.extjs.com, etc.
+ * @param {Boolean} secure (Optional) Specify true to indicate that the cookie
+ * should only be accessible via SSL on a page using the HTTPS protocol.
+ * Defaults to <tt>false</tt>. Note that this will only work if the page
+ * calling this code uses the HTTPS protocol, otherwise the cookie will be
+ * created with default options.
+ */
+ set : function(name, value){
+ var argv = arguments;
+ var argc = arguments.length;
+ var expires = (argc > 2) ? argv[2] : null;
+ var path = (argc > 3) ? argv[3] : '/';
+ var domain = (argc > 4) ? argv[4] : null;
+ var secure = (argc > 5) ? argv[5] : false;
+ document.cookie = name + "=" + escape(value) + ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) + ((path === null) ? "" : ("; path=" + path)) + ((domain === null) ? "" : ("; domain=" + domain)) + ((secure === true) ? "; secure" : "");
+ },
+
+ /**
+ * Retrieves cookies that are accessible by the current page. If a cookie
+ * does not exist, <code>get()</code> returns <tt>null</tt>. The following
+ * example retrieves the cookie called "valid" and stores the String value
+ * in the variable <tt>validStatus</tt>.
+ * <pre><code>
+ * var validStatus = Ext.util.Cookies.get("valid");
+ * </code></pre>
+ * @param {String} name The name of the cookie to get
+ * @return {Mixed} Returns the cookie value for the specified name;
+ * null if the cookie name does not exist.
+ */
+ get : function(name){
+ var arg = name + "=";
+ var alen = arg.length;
+ var clen = document.cookie.length;
+ var i = 0;
+ var j = 0;
+ while(i < clen){
+ j = i + alen;
+ if(document.cookie.substring(i, j) == arg){
+ return Ext.util.Cookies.getCookieVal(j);
+ }
+ i = document.cookie.indexOf(" ", i) + 1;
+ if(i === 0){
+ break;
+ }
+ }
+ return null;
+ },
+
+ /**
+ * Removes a cookie with the provided name from the browser
+ * if found by setting its expiration date to sometime in the past.
+ * @param {String} name The name of the cookie to remove
+ */
+ clear : function(name){
+ if(Ext.util.Cookies.get(name)){
+ document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
+ }
+ },
+ /**
+ * @private
+ */
+ getCookieVal : function(offset){
+ var endstr = document.cookie.indexOf(";", offset);
+ if(endstr == -1){
+ endstr = document.cookie.length;
+ }
+ return unescape(document.cookie.substring(offset, endstr));
+ }
};/**
* Framework-wide error-handler. Developers can override this method to provide
* custom exception-handling. Framework errors will often extend from the base
Ext.Error = function(message) {
// Try to read the message from Ext.Error.lang
this.message = (this.lang[message]) ? this.lang[message] : message;
-}
+};
+
Ext.Error.prototype = new Error();
Ext.apply(Ext.Error.prototype, {
// protected. Extensions place their error-strings here.
return Ext.encode(this);
}
});
-
git.ithinksw.org / extjs.git / blobdiff