From cbcd277d915e92d670e8b319250a8ddc3dd8a52f Mon Sep 17 00:00:00 2001 From: Damien Churchill Date: Wed, 28 Apr 2010 15:19:28 +0100 Subject: [PATCH] remove windows line breaks (grr) --- deluge/ui/web/js/ext-all-debug.js | 55586 ++++++++++++++-------------- 1 file changed, 27793 insertions(+), 27793 deletions(-) diff --git a/deluge/ui/web/js/ext-all-debug.js b/deluge/ui/web/js/ext-all-debug.js index 8eb0f03e6..342be20ca 100644 --- a/deluge/ui/web/js/ext-all-debug.js +++ b/deluge/ui/web/js/ext-all-debug.js @@ -4,562 +4,562 @@ * licensing@extjs.com * http://www.extjs.com/license */ -/** - * @class Ext.DomHelper - *

The DomHelper class provides a layer of abstraction from DOM and transparently supports creating - * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates - * from your DOM building code.

- * - *

DomHelper element specification object

- *

A specification object is used when creating elements. Attributes of this object - * are assumed to be element attributes, except for 4 special attributes: - *

- * - *

Insertion methods

- *

Commonly used insertion methods: - *

- * - *

Example

- *

This is an example, where an unordered list with 3 children items is appended to an existing - * element with id 'my-div':
- 


-var dh = Ext.DomHelper; // create shorthand alias
-// specification object
-var spec = {
-    id: 'my-ul',
-    tag: 'ul',
-    cls: 'my-list',
-    // append children after creating
-    children: [     // may also specify 'cn' instead of 'children'
-        {tag: 'li', id: 'item0', html: 'List Item 0'},
-        {tag: 'li', id: 'item1', html: 'List Item 1'},
-        {tag: 'li', id: 'item2', html: 'List Item 2'}
-    ]
-};
-var list = dh.append(
-    'my-div', // the context element 'my-div' can either be the id or the actual node
-    spec      // the specification object
-);
-

- *

Element creation specification parameters in this class may also be passed as an Array of - * specification objects. This can be used to insert multiple sibling nodes into an existing - * container very efficiently. For example, to add more list items to the example above:


-dh.append('my-ul', [
-    {tag: 'li', id: 'item3', html: 'List Item 3'},
-    {tag: 'li', id: 'item4', html: 'List Item 4'}
-]);
- *

- * - *

Templating

- *

The real power is in the built-in templating. Instead of creating or appending any elements, - * {@link #createTemplate} returns a Template object which can be used over and over to - * insert new elements. Revisiting the example above, we could utilize templating this time: - * 


-// create the node
-var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
-// get template
-var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
-
-for(var i = 0; i < 5, i++){
-    tpl.append(list, [i]); // use template to append to the actual node
-}
- *

- *

An example using a template:


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

- * - *

The same example using named parameters:


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

- * - *

Compiling Templates

- *

Templates are applied using regular expressions. The performance is great, but if - * you are adding a bunch of DOM elements using the same template, you can increase - * performance even further by {@link Ext.Template#compile "compiling"} the template. - * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and - * broken up at the different variable points and a dynamic function is created and eval'ed. - * The generated function performs string concatenation of these parts and the passed - * variables instead of using regular expressions. - * 


-var html = '{text}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.compile();
-
-//... use template like normal
- *

- * - *

Performance Boost

- *

DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead - * of DOM can significantly boost performance.

- *

Element creation specification parameters may also be strings. If {@link #useDom} is false, - * then the string is used as innerHTML. If {@link #useDom} is true, a string specification - * results in the creation of a text node. Usage:

- * 

-Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
- *
- * @singleton - */ -Ext.DomHelper = function(){ - var tempTableEl = null, - emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i, - tableRe = /^table|tbody|tr|td$/i, - pub, - // kill repeat to save bytes - afterbegin = 'afterbegin', - afterend = 'afterend', - beforebegin = 'beforebegin', - beforeend = 'beforeend', - ts = '', - te = '
', - tbs = ts+'', - tbe = ''+te, - trs = tbs + '', - tre = ''+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 += ''; - } - } - 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.DomHelper + *

The DomHelper class provides a layer of abstraction from DOM and transparently supports creating + * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates + * from your DOM building code.

+ * + *

DomHelper element specification object

+ *

A specification object is used when creating elements. Attributes of this object + * are assumed to be element attributes, except for 4 special attributes: + *

+ * + *

Insertion methods

+ *

Commonly used insertion methods: + *

+ * + *

Example

+ *

This is an example, where an unordered list with 3 children items is appended to an existing + * element with id 'my-div':
+ 


+var dh = Ext.DomHelper; // create shorthand alias
+// specification object
+var spec = {
+    id: 'my-ul',
+    tag: 'ul',
+    cls: 'my-list',
+    // append children after creating
+    children: [     // may also specify 'cn' instead of 'children'
+        {tag: 'li', id: 'item0', html: 'List Item 0'},
+        {tag: 'li', id: 'item1', html: 'List Item 1'},
+        {tag: 'li', id: 'item2', html: 'List Item 2'}
+    ]
+};
+var list = dh.append(
+    'my-div', // the context element 'my-div' can either be the id or the actual node
+    spec      // the specification object
+);
+

+ *

Element creation specification parameters in this class may also be passed as an Array of + * specification objects. This can be used to insert multiple sibling nodes into an existing + * container very efficiently. For example, to add more list items to the example above:


+dh.append('my-ul', [
+    {tag: 'li', id: 'item3', html: 'List Item 3'},
+    {tag: 'li', id: 'item4', html: 'List Item 4'}
+]);
+ *

+ * + *

Templating

+ *

The real power is in the built-in templating. Instead of creating or appending any elements, + * {@link #createTemplate} returns a Template object which can be used over and over to + * insert new elements. Revisiting the example above, we could utilize templating this time: + * 


+// create the node
+var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
+// get template
+var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
+
+for(var i = 0; i < 5, i++){
+    tpl.append(list, [i]); // use template to append to the actual node
+}
+ *

+ *

An example using a template:


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

+ * + *

The same example using named parameters:


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

+ * + *

Compiling Templates

+ *

Templates are applied using regular expressions. The performance is great, but if + * you are adding a bunch of DOM elements using the same template, you can increase + * performance even further by {@link Ext.Template#compile "compiling"} the template. + * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and + * broken up at the different variable points and a dynamic function is created and eval'ed. + * The generated function performs string concatenation of these parts and the passed + * variables instead of using regular expressions. + * 


+var html = '{text}';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.compile();
+
+//... use template like normal
+ *

+ * + *

Performance Boost

+ *

DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead + * of DOM can significantly boost performance.

+ *

Element creation specification parameters may also be strings. If {@link #useDom} is false, + * then the string is used as innerHTML. If {@link #useDom} is true, a string specification + * results in the creation of a text node. Usage:

+ * 

+Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
+ *
+ * @singleton + */ +Ext.DomHelper = function(){ + var tempTableEl = null, + emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i, + tableRe = /^table|tbody|tr|td$/i, + pub, + // kill repeat to save bytes + afterbegin = 'afterbegin', + afterend = 'afterend', + beforebegin = 'beforebegin', + beforeend = 'beforeend', + ts = '', + te = '
', + tbs = ts+'', + tbe = ''+te, + trs = tbs + '', + tre = ''+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 += ''; + } + } + 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 *

Represents an HTML fragment template. Templates may be {@link #compile precompiled} @@ -797,1052 +797,1052 @@ Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; Ext.Template.from = function(el, config){ el = Ext.getDom(el); return new Ext.Template(el.value || el.innerHTML, config || ''); -};/** - * @class Ext.Template - */ -Ext.apply(Ext.Template.prototype, { - /** - * @cfg {Boolean} disableFormats Specify true to disable format - * functions in the template. If the template does not contain - * {@link Ext.util.Format format functions}, setting disableFormats - * to true will reduce {@link #apply} time. Defaults to false. - * 


-var t = new Ext.Template(
-    '<div name="{id}">',
-        '<span class="{cls}">{name} {value}</span>',
-    '</div>',
-    {
-        compiled: true,      // {@link #compile} immediately
-        disableFormats: true // reduce {@link #apply} time since no formatting
-    }    
-);
-     *
- * For a list of available format functions, see {@link Ext.util.Format}. - */ - disableFormats : false, - /** - * See {@link #disableFormats}. - * @type Boolean - * @property disableFormats - */ - - /** - * The regular expression used to match template variables - * @type RegExp - * @property - * @hide repeat doc - */ - re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g, - - /** - * 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); - } -}); -Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; /* - * This is code is also distributed under MIT license for use - * with jQuery and prototype JavaScript libraries. - */ -/** - * @class Ext.DomQuery -Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in). -

-DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.

- -

-All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. -

-

Element Selectors:

- -

Attribute Selectors:

-

The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

- -

Pseudo Classes:

- -

CSS Value Selectors:

- - * @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; - } - - // 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; - }; - - 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; - } - - function concat(a, b){ - if(b.slice){ - return a.concat(b); - } - for(var i = 0, l = b.length; i < l; i++){ - a[a.length] = b[i]; - } - return a; - } - - function byTag(cs, tagName){ - if(cs.tagName || cs == document){ - cs = [cs]; - } - if(!tagName){ - return cs; - } - var 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; - } - - 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; - } - - // 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; - } - } - 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; - } - } - for(var i = 0, len = cs.length; i < len; i++){ - cs[i].removeAttribute("_nodup"); - } - return r; - } - - function nodup(cs){ - if(!cs){ - return []; - } - var len = cs.length, c, i, r = cs, cj, ri = -1; - if(!len || typeof cs.nodeType != "undefined" || len == 1){ - return cs; - } - if(isIE && typeof cs[0].selectSingleNode != "undefined"){ - return nodupIEXml(cs); - } - var d = ++key; - cs[0]._nodup = d; - for(i = 1; c = cs[i]; i++){ - if(c._nodup != d){ - c._nodup = d; - }else{ - r = []; - for(var j = 0; j < i; j++){ - r[++ri] = cs[j]; - } - for(j = i+1; cj = cs[j]; j++){ - if(cj._nodup != d){ - cj._nodup = d; - r[++ri] = cj; - } - } - return r; - } - } - return r; - } - - function quickDiffIEXml(c1, c2){ - var d = ++key, - r = []; - for(var i = 0, len = c1.length; i < len; i++){ - c1[i].setAttribute("_qdiff", d); - } - for(var i = 0, len = c2.length; i < len; i++){ - if(c2[i].getAttribute("_qdiff") != d){ - r[r.length] = c2[i]; - } - } - for(var i = 0, len = c1.length; i < len; i++){ - c1[i].removeAttribute("_qdiff"); - } - return r; - } - - function quickDiff(c1, c2){ - var len1 = c1.length, - d = ++key, - r = []; - if(!len1){ - return c2; - } - if(isIE && 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]; - } - } - return r; - } - - function quickId(ns, mode, root, id){ - if(ns == root){ - var d = root.ownerDocument || root; - return d.getElementById(id); - } - ns = getNodes(ns, mode, "*"); - return byId(ns, id); - } - - return { - getStyle : function(el, name){ - return Ext.fly(el).getStyle(name); - }, - /** - * Compiles a selector/xpath query into a reusable function. The returned function - * takes one parameter "root" (optional), which is the context node from where the query should start. - * @param {String} selector The selector/xpath query - * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match - * @return {Function} - */ - compile : function(path, type){ - type = type || "select"; - - // 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], ""); - } - - // strip leading slashes - while(path.substr(0, 1)=="/"){ - path = path.substr(1); - } - - 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; - }, - - /** - * 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); - }, - - /** - * Selects a single element. - * @param {String} selector The selector/xpath query - * @param {Node} root (optional) The start of the query (defaults to document). - * @return {Element} The DOM element which matched the selector. - */ - selectNode : function(path, root){ - return Ext.DomQuery.select(path, root)[0]; - }, - - /** - * Selects the value of a node, optionally replacing null with the defaultValue. - * @param {String} selector The selector/xpath query - * @param {Node} root (optional) The start of the query (defaults to document). - * @param {String} defaultValue - * @return {String} - */ - selectValue : function(path, root, defaultValue){ - path = path.replace(trimRe, ""); - if(!valueCache[path]){ - valueCache[path] = Ext.DomQuery.compile(path, "select"); - } - var n = valueCache[path](root), v; - n = n[0] ? n[0] : n; - - // 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); - }, - - /** - * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified. - * @param {String} selector The selector/xpath query - * @param {Node} root (optional) The start of the query (defaults to document). - * @param {Number} defaultValue - * @return {Number} - */ - selectNumber : function(path, root, defaultValue){ - var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0); - return parseFloat(v); - }, - - /** - * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child) - * @param {String/HTMLElement/Array} el An element id, element or array of elements - * @param {String} selector The simple selector to test - * @return {Boolean} - */ - is : function(el, ss){ - if(typeof el == "string"){ - el = document.getElementById(el); - } - var isArray = Ext.isArray(el), - result = Ext.DomQuery.filter(isArray ? el : [el], ss); - return isArray ? (result.length == el.length) : (result.length > 0); - }, - - /** - * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child) - * @param {Array} el An array of elements to filter - * @param {String} selector The simple selector to test - * @param {Boolean} nonMatches If true, it returns the elements that DON'T match - * the selector instead of the ones that match - * @return {Array} An Array of DOM elements which match the selector. If there are - * no matches, and empty Array is returned. - */ - filter : function(els, ss, nonMatches){ - ss = ss.replace(trimRe, ""); - if(!simpleCache[ss]){ - simpleCache[ss] = Ext.DomQuery.compile(ss, "simple"); - } - var result = simpleCache[ss](els); - return nonMatches ? quickDiff(result, els) : result; - }, - - /** - * Collection of matching regular expressions and code snippets. - * 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}")}};' - } - ], - - /** - * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=. - * New operators can be added as long as the match the format c= where c 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; - } - }, - - /** - *

Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed - * two parameters:

- *

A filter function returns an Array of DOM elements which conform to the pseudo class.

- *

In addition to the provided pseudo classes listed above such as first-child and nth-child, - * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.

- *

For example, to filter <a> elements to only return links to external resources:

- * 
-Ext.DomQuery.pseudos.external = function(c, v){
-    var r = [], ri = -1;
-    for(var i = 0, ci; ci = c[i]; i++){
-//      Include in result set only if it's a link to an external resource
-        if(ci.hostname != location.hostname){
-            r[++ri] = ci;
-        }
-    }
-    return r;
-};
 - * Then external links could be gathered with the following statement:
-var externalLinks = Ext.select("a:external");
-
- */ - pseudos : { - "first-child" : function(c){ - var r = [], ri = -1, n; - for(var i = 0, ci; ci = n = c[i]; i++){ - while((n = n.previousSibling) && n.nodeType != 1); - if(!n){ - r[++ri] = ci; - } - } - return r; - }, - - "last-child" : function(c){ - var r = [], ri = -1, n; - for(var i = 0, ci; ci = n = c[i]; i++){ - while((n = n.nextSibling) && n.nodeType != 1); - if(!n){ - r[++ri] = ci; - } - } - return r; - }, - - "nth-child" : function(c, a) { - var r = [], ri = -1, - m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a), - f = (m[1] || 1) - 0, l = m[2] - 0; - for(var i = 0, n; n = c[i]; i++){ - var pn = n.parentNode; - if (batch != pn._batch) { - var j = 0; - for(var cn = pn.firstChild; cn; cn = cn.nextSibling){ - if(cn.nodeType == 1){ - cn.nodeIndex = ++j; - } - } - pn._batch = batch; - } - if (f == 1) { - if (l == 0 || n.nodeIndex == l){ - r[++ri] = n; - } - } else if ((n.nodeIndex + l) % f == 0){ - r[++ri] = n; - } - } - - return r; - }, - - "only-child" : function(c){ - var r = [], ri = -1;; - for(var i = 0, ci; ci = c[i]; i++){ - if(!prev(ci) && !next(ci)){ - r[++ri] = ci; - } - } - return r; - }, - - "empty" : function(c){ - var r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - var cns = ci.childNodes, j = 0, cn, empty = true; - while(cn = cns[j]){ - ++j; - if(cn.nodeType == 1 || cn.nodeType == 3){ - empty = false; - break; - } - } - if(empty){ - r[++ri] = ci; - } - } - return r; - }, - - "contains" : function(c, v){ - var r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - if((ci.textContent||ci.innerText||'').indexOf(v) != -1){ - r[++ri] = ci; - } - } - return r; - }, - - "nodeValue" : function(c, v){ - var r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - if(ci.firstChild && ci.firstChild.nodeValue == v){ - r[++ri] = ci; - } - } - return r; - }, - - "checked" : function(c){ - var r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - if(ci.checked == true){ - r[++ri] = ci; - } - } - return r; - }, - - "not" : function(c, ss){ - return Ext.DomQuery.filter(c, ss, true); - }, - - "any" : function(c, selectors){ - var ss = selectors.split('|'), - r = [], ri = -1, s; - for(var i = 0, ci; ci = c[i]; i++){ - for(var j = 0; s = ss[j]; j++){ - if(Ext.DomQuery.is(ci, s)){ - r[++ri] = ci; - break; - } - } - } - return r; - }, - - "odd" : function(c){ - return this["nth-child"](c, "odd"); - }, - - "even" : function(c){ - return this["nth-child"](c, "even"); - }, - - "nth" : function(c, a){ - return c[a-1] || []; - }, - - "first" : function(c){ - return c[0] || []; - }, - - "last" : function(c){ - return c[c.length-1] || []; - }, - - "has" : function(c, ss){ - var s = Ext.DomQuery.select, - r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - if(s(ss, ci).length > 0){ - r[++ri] = ci; - } - } - return r; - }, - - "next" : function(c, ss){ - var is = Ext.DomQuery.is, - r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - var n = next(ci); - if(n && is(n, ss)){ - r[++ri] = ci; - } - } - return r; - }, - - "prev" : function(c, ss){ - var is = Ext.DomQuery.is, - r = [], ri = -1; - for(var i = 0, ci; ci = c[i]; i++){ - var n = prev(ci); - if(n && is(n, ss)){ - r[++ri] = ci; - } - } - return r; - } - } - }; -}(); - -/** - * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select} - * @param {String} path The selector/xpath query - * @param {Node} root (optional) The start of the query (defaults to document). - * @return {Array} - * @member Ext - * @method query - */ -Ext.query = Ext.DomQuery.select; +};/** + * @class Ext.Template + */ +Ext.apply(Ext.Template.prototype, { + /** + * @cfg {Boolean} disableFormats Specify true to disable format + * functions in the template. If the template does not contain + * {@link Ext.util.Format format functions}, setting disableFormats + * to true will reduce {@link #apply} time. Defaults to false. + * 

+var t = new Ext.Template(
+    '<div name="{id}">',
+        '<span class="{cls}">{name} {value}</span>',
+    '</div>',
+    {
+        compiled: true,      // {@link #compile} immediately
+        disableFormats: true // reduce {@link #apply} time since no formatting
+    }    
+);
+     *
+ * For a list of available format functions, see {@link Ext.util.Format}. + */ + disableFormats : false, + /** + * See {@link #disableFormats}. + * @type Boolean + * @property disableFormats + */ + + /** + * The regular expression used to match template variables + * @type RegExp + * @property + * @hide repeat doc + */ + re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g, + + /** + * 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); + } +}); +Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; /* + * This is code is also distributed under MIT license for use + * with jQuery and prototype JavaScript libraries. + */ +/** + * @class Ext.DomQuery +Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in). +

+DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.

+ +

+All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. +

+

Element Selectors:

+ +

Attribute Selectors:

+

The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

+ +

Pseudo Classes:

+ +

CSS Value Selectors:

+ + * @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; + } + + // 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; + }; + + 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; + } + + function concat(a, b){ + if(b.slice){ + return a.concat(b); + } + for(var i = 0, l = b.length; i < l; i++){ + a[a.length] = b[i]; + } + return a; + } + + function byTag(cs, tagName){ + if(cs.tagName || cs == document){ + cs = [cs]; + } + if(!tagName){ + return cs; + } + var 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; + } + + 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; + } + + // 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; + } + } + 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; + } + } + for(var i = 0, len = cs.length; i < len; i++){ + cs[i].removeAttribute("_nodup"); + } + return r; + } + + function nodup(cs){ + if(!cs){ + return []; + } + var len = cs.length, c, i, r = cs, cj, ri = -1; + if(!len || typeof cs.nodeType != "undefined" || len == 1){ + return cs; + } + if(isIE && typeof cs[0].selectSingleNode != "undefined"){ + return nodupIEXml(cs); + } + var d = ++key; + cs[0]._nodup = d; + for(i = 1; c = cs[i]; i++){ + if(c._nodup != d){ + c._nodup = d; + }else{ + r = []; + for(var j = 0; j < i; j++){ + r[++ri] = cs[j]; + } + for(j = i+1; cj = cs[j]; j++){ + if(cj._nodup != d){ + cj._nodup = d; + r[++ri] = cj; + } + } + return r; + } + } + return r; + } + + function quickDiffIEXml(c1, c2){ + var d = ++key, + r = []; + for(var i = 0, len = c1.length; i < len; i++){ + c1[i].setAttribute("_qdiff", d); + } + for(var i = 0, len = c2.length; i < len; i++){ + if(c2[i].getAttribute("_qdiff") != d){ + r[r.length] = c2[i]; + } + } + for(var i = 0, len = c1.length; i < len; i++){ + c1[i].removeAttribute("_qdiff"); + } + return r; + } + + function quickDiff(c1, c2){ + var len1 = c1.length, + d = ++key, + r = []; + if(!len1){ + return c2; + } + if(isIE && 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]; + } + } + return r; + } + + function quickId(ns, mode, root, id){ + if(ns == root){ + var d = root.ownerDocument || root; + return d.getElementById(id); + } + ns = getNodes(ns, mode, "*"); + return byId(ns, id); + } + + return { + getStyle : function(el, name){ + return Ext.fly(el).getStyle(name); + }, + /** + * Compiles a selector/xpath query into a reusable function. The returned function + * takes one parameter "root" (optional), which is the context node from where the query should start. + * @param {String} selector The selector/xpath query + * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match + * @return {Function} + */ + compile : function(path, type){ + type = type || "select"; + + // 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], ""); + } + + // strip leading slashes + while(path.substr(0, 1)=="/"){ + path = path.substr(1); + } + + 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; + }, + + /** + * 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); + }, + + /** + * Selects a single element. + * @param {String} selector The selector/xpath query + * @param {Node} root (optional) The start of the query (defaults to document). + * @return {Element} The DOM element which matched the selector. + */ + selectNode : function(path, root){ + return Ext.DomQuery.select(path, root)[0]; + }, + + /** + * Selects the value of a node, optionally replacing null with the defaultValue. + * @param {String} selector The selector/xpath query + * @param {Node} root (optional) The start of the query (defaults to document). + * @param {String} defaultValue + * @return {String} + */ + selectValue : function(path, root, defaultValue){ + path = path.replace(trimRe, ""); + if(!valueCache[path]){ + valueCache[path] = Ext.DomQuery.compile(path, "select"); + } + var n = valueCache[path](root), v; + n = n[0] ? n[0] : n; + + // 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); + }, + + /** + * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified. + * @param {String} selector The selector/xpath query + * @param {Node} root (optional) The start of the query (defaults to document). + * @param {Number} defaultValue + * @return {Number} + */ + selectNumber : function(path, root, defaultValue){ + var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0); + return parseFloat(v); + }, + + /** + * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child) + * @param {String/HTMLElement/Array} el An element id, element or array of elements + * @param {String} selector The simple selector to test + * @return {Boolean} + */ + is : function(el, ss){ + if(typeof el == "string"){ + el = document.getElementById(el); + } + var isArray = Ext.isArray(el), + result = Ext.DomQuery.filter(isArray ? el : [el], ss); + return isArray ? (result.length == el.length) : (result.length > 0); + }, + + /** + * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child) + * @param {Array} el An array of elements to filter + * @param {String} selector The simple selector to test + * @param {Boolean} nonMatches If true, it returns the elements that DON'T match + * the selector instead of the ones that match + * @return {Array} An Array of DOM elements which match the selector. If there are + * no matches, and empty Array is returned. + */ + filter : function(els, ss, nonMatches){ + ss = ss.replace(trimRe, ""); + if(!simpleCache[ss]){ + simpleCache[ss] = Ext.DomQuery.compile(ss, "simple"); + } + var result = simpleCache[ss](els); + return nonMatches ? quickDiff(result, els) : result; + }, + + /** + * Collection of matching regular expressions and code snippets. + * 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}")}};' + } + ], + + /** + * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=. + * New operators can be added as long as the match the format c= where c 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; + } + }, + + /** + *

Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed + * two parameters:

+ *

A filter function returns an Array of DOM elements which conform to the pseudo class.

+ *

In addition to the provided pseudo classes listed above such as first-child and nth-child, + * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.

+ *

For example, to filter <a> elements to only return links to external resources:

+ * 
+Ext.DomQuery.pseudos.external = function(c, v){
+    var r = [], ri = -1;
+    for(var i = 0, ci; ci = c[i]; i++){
+//      Include in result set only if it's a link to an external resource
+        if(ci.hostname != location.hostname){
+            r[++ri] = ci;
+        }
+    }
+    return r;
+};
 + * Then external links could be gathered with the following statement:
+var externalLinks = Ext.select("a:external");
+
+ */ + pseudos : { + "first-child" : function(c){ + var r = [], ri = -1, n; + for(var i = 0, ci; ci = n = c[i]; i++){ + while((n = n.previousSibling) && n.nodeType != 1); + if(!n){ + r[++ri] = ci; + } + } + return r; + }, + + "last-child" : function(c){ + var r = [], ri = -1, n; + for(var i = 0, ci; ci = n = c[i]; i++){ + while((n = n.nextSibling) && n.nodeType != 1); + if(!n){ + r[++ri] = ci; + } + } + return r; + }, + + "nth-child" : function(c, a) { + var r = [], ri = -1, + m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a), + f = (m[1] || 1) - 0, l = m[2] - 0; + for(var i = 0, n; n = c[i]; i++){ + var pn = n.parentNode; + if (batch != pn._batch) { + var j = 0; + for(var cn = pn.firstChild; cn; cn = cn.nextSibling){ + if(cn.nodeType == 1){ + cn.nodeIndex = ++j; + } + } + pn._batch = batch; + } + if (f == 1) { + if (l == 0 || n.nodeIndex == l){ + r[++ri] = n; + } + } else if ((n.nodeIndex + l) % f == 0){ + r[++ri] = n; + } + } + + return r; + }, + + "only-child" : function(c){ + var r = [], ri = -1;; + for(var i = 0, ci; ci = c[i]; i++){ + if(!prev(ci) && !next(ci)){ + r[++ri] = ci; + } + } + return r; + }, + + "empty" : function(c){ + var r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + var cns = ci.childNodes, j = 0, cn, empty = true; + while(cn = cns[j]){ + ++j; + if(cn.nodeType == 1 || cn.nodeType == 3){ + empty = false; + break; + } + } + if(empty){ + r[++ri] = ci; + } + } + return r; + }, + + "contains" : function(c, v){ + var r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + if((ci.textContent||ci.innerText||'').indexOf(v) != -1){ + r[++ri] = ci; + } + } + return r; + }, + + "nodeValue" : function(c, v){ + var r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + if(ci.firstChild && ci.firstChild.nodeValue == v){ + r[++ri] = ci; + } + } + return r; + }, + + "checked" : function(c){ + var r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + if(ci.checked == true){ + r[++ri] = ci; + } + } + return r; + }, + + "not" : function(c, ss){ + return Ext.DomQuery.filter(c, ss, true); + }, + + "any" : function(c, selectors){ + var ss = selectors.split('|'), + r = [], ri = -1, s; + for(var i = 0, ci; ci = c[i]; i++){ + for(var j = 0; s = ss[j]; j++){ + if(Ext.DomQuery.is(ci, s)){ + r[++ri] = ci; + break; + } + } + } + return r; + }, + + "odd" : function(c){ + return this["nth-child"](c, "odd"); + }, + + "even" : function(c){ + return this["nth-child"](c, "even"); + }, + + "nth" : function(c, a){ + return c[a-1] || []; + }, + + "first" : function(c){ + return c[0] || []; + }, + + "last" : function(c){ + return c[c.length-1] || []; + }, + + "has" : function(c, ss){ + var s = Ext.DomQuery.select, + r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + if(s(ss, ci).length > 0){ + r[++ri] = ci; + } + } + return r; + }, + + "next" : function(c, ss){ + var is = Ext.DomQuery.is, + r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + var n = next(ci); + if(n && is(n, ss)){ + r[++ri] = ci; + } + } + return r; + }, + + "prev" : function(c, ss){ + var is = Ext.DomQuery.is, + r = [], ri = -1; + for(var i = 0, ci; ci = c[i]; i++){ + var n = prev(ci); + if(n && is(n, ss)){ + r[++ri] = ci; + } + } + return r; + } + } + }; +}(); + +/** + * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select} + * @param {String} path The selector/xpath query + * @param {Node} root (optional) The start of the query (defaults to document). + * @return {Array} + * @member Ext + * @method query + */ +Ext.query = Ext.DomQuery.select; /** * @class Ext.util.DelayedTask *

The DelayedTask class provides a convenient way to "buffer" the execution of a method, @@ -2421,999 +2421,999 @@ EXTUTIL.Event.prototype = { 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 this. - * @param {Object} o The Observable whose events this object is to relay. - * @param {Array} events Array of event names to relay. - */ - relayEvents : function(o, events){ - var me = this; - function createHandler(ename){ - return function(){ - return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments))); - }; - } - Ext.each(events, function(ename){ - me.events[ename] = me.events[ename] || true; - o.on(ename, createHandler(ename), me); - }); - }, - - /** - *

Enables events fired by this Observable to bubble up an owner hierarchy by calling - * this.getBubbleTarget() if present. There is no implementation in the Observable base class.

- *

This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default - * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to - * access the required target more quickly.

- *

Example:


-Ext.override(Ext.form.Field, {
-    //  Add functionality to Field's initComponent to enable the change event to bubble
-    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
-        this.enableBubble('change');
-    }),
-
-    //  We know that we want Field's events to bubble directly to the FormPanel.
-    getBubbleTarget : function() {
-        if (!this.formPanel) {
-            this.formPanel = this.findParentByType('form');
-        }
-        return this.formPanel;
-    }
-});
-
-var myForm = new Ext.formPanel({
-    title: 'User Details',
-    items: [{
-        ...
-    }],
-    listeners: {
-        change: function() {
-            // Title goes red if form has been modified.
-            myForm.header.setStyle('color', 'red');
-        }
-    }
-});
-
- * @param {String/Array} events The event name to bubble, or an Array of event names. - */ - enableBubble : function(events){ - var me = this; - if(!Ext.isEmpty(events)){ - events = Ext.isArray(events) ? events : 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 - * before the event is fired. If the supplied function returns false, - * the event will not fire. - * @param {Observable} o The Observable to capture events from. - * @param {Function} fn The function to call when an event is fired. - * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event. - * @static - */ -Ext.util.Observable.capture = function(o, fn, scope){ - o.fireEvent = o.fireEvent.createInterceptor(fn, scope); -}; - - -/** - * Sets observability on the passed class constructor.

- *

This makes any event fired on any instance of the passed class also fire a single event through - * the class allowing for central handling of events on many instances at once.

- *

Usage:


-Ext.util.Observable.observeClass(Ext.data.Connection);
-Ext.data.Connection.on('beforerequest', function(con, options) {
-    console.log('Ajax request made to ' + options.url);
-});
- * @param {Function} c The class constructor to make observable. - * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}. - * @static - */ -Ext.util.Observable.observeClass = function(c, listeners){ - if(c){ - if(!c.fireEvent){ - Ext.apply(c, new Ext.util.Observable()); - Ext.util.Observable.capture(c.prototype, c.fireEvent, c); - } - if(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, - E = Ext.lib.Event, - D = Ext.lib.Dom, - DOC = document, - WINDOW = window, - IEDEFERED = "ie-deferred-loader", - DOMCONTENTLOADED = "DOMContentLoaded", - 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 fireDocReady(){ - if(!docReadyState){ - Ext.isReady = docReadyState = true; - if(docReadyProcId){ - clearInterval(docReadyProcId); - } - if(Ext.isGecko || Ext.isOpera) { - DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false); - } - if(Ext.isIE){ - var defer = DOC.getElementById(IEDEFERED); - if(defer){ - defer.onreadystatechange = null; - defer.parentNode.removeChild(defer); - } - } - if(docReadyEvent){ - docReadyEvent.fire(); - docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true? - } - } - }; - - function initDocReady(){ - var COMPLETE = "complete"; - - docReadyEvent = new Ext.util.Event(); - if (Ext.isGecko || Ext.isOpera) { - DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false); - } else if (Ext.isIE){ - DOC.write(""); - DOC.getElementById(IEDEFERED).onreadystatechange = function(){ - if(this.readyState == COMPLETE){ - fireDocReady(); - } - }; - } else if (Ext.isWebKit){ - docReadyProcId = setInterval(function(){ - if(DOC.readyState == COMPLETE) { - fireDocReady(); - } - }, 10); - } - // no matter what, make sure it fires on load - E.on(WINDOW, "load", fireDocReady); - }; - - function createTargeted(h, o){ - return function(){ - var args = Ext.toArray(arguments); - if(o.target == Ext.EventObject.setEvent(args[0]).target){ - h.apply(this, args); - } - }; - }; - - function createBuffered(h, o, 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: - * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed. Defaults to the Element. - * @param {Object} options (optional) An object containing handler configuration properties. - * This may contain any of the following properties:
- *

See {@link Ext.Element#addListener} for examples of how to use these options.

- */ - 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. This must be a reference to the function passed into the {@link #addListener} call. - * @param {Object} scope If a scope (this reference) was specified when the listener was added, - * then this must refer to the same object. - */ - removeListener : function(el, eventName, fn, scope){ - el = Ext.getDom(el); - var id = getId(el), - f = el && (Ext.elCache[id].events)[eventName] || [], - wrap, i, l, k, len, fnc; - - for (i = 0, len = f.length; i < len; i++) { - - /* 0 = Original Function, - 1 = Event Manager Wrapped Function, - 2 = Scope, - 3 = Adapter Wrapped Function, - 4 = Buffered Task - */ - if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) { - if(fnc[4]) { - fnc[4].cancel(); - } - k = fn.tasks && fn.tasks.length; - if(k) { - while(k--) { - fn.tasks[k].cancel(); - } - delete fn.tasks; - } - wrap = fnc[1]; - E.un(el, eventName, E.extAdapter ? fnc[3] : wrap); - - // jQuery workaround that should be removed from Ext Core - if(wrap && el.addEventListener && eventName == "mousewheel"){ - el.removeEventListener("DOMMouseScroll", wrap, false); - } - - // fix stopped mousedowns on the document - if(wrap && el == DOC && eventName == "mousedown"){ - Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); - } - - f.splice(i, 1); - if (f.length === 0) { - delete Ext.elCache[id].events[eventName]; - } - for (k in Ext.elCache[id].events) { - return false; - } - Ext.elCache[id].events = {}; - return false; - } - } - }, - - /** - * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners} - * directly on an Element in favor of calling this version. - * @param {String/HTMLElement} el The id or html element from which to remove all event handlers. - */ - removeAll : function(el){ - el = Ext.getDom(el); - var id = getId(el), - ec = Ext.elCache[id] || {}, - es = ec.events || {}, - f, i, len, ename, fn, k, wrap; - - for(ename in es){ - if(es.hasOwnProperty(ename)){ - f = es[ename]; - /* 0 = Original Function, - 1 = Event Manager Wrapped Function, - 2 = Scope, - 3 = Adapter Wrapped Function, - 4 = Buffered Task - */ - for (i = 0, len = f.length; i < len; i++) { - fn = f[i]; - if(fn[4]) { - fn[4].cancel(); - } - if(fn[0].tasks && (k = fn[0].tasks.length)) { - while(k--) { - fn[0].tasks[k].cancel(); - } - delete fn.tasks; - } - wrap = fn[1]; - E.un(el, ename, E.extAdapter ? fn[3] : wrap); - - // jQuery workaround that should be removed from Ext Core - if(el.addEventListener && wrap && ename == "mousewheel"){ - el.removeEventListener("DOMMouseScroll", wrap, false); - } - - // fix stopped mousedowns on the document - if(wrap && el == DOC && ename == "mousedown"){ - Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); - } - } - } - } - if (Ext.elCache[id]) { - Ext.elCache[id].events = {}; - } - }, - - getListeners : function(el, eventName) { - el = Ext.getDom(el); - var id = getId(el), - ec = Ext.elCache[id] || {}, - es = ec.events || {}, - results = []; - if (es && es[eventName]) { - return es[eventName]; - } else { - return null; - } - }, - - purgeElement : function(el, recurse, eventName) { - el = Ext.getDom(el); - var id = getId(el), - ec = Ext.elCache[id] || {}, - es = ec.events || {}, - i, f, len; - if (eventName) { - if (es && es.hasOwnProperty(eventName)) { - f = es[eventName]; - for (i = 0, len = f.length; i < len; i++) { - Ext.EventManager.removeListener(el, eventName, f[i][0]); - } - } - } else { - Ext.EventManager.removeAll(el); - } - if (recurse && el && el.childNodes) { - for (i = 0, len = el.childNodes.length; i < len; i++) { - Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName); - } - } - }, - - _unload : function() { - var el; - for (el in Ext.elCache) { - Ext.EventManager.removeAll(el); - } - delete Ext.elCache; - delete Ext.Element._flyweights; - }, - /** - * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be - * accessed shorthanded as Ext.onReady(). - * @param {Function} fn The method the event invokes. - * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window. - * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options - * {single: true} be used so that the handler is removed on first invocation. - */ - onDocumentReady : function(fn, scope, options){ - if(docReadyState){ // if it already fired - docReadyEvent.addListener(fn, scope, options); - docReadyEvent.fire(); - docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true? - } else { - if(!docReadyEvent) initDocReady(); - options = options || {}; - options.delay = options.delay || 1; - docReadyEvent.addListener(fn, scope, options); - } - } - }; - /** - * Appends an event handler to an element. Shorthand for {@link #addListener}. - * @param {String/HTMLElement} el The html element or id to assign the event handler to - * @param {String} eventName The name of the event to listen for. - * @param {Function} handler The handler function the event invokes. - * @param {Object} scope (optional) (this reference) in which the handler function executes. Defaults to the Element. - * @param {Object} options (optional) An object containing standard {@link #addListener} options - * @member Ext.EventManager - * @method on - */ - pub.on = pub.addListener; - /** - * Removes an event handler from an element. Shorthand for {@link #removeListener}. - * @param {String/HTMLElement} el The id or html element from which to remove the listener. - * @param {String} eventName The name of the event. - * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #on} call. - * @param {Object} scope If a scope (this reference) was specified when the listener was added, - * then this must refer to the same object. - * @member Ext.EventManager - * @method un - */ - pub.un = pub.removeListener; - - pub.stoppedMouseDownEvent = new Ext.util.Event(); - return pub; -}(); -/** - * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. - * @param {Function} fn The method the event invokes. - * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window. - * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options - * {single: true} be used so that the handler is removed on first invocation. - * @member Ext - * @method onReady - */ -Ext.onReady = Ext.EventManager.onDocumentReady; - - -//Initialize doc classes -(function(){ - - var initExtCss = function(){ - // find the body element - var bd = document.body || document.getElementsByTagName('body')[0]; - if(!bd){ return false; } - var cls = [' ', - Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8')) - : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') - : Ext.isOpera ? "ext-opera" - : Ext.isWebKit ? "ext-webkit" : ""]; - - if(Ext.isSafari){ - cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4'))); - }else if(Ext.isChrome){ - cls.push("ext-chrome"); - } - - if(Ext.isMac){ - cls.push("ext-mac"); - } - if(Ext.isLinux){ - cls.push("ext-linux"); - } - - if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" - var p = bd.parentNode; - if(p){ - p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box'; - } - } - bd.className += cls.join(' '); - return true; - } - - if(!initExtCss()){ - Ext.onReady(initExtCss); - } -})(); - - -/** - * @class Ext.EventObject - * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject - * wraps the browser's native event-object normalizing cross-browser differences, - * such as which mouse button is clicked, keys pressed, mechanisms to stop - * event-propagation along with a method to prevent default actions from taking place. - *

For example:

- * 

-function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
-    e.preventDefault();
-    var target = e.getTarget(); // same as t (the target HTMLElement)
-    ...
-}
-var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.Element}
-myDiv.on(         // 'on' is shorthand for addListener
-    "click",      // perform an action on click of myDiv
-    handleClick   // reference to the action handler
-);
-// other methods to do the same:
-Ext.EventManager.on("myDiv", 'click', handleClick);
-Ext.EventManager.addListener("myDiv", 'click', handleClick);
-
- * @singleton - */ -Ext.EventObject = function(){ - var E = Ext.lib.Event, - // safari keypress events for special keys return bad keycodes - safariKeys = { - 3 : 13, // enter - 63234 : 37, // left - 63235 : 39, // right - 63232 : 38, // up - 63233 : 40, // down - 63276 : 33, // page up - 63277 : 34, // page down - 63272 : 46, // delete - 63273 : 36, // home - 63275 : 35 // end - }, - // normalize button clicks - btnMap = Ext.isIE ? {1:0,4:1,2:2} : - (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); - - Ext.EventObjectImpl = function(e){ - if(e){ - this.setEvent(e.browserEvent || e); - } - }; - - Ext.EventObjectImpl.prototype = { - /** @private */ - setEvent : function(e){ - var me = this; - if(e == me || (e && e.browserEvent)){ // already wrapped - return e; - } - me.browserEvent = e; - if(e){ - // normalize buttons - me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1); - if(e.type == 'click' && me.button == -1){ - me.button = 0; - } - me.type = e.type; - me.shiftKey = e.shiftKey; - // mac metaKey behaves like ctrlKey - me.ctrlKey = e.ctrlKey || e.metaKey || false; - me.altKey = e.altKey; - // in getKey these will be normalized for the mac - me.keyCode = e.keyCode; - me.charCode = e.charCode; - // cache the target for the delayed and or buffered events - me.target = E.getTarget(e); - // same for XY - me.xy = E.getXY(e); - }else{ - me.button = -1; - me.shiftKey = false; - me.ctrlKey = false; - me.altKey = false; - me.keyCode = 0; - me.charCode = 0; - me.target = null; - me.xy = [0, 0]; - } - return me; - }, - - /** - * Stop the event (preventDefault and stopPropagation) - */ - stopEvent : function(){ - var me = this; - if(me.browserEvent){ - if(me.browserEvent.type == 'mousedown'){ - Ext.EventManager.stoppedMouseDownEvent.fire(me); - } - E.stopEvent(me.browserEvent); - } - }, - - /** - * Prevents the browsers default handling of the event. - */ - preventDefault : function(){ - if(this.browserEvent){ - E.preventDefault(this.browserEvent); - } - }, - - /** - * Cancels bubbling of the event. - */ - stopPropagation : function(){ - var me = this; - if(me.browserEvent){ - if(me.browserEvent.type == 'mousedown'){ - Ext.EventManager.stoppedMouseDownEvent.fire(me); - } - E.stopPropagation(me.browserEvent); - } - }, - - /** - * Gets the character code for the event. - * @return {Number} - */ - getCharCode : function(){ - return this.charCode || this.keyCode; - }, - - /** - * Returns a normalized keyCode for the event. - * @return {Number} The key code - */ - getKey : function(){ - return this.normalizeKey(this.keyCode || this.charCode) - }, - - // private - normalizeKey: function(k){ - return Ext.isSafari ? (safariKeys[k] || k) : k; - }, - - /** - * Gets the x coordinate of the event. - * @return {Number} - */ - getPageX : function(){ - return this.xy[0]; - }, - - /** - * Gets the y coordinate of the event. - * @return {Number} - */ - getPageY : function(){ - return this.xy[1]; - }, - - /** - * Gets the page coordinates of the event. - * @return {Array} The xy values like [x, y] - */ - getXY : function(){ - return this.xy; - }, - - /** - * Gets the target for the event. - * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target - * @param {Number/Mixed} maxDepth (optional) The max depth to - search as a number or element (defaults to 10 || document.body) - * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node - * @return {HTMLelement} - */ - getTarget : function(selector, maxDepth, returnEl){ - return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target); - }, - - /** - * Gets the related target. - * @return {HTMLElement} - */ - getRelatedTarget : function(){ - return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null; - }, - - /** - * Normalizes mouse wheel delta across browsers - * @return {Number} The delta - */ - getWheelDelta : function(){ - var e = this.browserEvent; - var delta = 0; - if(e.wheelDelta){ /* IE/Opera. */ - delta = e.wheelDelta/120; - }else if(e.detail){ /* Mozilla case. */ - delta = -e.detail/3; - } - return delta; - }, - - /** - * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el. - * Example usage:

-        // Handle click on any child of an element
-        Ext.getBody().on('click', function(e){
-            if(e.within('some-el')){
-                alert('Clicked on a child of some-el!');
-            }
-        });
-
-        // Handle click directly on an element, ignoring clicks on child nodes
-        Ext.getBody().on('click', function(e,t){
-            if((t.id == 'some-el') && !e.within(t, true)){
-                alert('Clicked directly on some-el!');
-            }
-        });
-
- * @param {Mixed} el The id, DOM element or Ext.Element to check - * @param {Boolean} related (optional) true to test if the related target is within el instead of the target - * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target - * @return {Boolean} - */ - within : function(el, related, allowEl){ - if(el){ - var t = this[related ? "getRelatedTarget" : "getTarget"](); - return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t)); - } - return false; - } - }; - - return new Ext.EventObjectImpl(); -}(); +})();/** + * @class Ext.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 this. + * @param {Object} o The Observable whose events this object is to relay. + * @param {Array} events Array of event names to relay. + */ + relayEvents : function(o, events){ + var me = this; + function createHandler(ename){ + return function(){ + return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments))); + }; + } + Ext.each(events, function(ename){ + me.events[ename] = me.events[ename] || true; + o.on(ename, createHandler(ename), me); + }); + }, + + /** + *

Enables events fired by this Observable to bubble up an owner hierarchy by calling + * this.getBubbleTarget() if present. There is no implementation in the Observable base class.

+ *

This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default + * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to + * access the required target more quickly.

+ *

Example:


+Ext.override(Ext.form.Field, {
+    //  Add functionality to Field's initComponent to enable the change event to bubble
+    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+        this.enableBubble('change');
+    }),
+
+    //  We know that we want Field's events to bubble directly to the FormPanel.
+    getBubbleTarget : function() {
+        if (!this.formPanel) {
+            this.formPanel = this.findParentByType('form');
+        }
+        return this.formPanel;
+    }
+});
+
+var myForm = new Ext.formPanel({
+    title: 'User Details',
+    items: [{
+        ...
+    }],
+    listeners: {
+        change: function() {
+            // Title goes red if form has been modified.
+            myForm.header.setStyle('color', 'red');
+        }
+    }
+});
+
+ * @param {String/Array} events The event name to bubble, or an Array of event names. + */ + enableBubble : function(events){ + var me = this; + if(!Ext.isEmpty(events)){ + events = Ext.isArray(events) ? events : 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 + * before the event is fired. If the supplied function returns false, + * the event will not fire. + * @param {Observable} o The Observable to capture events from. + * @param {Function} fn The function to call when an event is fired. + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event. + * @static + */ +Ext.util.Observable.capture = function(o, fn, scope){ + o.fireEvent = o.fireEvent.createInterceptor(fn, scope); +}; + + +/** + * Sets observability on the passed class constructor.

+ *

This makes any event fired on any instance of the passed class also fire a single event through + * the class allowing for central handling of events on many instances at once.

+ *

Usage:


+Ext.util.Observable.observeClass(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+    console.log('Ajax request made to ' + options.url);
+});
+ * @param {Function} c The class constructor to make observable. + * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}. + * @static + */ +Ext.util.Observable.observeClass = function(c, listeners){ + if(c){ + if(!c.fireEvent){ + Ext.apply(c, new Ext.util.Observable()); + Ext.util.Observable.capture(c.prototype, c.fireEvent, c); + } + if(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, + E = Ext.lib.Event, + D = Ext.lib.Dom, + DOC = document, + WINDOW = window, + IEDEFERED = "ie-deferred-loader", + DOMCONTENTLOADED = "DOMContentLoaded", + 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 fireDocReady(){ + if(!docReadyState){ + Ext.isReady = docReadyState = true; + if(docReadyProcId){ + clearInterval(docReadyProcId); + } + if(Ext.isGecko || Ext.isOpera) { + DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false); + } + if(Ext.isIE){ + var defer = DOC.getElementById(IEDEFERED); + if(defer){ + defer.onreadystatechange = null; + defer.parentNode.removeChild(defer); + } + } + if(docReadyEvent){ + docReadyEvent.fire(); + docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true? + } + } + }; + + function initDocReady(){ + var COMPLETE = "complete"; + + docReadyEvent = new Ext.util.Event(); + if (Ext.isGecko || Ext.isOpera) { + DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false); + } else if (Ext.isIE){ + DOC.write(""); + DOC.getElementById(IEDEFERED).onreadystatechange = function(){ + if(this.readyState == COMPLETE){ + fireDocReady(); + } + }; + } else if (Ext.isWebKit){ + docReadyProcId = setInterval(function(){ + if(DOC.readyState == COMPLETE) { + fireDocReady(); + } + }, 10); + } + // no matter what, make sure it fires on load + E.on(WINDOW, "load", fireDocReady); + }; + + function createTargeted(h, o){ + return function(){ + var args = Ext.toArray(arguments); + if(o.target == Ext.EventObject.setEvent(args[0]).target){ + h.apply(this, args); + } + }; + }; + + function createBuffered(h, o, 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:
    + *
  • evt : EventObject
    The {@link Ext.EventObject EventObject} describing the event.
    • + *
  • t : Element
    The {@link Ext.Element Element} which was the target of the event. + * Note that this may be filtered by using the delegate option.
    • + *
  • o : Object
    The options object from the addListener call.
    • + *
+ * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed. Defaults to the Element. + * @param {Object} options (optional) An object containing handler configuration properties. + * This may contain any of the following properties:
    + *
  • scope : Object
    The scope (this reference) in which the handler function is executed. Defaults to the Element.
    • + *
  • delegate : String
    A simple selector to filter the target or look for a descendant of the target
    • + *
  • stopEvent : Boolean
    True to stop the event. That is stop propagation, and prevent the default action.
    • + *
  • preventDefault : Boolean
    True to prevent the default action
    • + *
  • stopPropagation : Boolean
    True to prevent event propagation
    • + *
  • normalized : Boolean
    False to pass a browser event to the handler function instead of an Ext.EventObject
    • + *
  • delay : Number
    The number of milliseconds to delay the invocation of the handler after te event fires.
    • + *
  • single : Boolean
    True to add a handler to handle just the next firing of the event, and then remove itself.
    • + *
  • buffer : Number
    Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed + * by the specified number of milliseconds. If the event fires again within that time, the original + * handler is not invoked, but the new handler is scheduled in its place.
    • + *
  • target : Element
    Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
    • + *

+ *

See {@link Ext.Element#addListener} for examples of how to use these options.

+ */ + 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. This must be a reference to the function passed into the {@link #addListener} call. + * @param {Object} scope If a scope (this reference) was specified when the listener was added, + * then this must refer to the same object. + */ + removeListener : function(el, eventName, fn, scope){ + el = Ext.getDom(el); + var id = getId(el), + f = el && (Ext.elCache[id].events)[eventName] || [], + wrap, i, l, k, len, fnc; + + for (i = 0, len = f.length; i < len; i++) { + + /* 0 = Original Function, + 1 = Event Manager Wrapped Function, + 2 = Scope, + 3 = Adapter Wrapped Function, + 4 = Buffered Task + */ + if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) { + if(fnc[4]) { + fnc[4].cancel(); + } + k = fn.tasks && fn.tasks.length; + if(k) { + while(k--) { + fn.tasks[k].cancel(); + } + delete fn.tasks; + } + wrap = fnc[1]; + E.un(el, eventName, E.extAdapter ? fnc[3] : wrap); + + // jQuery workaround that should be removed from Ext Core + if(wrap && el.addEventListener && eventName == "mousewheel"){ + el.removeEventListener("DOMMouseScroll", wrap, false); + } + + // fix stopped mousedowns on the document + if(wrap && el == DOC && eventName == "mousedown"){ + Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); + } + + f.splice(i, 1); + if (f.length === 0) { + delete Ext.elCache[id].events[eventName]; + } + for (k in Ext.elCache[id].events) { + return false; + } + Ext.elCache[id].events = {}; + return false; + } + } + }, + + /** + * Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners} + * directly on an Element in favor of calling this version. + * @param {String/HTMLElement} el The id or html element from which to remove all event handlers. + */ + removeAll : function(el){ + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + f, i, len, ename, fn, k, wrap; + + for(ename in es){ + if(es.hasOwnProperty(ename)){ + f = es[ename]; + /* 0 = Original Function, + 1 = Event Manager Wrapped Function, + 2 = Scope, + 3 = Adapter Wrapped Function, + 4 = Buffered Task + */ + for (i = 0, len = f.length; i < len; i++) { + fn = f[i]; + if(fn[4]) { + fn[4].cancel(); + } + if(fn[0].tasks && (k = fn[0].tasks.length)) { + while(k--) { + fn[0].tasks[k].cancel(); + } + delete fn.tasks; + } + wrap = fn[1]; + E.un(el, ename, E.extAdapter ? fn[3] : wrap); + + // jQuery workaround that should be removed from Ext Core + if(el.addEventListener && wrap && ename == "mousewheel"){ + el.removeEventListener("DOMMouseScroll", wrap, false); + } + + // fix stopped mousedowns on the document + if(wrap && el == DOC && ename == "mousedown"){ + Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); + } + } + } + } + if (Ext.elCache[id]) { + Ext.elCache[id].events = {}; + } + }, + + getListeners : function(el, eventName) { + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + results = []; + if (es && es[eventName]) { + return es[eventName]; + } else { + return null; + } + }, + + purgeElement : function(el, recurse, eventName) { + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + i, f, len; + if (eventName) { + if (es && es.hasOwnProperty(eventName)) { + f = es[eventName]; + for (i = 0, len = f.length; i < len; i++) { + Ext.EventManager.removeListener(el, eventName, f[i][0]); + } + } + } else { + Ext.EventManager.removeAll(el); + } + if (recurse && el && el.childNodes) { + for (i = 0, len = el.childNodes.length; i < len; i++) { + Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName); + } + } + }, + + _unload : function() { + var el; + for (el in Ext.elCache) { + Ext.EventManager.removeAll(el); + } + delete Ext.elCache; + delete Ext.Element._flyweights; + }, + /** + * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be + * accessed shorthanded as Ext.onReady(). + * @param {Function} fn The method the event invokes. + * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window. + * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options + * {single: true} be used so that the handler is removed on first invocation. + */ + onDocumentReady : function(fn, scope, options){ + if(docReadyState){ // if it already fired + docReadyEvent.addListener(fn, scope, options); + docReadyEvent.fire(); + docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true? + } else { + if(!docReadyEvent) initDocReady(); + options = options || {}; + options.delay = options.delay || 1; + docReadyEvent.addListener(fn, scope, options); + } + } + }; + /** + * Appends an event handler to an element. Shorthand for {@link #addListener}. + * @param {String/HTMLElement} el The html element or id to assign the event handler to + * @param {String} eventName The name of the event to listen for. + * @param {Function} handler The handler function the event invokes. + * @param {Object} scope (optional) (this reference) in which the handler function executes. Defaults to the Element. + * @param {Object} options (optional) An object containing standard {@link #addListener} options + * @member Ext.EventManager + * @method on + */ + pub.on = pub.addListener; + /** + * Removes an event handler from an element. Shorthand for {@link #removeListener}. + * @param {String/HTMLElement} el The id or html element from which to remove the listener. + * @param {String} eventName The name of the event. + * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #on} call. + * @param {Object} scope If a scope (this reference) was specified when the listener was added, + * then this must refer to the same object. + * @member Ext.EventManager + * @method un + */ + pub.un = pub.removeListener; + + pub.stoppedMouseDownEvent = new Ext.util.Event(); + return pub; +}(); +/** + * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. + * @param {Function} fn The method the event invokes. + * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window. + * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options + * {single: true} be used so that the handler is removed on first invocation. + * @member Ext + * @method onReady + */ +Ext.onReady = Ext.EventManager.onDocumentReady; + + +//Initialize doc classes +(function(){ + + var initExtCss = function(){ + // find the body element + var bd = document.body || document.getElementsByTagName('body')[0]; + if(!bd){ return false; } + var cls = [' ', + Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8')) + : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') + : Ext.isOpera ? "ext-opera" + : Ext.isWebKit ? "ext-webkit" : ""]; + + if(Ext.isSafari){ + cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4'))); + }else if(Ext.isChrome){ + cls.push("ext-chrome"); + } + + if(Ext.isMac){ + cls.push("ext-mac"); + } + if(Ext.isLinux){ + cls.push("ext-linux"); + } + + if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" + var p = bd.parentNode; + if(p){ + p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box'; + } + } + bd.className += cls.join(' '); + return true; + } + + if(!initExtCss()){ + Ext.onReady(initExtCss); + } +})(); + + +/** + * @class Ext.EventObject + * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject + * wraps the browser's native event-object normalizing cross-browser differences, + * such as which mouse button is clicked, keys pressed, mechanisms to stop + * event-propagation along with a method to prevent default actions from taking place. + *

For example:

+ * 

+function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
+    e.preventDefault();
+    var target = e.getTarget(); // same as t (the target HTMLElement)
+    ...
+}
+var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.Element}
+myDiv.on(         // 'on' is shorthand for addListener
+    "click",      // perform an action on click of myDiv
+    handleClick   // reference to the action handler
+);
+// other methods to do the same:
+Ext.EventManager.on("myDiv", 'click', handleClick);
+Ext.EventManager.addListener("myDiv", 'click', handleClick);
+
+ * @singleton + */ +Ext.EventObject = function(){ + var E = Ext.lib.Event, + // safari keypress events for special keys return bad keycodes + safariKeys = { + 3 : 13, // enter + 63234 : 37, // left + 63235 : 39, // right + 63232 : 38, // up + 63233 : 40, // down + 63276 : 33, // page up + 63277 : 34, // page down + 63272 : 46, // delete + 63273 : 36, // home + 63275 : 35 // end + }, + // normalize button clicks + btnMap = Ext.isIE ? {1:0,4:1,2:2} : + (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); + + Ext.EventObjectImpl = function(e){ + if(e){ + this.setEvent(e.browserEvent || e); + } + }; + + Ext.EventObjectImpl.prototype = { + /** @private */ + setEvent : function(e){ + var me = this; + if(e == me || (e && e.browserEvent)){ // already wrapped + return e; + } + me.browserEvent = e; + if(e){ + // normalize buttons + me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1); + if(e.type == 'click' && me.button == -1){ + me.button = 0; + } + me.type = e.type; + me.shiftKey = e.shiftKey; + // mac metaKey behaves like ctrlKey + me.ctrlKey = e.ctrlKey || e.metaKey || false; + me.altKey = e.altKey; + // in getKey these will be normalized for the mac + me.keyCode = e.keyCode; + me.charCode = e.charCode; + // cache the target for the delayed and or buffered events + me.target = E.getTarget(e); + // same for XY + me.xy = E.getXY(e); + }else{ + me.button = -1; + me.shiftKey = false; + me.ctrlKey = false; + me.altKey = false; + me.keyCode = 0; + me.charCode = 0; + me.target = null; + me.xy = [0, 0]; + } + return me; + }, + + /** + * Stop the event (preventDefault and stopPropagation) + */ + stopEvent : function(){ + var me = this; + if(me.browserEvent){ + if(me.browserEvent.type == 'mousedown'){ + Ext.EventManager.stoppedMouseDownEvent.fire(me); + } + E.stopEvent(me.browserEvent); + } + }, + + /** + * Prevents the browsers default handling of the event. + */ + preventDefault : function(){ + if(this.browserEvent){ + E.preventDefault(this.browserEvent); + } + }, + + /** + * Cancels bubbling of the event. + */ + stopPropagation : function(){ + var me = this; + if(me.browserEvent){ + if(me.browserEvent.type == 'mousedown'){ + Ext.EventManager.stoppedMouseDownEvent.fire(me); + } + E.stopPropagation(me.browserEvent); + } + }, + + /** + * Gets the character code for the event. + * @return {Number} + */ + getCharCode : function(){ + return this.charCode || this.keyCode; + }, + + /** + * Returns a normalized keyCode for the event. + * @return {Number} The key code + */ + getKey : function(){ + return this.normalizeKey(this.keyCode || this.charCode) + }, + + // private + normalizeKey: function(k){ + return Ext.isSafari ? (safariKeys[k] || k) : k; + }, + + /** + * Gets the x coordinate of the event. + * @return {Number} + */ + getPageX : function(){ + return this.xy[0]; + }, + + /** + * Gets the y coordinate of the event. + * @return {Number} + */ + getPageY : function(){ + return this.xy[1]; + }, + + /** + * Gets the page coordinates of the event. + * @return {Array} The xy values like [x, y] + */ + getXY : function(){ + return this.xy; + }, + + /** + * Gets the target for the event. + * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target + * @param {Number/Mixed} maxDepth (optional) The max depth to + search as a number or element (defaults to 10 || document.body) + * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node + * @return {HTMLelement} + */ + getTarget : function(selector, maxDepth, returnEl){ + return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target); + }, + + /** + * Gets the related target. + * @return {HTMLElement} + */ + getRelatedTarget : function(){ + return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null; + }, + + /** + * Normalizes mouse wheel delta across browsers + * @return {Number} The delta + */ + getWheelDelta : function(){ + var e = this.browserEvent; + var delta = 0; + if(e.wheelDelta){ /* IE/Opera. */ + delta = e.wheelDelta/120; + }else if(e.detail){ /* Mozilla case. */ + delta = -e.detail/3; + } + return delta; + }, + + /** + * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el. + * Example usage:

+        // Handle click on any child of an element
+        Ext.getBody().on('click', function(e){
+            if(e.within('some-el')){
+                alert('Clicked on a child of some-el!');
+            }
+        });
+
+        // Handle click directly on an element, ignoring clicks on child nodes
+        Ext.getBody().on('click', function(e,t){
+            if((t.id == 'some-el') && !e.within(t, true)){
+                alert('Clicked directly on some-el!');
+            }
+        });
+
+ * @param {Mixed} el The id, DOM element or Ext.Element to check + * @param {Boolean} related (optional) true to test if the related target is within el instead of the target + * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target + * @return {Boolean} + */ + within : function(el, related, allowEl){ + if(el){ + var t = this[related ? "getRelatedTarget" : "getTarget"](); + return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t)); + } + return false; + } + }; + + return new Ext.EventObjectImpl(); +}(); /** * @class Ext.EventManager */ @@ -5304,375 +5304,375 @@ el.alignTo("other-el", "c-bl", [-6, 0]); 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(){ + 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 */ @@ -6141,3644 +6141,3644 @@ Ext.fly('elId').setHeight(150, { } }() ); -/** - * @class Ext.Element - */ - -// special markup used throughout Ext when box wrapping elements -Ext.Element.boxMarkup = '
'; - -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; - } - }, - - /** - *

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.

- *

This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button}, - * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup - * is of this form:

- * 

-    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>';
-        *
- *

Example usage:

- * 

-    // 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");
-        *
- * @param {String} class (optional) A base CSS class to apply to the containing wrapper element - * (defaults to 'x-box'). 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", "
" + String.format(Ext.Element.boxMarkup, cls) + "
")); //String.format('
'+Ext.Element.boxMarkup+'
', 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:
    - *
  • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
    • - *
  • A String used to set the CSS width style. Animation may not be used. - *
  • A size object in the format {width: widthValue, height: heightValue}.
    • - *
- * @param {Mixed} height The new height. This may be one of:
    - *
  • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
    • - *
  • A String used to set the CSS height style. Animation may not be used.
    • - *
- * @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; - }, - - /** - * 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 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; - }, - - /** - * 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; - }, - - /** - *

Returns the dimensions of the element available to lay content out in.

- *

If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.

- * example:

-        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.
-        *
- * - * 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 - } - } - }, - - /** - *

Returns the dimensions of the element available to lay content out in.

- * - * 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. - */ - - 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)}; - }, - - /** - * 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)}; - }, - - /** - * 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; - }, - - /** - * 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"); - }, - - /** - * 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); - } - } - }; -}()); -/** - * @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); - }, - - /** - * 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); - }, - - /** - * 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); - }, - - /** - * 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 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 - */ - setX : function(x, animate){ - return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1)); - }, - - /** - * 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 - */ - setY : function(y, animate){ - return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1)); - }, - - /** - * 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 - */ - setLeft : function(left){ - this.setStyle(LEFT, this.addUnits(left)); - return this; - }, - - /** - * 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 - */ - setTop : function(top){ - this.setStyle(TOP, this.addUnits(top)); - return this; - }, - - /** - * Sets the element's CSS right style. - * @param {String} right The right CSS property value - * @return {Ext.Element} this - */ - setRight : function(right){ - this.setStyle(RIGHT, this.addUnits(right)); - return this; - }, - - /** - * 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; - }, - - /** - * 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'); - } - return me; - }, - - /** - * 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)); - }, - - /** - * 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; - }, - - /** - * 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; - }, - - /** - * 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; - }, - - /** - * 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; - }, - - /** - * 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]); - }, - - /** - * 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.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; - }, - - /** - * 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


-{
-    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>
-}
-
- * 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:
    - *
  • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)
    • - *
  • A String used to set the CSS width style. Animation may not be used. - *
- * @param {Mixed} height The new height. This may be one of:
    - *
  • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)
    • - *
  • A String used to set the CSS height style. Animation may not be used.
    • - *
- * @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({ - /** - * 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 - */ - 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; - } - 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; - } - return this; - }, - - // private - scrollChildIntoView : function(child, hscroll){ - Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll); - }, - - /** - * 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. - */ - 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", - 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. - *
    - *
  • Animation Properties
    • - * - *

    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:

      - *
    • bottom, top, left, right
      • - *
    • height, width
      • - *
    • margin, padding
      • - *
    • borderWidth
      • - *
    • opacity
      • - *
    • fontSize
      • - *
    • lineHeight
      • - *
    - * - * - *
  • Animation Property Attributes
    • - * - *

    Each Animation Property is a config object with optional properties:

    - *
      - *
    • by* : relative change - start at current value, change by this value
      • - *
    • from : ignore current value, start from this value
      • - *
    • to* : start at current value, go to this value
      • - *
    • unit : any allowable unit specification
      • - *

      * do not specify both to and by for an animation property

      - *
    - * - *
  • Animation Types
    • - * - *

    The supported animation types:

      - *
    • 'run' : Default - * 
      
-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')    
-);
-         *
      - *
      • - *
    • 'color' - *

      Animates transition of background, text, or border colors.

      - * 
      
-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')    
-);
-         *
      - *
      • - * - *
    • 'motion' - *

      Animates the motion of an element to/from specific points using optional bezier - * way points during transit.

      - * 
      
-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')    
-);
-         *
      - *
      • - *
    • 'scroll' - *

      Animate horizontal or vertical scrolling of an overflowing page element.

      - * 
      
-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')    
-);
-         *
      - *
      • - *
    - * - *
- * - * @param {Object} args The animation control args - * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35) - * @param {Function} onComplete (optional) Function to call when animation completes - * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut') - * @param {String} animType (optional) 'run' is the default. Can also be 'color', - * 'motion', or 'scroll' - * @return {Ext.Element} this - */ - animate : function(args, duration, onComplete, easing, animType){ - this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType); - return this; - }, - - /* - * @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; - }, - - // 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, - dom = me.dom, - isDisplay = getVisMode(this.dom) == ELDISPLAY; - - if (!animate || !me.anim) { - if(isDisplay){ - me.setDisplayed(visible); - }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){ - 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){ - 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; - - 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); - } - 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(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: - * {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 (this 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 - }; - } - return new Ext.KeyMap(this, config); - }, - - /** - * 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 - */ - 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; - -/** - * @class Ext.Fx - *

A class to provide basic animation and visual effects support. Note: This class is automatically applied - * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. - * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be - * {@link Ext#enableFx included} in order for the Element effects to work.


- * - *

Method Chaining

- *

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 {@link #callback}.


- * - *

Anchor Options for Motion Effects

- *

Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element - * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:

-
-Value  Description
------  -----------------------------
-tl     The top left corner
-t      The center of the top edge
-tr     The top right corner
-l      The center of the left edge
-r      The center of the right edge
-bl     The bottom left corner
-b      The center of the bottom edge
-br     The bottom right corner
-
- * Note: 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. - * - * @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 Method Chaining above), for example:

- * el.slideIn().highlight();
- *
- * The callback is intended for any additional code that should run once a particular effect has completed. The Element - * being operated upon is passed as the first parameter. - * - * @cfg {Object} scope The scope (this reference) in which the {@link #callback} function is executed. Defaults to the browser window. - * - * @cfg {String} easing A valid Ext.lib.Easing value for the effect:

    - *
  • backBoth
    • - *
  • backIn
    • - *
  • backOut
    • - *
  • bounceBoth
    • - *
  • bounceIn
    • - *
  • bounceOut
    • - *
  • easeBoth
    • - *
  • easeBothStrong
    • - *
  • easeIn
    • - *
  • easeInStrong
    • - *
  • easeNone
    • - *
  • easeOut
    • - *
  • easeOutStrong
    • - *
  • elasticBoth
    • - *
  • elasticIn
    • - *
  • elasticOut
    • - *
- * - * @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 - * 0 and 1 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 display CSS property instead of visibility when hiding Elements (only applies to - * effects that end with the element being visually hidden, ignored otherwise) - * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object - * in the form {width:"100px"}, or a function which returns such a specification that will be applied to the - * Element after the effect finishes. - * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs - * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence - * @cfg {Boolean} stopFx Whether 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]); - }, - - /** - * Slides the element into view. An anchor point can be optionally passed to set the point of - * origin for the slide effect. This function automatically handles wrapping the element with - * a fixed-size container if needed. See the Fx class overview for valid anchor point options. - * Usage: - *

-// default: slide the element in from the top
-el.slideIn();
-
-// custom: slide the element in from the right with a 2-second duration
-el.slideIn('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideIn('t', {
-    easing: 'easeOut',
-    duration: .5
-});
-
- * @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 - */ - 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"; - - 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); - } - - // 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); - } - style[s1] = style[s2] = "0"; - if(w){ - ret.width = w - }; - if(h){ - ret.height = h; - } - if(p){ - ret.points = p; - } - return ret; - }; - - 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; - }, - - /** - * 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: - *

-// 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
-});
-
- * @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 - */ - slideOut : function(anchor, o){ - o = getObject(o); - var me = this, - 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); - - // 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; - }, - - /** - * 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: - *

-// default
-el.puff();
-
-// common config options shown with default values
-el.puff({
-    easing: 'easeOut',
-    duration: .5,
-    remove: false,
-    useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - puff : function(o){ - o = getObject(o); - var me = this, - dom = me.dom, - 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(); - - 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); - }); - return me; - }, - - /** - * 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: - *

-// default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
-    easing: 'easeIn',
-    duration: .3,
-    remove: false,
-    useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - switchOff : function(o){ - o = getObject(o); - var me = this, - 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; - }, - - /** - * 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: -

-// 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
-});
-
- * @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: -

-// 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
-});
-
- * @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); - }; - - - 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; - }, - - /** - * Creates a pause before any subsequent queued effects begin. If there are - * no effects queued after the pause it will have no effect. - * Usage: -

-el.pause(1);
-
- * @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 {@link #endOpacity} config option. - * Usage: -

-// 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
-});
-
- * @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, - dom = me.dom, - to = o.endOpacity || 1; - - 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; - }, - - /** - * Fade an element out (from opaque to transparent). The ending opacity can be specified - * using the {@link #endOpacity} config option. Note that IE may require - * {@link #useDisplay}:true in order to redisplay correctly. - * Usage: -

-// 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
-});
-
- * @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; - }, - - /** - * 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: -

-// 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
-    }
-);
-
- * @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; - }, - - /** - * 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: -

-// 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
-});
-
- * @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()]}; - } - - arguments.callee.anim = fly(dom).fxanim(a, - o, - MOTION, - .35, - EASEOUT, - function(){ - fly(dom).afterFx(o); - }); - }); - return this; - }, - - /** - * 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: - *

-// 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
-});
-
- * @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; - }, - - /** - * 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; - }, - - /** - * 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; - }, - - /* @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 - */ - hasActiveFx : function(){ - return getQueue(this.dom.id)[0]; - }, - - /** - * 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 */ - beforeFx : function(o){ - if(this.hasActiveFx() && !o.concurrent){ - if(o.stopFx){ - this.stopFx(); - return TRUE; - } - return FALSE; - } - return TRUE; - }, - - /** - * 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; - }, - - /* @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; - }, - - /* @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; - }, - - /* @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(); - } - }, - - /* @private */ - getFxRestore : function(){ - var st = this.dom.style; - return {pos: this.getPositioning(), width: st.width, height : st.height}; - }, - - /* @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(); - } - }, - - /* @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; - } -}; - -// backwards compat -Ext.Fx.resize = Ext.Fx.scale; - -//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 - *

This class encapsulates a collection of DOM elements, providing methods to filter - * members, or to perform collective actions upon the whole set.

- *

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.

- * Example:

-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);
-
- */
-Ext.CompositeElementLite = function(els, root){
-    /**
-     * 
The Array of DOM elements which this CompositeElement encapsulates. Read-only.

-     * 
This will not usually 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.

-     * 
For example to add the nextAll method to the class to add all
-     * following siblings of selected elements, the code would be
-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;
-            }
-        }
-
-//      Add all found siblings to this Composite
-        return this.add(r);
-    }
-});

-     * @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 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;
-
-        if(el){
-            out = me.getElement(el);
-        }
-        return out;
-    },
-
-    // fixes scope with flyweight
-    addListener : function(eventName, handler, scope, opt){
-        var els = this.elements,
-            len = els.length,
-            i, e;
-        
-        for(i = 0; iCalls the passed function for each element in this composite.

-     * @param {Function} fn The function to call. The function is passed the following parameters:
    
-     * 
  • el : Element
    The current Element in the iteration.
-     * This is the flyweight (shared) Ext.Element instance, so if you require a
-     * a reference to the dom node, use el.dom.
    • 
-     * 
  • c : Composite
    This Composite object.
    • 
-     * 
  • idx : Number
    The zero-based index in the iteration.
    • 
-     * 

-     * @param {Object} scope (optional) The scope (this 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
-     * 
  • el : Ext.Element
    The current DOM element.
    • 
-     * 
  • index : Number
    The current index within the collection.
    • 
-     * 
-     * @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;
-    },
-    
-    /**
-     * 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));
-    },
-    
-    /**
-    * 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);
-            }
-            this.elements.splice(index, 1, replacement);
-        }
-        return this;
-    },
-    
-    /**
-     * Removes all elements.
-     */
-    clear : function(){
-        this.elements = [];
-    }
-};
-
-Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
-
-(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);
-            };
-        }).call(CelProto, fnName);
-        
-    }
-}
-})();
-
-if(Ext.DomQuery){
-    Ext.Element.selectorFunction = Ext.DomQuery.select;
-} 
-
-/**
- * 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;
+/**
+ * @class Ext.Element
+ */
+
+// special markup used throughout Ext when box wrapping elements
+Ext.Element.boxMarkup = '
    ';
+
+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;
+            }
+        },
+
+       /**
+        * 
    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.
    
+        * 
    This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
+        * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}).  The markup
+        * is of this form:
    
+        * 
    
+    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>';
+        * 
    
+        * 
    Example usage:
    
+        * 
    
+    // 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");
+        * 
    
+        * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
+        * (defaults to 'x-box'). 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", "
    " + String.format(Ext.Element.boxMarkup, cls) + "
    "));        //String.format('
    '+Ext.Element.boxMarkup+'
    ', 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:
      
+         * 
    • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
      • 
+         * 
    • A String used to set the CSS width style. Animation may not be used.
+         * 
    • A size object in the format {width: widthValue, height: heightValue}.
      • 
+         * 
    
+         * @param {Mixed} height The new height. This may be one of:
      
+         * 
    • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
      • 
+         * 
    • A String used to set the CSS height style. Animation may not be used.
      • 
+         * 
    
+         * @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;
+        },
+
+        /**
+         * 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 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;
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * 
    Returns the dimensions of the element available to lay content out in.
    
+         * 
    If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
    
+         * example:
    
+        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.
+        * 
    
+        *
+        * 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
+                }
+            }
+        },
+
+        /**
+        * 
    Returns the dimensions of the element available to lay content out in.
    
+        *
+        * 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.
+        */
+
+        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)};
+        },
+
+        /**
+         * 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)};
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * 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");
+        },
+
+        /**
+         * 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);
+            }
+        }
+    };
+}());
+/**
+ * @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);
+    },
+
+    /**
+      * 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);
+    },
+
+    /**
+      * 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);
+    },
+
+    /**
+      * 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 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
+     */
+    setX : function(x, animate){	    
+	    return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));
+    },
+
+    /**
+     * 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
+     */
+    setY : function(y, animate){	    
+	    return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));
+    },
+
+    /**
+     * 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
+     */
+    setLeft : function(left){
+        this.setStyle(LEFT, this.addUnits(left));
+        return this;
+    },
+
+    /**
+     * 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
+     */
+    setTop : function(top){
+        this.setStyle(TOP, this.addUnits(top));
+        return this;
+    },
+
+    /**
+     * Sets the element's CSS right style.
+     * @param {String} right The right CSS property value
+     * @return {Ext.Element} this
+     */
+    setRight : function(right){
+        this.setStyle(RIGHT, this.addUnits(right));
+        return this;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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');
+        }
+        return me;
+    },
+
+    /**
+     * 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));
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+    * 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]);
+    },
+
+    /**
+    * 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)
+        };
     },
     
-    /**
-    * 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);
-                    }
-                }
-		    	els.splice(val, 1);		    	
-			}
-	    });
-        return this;
-    }    
+    /**
+    * 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.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;
+    },
+
+    /**
+     * 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
    
+{
+    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>
+}
+
    
+     * 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:
      
+     * 
    • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)
      • 
+     * 
    • A String used to set the CSS width style. Animation may not be used.
+     * 
    
+     * @param {Mixed} height The new height. This may be one of:
      
+     * 
    • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)
      • 
+     * 
    • A String used to set the CSS height style. Animation may not be used.
      • 
+     * 
    
+     * @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({
+    /**
+     * 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
+     */
+    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;
+        }
+        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;
+        }
+        return this;
+    },
+
+    // private
+    scrollChildIntoView : function(child, hscroll){
+        Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
+    },
+    
+    /**
+     * 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.
+     */
+     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",
+        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.
+         * 
      
+         * 
    • Animation Properties
      • 
+         * 
+         * 
      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:
        
+         * 
      • bottom, top, left, right
        • 
+         * 
      • height, width
        • 
+         * 
      • margin, padding
        • 
+         * 
      • borderWidth
        • 
+         * 
      • opacity
        • 
+         * 
      • fontSize
        • 
+         * 
      • lineHeight
        • 
+         * 
      
+         * 
+         * 
+         * 
    • Animation Property Attributes
      • 
+         * 
+         * 
      Each Animation Property is a config object with optional properties:
      
+         * 
        
+         * 
      • by*  : relative change - start at current value, change by this value
        • 
+         * 
      • from : ignore current value, start from this value
        • 
+         * 
      • to*  : start at current value, go to this value
        • 
+         * 
      • unit : any allowable unit specification
        • 
+         * 
        * do not specify both to and by for an animation property
        
+         * 
      
+         * 
+         * 
    • Animation Types
      • 
+         * 
+         * 
      The supported animation types:
        
+         * 
      • 'run' : Default
+         * 
        
+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')    
+);
+         * 
        
+         * 
        • 
+         * 
      • 'color'
+         * 
        Animates transition of background, text, or border colors.
        
+         * 
        
+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')    
+);
+         * 
         
+         * 
        • 
+         * 
+         * 
      • 'motion'
+         * 
        Animates the motion of an element to/from specific points using optional bezier
+         * way points during transit.
        
+         * 
        
+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')    
+);
+         * 
         
+         * 
        • 
+         * 
      • 'scroll'
+         * 
        Animate horizontal or vertical scrolling of an overflowing page element.
        
+         * 
        
+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')    
+);
+         * 
         
+         * 
        • 
+         * 
      
+         * 
+         * 
    
+         * 
+         * @param {Object} args The animation control args
+         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
+         * @param {Function} onComplete (optional) Function to call when animation completes
+         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut')
+         * @param {String} animType (optional) 'run' is the default. Can also be 'color',
+         * 'motion', or 'scroll'
+         * @return {Ext.Element} this
+         */
+        animate : function(args, duration, onComplete, easing, animType){       
+            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
+            return this;
+        },
+    
+        /*
+         * @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;
+        },
+    
+        // 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,
+                dom = me.dom,
+                isDisplay = getVisMode(this.dom) == ELDISPLAY;
+                
+            if (!animate || !me.anim) {
+                if(isDisplay){
+                    me.setDisplayed(visible);
+                }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){
+            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){
+            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;
+
+	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);
+            }
+	        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(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:
+     * {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 (this 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
+            };
+        }
+        return new Ext.KeyMap(this, config);
+    },
+
+    /**
+     * 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
+     */
+    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;
+
+/**
+ * @class Ext.Fx
+ * 
    A class to provide basic animation and visual effects support.  Note: This class is automatically applied
+ * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
+ * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be
+ * {@link Ext#enableFx included} in order for the Element effects to work.

    
+ * 
+ * 
    Method Chaining
    
+ * 
    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 {@link #callback}.

    
+ *
+ * 
    Anchor Options for Motion Effects
    
+ * 
    Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
+ * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:
    
+
    +Value  Description
+-----  -----------------------------
+tl     The top left corner
+t      The center of the top edge
+tr     The top right corner
+l      The center of the left edge
+r      The center of the right edge
+bl     The bottom left corner
+b      The center of the bottom edge
+br     The bottom right corner
+
    
+ * Note: 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.
+ * 
+ * @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 Method Chaining above), for example:
    
+ * el.slideIn().highlight();
+ * 
    
+ * The callback is intended for any additional code that should run once a particular effect has completed. The Element
+ * being operated upon is passed as the first parameter.
+ * 
+ * @cfg {Object} scope The scope (this reference) in which the {@link #callback} function is executed. Defaults to the browser window.
+ * 
+ * @cfg {String} easing A valid Ext.lib.Easing value for the effect:
      
+ * 
    • backBoth
      • 
+ * 
    • backIn
      • 
+ * 
    • backOut
      • 
+ * 
    • bounceBoth
      • 
+ * 
    • bounceIn
      • 
+ * 
    • bounceOut
      • 
+ * 
    • easeBoth
      • 
+ * 
    • easeBothStrong
      • 
+ * 
    • easeIn
      • 
+ * 
    • easeInStrong
      • 
+ * 
    • easeNone
      • 
+ * 
    • easeOut
      • 
+ * 
    • easeOutStrong
      • 
+ * 
    • elasticBoth
      • 
+ * 
    • elasticIn
      • 
+ * 
    • elasticOut
      • 
+ * 
    
+ *
+ * @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
+ * 0 and 1 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 display CSS property instead of visibility when hiding Elements (only applies to 
+ * effects that end with the element being visually hidden, ignored otherwise)
+ * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object
+ * in the form {width:"100px"}, or a function which returns such a specification that will be applied to the
+ * Element after the effect finishes.
+ * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
+ * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
+ * @cfg {Boolean} stopFx Whether 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]);
+    },
+    
+    /**
+     * Slides the element into view.  An anchor point can be optionally passed to set the point of
+     * origin for the slide effect.  This function automatically handles wrapping the element with
+     * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+     * Usage:
+     *
    
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+    easing: 'easeOut',
+    duration: .5
+});
+
    
+     * @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
+     */
+    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";
+
+        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);
+            }
+            
+            // 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);                  
+                }
+                style[s1] = style[s2] = "0";                    
+                if(w){
+                    ret.width = w
+                };
+                if(h){
+                    ret.height = h;
+                }
+                if(p){
+                    ret.points = p;
+                }
+                return ret;
+            };
+
+            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;
+    },
+    
+    /**
+     * 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:
+     *
    
+// 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
+});
+
    
+     * @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
+     */
+    slideOut : function(anchor, o){
+        o = getObject(o);
+        var me = this,
+            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);
+
+            // 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;
+    },
+
+    /**
+     * 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:
+     *
    
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+
    
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    puff : function(o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            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();                   
+            
+            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);
+        });
+        return me;
+    },
+
+    /**
+     * 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:
+     *
    
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+    easing: 'easeIn',
+    duration: .3,
+    remove: false,
+    useDisplay: false
+});
+
    
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    switchOff : function(o){
+        o = getObject(o);
+        var me = this,
+            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;
+    },
+
+    /**
+     * 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:
+
    
+// 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
+});
+
    
+     * @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:
+
    
+// 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
+});
+
    
+    * @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);
+                };
+            
+            
+            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;
+    },
+
+   /**
+    * Creates a pause before any subsequent queued effects begin.  If there are
+    * no effects queued after the pause it will have no effect.
+    * Usage:
+
    
+el.pause(1);
+
    
+    * @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 {@link #endOpacity} config option.
+    * Usage:
+
    
+// 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
+});
+
    
+    * @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,
+            dom = me.dom,
+            to = o.endOpacity || 1;
+        
+        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;
+    },
+
+   /**
+    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
+    * using the {@link #endOpacity} config option.  Note that IE may require
+    * {@link #useDisplay}:true in order to redisplay correctly.
+    * Usage:
+
    
+// 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
+});
+
    
+    * @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;
+    },
+
+   /**
+    * 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:
+
    
+// 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
+    }
+);
+
    
+    * @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;
+    },
+
+   /**
+    * 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:
+
    
+// 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
+});
+
    
+    * @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()]};                  
+            }
+
+            arguments.callee.anim = fly(dom).fxanim(a,
+                o, 
+                MOTION, 
+                .35, 
+                EASEOUT, 
+                function(){
+                    fly(dom).afterFx(o);
+                });
+        });
+        return this;
+    },
+
+    /**
+     * 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:
+     *
    
+// 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
+});
+
    
+     * @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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /* @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
+     */
+    hasActiveFx : function(){
+        return getQueue(this.dom.id)[0];
+    },
+
+    /**
+     * 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 */
+    beforeFx : function(o){
+        if(this.hasActiveFx() && !o.concurrent){
+           if(o.stopFx){
+               this.stopFx();
+               return TRUE;
+           }
+           return FALSE;
+        }
+        return TRUE;
+    },
+
+    /**
+     * 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;
+    },
+
+    /* @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;
+    },
+
+    /* @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;
+    },
+
+    /* @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();
+        }
+    },
+
+    /* @private */
+    getFxRestore : function(){
+        var st = this.dom.style;
+        return {pos: this.getPositioning(), width: st.width, height : st.height};
+    },
+
+    /* @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();
+        }
+    },
+
+    /* @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;
+    }
+};
+
+// backwards compat
+Ext.Fx.resize = Ext.Fx.scale;
+
+//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
+ * 
    This class encapsulates a collection of DOM elements, providing methods to filter
+ * members, or to perform collective actions upon the whole set.
    
+ * 
    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.
    
+ * Example:
    
+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);
+
+ */
+Ext.CompositeElementLite = function(els, root){
+    /**
+     * 
    The Array of DOM elements which this CompositeElement encapsulates. Read-only.
    
+     * 
    This will not usually 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.
    
+     * 
    For example to add the nextAll method to the class to add all
+     * following siblings of selected elements, the code would be
    +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;
+            }
+        }
+
+//      Add all found siblings to this Composite
+        return this.add(r);
+    }
+});
    
+     * @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 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;
+
+        if(el){
+            out = me.getElement(el);
+        }
+        return out;
+    },
+
+    // fixes scope with flyweight
+    addListener : function(eventName, handler, scope, opt){
+        var els = this.elements,
+            len = els.length,
+            i, e;
+        
+        for(i = 0; iCalls the passed function for each element in this composite.
    
+     * @param {Function} fn The function to call. The function is passed the following parameters:
      
+     * 
    • el : Element
      The current Element in the iteration.
+     * This is the flyweight (shared) Ext.Element instance, so if you require a
+     * a reference to the dom node, use el.dom.
      • 
+     * 
    • c : Composite
      This Composite object.
      • 
+     * 
    • idx : Number
      The zero-based index in the iteration.
      • 
+     * 
    
+     * @param {Object} scope (optional) The scope (this 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
+     * 
  • el : Ext.Element
    The current DOM element.
    • 
+     * 
  • index : Number
    The current index within the collection.
    • 
+     * 
+     * @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;
+    },
+    
+    /**
+     * 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));
+    },
+    
+    /**
+    * 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);
+            }
+            this.elements.splice(index, 1, replacement);
+        }
+        return this;
+    },
+    
+    /**
+     * Removes all elements.
+     */
+    clear : function(){
+        this.elements = [];
+    }
+};
+
+Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
+
+(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);
+            };
+        }).call(CelProto, fnName);
+        
+    }
+}
+})();
+
+if(Ext.DomQuery){
+    Ext.Element.selectorFunction = Ext.DomQuery.select;
+} 
+
+/**
+ * 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);
+                    }
+                }
+		    	els.splice(val, 1);		    	
+			}
+	    });
+        return this;
+    }    
+});
+/**
+ * @class Ext.CompositeElement
+ * @extends Ext.CompositeElementLite
+ * 
    This class encapsulates a collection of DOM elements, providing methods to filter
+ * members, or to perform collective actions upon the whole set.
    
+ * 
    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.
    
+ * 
    All methods return this and can be chained.
    
+ * Usage:
+
    
+var els = Ext.select("#some-el div.some-class", true);
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class', true);
+
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+
    
+ */
+Ext.CompositeElement = function(els, root){
+    this.elements = [];
+    this.add(els, root);
+};
+
+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);
+    }
+
+    /**
+    * Adds elements to this composite.
+    * @param {String/Array} els A string CSS selector, an array of elements or an element
+    * @return {CompositeElement} this
+    */
+
+    /**
+     * Returns the Element object at the specified index
+     * @param {Number} index
+     * @return {Ext.Element}
+     */
+
+    /**
+     * Iterates each element in this composite
+     * calling the supplied function using {@link Ext#each}.
+     * @param {Function} fn The function to be called with each
+     * element. If the supplied function returns false,
+     * iteration stops. This function is called with the following arguments:
+     * 
      
+     * 
    • element : Ext.Element
      The element at the current index
+     * in the composite
      • 
+     * 
    • composite : Object 
      This composite.
      • 
+     * 
    • index : Number 
      The current index within the composite 
      • 
+     * 
    
+     * @param {Object} scope (optional) The scope ( reference) in which the specified function is executed.
+     * Defaults to the element at the current index
+     * within the composite.
+     * @return {CompositeElement} this
+     */
+});
+
+/**
+ * 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";
+    }
+
+    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
+     * 
    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.
    
+     * 
    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
+     * success callback
+     * in the request options object,
+     * or an {@link #requestcomplete event listener}.
    
+     * 
    File Uploads
    File uploads are not performed using normal "Ajax" techniques, that
+     * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
+     * manner with the DOM <form> element temporarily modified to have its
+     * target set to refer
+     * to a dynamically generated, hidden <iframe> which is inserted into the document
+     * but removed after the return data has been gathered.
    
+     * 
    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
+     * Content-Type header
+     * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
    
+     * 
    Characters which are significant to an HTML parser must be sent as HTML entities, so encode
+     * "<" as "&lt;", "&" as "&amp;" etc.
    
+     * 
    The response text is retrieved from the document, and a fake XMLHttpRequest object
+     * is created containing a responseText property in order to conform to the
+     * requirements of event handlers and callbacks.
    
+     * 
    Be aware that file upload packets are sent with the content type multipart/form
+     * and some server technologies (notably JEE) may require some custom processing in order to
+     * retrieve parameter names and parameter values from the packet content.
    
+     * @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 The XMLHttpRequest Object
+             * 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 HTTP Status Code Definitions
+             * for details of HTTP status codes.
+             * @param {Connection} conn This Connection object.
+             * @param {Object} response The XHR object containing the response data.
+             * See The XMLHttpRequest Object
+             * 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, {
+        /**
+         * @cfg {String} url (Optional) 
    The default URL to be used for requests to the server. Defaults to undefined.
    
+         * 
    The url config may be a function which returns the URL to use for the Ajax request. The scope
+         * (this reference) of the function is the scope option passed to the {@link #request} method.
    
+         */
+        /**
+         * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+         * extra parameters to each request made by this object. (defaults to undefined)
+         */
+        /**
+         * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+         *  to each request made by this object. (defaults to undefined)
+         */
+        /**
+         * @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.)
+         */
+        /**
+         * @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,
+
+        /**
+         * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
+         * @type Boolean
+         */
+        disableCaching: true,
+
+        /**
+         * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching
+         * through a cache buster. Defaults to '_dc'
+         * @type String
+         */
+        disableCachingParam: '_dc',
+
+        /**
+         * 
    Sends an HTTP request to a remote server.
    
+         * 
    Important: Ajax server requests are asynchronous, and this call will
+         * return before the response has been received. Process any returned data
+         * in a callback function.
    
+         * 
    
+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);
+   }
+});
+         * 
    
+         * 
    To execute a callback function in the correct scope, use the scope option.
    
+         * @param {Object} options An object which may contain the following properties:
      
+         * 
    • url : String/Function (Optional)
      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 scope option. Defaults to the configured
+         * {@link #url}.
      • 
+         * 
    • params : Object/String/Function (Optional)
      
+         * 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 scope option.
      • 
+         * 
    • method : String (Optional)
      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.
      • 
+         * 
    • callback : Function (Optional)
      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:
        
+         * 
      • options : Object
        The parameter to the request call.
        • 
+         * 
      • success : Boolean
        True if the request succeeded.
        • 
+         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
+         * See http://www.w3.org/TR/XMLHttpRequest/ for details about
+         * accessing elements of the response.
        • 
+         * 
      • 
+         * 
    • success : Function (Optional)
      The function
+         * to be called upon success of the request. The callback is passed the following
+         * parameters:
        
+         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
        • 
+         * 
      • options : Object
        The parameter to the request call.
        • 
+         * 
      • 
+         * 
    • failure : Function (Optional)
      The function
+         * to be called upon failure of the request. The callback is passed the
+         * following parameters:
        
+         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
        • 
+         * 
      • options : Object
        The parameter to the request call.
        • 
+         * 
      • 
+         * 
    • scope : Object (Optional)
      The scope in
+         * which to execute the callbacks: The "this" object for the callback function. If the url, or params 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.
      • 
+         * 
    • timeout : Number (Optional)
      The timeout in milliseconds to be used for this request. Defaults to 30 seconds.
      • 
+         * 
    • form : Element/HTMLElement/String (Optional)
      The <form>
+         * Element or the id of the <form> to pull parameters from.
      • 
+         * 
    • isUpload : Boolean (Optional)
      Only meaningful when used
+         * with the form option.
+         * 
      True if the form object is a file upload (will be set automatically if the form was
+         * configured with enctype "multipart/form-data").
      
+         * 
      File uploads are not performed using normal "Ajax" techniques, that is they are not
+         * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
+         * DOM <form> element temporarily modified to have its
+         * target set to refer
+         * to a dynamically generated, hidden <iframe> which is inserted into the document
+         * but removed after the return data has been gathered.
      
+         * 
      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
+         * Content-Type header
+         * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
      
+         * 
      The response text is retrieved from the document, and a fake XMLHttpRequest object
+         * is created containing a responseText property in order to conform to the
+         * requirements of event handlers and callbacks.
      
+         * 
      Be aware that file upload packets are sent with the content type multipart/form
+         * and some server technologies (notably JEE) may require some custom processing in order to
+         * retrieve parameter names and parameter values from the packet content.
      
+         * 
      • 
+         * 
    • headers : Object (Optional)
      Request
+         * headers to set for the request.
      • 
+         * 
    • xmlData : Object (Optional)
      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.
      • 
+         * 
    • jsonData : Object/String (Optional)
      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.
      • 
+         * 
    • disableCaching : Boolean (Optional)
      True
+         * to add a unique cache-buster param to GET requests.
      • 
+         * 
    
+         * 
    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.
    
+         * @return {Number} transactionId The id of the server transaction. This may be used
+         * to cancel the request.
+         */
+        request : function(o){
+            var me = this;
+            if(me.fireEvent(BEFOREREQUEST, me, o)){
+                if (o.el) {
+                    if(!Ext.isEmpty(o.indicatorText)){
+                        me.indicatorText = '
    '+o.indicatorText+"
    ";
+                    }
+                    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;
+                    });
+                }
+
+                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);
+                }
+
+                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);
+
+                if (Ext.isFunction(url)) {
+                    url = url.call(o.scope || WINDOW, o);
+                }
+
+                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;
+            }
+        },
+
+        /**
+         * 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
+         */
+        abort : function(transId){
+            if(transId || this.isLoading()){
+                Ext.lib.Ajax.abort(transId || this.transId);
+            }
+        },
+
+        // 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);
+            }
+        },
+
+        // private
+        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);
+            }
+        },
+
+        // 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);
+            });
+        }
+    });
+})();
+
+/**
+ * @class Ext.Ajax
+ * @extends Ext.data.Connection
+ * 
    The global Ajax request class that provides a simple way to make Ajax requests
+ * with maximum flexibility.
    
+ * 
    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.
    
+ * 
    Common Properties you may want to set are:
      
+ * 
    • {@link #method}
      • 
+ * 
    • {@link #extraParams}
      • 
+ * 
    • {@link #url}
      • 
+ * 
    
+ * 
    
+// Default headers to pass in every request
+Ext.Ajax.defaultHeaders = {
+    'Powered-By': 'Ext'
+};
+ * 
    
+ * 
    
+ * 
    Common Events you may want to set are:
      
+ * 
    • {@link Ext.data.Connection#beforerequest beforerequest}
      • 
+ * 
    • {@link Ext.data.Connection#requestcomplete requestcomplete}
      • 
+ * 
    • {@link Ext.data.Connection#requestexception requestexception}
      • 
+ * 
    
+ * 
    
+// 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);
+ * 
    
+ * 
    
+ * 
    An example request:
    
+ * 
    
+// 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'
+});
+ * 
    
+ * 
    
+ * @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
+     * "POST", otherwise will use "GET".)
+     * @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);
+    }
 });
-/**
- * @class Ext.CompositeElement
- * @extends Ext.CompositeElementLite
- * 
    This class encapsulates a collection of DOM elements, providing methods to filter
- * members, or to perform collective actions upon the whole set.
    
- * 
    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.
    
- * 
    All methods return this and can be chained.
    
- * Usage:
-
    
-var els = Ext.select("#some-el div.some-class", true);
-// or select directly from an existing element
-var el = Ext.get('some-el');
-el.select('div.some-class', true);
-
-els.setWidth(100); // all elements become 100 width
-els.hide(true); // all elements fade out and hide
-// or
-els.setWidth(100).hide(true);
-
    
- */
-Ext.CompositeElement = function(els, root){
-    this.elements = [];
-    this.add(els, root);
-};
-
-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);
-    }
-
-    /**
-    * Adds elements to this composite.
-    * @param {String/Array} els A string CSS selector, an array of elements or an element
-    * @return {CompositeElement} this
-    */
-
-    /**
-     * Returns the Element object at the specified index
-     * @param {Number} index
-     * @return {Ext.Element}
-     */
-
-    /**
-     * Iterates each element in this composite
-     * calling the supplied function using {@link Ext#each}.
-     * @param {Function} fn The function to be called with each
-     * element. If the supplied function returns false,
-     * iteration stops. This function is called with the following arguments:
-     * 
      
-     * 
    • element : Ext.Element
      The element at the current index
-     * in the composite
      • 
-     * 
    • composite : Object 
      This composite.
      • 
-     * 
    • index : Number 
      The current index within the composite 
      • 
-     * 
    
-     * @param {Object} scope (optional) The scope ( reference) in which the specified function is executed.
-     * Defaults to the element at the current index
-     * within the composite.
-     * @return {CompositeElement} this
-     */
-});
-
-/**
- * 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";
-    }
-
-    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
-     * 
    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.
    
-     * 
    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
-     * success callback
-     * in the request options object,
-     * or an {@link #requestcomplete event listener}.
    
-     * 
    File Uploads
    File uploads are not performed using normal "Ajax" techniques, that
-     * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
-     * manner with the DOM <form> element temporarily modified to have its
-     * target set to refer
-     * to a dynamically generated, hidden <iframe> which is inserted into the document
-     * but removed after the return data has been gathered.
    
-     * 
    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
-     * Content-Type header
-     * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
    
-     * 
    Characters which are significant to an HTML parser must be sent as HTML entities, so encode
-     * "<" as "&lt;", "&" as "&amp;" etc.
    
-     * 
    The response text is retrieved from the document, and a fake XMLHttpRequest object
-     * is created containing a responseText property in order to conform to the
-     * requirements of event handlers and callbacks.
    
-     * 
    Be aware that file upload packets are sent with the content type multipart/form
-     * and some server technologies (notably JEE) may require some custom processing in order to
-     * retrieve parameter names and parameter values from the packet content.
    
-     * @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 The XMLHttpRequest Object
-             * 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 HTTP Status Code Definitions
-             * for details of HTTP status codes.
-             * @param {Connection} conn This Connection object.
-             * @param {Object} response The XHR object containing the response data.
-             * See The XMLHttpRequest Object
-             * 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, {
-        /**
-         * @cfg {String} url (Optional) 
    The default URL to be used for requests to the server. Defaults to undefined.
    
-         * 
    The url config may be a function which returns the URL to use for the Ajax request. The scope
-         * (this reference) of the function is the scope option passed to the {@link #request} method.
    
-         */
-        /**
-         * @cfg {Object} extraParams (Optional) An object containing properties which are used as
-         * extra parameters to each request made by this object. (defaults to undefined)
-         */
-        /**
-         * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
-         *  to each request made by this object. (defaults to undefined)
-         */
-        /**
-         * @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.)
-         */
-        /**
-         * @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,
-
-        /**
-         * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
-         * @type Boolean
-         */
-        disableCaching: true,
-
-        /**
-         * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching
-         * through a cache buster. Defaults to '_dc'
-         * @type String
-         */
-        disableCachingParam: '_dc',
-
-        /**
-         * 
    Sends an HTTP request to a remote server.
    
-         * 
    Important: Ajax server requests are asynchronous, and this call will
-         * return before the response has been received. Process any returned data
-         * in a callback function.
    
-         * 
    
-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);
-   }
-});
-         * 
    
-         * 
    To execute a callback function in the correct scope, use the scope option.
    
-         * @param {Object} options An object which may contain the following properties:
      
-         * 
    • url : String/Function (Optional)
      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 scope option. Defaults to the configured
-         * {@link #url}.
      • 
-         * 
    • params : Object/String/Function (Optional)
      
-         * 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 scope option.
      • 
-         * 
    • method : String (Optional)
      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.
      • 
-         * 
    • callback : Function (Optional)
      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:
        
-         * 
      • options : Object
        The parameter to the request call.
        • 
-         * 
      • success : Boolean
        True if the request succeeded.
        • 
-         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
-         * See http://www.w3.org/TR/XMLHttpRequest/ for details about
-         * accessing elements of the response.
        • 
-         * 
      • 
-         * 
    • success : Function (Optional)
      The function
-         * to be called upon success of the request. The callback is passed the following
-         * parameters:
        
-         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
        • 
-         * 
      • options : Object
        The parameter to the request call.
        • 
-         * 
      • 
-         * 
    • failure : Function (Optional)
      The function
-         * to be called upon failure of the request. The callback is passed the
-         * following parameters:
        
-         * 
      • response : Object
        The XMLHttpRequest object containing the response data.
        • 
-         * 
      • options : Object
        The parameter to the request call.
        • 
-         * 
      • 
-         * 
    • scope : Object (Optional)
      The scope in
-         * which to execute the callbacks: The "this" object for the callback function. If the url, or params 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.
      • 
-         * 
    • timeout : Number (Optional)
      The timeout in milliseconds to be used for this request. Defaults to 30 seconds.
      • 
-         * 
    • form : Element/HTMLElement/String (Optional)
      The <form>
-         * Element or the id of the <form> to pull parameters from.
      • 
-         * 
    • isUpload : Boolean (Optional)
      Only meaningful when used
-         * with the form option.
-         * 
      True if the form object is a file upload (will be set automatically if the form was
-         * configured with enctype "multipart/form-data").
      
-         * 
      File uploads are not performed using normal "Ajax" techniques, that is they are not
-         * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
-         * DOM <form> element temporarily modified to have its
-         * target set to refer
-         * to a dynamically generated, hidden <iframe> which is inserted into the document
-         * but removed after the return data has been gathered.
      
-         * 
      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
-         * Content-Type header
-         * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
      
-         * 
      The response text is retrieved from the document, and a fake XMLHttpRequest object
-         * is created containing a responseText property in order to conform to the
-         * requirements of event handlers and callbacks.
      
-         * 
      Be aware that file upload packets are sent with the content type multipart/form
-         * and some server technologies (notably JEE) may require some custom processing in order to
-         * retrieve parameter names and parameter values from the packet content.
      
-         * 
      • 
-         * 
    • headers : Object (Optional)
      Request
-         * headers to set for the request.
      • 
-         * 
    • xmlData : Object (Optional)
      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.
      • 
-         * 
    • jsonData : Object/String (Optional)
      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.
      • 
-         * 
    • disableCaching : Boolean (Optional)
      True
-         * to add a unique cache-buster param to GET requests.
      • 
-         * 
    
-         * 
    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.
    
-         * @return {Number} transactionId The id of the server transaction. This may be used
-         * to cancel the request.
-         */
-        request : function(o){
-            var me = this;
-            if(me.fireEvent(BEFOREREQUEST, me, o)){
-                if (o.el) {
-                    if(!Ext.isEmpty(o.indicatorText)){
-                        me.indicatorText = '
    '+o.indicatorText+"
    ";
-                    }
-                    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;
-                    });
-                }
-
-                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);
-                }
-
-                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);
-
-                if (Ext.isFunction(url)) {
-                    url = url.call(o.scope || WINDOW, o);
-                }
-
-                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;
-            }
-        },
-
-        /**
-         * 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
-         */
-        abort : function(transId){
-            if(transId || this.isLoading()){
-                Ext.lib.Ajax.abort(transId || this.transId);
-            }
-        },
-
-        // 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);
-            }
-        },
-
-        // private
-        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);
-            }
-        },
-
-        // 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);
-            });
-        }
-    });
-})();
-
-/**
- * @class Ext.Ajax
- * @extends Ext.data.Connection
- * 
    The global Ajax request class that provides a simple way to make Ajax requests
- * with maximum flexibility.
    
- * 
    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.
    
- * 
    Common Properties you may want to set are:
      
- * 
    • {@link #method}
      • 
- * 
    • {@link #extraParams}
      • 
- * 
    • {@link #url}
      • 
- * 
    
- * 
    
-// Default headers to pass in every request
-Ext.Ajax.defaultHeaders = {
-    'Powered-By': 'Ext'
-};
- * 
    
- * 
    
- * 
    Common Events you may want to set are:
      
- * 
    • {@link Ext.data.Connection#beforerequest beforerequest}
      • 
- * 
    • {@link Ext.data.Connection#requestcomplete requestcomplete}
      • 
- * 
    • {@link Ext.data.Connection#requestexception requestexception}
      • 
- * 
    
- * 
    
-// 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);
- * 
    
- * 
    
- * 
    An example request:
    
- * 
    
-// 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'
-});
- * 
    
- * 
    
- * @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
-     * "POST", otherwise will use "GET".)
-     * @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);
-    }
-});
 /**
  * @class Ext.Updater
  * @extends Ext.util.Observable
@@ -12399,355 +12399,355 @@ Ext.encode = Ext.util.JSON.encode;
  * @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 = /(?:)((\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(/, 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 parse() 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:
    
-         * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
-         * 
    
-         * @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.
-         * 
    examples (123456.789):
-         * 
    
-         * 0 - (123456) show only digits, no precision
    
-         * 0.00 - (123456.78) show only digits, 2 precision
    
-         * 0.0000 - (123456.7890) show only digits, 4 precision
    
-         * 0,000 - (123,456) show comma and digits, no precision
    
-         * 0,000.00 - (123,456.78) show comma and digits, 2 precision
    
-         * 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision
    
-         * To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.
-         * For example: 0.000,00/i
-         * 
    
-         * @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 = ',';
-		    }
-		
-		    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);
-		    }
-		
-		    var fnum = v.toString();
-		    if(hasComma){
-		        psplit = fnum.split('.');
-		
-		        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];
-		        }
-		    }
-		
-		    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, '
    ');
-        }
-    }
-}();
+/**
+ * @class Ext.util.Format
+ * Reusable data formatting functions
+ * @singleton
+ */
+Ext.util.Format = function(){
+    var trimRe = /^\s+|\s+$/g,
+        stripTagsRE = /<\/?[^>]+>/gi,
+        stripScriptsRe = /(?:)((\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(/, 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 parse() 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:
    
+         * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
+         * 
    
+         * @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.
+         * 
    examples (123456.789):
+         * 
    
+         * 0 - (123456) show only digits, no precision
    
+         * 0.00 - (123456.78) show only digits, 2 precision
    
+         * 0.0000 - (123456.7890) show only digits, 4 precision
    
+         * 0,000 - (123,456) show comma and digits, no precision
    
+         * 0,000.00 - (123,456.78) show comma and digits, 2 precision
    
+         * 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision
    
+         * To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.
+         * For example: 0.000,00/i
+         * 
    
+         * @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 = ',';
+		    }
+		
+		    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);
+		    }
+		
+		    var fnum = v.toString();
+		    if(hasComma){
+		        psplit = fnum.split('.');
+		
+		        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];
+		        }
+		    }
+		
+		    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, '
    ');
+        }
+    }
+}();
 /**
  * @class Ext.XTemplate
  * @extends Ext.Template
@@ -13219,160 +13219,160 @@ Ext.XTemplate.prototype.apply = Ext.XTemplate.prototype.applyTemplate;
 Ext.XTemplate.from = function(el){
     el = Ext.getDom(el);
     return new Ext.XTemplate(el.value || el.innerHTML);
-};/**
- * @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.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
@@ -13727,241 +13727,241 @@ Ext.KeyNav.prototype = {
         return this.forceKeyDown || Ext.EventManager.useKeydown;
     }
 };
-/**
- * @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.
    
- * Usage:
- 
    
-// 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.'); }
-    }
-]);
-
    
- * Note: A KeyMap starts enabled
- * @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:
-     * 
    -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)
-
    
-     *
-     * Usage:
-     * 
    
-// 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
-});
-
    
-     * @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 (this 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.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.
    
+ * Usage:
+ 
    
+// 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.'); }
+    }
+]);
+
    
+ * Note: A KeyMap starts enabled
+ * @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:
+     * 
    +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)
+
    
+     *
+     * Usage:
+     * 
    
+// 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
+});
+
    
+     * @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 (this 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
@@ -14092,95 +14092,95 @@ Ext.Element.addMethods({
         return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);
     }
 });
-/**
- * @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 ('/'). 
-     * @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 false. 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, get() returns null.  The following
-     * example retrieves the cookie called "valid" and stores the String value
-     * in the variable validStatus.
-     * 
    
-     * var validStatus = Ext.util.Cookies.get("valid");
-     * 
    
-     * @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));
-    }
+/**
+ * @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 ('/'). 
+     * @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 false. 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, get() returns null.  The following
+     * example retrieves the cookie called "valid" and stores the String value
+     * in the variable validStatus.
+     * 
    
+     * var validStatus = Ext.util.Cookies.get("valid");
+     * 
    
+     * @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
@@ -16183,253 +16183,253 @@ myGridPanel.mon(myGridPanel.getSelectionModel(), {
     }
 });
 
-Ext.reg('component', Ext.Component);/**
- * @class Ext.Action
- * 
    An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
- * can be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI
- * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button}
- * and {@link Ext.menu.Menu} components).
    
- * 
    Aside from supporting the config object interface, any component that needs to use Actions must also support
- * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),
- * setDisabled(boolean), setVisible(boolean) and setHandler(function).
    
- * Example usage:
    
- * 
    
-// Define the shared action.  Each component below will have the same
-// display text and icon, and will display the same message on click.
-var action = new Ext.Action({
-    {@link #text}: 'Do something',
-    {@link #handler}: function(){
-        Ext.Msg.alert('Click', 'You did something.');
-    },
-    {@link #iconCls}: 'do-something',
-    {@link #itemId}: 'myAction'
-});
-
-var panel = new Ext.Panel({
-    title: 'Actions',
-    width: 500,
-    height: 300,
-    tbar: [
-        // Add the action directly to a toolbar as a menu button
-        action,
-        {
-            text: 'Action Menu',
-            // Add the action to a menu as a text item
-            menu: [action]
-        }
-    ],
-    items: [
-        // Add the action to the panel body as a standard button
-        new Ext.Button(action)
-    ],
-    renderTo: Ext.getBody()
-});
-
-// Change the text for all components using the action
-action.setText('Something else');
-
-// Reference an action through a container using the itemId
-var btn = panel.getComponent('myAction');
-var aRef = btn.baseAction;
-aRef.setText('New text');
-
    
- * @constructor
- * @param {Object} config The configuration options
- */
-Ext.Action = Ext.extend(Object, {
-    /**
-     * @cfg {String} text The text to set for all components using this action (defaults to '').
-     */
-    /**
-     * @cfg {String} iconCls
-     * The CSS class selector that specifies a background image to be used as the header icon for
-     * all components using this action (defaults to '').
-     * 
    An example of specifying a custom icon class would be something like:
-     * 
    
-// specify the property in the config for the class:
-     ...
-     iconCls: 'do-something'
-
-// css class that specifies background image to be used as the icon image:
-.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
-
    
-     */
-    /**
-     * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).
-     */
-    /**
-     * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).
-     */
-    /**
-     * @cfg {Function} handler The function that will be invoked by each component tied to this action
-     * when the component's primary event is triggered (defaults to undefined).
-     */
-    /**
-     * @cfg {String} itemId
-     * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
-     */
-    /**
-     * @cfg {Object} scope The scope (this reference) in which the
-     * {@link #handler} is executed. Defaults to this Button.
-     */
-
-    constructor : function(config){
-        this.initialConfig = config;
-        this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
-        this.items = [];
-    },
-    
-    // private
-    isAction : true,
-
-    /**
-     * Sets the text to be displayed by all components using this action.
-     * @param {String} text The text to display
-     */
-    setText : function(text){
-        this.initialConfig.text = text;
-        this.callEach('setText', [text]);
-    },
-
-    /**
-     * Gets the text currently displayed by all components using this action.
-     */
-    getText : function(){
-        return this.initialConfig.text;
-    },
-
-    /**
-     * Sets the icon CSS class for all components using this action.  The class should supply
-     * a background image that will be used as the icon image.
-     * @param {String} cls The CSS class supplying the icon image
-     */
-    setIconClass : function(cls){
-        this.initialConfig.iconCls = cls;
-        this.callEach('setIconClass', [cls]);
-    },
-
-    /**
-     * Gets the icon CSS class currently used by all components using this action.
-     */
-    getIconClass : function(){
-        return this.initialConfig.iconCls;
-    },
-
-    /**
-     * Sets the disabled state of all components using this action.  Shortcut method
-     * for {@link #enable} and {@link #disable}.
-     * @param {Boolean} disabled True to disable the component, false to enable it
-     */
-    setDisabled : function(v){
-        this.initialConfig.disabled = v;
-        this.callEach('setDisabled', [v]);
-    },
-
-    /**
-     * Enables all components using this action.
-     */
-    enable : function(){
-        this.setDisabled(false);
-    },
-
-    /**
-     * Disables all components using this action.
-     */
-    disable : function(){
-        this.setDisabled(true);
-    },
-
-    /**
-     * Returns true if the components using this action are currently disabled, else returns false.  
-     */
-    isDisabled : function(){
-        return this.initialConfig.disabled;
-    },
-
-    /**
-     * Sets the hidden state of all components using this action.  Shortcut method
-     * for {@link #hide} and {@link #show}.
-     * @param {Boolean} hidden True to hide the component, false to show it
-     */
-    setHidden : function(v){
-        this.initialConfig.hidden = v;
-        this.callEach('setVisible', [!v]);
-    },
-
-    /**
-     * Shows all components using this action.
-     */
-    show : function(){
-        this.setHidden(false);
-    },
-
-    /**
-     * Hides all components using this action.
-     */
-    hide : function(){
-        this.setHidden(true);
-    },
-
-    /**
-     * Returns true if the components using this action are currently hidden, else returns false.  
-     */
-    isHidden : function(){
-        return this.initialConfig.hidden;
-    },
-
-    /**
-     * Sets the function that will be called by each Component using this action when its primary event is triggered.
-     * @param {Function} fn The function that will be invoked by the action's components.  The function
-     * will be called with no arguments.
-     * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component firing the event.
-     */
-    setHandler : function(fn, scope){
-        this.initialConfig.handler = fn;
-        this.initialConfig.scope = scope;
-        this.callEach('setHandler', [fn, scope]);
-    },
-
-    /**
-     * Executes the specified function once for each Component currently tied to this action.  The function passed
-     * in should accept a single argument that will be an object that supports the basic Action config/method interface.
-     * @param {Function} fn The function to execute for each component
-     * @param {Object} scope The scope (this reference) in which the function is executed.  Defaults to the Component.
-     */
-    each : function(fn, scope){
-        Ext.each(this.items, fn, scope);
-    },
-
-    // private
-    callEach : function(fnName, args){
-        var cs = this.items;
-        for(var i = 0, len = cs.length; i < len; i++){
-            cs[i][fnName].apply(cs[i], args);
-        }
-    },
-
-    // private
-    addComponent : function(comp){
-        this.items.push(comp);
-        comp.on('destroy', this.removeComponent, this);
-    },
-
-    // private
-    removeComponent : function(comp){
-        this.items.remove(comp);
-    },
-
-    /**
-     * Executes this action manually using the handler function specified in the original config object
-     * or the handler function set with {@link #setHandler}.  Any arguments passed to this
-     * function will be passed on to the handler function.
-     * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function
-     * @param {Mixed} arg2 (optional)
-     * @param {Mixed} etc... (optional)
-     */
-    execute : function(){
-        this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
-    }
-});
+Ext.reg('component', Ext.Component);/**
+ * @class Ext.Action
+ * 
    An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
+ * can be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI
+ * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button}
+ * and {@link Ext.menu.Menu} components).
    
+ * 
    Aside from supporting the config object interface, any component that needs to use Actions must also support
+ * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),
+ * setDisabled(boolean), setVisible(boolean) and setHandler(function).
    
+ * Example usage:
    
+ * 
    
+// Define the shared action.  Each component below will have the same
+// display text and icon, and will display the same message on click.
+var action = new Ext.Action({
+    {@link #text}: 'Do something',
+    {@link #handler}: function(){
+        Ext.Msg.alert('Click', 'You did something.');
+    },
+    {@link #iconCls}: 'do-something',
+    {@link #itemId}: 'myAction'
+});
+
+var panel = new Ext.Panel({
+    title: 'Actions',
+    width: 500,
+    height: 300,
+    tbar: [
+        // Add the action directly to a toolbar as a menu button
+        action,
+        {
+            text: 'Action Menu',
+            // Add the action to a menu as a text item
+            menu: [action]
+        }
+    ],
+    items: [
+        // Add the action to the panel body as a standard button
+        new Ext.Button(action)
+    ],
+    renderTo: Ext.getBody()
+});
+
+// Change the text for all components using the action
+action.setText('Something else');
+
+// Reference an action through a container using the itemId
+var btn = panel.getComponent('myAction');
+var aRef = btn.baseAction;
+aRef.setText('New text');
+
    
+ * @constructor
+ * @param {Object} config The configuration options
+ */
+Ext.Action = Ext.extend(Object, {
+    /**
+     * @cfg {String} text The text to set for all components using this action (defaults to '').
+     */
+    /**
+     * @cfg {String} iconCls
+     * The CSS class selector that specifies a background image to be used as the header icon for
+     * all components using this action (defaults to '').
+     * 
    An example of specifying a custom icon class would be something like:
+     * 
    
+// specify the property in the config for the class:
+     ...
+     iconCls: 'do-something'
+
+// css class that specifies background image to be used as the icon image:
+.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
+
    
+     */
+    /**
+     * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).
+     */
+    /**
+     * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).
+     */
+    /**
+     * @cfg {Function} handler The function that will be invoked by each component tied to this action
+     * when the component's primary event is triggered (defaults to undefined).
+     */
+    /**
+     * @cfg {String} itemId
+     * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
+     */
+    /**
+     * @cfg {Object} scope The scope (this reference) in which the
+     * {@link #handler} is executed. Defaults to this Button.
+     */
+
+    constructor : function(config){
+        this.initialConfig = config;
+        this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
+        this.items = [];
+    },
+    
+    // private
+    isAction : true,
+
+    /**
+     * Sets the text to be displayed by all components using this action.
+     * @param {String} text The text to display
+     */
+    setText : function(text){
+        this.initialConfig.text = text;
+        this.callEach('setText', [text]);
+    },
+
+    /**
+     * Gets the text currently displayed by all components using this action.
+     */
+    getText : function(){
+        return this.initialConfig.text;
+    },
+
+    /**
+     * Sets the icon CSS class for all components using this action.  The class should supply
+     * a background image that will be used as the icon image.
+     * @param {String} cls The CSS class supplying the icon image
+     */
+    setIconClass : function(cls){
+        this.initialConfig.iconCls = cls;
+        this.callEach('setIconClass', [cls]);
+    },
+
+    /**
+     * Gets the icon CSS class currently used by all components using this action.
+     */
+    getIconClass : function(){
+        return this.initialConfig.iconCls;
+    },
+
+    /**
+     * Sets the disabled state of all components using this action.  Shortcut method
+     * for {@link #enable} and {@link #disable}.
+     * @param {Boolean} disabled True to disable the component, false to enable it
+     */
+    setDisabled : function(v){
+        this.initialConfig.disabled = v;
+        this.callEach('setDisabled', [v]);
+    },
+
+    /**
+     * Enables all components using this action.
+     */
+    enable : function(){
+        this.setDisabled(false);
+    },
+
+    /**
+     * Disables all components using this action.
+     */
+    disable : function(){
+        this.setDisabled(true);
+    },
+
+    /**
+     * Returns true if the components using this action are currently disabled, else returns false.  
+     */
+    isDisabled : function(){
+        return this.initialConfig.disabled;
+    },
+
+    /**
+     * Sets the hidden state of all components using this action.  Shortcut method
+     * for {@link #hide} and {@link #show}.
+     * @param {Boolean} hidden True to hide the component, false to show it
+     */
+    setHidden : function(v){
+        this.initialConfig.hidden = v;
+        this.callEach('setVisible', [!v]);
+    },
+
+    /**
+     * Shows all components using this action.
+     */
+    show : function(){
+        this.setHidden(false);
+    },
+
+    /**
+     * Hides all components using this action.
+     */
+    hide : function(){
+        this.setHidden(true);
+    },
+
+    /**
+     * Returns true if the components using this action are currently hidden, else returns false.  
+     */
+    isHidden : function(){
+        return this.initialConfig.hidden;
+    },
+
+    /**
+     * Sets the function that will be called by each Component using this action when its primary event is triggered.
+     * @param {Function} fn The function that will be invoked by the action's components.  The function
+     * will be called with no arguments.
+     * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component firing the event.
+     */
+    setHandler : function(fn, scope){
+        this.initialConfig.handler = fn;
+        this.initialConfig.scope = scope;
+        this.callEach('setHandler', [fn, scope]);
+    },
+
+    /**
+     * Executes the specified function once for each Component currently tied to this action.  The function passed
+     * in should accept a single argument that will be an object that supports the basic Action config/method interface.
+     * @param {Function} fn The function to execute for each component
+     * @param {Object} scope The scope (this reference) in which the function is executed.  Defaults to the Component.
+     */
+    each : function(fn, scope){
+        Ext.each(this.items, fn, scope);
+    },
+
+    // private
+    callEach : function(fnName, args){
+        var cs = this.items;
+        for(var i = 0, len = cs.length; i < len; i++){
+            cs[i][fnName].apply(cs[i], args);
+        }
+    },
+
+    // private
+    addComponent : function(comp){
+        this.items.push(comp);
+        comp.on('destroy', this.removeComponent, this);
+    },
+
+    // private
+    removeComponent : function(comp){
+        this.items.remove(comp);
+    },
+
+    /**
+     * Executes this action manually using the handler function specified in the original config object
+     * or the handler function set with {@link #setHandler}.  Any arguments passed to this
+     * function will be passed on to the handler function.
+     * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function
+     * @param {Mixed} arg2 (optional)
+     * @param {Mixed} etc... (optional)
+     */
+    execute : function(){
+        this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
+    }
+});
 /**
  * @class Ext.Layer
  * @extends Ext.Element
@@ -17657,436 +17657,436 @@ Ext.reg('box', Ext.BoxComponent);
 Ext.Spacer = Ext.extend(Ext.BoxComponent, {
     autoEl:'div'
 });
-Ext.reg('spacer', Ext.Spacer);/**
- * @class Ext.SplitBar
- * @extends Ext.util.Observable
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
- * 

    
- * Usage:
- * 
    
-var split = new Ext.SplitBar("elementToDrag", "elementToSize",
-                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-
    
- * @constructor
- * Create a new SplitBar
- * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
- * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
- * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
-                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
-                        position of the SplitBar).
- */
-Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
-
-    /** @private */
-    this.el = Ext.get(dragElement, true);
-    this.el.dom.unselectable = "on";
-    /** @private */
-    this.resizingEl = Ext.get(resizingElement, true);
-
-    /**
-     * @private
-     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
-     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
-     * @type Number
-     */
-    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
-
-    /**
-     * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly.
-     * @type Number
-     * @property tickSize
-     */
-    /**
-     * The minimum size of the resizing element. (Defaults to 0)
-     * @type Number
-     */
-    this.minSize = 0;
-
-    /**
-     * The maximum size of the resizing element. (Defaults to 2000)
-     * @type Number
-     */
-    this.maxSize = 2000;
-
-    /**
-     * Whether to animate the transition to the new size
-     * @type Boolean
-     */
-    this.animate = false;
-
-    /**
-     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
-     * @type Boolean
-     */
-    this.useShim = false;
-
-    /** @private */
-    this.shim = null;
-
-    if(!existingProxy){
-        /** @private */
-        this.proxy = Ext.SplitBar.createProxy(this.orientation);
-    }else{
-        this.proxy = Ext.get(existingProxy).dom;
-    }
-    /** @private */
-    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
-
-    /** @private */
-    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
-
-    /** @private */
-    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
-
-    /** @private */
-    this.dragSpecs = {};
-
-    /**
-     * @private The adapter to use to positon and resize elements
-     */
-    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
-    this.adapter.init(this);
-
-    if(this.orientation == Ext.SplitBar.HORIZONTAL){
-        /** @private */
-        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
-        this.el.addClass("x-splitbar-h");
-    }else{
-        /** @private */
-        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
-        this.el.addClass("x-splitbar-v");
-    }
-
-    this.addEvents(
-        /**
-         * @event resize
-         * Fires when the splitter is moved (alias for {@link #moved})
-         * @param {Ext.SplitBar} this
-         * @param {Number} newSize the new width or height
-         */
-        "resize",
-        /**
-         * @event moved
-         * Fires when the splitter is moved
-         * @param {Ext.SplitBar} this
-         * @param {Number} newSize the new width or height
-         */
-        "moved",
-        /**
-         * @event beforeresize
-         * Fires before the splitter is dragged
-         * @param {Ext.SplitBar} this
-         */
-        "beforeresize",
-
-        "beforeapply"
-    );
-
-    Ext.SplitBar.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.SplitBar, Ext.util.Observable, {
-    onStartProxyDrag : function(x, y){
-        this.fireEvent("beforeresize", this);
-        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: " "}, true);
-        this.overlay.unselectable();
-        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
-        this.overlay.show();
-        Ext.get(this.proxy).setDisplayed("block");
-        var size = this.adapter.getElementSize(this);
-        this.activeMinSize = this.getMinimumSize();
-        this.activeMaxSize = this.getMaximumSize();
-        var c1 = size - this.activeMinSize;
-        var c2 = Math.max(this.activeMaxSize - size, 0);
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){
-            this.dd.resetConstraints();
-            this.dd.setXConstraint(
-                this.placement == Ext.SplitBar.LEFT ? c1 : c2,
-                this.placement == Ext.SplitBar.LEFT ? c2 : c1,
-                this.tickSize
-            );
-            this.dd.setYConstraint(0, 0);
-        }else{
-            this.dd.resetConstraints();
-            this.dd.setXConstraint(0, 0);
-            this.dd.setYConstraint(
-                this.placement == Ext.SplitBar.TOP ? c1 : c2,
-                this.placement == Ext.SplitBar.TOP ? c2 : c1,
-                this.tickSize
-            );
-         }
-        this.dragSpecs.startSize = size;
-        this.dragSpecs.startPoint = [x, y];
-        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
-    },
-
-    /**
-     * @private Called after the drag operation by the DDProxy
-     */
-    onEndProxyDrag : function(e){
-        Ext.get(this.proxy).setDisplayed(false);
-        var endPoint = Ext.lib.Event.getXY(e);
-        if(this.overlay){
-            Ext.destroy(this.overlay);
-            delete this.overlay;
-        }
-        var newSize;
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){
-            newSize = this.dragSpecs.startSize +
-                (this.placement == Ext.SplitBar.LEFT ?
-                    endPoint[0] - this.dragSpecs.startPoint[0] :
-                    this.dragSpecs.startPoint[0] - endPoint[0]
-                );
-        }else{
-            newSize = this.dragSpecs.startSize +
-                (this.placement == Ext.SplitBar.TOP ?
-                    endPoint[1] - this.dragSpecs.startPoint[1] :
-                    this.dragSpecs.startPoint[1] - endPoint[1]
-                );
-        }
-        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
-        if(newSize != this.dragSpecs.startSize){
-            if(this.fireEvent('beforeapply', this, newSize) !== false){
-                this.adapter.setElementSize(this, newSize);
-                this.fireEvent("moved", this, newSize);
-                this.fireEvent("resize", this, newSize);
-            }
-        }
-    },
-
-    /**
-     * Get the adapter this SplitBar uses
-     * @return The adapter object
-     */
-    getAdapter : function(){
-        return this.adapter;
-    },
-
-    /**
-     * Set the adapter this SplitBar uses
-     * @param {Object} adapter A SplitBar adapter object
-     */
-    setAdapter : function(adapter){
-        this.adapter = adapter;
-        this.adapter.init(this);
-    },
-
-    /**
-     * Gets the minimum size for the resizing element
-     * @return {Number} The minimum size
-     */
-    getMinimumSize : function(){
-        return this.minSize;
-    },
-
-    /**
-     * Sets the minimum size for the resizing element
-     * @param {Number} minSize The minimum size
-     */
-    setMinimumSize : function(minSize){
-        this.minSize = minSize;
-    },
-
-    /**
-     * Gets the maximum size for the resizing element
-     * @return {Number} The maximum size
-     */
-    getMaximumSize : function(){
-        return this.maxSize;
-    },
-
-    /**
-     * Sets the maximum size for the resizing element
-     * @param {Number} maxSize The maximum size
-     */
-    setMaximumSize : function(maxSize){
-        this.maxSize = maxSize;
-    },
-
-    /**
-     * Sets the initialize size for the resizing element
-     * @param {Number} size The initial size
-     */
-    setCurrentSize : function(size){
-        var oldAnimate = this.animate;
-        this.animate = false;
-        this.adapter.setElementSize(this, size);
-        this.animate = oldAnimate;
-    },
-
-    /**
-     * Destroy this splitbar.
-     * @param {Boolean} removeEl True to remove the element
-     */
-    destroy : function(removeEl){
-        Ext.destroy(this.shim, Ext.get(this.proxy));
-        this.dd.unreg();
-        if(removeEl){
-            this.el.remove();
-        }
-        this.purgeListeners();
-    }
-});
-
-/**
- * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
- */
-Ext.SplitBar.createProxy = function(dir){
-    var proxy = new Ext.Element(document.createElement("div"));
-    document.body.appendChild(proxy.dom);
-    proxy.unselectable();
-    var cls = 'x-splitbar-proxy';
-    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
-    return proxy.dom;
-};
-
-/**
- * @class Ext.SplitBar.BasicLayoutAdapter
- * Default Adapter. It assumes the splitter and resizing element are not positioned
- * elements and only gets/sets the width of the element. Generally used for table based layouts.
- */
-Ext.SplitBar.BasicLayoutAdapter = function(){
-};
-
-Ext.SplitBar.BasicLayoutAdapter.prototype = {
-    // do nothing for now
-    init : function(s){
-
-    },
-    /**
-     * Called before drag operations to get the current size of the resizing element.
-     * @param {Ext.SplitBar} s The SplitBar using this adapter
-     */
-     getElementSize : function(s){
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){
-            return s.resizingEl.getWidth();
-        }else{
-            return s.resizingEl.getHeight();
-        }
-    },
-
-    /**
-     * Called after drag operations to set the size of the resizing element.
-     * @param {Ext.SplitBar} s The SplitBar using this adapter
-     * @param {Number} newSize The new size to set
-     * @param {Function} onComplete A function to be invoked when resizing is complete
-     */
-    setElementSize : function(s, newSize, onComplete){
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){
-            if(!s.animate){
-                s.resizingEl.setWidth(newSize);
-                if(onComplete){
-                    onComplete(s, newSize);
-                }
-            }else{
-                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
-            }
-        }else{
-
-            if(!s.animate){
-                s.resizingEl.setHeight(newSize);
-                if(onComplete){
-                    onComplete(s, newSize);
-                }
-            }else{
-                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
-            }
-        }
-    }
-};
-
-/**
- *@class Ext.SplitBar.AbsoluteLayoutAdapter
- * @extends Ext.SplitBar.BasicLayoutAdapter
- * Adapter that  moves the splitter element to align with the resized sizing element.
- * Used with an absolute positioned SplitBar.
- * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
- * document.body, make sure you assign an id to the body element.
- */
-Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
-    this.basic = new Ext.SplitBar.BasicLayoutAdapter();
-    this.container = Ext.get(container);
-};
-
-Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
-    init : function(s){
-        this.basic.init(s);
-    },
-
-    getElementSize : function(s){
-        return this.basic.getElementSize(s);
-    },
-
-    setElementSize : function(s, newSize, onComplete){
-        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
-    },
-
-    moveSplitter : function(s){
-        var yes = Ext.SplitBar;
-        switch(s.placement){
-            case yes.LEFT:
-                s.el.setX(s.resizingEl.getRight());
-                break;
-            case yes.RIGHT:
-                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
-                break;
-            case yes.TOP:
-                s.el.setY(s.resizingEl.getBottom());
-                break;
-            case yes.BOTTOM:
-                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
-                break;
-        }
-    }
-};
-
-/**
- * Orientation constant - Create a vertical SplitBar
- * @static
- * @type Number
- */
-Ext.SplitBar.VERTICAL = 1;
-
-/**
- * Orientation constant - Create a horizontal SplitBar
- * @static
- * @type Number
- */
-Ext.SplitBar.HORIZONTAL = 2;
-
-/**
- * Placement constant - The resizing element is to the left of the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.LEFT = 1;
-
-/**
- * Placement constant - The resizing element is to the right of the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.RIGHT = 2;
-
-/**
- * Placement constant - The resizing element is positioned above the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.TOP = 3;
-
-/**
- * Placement constant - The resizing element is positioned under splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.BOTTOM = 4;
+Ext.reg('spacer', Ext.Spacer);/**
+ * @class Ext.SplitBar
+ * @extends Ext.util.Observable
+ * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
+ * 

    
+ * Usage:
+ * 
    
+var split = new Ext.SplitBar("elementToDrag", "elementToSize",
+                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
+split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
+split.on('moved', splitterMoved);
+
    
+ * @constructor
+ * Create a new SplitBar
+ * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
+ * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
+ * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+ * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
+                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
+                        position of the SplitBar).
+ */
+Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
+
+    /** @private */
+    this.el = Ext.get(dragElement, true);
+    this.el.dom.unselectable = "on";
+    /** @private */
+    this.resizingEl = Ext.get(resizingElement, true);
+
+    /**
+     * @private
+     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
+     * @type Number
+     */
+    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
+
+    /**
+     * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly.
+     * @type Number
+     * @property tickSize
+     */
+    /**
+     * The minimum size of the resizing element. (Defaults to 0)
+     * @type Number
+     */
+    this.minSize = 0;
+
+    /**
+     * The maximum size of the resizing element. (Defaults to 2000)
+     * @type Number
+     */
+    this.maxSize = 2000;
+
+    /**
+     * Whether to animate the transition to the new size
+     * @type Boolean
+     */
+    this.animate = false;
+
+    /**
+     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
+     * @type Boolean
+     */
+    this.useShim = false;
+
+    /** @private */
+    this.shim = null;
+
+    if(!existingProxy){
+        /** @private */
+        this.proxy = Ext.SplitBar.createProxy(this.orientation);
+    }else{
+        this.proxy = Ext.get(existingProxy).dom;
+    }
+    /** @private */
+    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
+
+    /** @private */
+    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
+
+    /** @private */
+    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
+
+    /** @private */
+    this.dragSpecs = {};
+
+    /**
+     * @private The adapter to use to positon and resize elements
+     */
+    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
+    this.adapter.init(this);
+
+    if(this.orientation == Ext.SplitBar.HORIZONTAL){
+        /** @private */
+        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
+        this.el.addClass("x-splitbar-h");
+    }else{
+        /** @private */
+        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
+        this.el.addClass("x-splitbar-v");
+    }
+
+    this.addEvents(
+        /**
+         * @event resize
+         * Fires when the splitter is moved (alias for {@link #moved})
+         * @param {Ext.SplitBar} this
+         * @param {Number} newSize the new width or height
+         */
+        "resize",
+        /**
+         * @event moved
+         * Fires when the splitter is moved
+         * @param {Ext.SplitBar} this
+         * @param {Number} newSize the new width or height
+         */
+        "moved",
+        /**
+         * @event beforeresize
+         * Fires before the splitter is dragged
+         * @param {Ext.SplitBar} this
+         */
+        "beforeresize",
+
+        "beforeapply"
+    );
+
+    Ext.SplitBar.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.SplitBar, Ext.util.Observable, {
+    onStartProxyDrag : function(x, y){
+        this.fireEvent("beforeresize", this);
+        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: " "}, true);
+        this.overlay.unselectable();
+        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+        this.overlay.show();
+        Ext.get(this.proxy).setDisplayed("block");
+        var size = this.adapter.getElementSize(this);
+        this.activeMinSize = this.getMinimumSize();
+        this.activeMaxSize = this.getMaximumSize();
+        var c1 = size - this.activeMinSize;
+        var c2 = Math.max(this.activeMaxSize - size, 0);
+        if(this.orientation == Ext.SplitBar.HORIZONTAL){
+            this.dd.resetConstraints();
+            this.dd.setXConstraint(
+                this.placement == Ext.SplitBar.LEFT ? c1 : c2,
+                this.placement == Ext.SplitBar.LEFT ? c2 : c1,
+                this.tickSize
+            );
+            this.dd.setYConstraint(0, 0);
+        }else{
+            this.dd.resetConstraints();
+            this.dd.setXConstraint(0, 0);
+            this.dd.setYConstraint(
+                this.placement == Ext.SplitBar.TOP ? c1 : c2,
+                this.placement == Ext.SplitBar.TOP ? c2 : c1,
+                this.tickSize
+            );
+         }
+        this.dragSpecs.startSize = size;
+        this.dragSpecs.startPoint = [x, y];
+        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
+    },
+
+    /**
+     * @private Called after the drag operation by the DDProxy
+     */
+    onEndProxyDrag : function(e){
+        Ext.get(this.proxy).setDisplayed(false);
+        var endPoint = Ext.lib.Event.getXY(e);
+        if(this.overlay){
+            Ext.destroy(this.overlay);
+            delete this.overlay;
+        }
+        var newSize;
+        if(this.orientation == Ext.SplitBar.HORIZONTAL){
+            newSize = this.dragSpecs.startSize +
+                (this.placement == Ext.SplitBar.LEFT ?
+                    endPoint[0] - this.dragSpecs.startPoint[0] :
+                    this.dragSpecs.startPoint[0] - endPoint[0]
+                );
+        }else{
+            newSize = this.dragSpecs.startSize +
+                (this.placement == Ext.SplitBar.TOP ?
+                    endPoint[1] - this.dragSpecs.startPoint[1] :
+                    this.dragSpecs.startPoint[1] - endPoint[1]
+                );
+        }
+        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
+        if(newSize != this.dragSpecs.startSize){
+            if(this.fireEvent('beforeapply', this, newSize) !== false){
+                this.adapter.setElementSize(this, newSize);
+                this.fireEvent("moved", this, newSize);
+                this.fireEvent("resize", this, newSize);
+            }
+        }
+    },
+
+    /**
+     * Get the adapter this SplitBar uses
+     * @return The adapter object
+     */
+    getAdapter : function(){
+        return this.adapter;
+    },
+
+    /**
+     * Set the adapter this SplitBar uses
+     * @param {Object} adapter A SplitBar adapter object
+     */
+    setAdapter : function(adapter){
+        this.adapter = adapter;
+        this.adapter.init(this);
+    },
+
+    /**
+     * Gets the minimum size for the resizing element
+     * @return {Number} The minimum size
+     */
+    getMinimumSize : function(){
+        return this.minSize;
+    },
+
+    /**
+     * Sets the minimum size for the resizing element
+     * @param {Number} minSize The minimum size
+     */
+    setMinimumSize : function(minSize){
+        this.minSize = minSize;
+    },
+
+    /**
+     * Gets the maximum size for the resizing element
+     * @return {Number} The maximum size
+     */
+    getMaximumSize : function(){
+        return this.maxSize;
+    },
+
+    /**
+     * Sets the maximum size for the resizing element
+     * @param {Number} maxSize The maximum size
+     */
+    setMaximumSize : function(maxSize){
+        this.maxSize = maxSize;
+    },
+
+    /**
+     * Sets the initialize size for the resizing element
+     * @param {Number} size The initial size
+     */
+    setCurrentSize : function(size){
+        var oldAnimate = this.animate;
+        this.animate = false;
+        this.adapter.setElementSize(this, size);
+        this.animate = oldAnimate;
+    },
+
+    /**
+     * Destroy this splitbar.
+     * @param {Boolean} removeEl True to remove the element
+     */
+    destroy : function(removeEl){
+        Ext.destroy(this.shim, Ext.get(this.proxy));
+        this.dd.unreg();
+        if(removeEl){
+            this.el.remove();
+        }
+        this.purgeListeners();
+    }
+});
+
+/**
+ * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
+ */
+Ext.SplitBar.createProxy = function(dir){
+    var proxy = new Ext.Element(document.createElement("div"));
+    document.body.appendChild(proxy.dom);
+    proxy.unselectable();
+    var cls = 'x-splitbar-proxy';
+    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
+    return proxy.dom;
+};
+
+/**
+ * @class Ext.SplitBar.BasicLayoutAdapter
+ * Default Adapter. It assumes the splitter and resizing element are not positioned
+ * elements and only gets/sets the width of the element. Generally used for table based layouts.
+ */
+Ext.SplitBar.BasicLayoutAdapter = function(){
+};
+
+Ext.SplitBar.BasicLayoutAdapter.prototype = {
+    // do nothing for now
+    init : function(s){
+
+    },
+    /**
+     * Called before drag operations to get the current size of the resizing element.
+     * @param {Ext.SplitBar} s The SplitBar using this adapter
+     */
+     getElementSize : function(s){
+        if(s.orientation == Ext.SplitBar.HORIZONTAL){
+            return s.resizingEl.getWidth();
+        }else{
+            return s.resizingEl.getHeight();
+        }
+    },
+
+    /**
+     * Called after drag operations to set the size of the resizing element.
+     * @param {Ext.SplitBar} s The SplitBar using this adapter
+     * @param {Number} newSize The new size to set
+     * @param {Function} onComplete A function to be invoked when resizing is complete
+     */
+    setElementSize : function(s, newSize, onComplete){
+        if(s.orientation == Ext.SplitBar.HORIZONTAL){
+            if(!s.animate){
+                s.resizingEl.setWidth(newSize);
+                if(onComplete){
+                    onComplete(s, newSize);
+                }
+            }else{
+                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
+            }
+        }else{
+
+            if(!s.animate){
+                s.resizingEl.setHeight(newSize);
+                if(onComplete){
+                    onComplete(s, newSize);
+                }
+            }else{
+                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
+            }
+        }
+    }
+};
+
+/**
+ *@class Ext.SplitBar.AbsoluteLayoutAdapter
+ * @extends Ext.SplitBar.BasicLayoutAdapter
+ * Adapter that  moves the splitter element to align with the resized sizing element.
+ * Used with an absolute positioned SplitBar.
+ * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
+ * document.body, make sure you assign an id to the body element.
+ */
+Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
+    this.basic = new Ext.SplitBar.BasicLayoutAdapter();
+    this.container = Ext.get(container);
+};
+
+Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
+    init : function(s){
+        this.basic.init(s);
+    },
+
+    getElementSize : function(s){
+        return this.basic.getElementSize(s);
+    },
+
+    setElementSize : function(s, newSize, onComplete){
+        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
+    },
+
+    moveSplitter : function(s){
+        var yes = Ext.SplitBar;
+        switch(s.placement){
+            case yes.LEFT:
+                s.el.setX(s.resizingEl.getRight());
+                break;
+            case yes.RIGHT:
+                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
+                break;
+            case yes.TOP:
+                s.el.setY(s.resizingEl.getBottom());
+                break;
+            case yes.BOTTOM:
+                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
+                break;
+        }
+    }
+};
+
+/**
+ * Orientation constant - Create a vertical SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.VERTICAL = 1;
+
+/**
+ * Orientation constant - Create a horizontal SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.HORIZONTAL = 2;
+
+/**
+ * Placement constant - The resizing element is to the left of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.LEFT = 1;
+
+/**
+ * Placement constant - The resizing element is to the right of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.RIGHT = 2;
+
+/**
+ * Placement constant - The resizing element is positioned above the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.TOP = 3;
+
+/**
+ * Placement constant - The resizing element is positioned under splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.BOTTOM = 4;
 /**
  * @class Ext.Container
  * @extends Ext.BoxComponent
@@ -19397,198 +19397,198 @@ Ext.layout.AutoLayout = Ext.extend(Ext.layout.ContainerLayout, {
 });
 
 Ext.Container.LAYOUTS['auto'] = Ext.layout.AutoLayout;
-/**
- * @class Ext.layout.FitLayout
- * @extends Ext.layout.ContainerLayout
- * 
    This is a base class for layouts that contain a single item that automatically expands to fill the layout's
- * container.  This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout}
- * config, and should generally not need to be created directly via the new keyword.
    
- * 
    FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container
- * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has
- * multiple panels, only the first one will be displayed.  Example usage:
    
- * 
    
-var p = new Ext.Panel({
-    title: 'Fit Layout',
-    layout:'fit',
-    items: {
-        title: 'Inner Panel',
-        html: '<p>This is the inner panel content</p>',
-        border: false
-    }
-});
-
    
- */
-Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    // private
-    monitorResize:true,
-
-    type: 'fit',
-
-    getLayoutTargetSize : function() {
-        var target = this.container.getLayoutTarget();
-        if (!target) {
-            return {};
-        }
-        // Style Sized (scrollbars not included)
-        return target.getStyleSize();
-    },
-
-    // private
-    onLayout : function(ct, target){
-        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
-        if(!ct.collapsed){
-            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
-        }
-    },
-
-    // private
-    setItemSize : function(item, size){
-        if(item && size.height > 0){ // display none?
-            item.setSize(size);
-        }
-    }
-});
-Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;/**
- * @class Ext.layout.CardLayout
- * @extends Ext.layout.FitLayout
- * 
    This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
- * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
- * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.
    
- * 
    The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
- * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
- * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
- * so that functionality must be provided by the developer.
    
- * 
    In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
- * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
- * common navigation routine -- for this example, the implementation of that routine has been ommitted since
- * it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
- * completely different implementation.  For serious implementations, a better approach would be to extend
- * CardLayout to provide the custom functionality needed.  Example usage:
    
- * 
    
-var navHandler = function(direction){
-    // This routine could contain business logic required to manage the navigation steps.
-    // It would call setActiveItem as needed, manage navigation button state, handle any
-    // branching logic that might be required, handle alternate actions like cancellation
-    // or finalization, etc.  A complete wizard implementation could get pretty
-    // sophisticated depending on the complexity required, and should probably be
-    // done as a subclass of CardLayout in a real-world implementation.
-};
-
-var card = new Ext.Panel({
-    title: 'Example Wizard',
-    layout:'card',
-    activeItem: 0, // make sure the active item is set on the container config!
-    bodyStyle: 'padding:15px',
-    defaults: {
-        // applied to each contained panel
-        border:false
-    },
-    // just an example of one possible navigation scheme, using buttons
-    bbar: [
-        {
-            id: 'move-prev',
-            text: 'Back',
-            handler: navHandler.createDelegate(this, [-1]),
-            disabled: true
-        },
-        '->', // greedy spacer so that the buttons are aligned to each side
-        {
-            id: 'move-next',
-            text: 'Next',
-            handler: navHandler.createDelegate(this, [1])
-        }
-    ],
-    // the panels (or "cards") within the layout
-    items: [{
-        id: 'card-0',
-        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
-    },{
-        id: 'card-1',
-        html: '<p>Step 2 of 3</p>'
-    },{
-        id: 'card-2',
-        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
-    }]
-});
-
    
- */
-Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {
-    /**
-     * @cfg {Boolean} deferredRender
-     * True to render each contained item at the time it becomes active, false to render all contained items
-     * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
-     * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
-     * true might improve performance.
-     */
-    deferredRender : false,
-
-    /**
-     * @cfg {Boolean} layoutOnCardChange
-     * True to force a layout of the active item when the active card is changed. Defaults to false.
-     */
-    layoutOnCardChange : false,
-
-    /**
-     * @cfg {Boolean} renderHidden @hide
-     */
-    // private
-    renderHidden : true,
-
-    type: 'card',
-
-    constructor: function(config){
-        Ext.layout.CardLayout.superclass.constructor.call(this, config);
-    },
-
-    /**
-     * Sets the active (visible) item in the layout.
-     * @param {String/Number} item The string component id or numeric index of the item to activate
-     */
-    setActiveItem : function(item){
-        var ai = this.activeItem,
-            ct = this.container;
-        item = ct.getComponent(item);
-
-        // Is this a valid, different card?
-        if(item && ai != item){
-
-            // Changing cards, hide the current one
-            if(ai){
-                ai.hide();
-                if (ai.hidden !== true) {
-                    return false;
-                }
-                ai.fireEvent('deactivate', ai);
-            }
-            // Change activeItem reference
-            this.activeItem = item;
-
-            // The container is about to get a recursive layout, remove any deferLayout reference
-            // because it will trigger a redundant layout.
-            delete item.deferLayout;
-
-            // Show the new component
-            item.show();
-
-            this.layout();
-
-            if(item.doLayout){
-                item.doLayout();
-            }
-            item.fireEvent('activate', item);
-        }
-    },
-
-    // private
-    renderAll : function(ct, target){
-        if(this.deferredRender){
-            this.renderItem(this.activeItem, undefined, target);
-        }else{
-            Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
-        }
-    }
-});
+/**
+ * @class Ext.layout.FitLayout
+ * @extends Ext.layout.ContainerLayout
+ * 
    This is a base class for layouts that contain a single item that automatically expands to fill the layout's
+ * container.  This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout}
+ * config, and should generally not need to be created directly via the new keyword.
    
+ * 
    FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container
+ * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has
+ * multiple panels, only the first one will be displayed.  Example usage:
    
+ * 
    
+var p = new Ext.Panel({
+    title: 'Fit Layout',
+    layout:'fit',
+    items: {
+        title: 'Inner Panel',
+        html: '<p>This is the inner panel content</p>',
+        border: false
+    }
+});
+
    
+ */
+Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {
+    // private
+    monitorResize:true,
+
+    type: 'fit',
+
+    getLayoutTargetSize : function() {
+        var target = this.container.getLayoutTarget();
+        if (!target) {
+            return {};
+        }
+        // Style Sized (scrollbars not included)
+        return target.getStyleSize();
+    },
+
+    // private
+    onLayout : function(ct, target){
+        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
+        if(!ct.collapsed){
+            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
+        }
+    },
+
+    // private
+    setItemSize : function(item, size){
+        if(item && size.height > 0){ // display none?
+            item.setSize(size);
+        }
+    }
+});
+Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;/**
+ * @class Ext.layout.CardLayout
+ * @extends Ext.layout.FitLayout
+ * 
    This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
+ * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
+ * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
    
+ * 
    The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
+ * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
+ * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
+ * so that functionality must be provided by the developer.
    
+ * 
    In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
+ * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
+ * common navigation routine -- for this example, the implementation of that routine has been ommitted since
+ * it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
+ * completely different implementation.  For serious implementations, a better approach would be to extend
+ * CardLayout to provide the custom functionality needed.  Example usage:
    
+ * 
    
+var navHandler = function(direction){
+    // This routine could contain business logic required to manage the navigation steps.
+    // It would call setActiveItem as needed, manage navigation button state, handle any
+    // branching logic that might be required, handle alternate actions like cancellation
+    // or finalization, etc.  A complete wizard implementation could get pretty
+    // sophisticated depending on the complexity required, and should probably be
+    // done as a subclass of CardLayout in a real-world implementation.
+};
+
+var card = new Ext.Panel({
+    title: 'Example Wizard',
+    layout:'card',
+    activeItem: 0, // make sure the active item is set on the container config!
+    bodyStyle: 'padding:15px',
+    defaults: {
+        // applied to each contained panel
+        border:false
+    },
+    // just an example of one possible navigation scheme, using buttons
+    bbar: [
+        {
+            id: 'move-prev',
+            text: 'Back',
+            handler: navHandler.createDelegate(this, [-1]),
+            disabled: true
+        },
+        '->', // greedy spacer so that the buttons are aligned to each side
+        {
+            id: 'move-next',
+            text: 'Next',
+            handler: navHandler.createDelegate(this, [1])
+        }
+    ],
+    // the panels (or "cards") within the layout
+    items: [{
+        id: 'card-0',
+        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+    },{
+        id: 'card-1',
+        html: '<p>Step 2 of 3</p>'
+    },{
+        id: 'card-2',
+        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+    }]
+});
+
    
+ */
+Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {
+    /**
+     * @cfg {Boolean} deferredRender
+     * True to render each contained item at the time it becomes active, false to render all contained items
+     * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
+     * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
+     * true might improve performance.
+     */
+    deferredRender : false,
+
+    /**
+     * @cfg {Boolean} layoutOnCardChange
+     * True to force a layout of the active item when the active card is changed. Defaults to false.
+     */
+    layoutOnCardChange : false,
+
+    /**
+     * @cfg {Boolean} renderHidden @hide
+     */
+    // private
+    renderHidden : true,
+
+    type: 'card',
+
+    constructor: function(config){
+        Ext.layout.CardLayout.superclass.constructor.call(this, config);
+    },
+
+    /**
+     * Sets the active (visible) item in the layout.
+     * @param {String/Number} item The string component id or numeric index of the item to activate
+     */
+    setActiveItem : function(item){
+        var ai = this.activeItem,
+            ct = this.container;
+        item = ct.getComponent(item);
+
+        // Is this a valid, different card?
+        if(item && ai != item){
+
+            // Changing cards, hide the current one
+            if(ai){
+                ai.hide();
+                if (ai.hidden !== true) {
+                    return false;
+                }
+                ai.fireEvent('deactivate', ai);
+            }
+            // Change activeItem reference
+            this.activeItem = item;
+
+            // The container is about to get a recursive layout, remove any deferLayout reference
+            // because it will trigger a redundant layout.
+            delete item.deferLayout;
+
+            // Show the new component
+            item.show();
+
+            this.layout();
+
+            if(item.doLayout){
+                item.doLayout();
+            }
+            item.fireEvent('activate', item);
+        }
+    },
+
+    // private
+    renderAll : function(ct, target){
+        if(this.deferredRender){
+            this.renderItem(this.activeItem, undefined, target);
+        }else{
+            Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
+        }
+    }
+});
 Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;/**
  * @class Ext.layout.AnchorLayout
  * @extends Ext.layout.ContainerLayout
@@ -19787,159 +19787,159 @@ anchor: '-50 75%'
      */
 });
 Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;
-/**
- * @class Ext.layout.ColumnLayout
- * @extends Ext.layout.ContainerLayout
- * 
    This is the layout style of choice for creating structural layouts in a multi-column format where the width of
- * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
- * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.
    
- * 
    ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
- * specific config property of columnWidth that can be included in the config of any panel added to it.  The
- * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
- * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
    
- * 
    The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
- * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
- * less than 1 (e.g., .25).
    
- * 
    The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
- * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
- * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
- * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
- * the total remaining container width.  In other words, percentage width panels are designed to fill the space
- * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
- * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
- * layout may not render as expected.  Example usage:
    
- * 
    
-// All columns are percentages -- they must add up to 1
-var p = new Ext.Panel({
-    title: 'Column Layout - Percentage Only',
-    layout:'column',
-    items: [{
-        title: 'Column 1',
-        columnWidth: .25
-    },{
-        title: 'Column 2',
-        columnWidth: .6
-    },{
-        title: 'Column 3',
-        columnWidth: .15
-    }]
-});
-
-// Mix of width and columnWidth -- all columnWidth values must add up
-// to 1. The first column will take up exactly 120px, and the last two
-// columns will fill the remaining container width.
-var p = new Ext.Panel({
-    title: 'Column Layout - Mixed',
-    layout:'column',
-    items: [{
-        title: 'Column 1',
-        width: 120
-    },{
-        title: 'Column 2',
-        columnWidth: .8
-    },{
-        title: 'Column 3',
-        columnWidth: .2
-    }]
-});
-
    
- */
-Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    // private
-    monitorResize:true,
-
-    type: 'column',
-
-    extraCls: 'x-column',
-
-    scrollOffset : 0,
-
-    // private
-
-    targetCls: 'x-column-layout-ct',
-
-    isValidParent : function(c, target){
-        return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
-    },
-
-    getLayoutTargetSize : function() {
-        var target = this.container.getLayoutTarget(), ret;
-        if (target) {
-            ret = target.getViewSize();
-            ret.width -= target.getPadding('lr');
-            ret.height -= target.getPadding('tb');
-        }
-        return ret;
-    },
-
-    renderAll : function(ct, target) {
-        if(!this.innerCt){
-            // the innerCt prevents wrapping and shuffling while
-            // the container is resizing
-            this.innerCt = target.createChild({cls:'x-column-inner'});
-            this.innerCt.createChild({cls:'x-clear'});
-        }
-        Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
-    },
-
-    // private
-    onLayout : function(ct, target){
-        var cs = ct.items.items, len = cs.length, c, i;
-
-        this.renderAll(ct, target);
-
-        var size = this.getLayoutTargetSize();
-
-        if(size.width < 1 && size.height < 1){ // display none?
-            return;
-        }
-
-        var w = size.width - this.scrollOffset,
-            h = size.height,
-            pw = w;
-
-        this.innerCt.setWidth(w);
-
-        // some columns can be percentages while others are fixed
-        // so we need to make 2 passes
-
-        for(i = 0; i < len; i++){
-            c = cs[i];
-            if(!c.columnWidth){
-                pw -= (c.getWidth() + c.getPositionEl().getMargins('lr'));
-            }
-        }
-
-        pw = pw < 0 ? 0 : pw;
-
-        for(i = 0; i < len; i++){
-            c = cs[i];
-            if(c.columnWidth){
-                c.setSize(Math.floor(c.columnWidth * pw) - c.getPositionEl().getMargins('lr'));
-            }
-        }
-
-        // Browsers differ as to when they account for scrollbars.  We need to re-measure to see if the scrollbar
-        // spaces were accounted for properly.  If not, re-layout.
-        if (Ext.isIE) {
-            if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
-                var ts = this.getLayoutTargetSize();
-                if (ts.width != size.width){
-                    this.adjustmentPass = true;
-                    this.onLayout(ct, target);
-                }
-            }
-        }
-        delete this.adjustmentPass;
-    }
-
-    /**
-     * @property activeItem
-     * @hide
-     */
-});
-
+/**
+ * @class Ext.layout.ColumnLayout
+ * @extends Ext.layout.ContainerLayout
+ * 
    This is the layout style of choice for creating structural layouts in a multi-column format where the width of
+ * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
+ * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
    
+ * 
    ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
+ * specific config property of columnWidth that can be included in the config of any panel added to it.  The
+ * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
+ * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
    
+ * 
    The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
+ * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
+ * less than 1 (e.g., .25).
    
+ * 
    The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
+ * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
+ * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
+ * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
+ * the total remaining container width.  In other words, percentage width panels are designed to fill the space
+ * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
+ * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
+ * layout may not render as expected.  Example usage:
    
+ * 
    
+// All columns are percentages -- they must add up to 1
+var p = new Ext.Panel({
+    title: 'Column Layout - Percentage Only',
+    layout:'column',
+    items: [{
+        title: 'Column 1',
+        columnWidth: .25
+    },{
+        title: 'Column 2',
+        columnWidth: .6
+    },{
+        title: 'Column 3',
+        columnWidth: .15
+    }]
+});
+
+// Mix of width and columnWidth -- all columnWidth values must add up
+// to 1. The first column will take up exactly 120px, and the last two
+// columns will fill the remaining container width.
+var p = new Ext.Panel({
+    title: 'Column Layout - Mixed',
+    layout:'column',
+    items: [{
+        title: 'Column 1',
+        width: 120
+    },{
+        title: 'Column 2',
+        columnWidth: .8
+    },{
+        title: 'Column 3',
+        columnWidth: .2
+    }]
+});
+
    
+ */
+Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
+    // private
+    monitorResize:true,
+
+    type: 'column',
+
+    extraCls: 'x-column',
+
+    scrollOffset : 0,
+
+    // private
+
+    targetCls: 'x-column-layout-ct',
+
+    isValidParent : function(c, target){
+        return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+    },
+
+    getLayoutTargetSize : function() {
+        var target = this.container.getLayoutTarget(), ret;
+        if (target) {
+            ret = target.getViewSize();
+            ret.width -= target.getPadding('lr');
+            ret.height -= target.getPadding('tb');
+        }
+        return ret;
+    },
+
+    renderAll : function(ct, target) {
+        if(!this.innerCt){
+            // the innerCt prevents wrapping and shuffling while
+            // the container is resizing
+            this.innerCt = target.createChild({cls:'x-column-inner'});
+            this.innerCt.createChild({cls:'x-clear'});
+        }
+        Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
+    },
+
+    // private
+    onLayout : function(ct, target){
+        var cs = ct.items.items, len = cs.length, c, i;
+
+        this.renderAll(ct, target);
+
+        var size = this.getLayoutTargetSize();
+
+        if(size.width < 1 && size.height < 1){ // display none?
+            return;
+        }
+
+        var w = size.width - this.scrollOffset,
+            h = size.height,
+            pw = w;
+
+        this.innerCt.setWidth(w);
+
+        // some columns can be percentages while others are fixed
+        // so we need to make 2 passes
+
+        for(i = 0; i < len; i++){
+            c = cs[i];
+            if(!c.columnWidth){
+                pw -= (c.getWidth() + c.getPositionEl().getMargins('lr'));
+            }
+        }
+
+        pw = pw < 0 ? 0 : pw;
+
+        for(i = 0; i < len; i++){
+            c = cs[i];
+            if(c.columnWidth){
+                c.setSize(Math.floor(c.columnWidth * pw) - c.getPositionEl().getMargins('lr'));
+            }
+        }
+
+        // Browsers differ as to when they account for scrollbars.  We need to re-measure to see if the scrollbar
+        // spaces were accounted for properly.  If not, re-layout.
+        if (Ext.isIE) {
+            if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
+                var ts = this.getLayoutTargetSize();
+                if (ts.width != size.width){
+                    this.adjustmentPass = true;
+                    this.onLayout(ct, target);
+                }
+            }
+        }
+        delete this.adjustmentPass;
+    }
+
+    /**
+     * @property activeItem
+     * @hide
+     */
+});
+
 Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;/**
  * @class Ext.layout.BorderLayout
  * @extends Ext.layout.ContainerLayout
@@ -21427,399 +21427,399 @@ new Ext.Template(
 });
 
 Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
-/**
- * @class Ext.layout.AccordionLayout
- * @extends Ext.layout.FitLayout
- * 
    This is a layout that manages multiple Panels in an expandable accordion style such that only
- * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
    
- * 
    Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
    
- * 
    This class is intended to be extended or created via the {@link Ext.Container#layout layout}
- * configuration property.  See {@link Ext.Container#layout} for additional details.
    
- * 
    Example usage:
    
- * 
    
-var accordion = new Ext.Panel({
-    title: 'Accordion Layout',
-    layout:'accordion',
-    defaults: {
-        // applied to each contained panel
-        bodyStyle: 'padding:15px'
-    },
-    layoutConfig: {
-        // layout-specific configs go here
-        titleCollapse: false,
-        animate: true,
-        activeOnTop: true
-    },
-    items: [{
-        title: 'Panel 1',
-        html: '<p>Panel content!</p>'
-    },{
-        title: 'Panel 2',
-        html: '<p>Panel content!</p>'
-    },{
-        title: 'Panel 3',
-        html: '<p>Panel content!</p>'
-    }]
-});
-
    
- */
-Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
-    /**
-     * @cfg {Boolean} fill
-     * True to adjust the active item's height to fill the available space in the container, false to use the
-     * item's current height, or auto height if not explicitly set (defaults to true).
-     */
-    fill : true,
-    /**
-     * @cfg {Boolean} autoWidth
-     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
-     * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
-     * layouts if they have auto width, so in such cases this config should be set to false.
-     */
-    autoWidth : true,
-    /**
-     * @cfg {Boolean} titleCollapse
-     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
-     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
-     * {@link #hideCollapseTool} should be false also.
-     */
-    titleCollapse : true,
-    /**
-     * @cfg {Boolean} hideCollapseTool
-     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
-     * When set to true, {@link #titleCollapse} should be true also.
-     */
-    hideCollapseTool : false,
-    /**
-     * @cfg {Boolean} collapseFirst
-     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
-     * in the contained panels' title bars, false to render it last (defaults to false).
-     */
-    collapseFirst : false,
-    /**
-     * @cfg {Boolean} animate
-     * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
-     * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
-     * contained panel for this property, set this to undefined at the layout level.
-     */
-    animate : false,
-    /**
-     * @cfg {Boolean} sequence
-     * Experimental. If animate is set to true, this will result in each animation running in sequence.
-     */
-    sequence : false,
-    /**
-     * @cfg {Boolean} activeOnTop
-     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
-     * false to keep the panels in the rendered order. This is NOT compatible with "animate:true" (defaults to false).
-     */
-    activeOnTop : false,
-
-    type: 'accordion',
-
-    renderItem : function(c){
-        if(this.animate === false){
-            c.animCollapse = false;
-        }
-        c.collapsible = true;
-        if(this.autoWidth){
-            c.autoWidth = true;
-        }
-        if(this.titleCollapse){
-            c.titleCollapse = true;
-        }
-        if(this.hideCollapseTool){
-            c.hideCollapseTool = true;
-        }
-        if(this.collapseFirst !== undefined){
-            c.collapseFirst = this.collapseFirst;
-        }
-        if(!this.activeItem && !c.collapsed){
-            this.setActiveItem(c, true);
-        }else if(this.activeItem && this.activeItem != c){
-            c.collapsed = true;
-        }
-        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
-        c.header.addClass('x-accordion-hd');
-        c.on('beforeexpand', this.beforeExpand, this);
-    },
-
-    onRemove: function(c){
-        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
-        if(c.rendered){
-            c.header.removeClass('x-accordion-hd');
-        }
-        c.un('beforeexpand', this.beforeExpand, this);
-    },
-
-    // private
-    beforeExpand : function(p, anim){
-        var ai = this.activeItem;
-        if(ai){
-            if(this.sequence){
-                delete this.activeItem;
-                if (!ai.collapsed){
-                    ai.collapse({callback:function(){
-                        p.expand(anim || true);
-                    }, scope: this});
-                    return false;
-                }
-            }else{
-                ai.collapse(this.animate);
-            }
-        }
-        this.setActive(p);
-        if(this.activeOnTop){
-            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
-        }
-        // Items have been hidden an possibly rearranged, we need to get the container size again.
-        this.layout();
-    },
-
-    // private
-    setItemSize : function(item, size){
-        if(this.fill && item){
-            var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
-            // Add up all the header heights
-            for (i = 0; i < len; i++) {
-                if((p = ct[i]) != item){
-                    hh += p.header.getHeight();
-                }
-            };
-            // Subtract the header heights from the container size
-            size.height -= hh;
-            // Call setSize on the container to set the correct height.  For Panels, deferedHeight
-            // will simply store this size for when the expansion is done.
-            item.setSize(size);
-        }
-    },
-
-    /**
-     * Sets the active (expanded) item in the layout.
-     * @param {String/Number} item The string component id or numeric index of the item to activate
-     */
-    setActiveItem : function(item){
-        this.setActive(item, true);
-    },
-
-    // private
-    setActive : function(item, expand){
-        var ai = this.activeItem;
-        item = this.container.getComponent(item);
-        if(ai != item){
-            if(item.rendered && item.collapsed && expand){
-                item.expand();
-            }else{
-                if(ai){
-                   ai.fireEvent('deactivate', ai);
-                }
-                this.activeItem = item;
-                item.fireEvent('activate', item);
-            }
-        }
-    }
-});
-Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
-
-//backwards compat
-Ext.layout.Accordion = Ext.layout.AccordionLayout;/**
- * @class Ext.layout.TableLayout
- * @extends Ext.layout.ContainerLayout
- * 
    This layout allows you to easily render content into an HTML table.  The total number of columns can be
- * specified, and rowspan and colspan can be used to create complex layouts within the table.
- * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.
    
- * 
    Note that when creating a layout via config, the layout-specific config properties must be passed in via
- * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
- * case of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
- * TableLayout can supply the following table-specific config properties:
    
- * 
      
- * 
    • rowspan Applied to the table cell containing the item.
      • 
- * 
    • colspan Applied to the table cell containing the item.
      • 
- * 
    • cellId An id applied to the table cell containing the item.
      • 
- * 
    • cellCls A CSS class name added to the table cell containing the item.
      • 
- * 
    
- * 
    The basic concept of building up a TableLayout is conceptually very similar to building up a standard
- * HTML table.  You simply add each panel (or "cell") that you want to include along with any span attributes
- * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
- * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
- * total column count in the layoutConfig and start adding panels in their natural order from left to right,
- * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
- * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add
- * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:
    
- * 
    
-// This code will generate a layout table that is 3 columns by 2 rows
-// with some spanning included.  The basic layout will be:
-// +--------+-----------------+
-// |   A    |   B             |
-// |        |--------+--------|
-// |        |   C    |   D    |
-// +--------+--------+--------+
-var table = new Ext.Panel({
-    title: 'Table Layout',
-    layout:'table',
-    defaults: {
-        // applied to each contained panel
-        bodyStyle:'padding:20px'
-    },
-    layoutConfig: {
-        // The total column count must be specified here
-        columns: 3
-    },
-    items: [{
-        html: '<p>Cell A content</p>',
-        rowspan: 2
-    },{
-        html: '<p>Cell B content</p>',
-        colspan: 2
-    },{
-        html: '<p>Cell C content</p>',
-        cellCls: 'highlight'
-    },{
-        html: '<p>Cell D content</p>'
-    }]
-});
-
    
- */
-Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    /**
-     * @cfg {Number} columns
-     * The total number of columns to create in the table for this layout.  If not specified, all Components added to
-     * this layout will be rendered into a single row using one column per Component.
-     */
-
-    // private
-    monitorResize:false,
-
-    type: 'table',
-
-    targetCls: 'x-table-layout-ct',
-
-    /**
-     * @cfg {Object} tableAttrs
-     * 
    An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
-     * used to create the layout's <table> element. Example:
    
-{
-    xtype: 'panel',
-    layout: 'table',
-    layoutConfig: {
-        tableAttrs: {
-            style: {
-                width: '100%'
-            }
-        },
-        columns: 3
-    }
-}
    
-     */
-    tableAttrs:null,
-
-    // private
-    setContainer : function(ct){
-        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
-
-        this.currentRow = 0;
-        this.currentColumn = 0;
-        this.cells = [];
-    },
-    
-    // private
-    onLayout : function(ct, target){
-        var cs = ct.items.items, len = cs.length, c, i;
-
-        if(!this.table){
-            target.addClass('x-table-layout-ct');
-
-            this.table = target.createChild(
-                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
-        }
-        this.renderAll(ct, target);
-    },
-
-    // private
-    getRow : function(index){
-        var row = this.table.tBodies[0].childNodes[index];
-        if(!row){
-            row = document.createElement('tr');
-            this.table.tBodies[0].appendChild(row);
-        }
-        return row;
-    },
-
-    // private
-    getNextCell : function(c){
-        var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
-        var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
-        for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
-            if(!this.cells[rowIndex]){
-                this.cells[rowIndex] = [];
-            }
-            for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
-                this.cells[rowIndex][colIndex] = true;
-            }
-        }
-        var td = document.createElement('td');
-        if(c.cellId){
-            td.id = c.cellId;
-        }
-        var cls = 'x-table-layout-cell';
-        if(c.cellCls){
-            cls += ' ' + c.cellCls;
-        }
-        td.className = cls;
-        if(c.colspan){
-            td.colSpan = c.colspan;
-        }
-        if(c.rowspan){
-            td.rowSpan = c.rowspan;
-        }
-        this.getRow(curRow).appendChild(td);
-        return td;
-    },
-
-    // private
-    getNextNonSpan: function(colIndex, rowIndex){
-        var cols = this.columns;
-        while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
-            if(cols && colIndex >= cols){
-                rowIndex++;
-                colIndex = 0;
-            }else{
-                colIndex++;
-            }
-        }
-        return [colIndex, rowIndex];
-    },
-
-    // private
-    renderItem : function(c, position, target){
-        // Ensure we have our inner table to get cells to render into.
-        if(!this.table){
-            this.table = target.createChild(
-                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
-        }
-        if(c && !c.rendered){
-            c.render(this.getNextCell(c));
-            this.configureItem(c, position);
-        }else if(c && !this.isValidParent(c, target)){
-            var container = this.getNextCell(c);
-            container.insertBefore(c.getPositionEl().dom, null);
-            c.container = Ext.get(container);
-            this.configureItem(c, position);
-        }
-    },
-
-    // private
-    isValidParent : function(c, target){
-        return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);
-    }
-
-    /**
-     * @property activeItem
-     * @hide
-     */
-});
-
+/**
+ * @class Ext.layout.AccordionLayout
+ * @extends Ext.layout.FitLayout
+ * 
    This is a layout that manages multiple Panels in an expandable accordion style such that only
+ * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
    
+ * 
    Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
    
+ * 
    This class is intended to be extended or created via the {@link Ext.Container#layout layout}
+ * configuration property.  See {@link Ext.Container#layout} for additional details.
    
+ * 
    Example usage:
    
+ * 
    
+var accordion = new Ext.Panel({
+    title: 'Accordion Layout',
+    layout:'accordion',
+    defaults: {
+        // applied to each contained panel
+        bodyStyle: 'padding:15px'
+    },
+    layoutConfig: {
+        // layout-specific configs go here
+        titleCollapse: false,
+        animate: true,
+        activeOnTop: true
+    },
+    items: [{
+        title: 'Panel 1',
+        html: '<p>Panel content!</p>'
+    },{
+        title: 'Panel 2',
+        html: '<p>Panel content!</p>'
+    },{
+        title: 'Panel 3',
+        html: '<p>Panel content!</p>'
+    }]
+});
+
    
+ */
+Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
+    /**
+     * @cfg {Boolean} fill
+     * True to adjust the active item's height to fill the available space in the container, false to use the
+     * item's current height, or auto height if not explicitly set (defaults to true).
+     */
+    fill : true,
+    /**
+     * @cfg {Boolean} autoWidth
+     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
+     * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
+     * layouts if they have auto width, so in such cases this config should be set to false.
+     */
+    autoWidth : true,
+    /**
+     * @cfg {Boolean} titleCollapse
+     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
+     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
+     * {@link #hideCollapseTool} should be false also.
+     */
+    titleCollapse : true,
+    /**
+     * @cfg {Boolean} hideCollapseTool
+     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
+     * When set to true, {@link #titleCollapse} should be true also.
+     */
+    hideCollapseTool : false,
+    /**
+     * @cfg {Boolean} collapseFirst
+     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
+     * in the contained panels' title bars, false to render it last (defaults to false).
+     */
+    collapseFirst : false,
+    /**
+     * @cfg {Boolean} animate
+     * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
+     * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
+     * contained panel for this property, set this to undefined at the layout level.
+     */
+    animate : false,
+    /**
+     * @cfg {Boolean} sequence
+     * Experimental. If animate is set to true, this will result in each animation running in sequence.
+     */
+    sequence : false,
+    /**
+     * @cfg {Boolean} activeOnTop
+     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
+     * false to keep the panels in the rendered order. This is NOT compatible with "animate:true" (defaults to false).
+     */
+    activeOnTop : false,
+
+    type: 'accordion',
+
+    renderItem : function(c){
+        if(this.animate === false){
+            c.animCollapse = false;
+        }
+        c.collapsible = true;
+        if(this.autoWidth){
+            c.autoWidth = true;
+        }
+        if(this.titleCollapse){
+            c.titleCollapse = true;
+        }
+        if(this.hideCollapseTool){
+            c.hideCollapseTool = true;
+        }
+        if(this.collapseFirst !== undefined){
+            c.collapseFirst = this.collapseFirst;
+        }
+        if(!this.activeItem && !c.collapsed){
+            this.setActiveItem(c, true);
+        }else if(this.activeItem && this.activeItem != c){
+            c.collapsed = true;
+        }
+        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
+        c.header.addClass('x-accordion-hd');
+        c.on('beforeexpand', this.beforeExpand, this);
+    },
+
+    onRemove: function(c){
+        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
+        if(c.rendered){
+            c.header.removeClass('x-accordion-hd');
+        }
+        c.un('beforeexpand', this.beforeExpand, this);
+    },
+
+    // private
+    beforeExpand : function(p, anim){
+        var ai = this.activeItem;
+        if(ai){
+            if(this.sequence){
+                delete this.activeItem;
+                if (!ai.collapsed){
+                    ai.collapse({callback:function(){
+                        p.expand(anim || true);
+                    }, scope: this});
+                    return false;
+                }
+            }else{
+                ai.collapse(this.animate);
+            }
+        }
+        this.setActive(p);
+        if(this.activeOnTop){
+            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
+        }
+        // Items have been hidden an possibly rearranged, we need to get the container size again.
+        this.layout();
+    },
+
+    // private
+    setItemSize : function(item, size){
+        if(this.fill && item){
+            var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
+            // Add up all the header heights
+            for (i = 0; i < len; i++) {
+                if((p = ct[i]) != item){
+                    hh += p.header.getHeight();
+                }
+            };
+            // Subtract the header heights from the container size
+            size.height -= hh;
+            // Call setSize on the container to set the correct height.  For Panels, deferedHeight
+            // will simply store this size for when the expansion is done.
+            item.setSize(size);
+        }
+    },
+
+    /**
+     * Sets the active (expanded) item in the layout.
+     * @param {String/Number} item The string component id or numeric index of the item to activate
+     */
+    setActiveItem : function(item){
+        this.setActive(item, true);
+    },
+
+    // private
+    setActive : function(item, expand){
+        var ai = this.activeItem;
+        item = this.container.getComponent(item);
+        if(ai != item){
+            if(item.rendered && item.collapsed && expand){
+                item.expand();
+            }else{
+                if(ai){
+                   ai.fireEvent('deactivate', ai);
+                }
+                this.activeItem = item;
+                item.fireEvent('activate', item);
+            }
+        }
+    }
+});
+Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
+
+//backwards compat
+Ext.layout.Accordion = Ext.layout.AccordionLayout;/**
+ * @class Ext.layout.TableLayout
+ * @extends Ext.layout.ContainerLayout
+ * 
    This layout allows you to easily render content into an HTML table.  The total number of columns can be
+ * specified, and rowspan and colspan can be used to create complex layouts within the table.
+ * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
    
+ * 
    Note that when creating a layout via config, the layout-specific config properties must be passed in via
+ * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
+ * case of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
+ * TableLayout can supply the following table-specific config properties:
    
+ * 
      
+ * 
    • rowspan Applied to the table cell containing the item.
      • 
+ * 
    • colspan Applied to the table cell containing the item.
      • 
+ * 
    • cellId An id applied to the table cell containing the item.
      • 
+ * 
    • cellCls A CSS class name added to the table cell containing the item.
      • 
+ * 
    
+ * 
    The basic concept of building up a TableLayout is conceptually very similar to building up a standard
+ * HTML table.  You simply add each panel (or "cell") that you want to include along with any span attributes
+ * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
+ * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
+ * total column count in the layoutConfig and start adding panels in their natural order from left to right,
+ * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
+ * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add
+ * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:
    
+ * 
    
+// This code will generate a layout table that is 3 columns by 2 rows
+// with some spanning included.  The basic layout will be:
+// +--------+-----------------+
+// |   A    |   B             |
+// |        |--------+--------|
+// |        |   C    |   D    |
+// +--------+--------+--------+
+var table = new Ext.Panel({
+    title: 'Table Layout',
+    layout:'table',
+    defaults: {
+        // applied to each contained panel
+        bodyStyle:'padding:20px'
+    },
+    layoutConfig: {
+        // The total column count must be specified here
+        columns: 3
+    },
+    items: [{
+        html: '<p>Cell A content</p>',
+        rowspan: 2
+    },{
+        html: '<p>Cell B content</p>',
+        colspan: 2
+    },{
+        html: '<p>Cell C content</p>',
+        cellCls: 'highlight'
+    },{
+        html: '<p>Cell D content</p>'
+    }]
+});
+
    
+ */
+Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
+    /**
+     * @cfg {Number} columns
+     * The total number of columns to create in the table for this layout.  If not specified, all Components added to
+     * this layout will be rendered into a single row using one column per Component.
+     */
+
+    // private
+    monitorResize:false,
+
+    type: 'table',
+
+    targetCls: 'x-table-layout-ct',
+
+    /**
+     * @cfg {Object} tableAttrs
+     * 
    An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
+     * used to create the layout's <table> element. Example:
    
+{
+    xtype: 'panel',
+    layout: 'table',
+    layoutConfig: {
+        tableAttrs: {
+            style: {
+                width: '100%'
+            }
+        },
+        columns: 3
+    }
+}
    
+     */
+    tableAttrs:null,
+
+    // private
+    setContainer : function(ct){
+        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
+
+        this.currentRow = 0;
+        this.currentColumn = 0;
+        this.cells = [];
+    },
+    
+    // private
+    onLayout : function(ct, target){
+        var cs = ct.items.items, len = cs.length, c, i;
+
+        if(!this.table){
+            target.addClass('x-table-layout-ct');
+
+            this.table = target.createChild(
+                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
+        }
+        this.renderAll(ct, target);
+    },
+
+    // private
+    getRow : function(index){
+        var row = this.table.tBodies[0].childNodes[index];
+        if(!row){
+            row = document.createElement('tr');
+            this.table.tBodies[0].appendChild(row);
+        }
+        return row;
+    },
+
+    // private
+    getNextCell : function(c){
+        var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
+        var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
+        for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
+            if(!this.cells[rowIndex]){
+                this.cells[rowIndex] = [];
+            }
+            for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
+                this.cells[rowIndex][colIndex] = true;
+            }
+        }
+        var td = document.createElement('td');
+        if(c.cellId){
+            td.id = c.cellId;
+        }
+        var cls = 'x-table-layout-cell';
+        if(c.cellCls){
+            cls += ' ' + c.cellCls;
+        }
+        td.className = cls;
+        if(c.colspan){
+            td.colSpan = c.colspan;
+        }
+        if(c.rowspan){
+            td.rowSpan = c.rowspan;
+        }
+        this.getRow(curRow).appendChild(td);
+        return td;
+    },
+
+    // private
+    getNextNonSpan: function(colIndex, rowIndex){
+        var cols = this.columns;
+        while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
+            if(cols && colIndex >= cols){
+                rowIndex++;
+                colIndex = 0;
+            }else{
+                colIndex++;
+            }
+        }
+        return [colIndex, rowIndex];
+    },
+
+    // private
+    renderItem : function(c, position, target){
+        // Ensure we have our inner table to get cells to render into.
+        if(!this.table){
+            this.table = target.createChild(
+                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
+        }
+        if(c && !c.rendered){
+            c.render(this.getNextCell(c));
+            this.configureItem(c, position);
+        }else if(c && !this.isValidParent(c, target)){
+            var container = this.getNextCell(c);
+            container.insertBefore(c.getPositionEl().dom, null);
+            c.container = Ext.get(container);
+            this.configureItem(c, position);
+        }
+    },
+
+    // private
+    isValidParent : function(c, target){
+        return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);
+    }
+
+    /**
+     * @property activeItem
+     * @hide
+     */
+});
+
 Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/**
  * @class Ext.layout.AbsoluteLayout
  * @extends Ext.layout.AnchorLayout
@@ -22714,125 +22714,125 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/**
         }
     }
 });
-Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;/**
- * @class Ext.Viewport
- * @extends Ext.Container
- * 
    A specialized container representing the viewable application area (the browser viewport).
    
- * 
    The Viewport renders itself to the document body, and automatically sizes itself to the size of
- * the browser viewport and manages window resizing. There may only be one Viewport created
- * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
- * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
- * method of any of its child Panels may themselves have a layout.
    
- * 
    The Viewport does not provide scrolling, so child Panels within the Viewport should provide
- * for scrolling if needed using the {@link #autoScroll} config.
    
- * 
    An example showing a classic application border layout:
    
-new Ext.Viewport({
-    layout: 'border',
-    items: [{
-        region: 'north',
-        html: '<h1 class="x-panel-header">Page Title</h1>',
-        autoHeight: true,
-        border: false,
-        margins: '0 0 5 0'
-    }, {
-        region: 'west',
-        collapsible: true,
-        title: 'Navigation',
-        width: 200
-        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
-    }, {
-        region: 'south',
-        title: 'Title for Panel',
-        collapsible: true,
-        html: 'Information goes here',
-        split: true,
-        height: 100,
-        minHeight: 100
-    }, {
-        region: 'east',
-        title: 'Title for the Grid Panel',
-        collapsible: true,
-        split: true,
-        width: 200,
-        xtype: 'grid',
-        // remaining grid configuration not shown ...
-        // notice that the GridPanel is added directly as the region
-        // it is not "overnested" inside another Panel
-    }, {
-        region: 'center',
-        xtype: 'tabpanel', // TabPanel itself has no title
-        items: {
-            title: 'Default Tab',
-            html: 'The first tab\'s content. Others may be added dynamically'
-        }
-    }]
-});
-
    
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @xtype viewport
- */
-Ext.Viewport = Ext.extend(Ext.Container, {
-    /*
-     * Privatize config options which, if used, would interfere with the
-     * correct operation of the Viewport as the sole manager of the
-     * layout of the document body.
-     */
-    /**
-     * @cfg {Mixed} applyTo @hide
-     */
-    /**
-     * @cfg {Boolean} allowDomMove @hide
-     */
-    /**
-     * @cfg {Boolean} hideParent @hide
-     */
-    /**
-     * @cfg {Mixed} renderTo @hide
-     */
-    /**
-     * @cfg {Boolean} hideParent @hide
-     */
-    /**
-     * @cfg {Number} height @hide
-     */
-    /**
-     * @cfg {Number} width @hide
-     */
-    /**
-     * @cfg {Boolean} autoHeight @hide
-     */
-    /**
-     * @cfg {Boolean} autoWidth @hide
-     */
-    /**
-     * @cfg {Boolean} deferHeight @hide
-     */
-    /**
-     * @cfg {Boolean} monitorResize @hide
-     */
-
-    initComponent : function() {
-        Ext.Viewport.superclass.initComponent.call(this);
-        document.getElementsByTagName('html')[0].className += ' x-viewport';
-        this.el = Ext.getBody();
-        this.el.setHeight = Ext.emptyFn;
-        this.el.setWidth = Ext.emptyFn;
-        this.el.setSize = Ext.emptyFn;
-        this.el.dom.scroll = 'no';
-        this.allowDomMove = false;
-        this.autoWidth = true;
-        this.autoHeight = true;
-        Ext.EventManager.onWindowResize(this.fireResize, this);
-        this.renderTo = this.el;
-    },
-
-    fireResize : function(w, h){
-        this.fireEvent('resize', this, w, h, w, h);
-    }
-});
-Ext.reg('viewport', Ext.Viewport);
+Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;/**
+ * @class Ext.Viewport
+ * @extends Ext.Container
+ * 
    A specialized container representing the viewable application area (the browser viewport).
    
+ * 
    The Viewport renders itself to the document body, and automatically sizes itself to the size of
+ * the browser viewport and manages window resizing. There may only be one Viewport created
+ * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
+ * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
+ * method of any of its child Panels may themselves have a layout.
    
+ * 
    The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+ * for scrolling if needed using the {@link #autoScroll} config.
    
+ * 
    An example showing a classic application border layout:
    
+new Ext.Viewport({
+    layout: 'border',
+    items: [{
+        region: 'north',
+        html: '<h1 class="x-panel-header">Page Title</h1>',
+        autoHeight: true,
+        border: false,
+        margins: '0 0 5 0'
+    }, {
+        region: 'west',
+        collapsible: true,
+        title: 'Navigation',
+        width: 200
+        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
+    }, {
+        region: 'south',
+        title: 'Title for Panel',
+        collapsible: true,
+        html: 'Information goes here',
+        split: true,
+        height: 100,
+        minHeight: 100
+    }, {
+        region: 'east',
+        title: 'Title for the Grid Panel',
+        collapsible: true,
+        split: true,
+        width: 200,
+        xtype: 'grid',
+        // remaining grid configuration not shown ...
+        // notice that the GridPanel is added directly as the region
+        // it is not "overnested" inside another Panel
+    }, {
+        region: 'center',
+        xtype: 'tabpanel', // TabPanel itself has no title
+        items: {
+            title: 'Default Tab',
+            html: 'The first tab\'s content. Others may be added dynamically'
+        }
+    }]
+});
+
    
+ * @constructor
+ * Create a new Viewport
+ * @param {Object} config The config object
+ * @xtype viewport
+ */
+Ext.Viewport = Ext.extend(Ext.Container, {
+    /*
+     * Privatize config options which, if used, would interfere with the
+     * correct operation of the Viewport as the sole manager of the
+     * layout of the document body.
+     */
+    /**
+     * @cfg {Mixed} applyTo @hide
+     */
+    /**
+     * @cfg {Boolean} allowDomMove @hide
+     */
+    /**
+     * @cfg {Boolean} hideParent @hide
+     */
+    /**
+     * @cfg {Mixed} renderTo @hide
+     */
+    /**
+     * @cfg {Boolean} hideParent @hide
+     */
+    /**
+     * @cfg {Number} height @hide
+     */
+    /**
+     * @cfg {Number} width @hide
+     */
+    /**
+     * @cfg {Boolean} autoHeight @hide
+     */
+    /**
+     * @cfg {Boolean} autoWidth @hide
+     */
+    /**
+     * @cfg {Boolean} deferHeight @hide
+     */
+    /**
+     * @cfg {Boolean} monitorResize @hide
+     */
+
+    initComponent : function() {
+        Ext.Viewport.superclass.initComponent.call(this);
+        document.getElementsByTagName('html')[0].className += ' x-viewport';
+        this.el = Ext.getBody();
+        this.el.setHeight = Ext.emptyFn;
+        this.el.setWidth = Ext.emptyFn;
+        this.el.setSize = Ext.emptyFn;
+        this.el.dom.scroll = 'no';
+        this.allowDomMove = false;
+        this.autoWidth = true;
+        this.autoHeight = true;
+        Ext.EventManager.onWindowResize(this.fireResize, this);
+        this.renderTo = this.el;
+    },
+
+    fireResize : function(w, h){
+        this.fireEvent('resize', this, w, h, w, h);
+    }
+});
+Ext.reg('viewport', Ext.Viewport);
 /**
  * @class Ext.Panel
  * @extends Ext.Container
@@ -26060,759 +26060,759 @@ Ext.LoadMask.prototype = {
             um.un('failure', this.onLoad, this);
         }
     }
-};/**
- * @class Ext.Slider
- * @extends Ext.BoxComponent
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,
- * configurable snapping, axis clicking and animation. Can be added as an item to
- * any container. Example usage:
-
    
-new Ext.Slider({
-    renderTo: Ext.getBody(),
-    width: 200,
-    value: 50,
-    increment: 10,
-    minValue: 0,
-    maxValue: 100
-});
-
    
- */
-Ext.Slider = Ext.extend(Ext.BoxComponent, {
-    /**
-     * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
-     */
-    /**
-     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
-     */
-    vertical: false,
-    /**
-     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
-     */
-    minValue: 0,
-    /**
-     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
-     */
-    maxValue: 100,
-    /**
-     * @cfg {Number/Boolean} decimalPrecision.
-     * 
    The number of decimal places to which to round the Slider's value. Defaults to 0.
    
-     * 
    To disable rounding, configure as false.
    
-     */
-    decimalPrecision: 0,
-    /**
-     * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
-     */
-    keyIncrement: 1,
-    /**
-     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
-     */
-    increment: 0,
-    // private
-    clickRange: [5,15],
-    /**
-     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
-     */
-    clickToChange : true,
-    /**
-     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
-     */
-    animate: true,
-
-    /**
-     * True while the thumb is in a drag operation
-     * @type boolean
-     */
-    dragging: false,
-
-    // private override
-    initComponent : function(){
-        if(!Ext.isDefined(this.value)){
-            this.value = this.minValue;
-        }
-        Ext.Slider.superclass.initComponent.call(this);
-        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
-        this.addEvents(
-            /**
-             * @event beforechange
-             * Fires before the slider value is changed. By returning false from an event handler,
-             * you can cancel the event and prevent the slider from changing.
-             * @param {Ext.Slider} slider The slider
-             * @param {Number} newValue The new value which the slider is being changed to.
-             * @param {Number} oldValue The old value which the slider was previously.
-             */
-            'beforechange',
-            /**
-             * @event change
-             * Fires when the slider value is changed.
-             * @param {Ext.Slider} slider The slider
-             * @param {Number} newValue The new value which the slider has been changed to.
-             */
-            'change',
-            /**
-             * @event changecomplete
-             * Fires when the slider value is changed by the user and any drag operations have completed.
-             * @param {Ext.Slider} slider The slider
-             * @param {Number} newValue The new value which the slider has been changed to.
-             */
-            'changecomplete',
-            /**
-             * @event dragstart
-             * Fires after a drag operation has started.
-             * @param {Ext.Slider} slider The slider
-             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
-             */
-            'dragstart',
-            /**
-             * @event drag
-             * Fires continuously during the drag operation while the mouse is moving.
-             * @param {Ext.Slider} slider The slider
-             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
-             */
-            'drag',
-            /**
-             * @event dragend
-             * Fires after the drag operation has completed.
-             * @param {Ext.Slider} slider The slider
-             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
-             */
-            'dragend'
-        );
-
-        if(this.vertical){
-            Ext.apply(this, Ext.Slider.Vertical);
-        }
-    },
-
-    // private override
-    onRender : function(){
-        this.autoEl = {
-            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
-            cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
-        };
-        Ext.Slider.superclass.onRender.apply(this, arguments);
-        this.endEl = this.el.first();
-        this.innerEl = this.endEl.first();
-        this.thumb = this.innerEl.first();
-        this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
-        this.focusEl = this.thumb.next();
-        this.initEvents();
-    },
-
-    // private override
-    initEvents : function(){
-        this.thumb.addClassOnOver('x-slider-thumb-over');
-        this.mon(this.el, {
-            scope: this,
-            mousedown: this.onMouseDown,
-            keydown: this.onKeyDown
-        });
-
-        this.focusEl.swallowEvent("click", true);
-
-        this.tracker = new Ext.dd.DragTracker({
-            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
-            onStart: this.onDragStart.createDelegate(this),
-            onDrag: this.onDrag.createDelegate(this),
-            onEnd: this.onDragEnd.createDelegate(this),
-            tolerance: 3,
-            autoStart: 300
-        });
-        this.tracker.initEl(this.thumb);
-    },
-
-    // private override
-    onMouseDown : function(e){
-        if(this.disabled){
-            return;
-        }
-        if(this.clickToChange && e.target != this.thumb.dom){
-            var local = this.innerEl.translatePoints(e.getXY());
-            this.onClickChange(local);
-        }
-        this.focus();
-    },
-
-    // private
-    onClickChange : function(local){
-        if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
-            this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
-        }
-    },
-
-    // private
-    onKeyDown : function(e){
-        if(this.disabled){e.preventDefault();return;}
-        var k = e.getKey();
-        switch(k){
-            case e.UP:
-            case e.RIGHT:
-                e.stopEvent();
-                if(e.ctrlKey){
-                    this.setValue(this.maxValue, undefined, true);
-                }else{
-                    this.setValue(this.value+this.keyIncrement, undefined, true);
-                }
-            break;
-            case e.DOWN:
-            case e.LEFT:
-                e.stopEvent();
-                if(e.ctrlKey){
-                    this.setValue(this.minValue, undefined, true);
-                }else{
-                    this.setValue(this.value-this.keyIncrement, undefined, true);
-                }
-            break;
-            default:
-                e.preventDefault();
-        }
-    },
-
-    // private
-    doSnap : function(value){
-        if(!(this.increment && value)){
-            return value;
-        }
-        var newValue = value,
-            inc = this.increment,
-            m = value % inc;
-        if(m != 0){
-            newValue -= m;
-            if(m * 2 > inc){
-                newValue += inc;
-            }else if(m * 2 < -inc){
-                newValue -= inc;
-            }
-        }
-        return newValue.constrain(this.minValue,  this.maxValue);
-    },
-
-    // private
-    afterRender : function(){
-        Ext.Slider.superclass.afterRender.apply(this, arguments);
-        if(this.value !== undefined){
-            var v = this.normalizeValue(this.value);
-            if(v !== this.value){
-                delete this.value;
-                this.setValue(v, false);
-            }else{
-                this.moveThumb(this.translateValue(v), false);
-            }
-        }
-    },
-
-    // private
-    getRatio : function(){
-        var w = this.innerEl.getWidth(),
-            v = this.maxValue - this.minValue;
-        return v == 0 ? w : (w/v);
-    },
-
-    // private
-    normalizeValue : function(v){
-        v = this.doSnap(v);
-        v = Ext.util.Format.round(v, this.decimalPrecision);
-        v = v.constrain(this.minValue, this.maxValue);
-        return v;
-    },
-    
-    /**
-     * Sets the minimum value for the slider instance. If the current value is less than the 
-     * minimum value, the current value will be changed.
-     * @param {Number} val The new minimum value
-     */
-    setMinValue : function(val){
-        this.minValue = val;
-        this.syncThumb();
-        if(this.value < val){
-            this.setValue(val);
-        }
-    },
-    
-    /**
-     * Sets the maximum value for the slider instance. If the current value is more than the 
-     * maximum value, the current value will be changed.
-     * @param {Number} val The new maximum value
-     */
-    setMaxValue : function(val){
-        this.maxValue = val;
-        this.syncThumb();
-        if(this.value > val){
-            this.setValue(val);
-        }
-    },
-
-    /**
-     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
-     * the minValue and maxValue.
-     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
-     * @param {Boolean} animate Turn on or off animation, defaults to true
-     */
-    setValue : function(v, animate, changeComplete){
-        v = this.normalizeValue(v);
-        if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
-            this.value = v;
-            this.moveThumb(this.translateValue(v), animate !== false);
-            this.fireEvent('change', this, v);
-            if(changeComplete){
-                this.fireEvent('changecomplete', this, v);
-            }
-        }
-    },
-
-    // private
-    translateValue : function(v){
-        var ratio = this.getRatio();
-        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
-    },
-
-    reverseValue : function(pos){
-        var ratio = this.getRatio();
-        return (pos + (this.minValue * ratio)) / ratio;
-    },
-
-    // private
-    moveThumb: function(v, animate){
-        if(!animate || this.animate === false){
-            this.thumb.setLeft(v);
-        }else{
-            this.thumb.shift({left: v, stopFx: true, duration:.35});
-        }
-    },
-
-    // private
-    focus : function(){
-        this.focusEl.focus(10);
-    },
-
-    // private
-    onBeforeDragStart : function(e){
-        return !this.disabled;
-    },
-
-    // private
-    onDragStart: function(e){
-        this.thumb.addClass('x-slider-thumb-drag');
-        this.dragging = true;
-        this.dragStartValue = this.value;
-        this.fireEvent('dragstart', this, e);
-    },
-
-    // private
-    onDrag: function(e){
-        var pos = this.innerEl.translatePoints(this.tracker.getXY());
-        this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
-        this.fireEvent('drag', this, e);
-    },
-
-    // private
-    onDragEnd: function(e){
-        this.thumb.removeClass('x-slider-thumb-drag');
-        this.dragging = false;
-        this.fireEvent('dragend', this, e);
-        if(this.dragStartValue != this.value){
-            this.fireEvent('changecomplete', this, this.value);
-        }
-    },
-
-    // private
-    onResize : function(w, h){
-        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
-        this.syncThumb();
-        Ext.Slider.superclass.onResize.apply(this, arguments);
-    },
-
-    //private
-    onDisable: function(){
-        Ext.Slider.superclass.onDisable.call(this);
-        this.thumb.addClass(this.disabledClass);
-        if(Ext.isIE){
-            //IE breaks when using overflow visible and opacity other than 1.
-            //Create a place holder for the thumb and display it.
-            var xy = this.thumb.getXY();
-            this.thumb.hide();
-            this.innerEl.addClass(this.disabledClass).dom.disabled = true;
-            if (!this.thumbHolder){
-                this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
-            }
-            this.thumbHolder.show().setXY(xy);
-        }
-    },
-
-    //private
-    onEnable: function(){
-        Ext.Slider.superclass.onEnable.call(this);
-        this.thumb.removeClass(this.disabledClass);
-        if(Ext.isIE){
-            this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
-            if(this.thumbHolder){
-                this.thumbHolder.hide();
-            }
-            this.thumb.show();
-            this.syncThumb();
-        }
-    },
-
-    /**
-     * Synchronizes the thumb position to the proper proportion of the total component width based
-     * on the current slider {@link #value}.  This will be called automatically when the Slider
-     * is resized by a layout, but if it is rendered auto width, this method can be called from
-     * another resize handler to sync the Slider if necessary.
-     */
-    syncThumb : function(){
-        if(this.rendered){
-            this.moveThumb(this.translateValue(this.value));
-        }
-    },
-
-    /**
-     * Returns the current value of the slider
-     * @return {Number} The current value of the slider
-     */
-    getValue : function(){
-        return this.value;
-    },
-
-    // private
-    beforeDestroy : function(){
-        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
-        Ext.Slider.superclass.beforeDestroy.call(this);
-    }
-});
-Ext.reg('slider', Ext.Slider);
-
-// private class to support vertical sliders
-Ext.Slider.Vertical = {
-    onResize : function(w, h){
-        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
-        this.syncThumb();
-    },
-
-    getRatio : function(){
-        var h = this.innerEl.getHeight(),
-            v = this.maxValue - this.minValue;
-        return h/v;
-    },
-
-    moveThumb: function(v, animate){
-        if(!animate || this.animate === false){
-            this.thumb.setBottom(v);
-        }else{
-            this.thumb.shift({bottom: v, stopFx: true, duration:.35});
-        }
-    },
-
-    onDrag: function(e){
-        var pos = this.innerEl.translatePoints(this.tracker.getXY()),
-            bottom = this.innerEl.getHeight()-pos.top;
-        this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
-        this.fireEvent('drag', this, e);
-    },
-
-    onClickChange : function(local){
-        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
-            var bottom = this.innerEl.getHeight() - local.top;
-            this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
-        }
-    }
-};/**
- * @class Ext.ProgressBar
- * @extends Ext.BoxComponent
- * 
    An updateable progress bar component.  The progress bar supports two different modes: manual and automatic.
    
- * 
    In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
- * progress bar as needed from your own code.  This method is most appropriate when you want to show progress
- * throughout an operation that has predictable points of interest at which you can update the control.
    
- * 
    In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
- * once the operation is complete.  You can optionally have the progress bar wait for a specific amount of time
- * and then clear itself.  Automatic mode is most appropriate for timed operations or asynchronous operations in
- * which you have no need for indicating intermediate progress.
    
- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
- * @cfg {String} text The progress bar text (defaults to '')
- * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
- * bar's internal text element)
- * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
- * @xtype progress
- */
-Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {
-   /**
-    * @cfg {String} baseCls
-    * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
-    */
-    baseCls : 'x-progress',
-    
-    /**
-    * @cfg {Boolean} animate
-    * True to animate the progress bar during transitions (defaults to false)
-    */
-    animate : false,
-
-    // private
-    waitTimer : null,
-
-    // private
-    initComponent : function(){
-        Ext.ProgressBar.superclass.initComponent.call(this);
-        this.addEvents(
-            /**
-             * @event update
-             * Fires after each update interval
-             * @param {Ext.ProgressBar} this
-             * @param {Number} The current progress value
-             * @param {String} The current progress text
-             */
-            "update"
-        );
-    },
-
-    // private
-    onRender : function(ct, position){
-        var tpl = new Ext.Template(
-            '
    ',
-                '
    ',
-                    '
    ',
-                        '
    ',
-                            '
     
    ',
-                        '
    ',
-                    '
    ',
-                    '
    ',
-                        '
     
    ',
-                    '
    ',
-                '
    ',
-            '
    '
-        );
-
-        this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true)
-        	: tpl.append(ct, {cls: this.baseCls}, true);
-		        
-        if(this.id){
-            this.el.dom.id = this.id;
-        }
-        var inner = this.el.dom.firstChild;
-        this.progressBar = Ext.get(inner.firstChild);
-
-        if(this.textEl){
-            //use an external text el
-            this.textEl = Ext.get(this.textEl);
-            delete this.textTopEl;
-        }else{
-            //setup our internal layered text els
-            this.textTopEl = Ext.get(this.progressBar.dom.firstChild);
-            var textBackEl = Ext.get(inner.childNodes[1]);
-            this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');
-            this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);
-            this.textEl.setWidth(inner.offsetWidth);
-        }
-        this.progressBar.setHeight(inner.offsetHeight);
-    },
-    
-    // private
-    afterRender : function(){
-        Ext.ProgressBar.superclass.afterRender.call(this);
-        if(this.value){
-            this.updateProgress(this.value, this.text);
-        }else{
-            this.updateText(this.text);
-        }
-    },
-
-    /**
-     * Updates the progress bar value, and optionally its text.  If the text argument is not specified,
-     * any existing text value will be unchanged.  To blank out existing text, pass ''.  Note that even
-     * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
-     * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.
-     * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
-     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
-     * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is
-     * not specified, the default for the class is used (default to false)
-     * @return {Ext.ProgressBar} this
-     */
-    updateProgress : function(value, text, animate){
-        this.value = value || 0;
-        if(text){
-            this.updateText(text);
-        }
-        if(this.rendered && !this.isDestroyed){
-            var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
-            this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));
-            if(this.textTopEl){
-                //textTopEl should be the same width as the bar so overflow will clip as the bar moves
-                this.textTopEl.removeClass('x-hidden').setWidth(w);
-            }
-        }
-        this.fireEvent('update', this, value, text);
-        return this;
-    },
-
-    /**
-     * Initiates an auto-updating progress bar.  A duration can be specified, in which case the progress
-     * bar will automatically reset after a fixed amount of time and optionally call a callback function
-     * if specified.  If no duration is passed in, then the progress bar will run indefinitely and must
-     * be manually cleared by calling {@link #reset}.  The wait method accepts a config object with
-     * the following properties:
-     * 
    -Property   Type          Description
----------- ------------  ----------------------------------------------------------------------
-duration   Number        The length of time in milliseconds that the progress bar should
-                         run before resetting itself (defaults to undefined, in which case it
-                         will run indefinitely until reset is called)
-interval   Number        The length of time in milliseconds between each progress update
-                         (defaults to 1000 ms)
-animate    Boolean       Whether to animate the transition of the progress bar. If this value is
-                         not specified, the default for the class is used.                                                   
-increment  Number        The number of progress update segments to display within the progress
-                         bar (defaults to 10).  If the bar reaches the end and is still
-                         updating, it will automatically wrap back to the beginning.
-text       String        Optional text to display in the progress bar element (defaults to '').
-fn         Function      A callback function to execute after the progress bar finishes auto-
-                         updating.  The function will be called with no arguments.  This function
-                         will be ignored if duration is not specified since in that case the
-                         progress bar can only be stopped programmatically, so any required function
-                         should be called by the same code after it resets the progress bar.
-scope      Object        The scope that is passed to the callback function (only applies when
-                         duration and fn are both passed).
-
    
-         *
-         * Example usage:
-         * 
    
-var p = new Ext.ProgressBar({
-   renderTo: 'my-el'
-});
-
-//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
-p.wait({
-   interval: 100, //bar will move fast!
-   duration: 5000,
-   increment: 15,
-   text: 'Updating...',
-   scope: this,
-   fn: function(){
-      Ext.fly('status').update('Done!');
-   }
-});
-
-//Or update indefinitely until some async action completes, then reset manually
-p.wait();
-myAction.on('complete', function(){
-    p.reset();
-    Ext.fly('status').update('Done!');
-});
-
    
-     * @param {Object} config (optional) Configuration options
-     * @return {Ext.ProgressBar} this
-     */
-    wait : function(o){
-        if(!this.waitTimer){
-            var scope = this;
-            o = o || {};
-            this.updateText(o.text);
-            this.waitTimer = Ext.TaskMgr.start({
-                run: function(i){
-                    var inc = o.increment || 10;
-                    i -= 1;
-                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
-                },
-                interval: o.interval || 1000,
-                duration: o.duration,
-                onStop: function(){
-                    if(o.fn){
-                        o.fn.apply(o.scope || this);
-                    }
-                    this.reset();
-                },
-                scope: scope
-            });
-        }
-        return this;
-    },
-
-    /**
-     * Returns true if the progress bar is currently in a {@link #wait} operation
-     * @return {Boolean} True if waiting, else false
-     */
-    isWaiting : function(){
-        return this.waitTimer !== null;
-    },
-
-    /**
-     * Updates the progress bar text.  If specified, textEl will be updated, otherwise the progress
-     * bar itself will display the updated text.
-     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
-     * @return {Ext.ProgressBar} this
-     */
-    updateText : function(text){
-        this.text = text || ' ';
-        if(this.rendered){
-            this.textEl.update(this.text);
-        }
-        return this;
-    },
-    
-    /**
-     * Synchronizes the inner bar width to the proper proportion of the total componet width based
-     * on the current progress {@link #value}.  This will be called automatically when the ProgressBar
-     * is resized by a layout, but if it is rendered auto width, this method can be called from
-     * another resize handler to sync the ProgressBar if necessary.
-     */
-    syncProgressBar : function(){
-        if(this.value){
-            this.updateProgress(this.value, this.text);
-        }
-        return this;
-    },
-
-    /**
-     * Sets the size of the progress bar.
-     * @param {Number} width The new width in pixels
-     * @param {Number} height The new height in pixels
-     * @return {Ext.ProgressBar} this
-     */
-    setSize : function(w, h){
-        Ext.ProgressBar.superclass.setSize.call(this, w, h);
-        if(this.textTopEl){
-            var inner = this.el.dom.firstChild;
-            this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
-        }
-        this.syncProgressBar();
-        return this;
-    },
-
-    /**
-     * Resets the progress bar value to 0 and text to empty string.  If hide = true, the progress
-     * bar will also be hidden (using the {@link #hideMode} property internally).
-     * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
-     * @return {Ext.ProgressBar} this
-     */
-    reset : function(hide){
-        this.updateProgress(0);
-        if(this.textTopEl){
-            this.textTopEl.addClass('x-hidden');
-        }
-        this.clearTimer();
-        if(hide === true){
-            this.hide();
-        }
-        return this;
-    },
-    
-    // private
-    clearTimer : function(){
-        if(this.waitTimer){
-            this.waitTimer.onStop = null; //prevent recursion
-            Ext.TaskMgr.stop(this.waitTimer);
-            this.waitTimer = null;
-        }
-    },
-    
-    onDestroy: function(){
-        this.clearTimer();
-        if(this.rendered){
-            if(this.textEl.isComposite){
-                this.textEl.clear();
-            }
-            Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
-        }
-        Ext.ProgressBar.superclass.onDestroy.call(this);
-    }
-});
+};/**
+ * @class Ext.Slider
+ * @extends Ext.BoxComponent
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments,
+ * configurable snapping, axis clicking and animation. Can be added as an item to
+ * any container. Example usage:
+
    
+new Ext.Slider({
+    renderTo: Ext.getBody(),
+    width: 200,
+    value: 50,
+    increment: 10,
+    minValue: 0,
+    maxValue: 100
+});
+
    
+ */
+Ext.Slider = Ext.extend(Ext.BoxComponent, {
+    /**
+     * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
+     */
+    /**
+     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
+     */
+    vertical: false,
+    /**
+     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
+     */
+    minValue: 0,
+    /**
+     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
+     */
+    maxValue: 100,
+    /**
+     * @cfg {Number/Boolean} decimalPrecision.
+     * 
    The number of decimal places to which to round the Slider's value. Defaults to 0.
    
+     * 
    To disable rounding, configure as false.
    
+     */
+    decimalPrecision: 0,
+    /**
+     * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
+     */
+    keyIncrement: 1,
+    /**
+     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
+     */
+    increment: 0,
+    // private
+    clickRange: [5,15],
+    /**
+     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
+     */
+    clickToChange : true,
+    /**
+     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
+     */
+    animate: true,
+
+    /**
+     * True while the thumb is in a drag operation
+     * @type boolean
+     */
+    dragging: false,
+
+    // private override
+    initComponent : function(){
+        if(!Ext.isDefined(this.value)){
+            this.value = this.minValue;
+        }
+        Ext.Slider.superclass.initComponent.call(this);
+        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
+        this.addEvents(
+            /**
+             * @event beforechange
+             * Fires before the slider value is changed. By returning false from an event handler,
+             * you can cancel the event and prevent the slider from changing.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider is being changed to.
+             * @param {Number} oldValue The old value which the slider was previously.
+             */
+            'beforechange',
+            /**
+             * @event change
+             * Fires when the slider value is changed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider has been changed to.
+             */
+            'change',
+            /**
+             * @event changecomplete
+             * Fires when the slider value is changed by the user and any drag operations have completed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider has been changed to.
+             */
+            'changecomplete',
+            /**
+             * @event dragstart
+             * Fires after a drag operation has started.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'dragstart',
+            /**
+             * @event drag
+             * Fires continuously during the drag operation while the mouse is moving.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'drag',
+            /**
+             * @event dragend
+             * Fires after the drag operation has completed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'dragend'
+        );
+
+        if(this.vertical){
+            Ext.apply(this, Ext.Slider.Vertical);
+        }
+    },
+
+    // private override
+    onRender : function(){
+        this.autoEl = {
+            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
+            cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
+        };
+        Ext.Slider.superclass.onRender.apply(this, arguments);
+        this.endEl = this.el.first();
+        this.innerEl = this.endEl.first();
+        this.thumb = this.innerEl.first();
+        this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
+        this.focusEl = this.thumb.next();
+        this.initEvents();
+    },
+
+    // private override
+    initEvents : function(){
+        this.thumb.addClassOnOver('x-slider-thumb-over');
+        this.mon(this.el, {
+            scope: this,
+            mousedown: this.onMouseDown,
+            keydown: this.onKeyDown
+        });
+
+        this.focusEl.swallowEvent("click", true);
+
+        this.tracker = new Ext.dd.DragTracker({
+            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
+            onStart: this.onDragStart.createDelegate(this),
+            onDrag: this.onDrag.createDelegate(this),
+            onEnd: this.onDragEnd.createDelegate(this),
+            tolerance: 3,
+            autoStart: 300
+        });
+        this.tracker.initEl(this.thumb);
+    },
+
+    // private override
+    onMouseDown : function(e){
+        if(this.disabled){
+            return;
+        }
+        if(this.clickToChange && e.target != this.thumb.dom){
+            var local = this.innerEl.translatePoints(e.getXY());
+            this.onClickChange(local);
+        }
+        this.focus();
+    },
+
+    // private
+    onClickChange : function(local){
+        if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
+            this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
+        }
+    },
+
+    // private
+    onKeyDown : function(e){
+        if(this.disabled){e.preventDefault();return;}
+        var k = e.getKey();
+        switch(k){
+            case e.UP:
+            case e.RIGHT:
+                e.stopEvent();
+                if(e.ctrlKey){
+                    this.setValue(this.maxValue, undefined, true);
+                }else{
+                    this.setValue(this.value+this.keyIncrement, undefined, true);
+                }
+            break;
+            case e.DOWN:
+            case e.LEFT:
+                e.stopEvent();
+                if(e.ctrlKey){
+                    this.setValue(this.minValue, undefined, true);
+                }else{
+                    this.setValue(this.value-this.keyIncrement, undefined, true);
+                }
+            break;
+            default:
+                e.preventDefault();
+        }
+    },
+
+    // private
+    doSnap : function(value){
+        if(!(this.increment && value)){
+            return value;
+        }
+        var newValue = value,
+            inc = this.increment,
+            m = value % inc;
+        if(m != 0){
+            newValue -= m;
+            if(m * 2 > inc){
+                newValue += inc;
+            }else if(m * 2 < -inc){
+                newValue -= inc;
+            }
+        }
+        return newValue.constrain(this.minValue,  this.maxValue);
+    },
+
+    // private
+    afterRender : function(){
+        Ext.Slider.superclass.afterRender.apply(this, arguments);
+        if(this.value !== undefined){
+            var v = this.normalizeValue(this.value);
+            if(v !== this.value){
+                delete this.value;
+                this.setValue(v, false);
+            }else{
+                this.moveThumb(this.translateValue(v), false);
+            }
+        }
+    },
+
+    // private
+    getRatio : function(){
+        var w = this.innerEl.getWidth(),
+            v = this.maxValue - this.minValue;
+        return v == 0 ? w : (w/v);
+    },
+
+    // private
+    normalizeValue : function(v){
+        v = this.doSnap(v);
+        v = Ext.util.Format.round(v, this.decimalPrecision);
+        v = v.constrain(this.minValue, this.maxValue);
+        return v;
+    },
+    
+    /**
+     * Sets the minimum value for the slider instance. If the current value is less than the 
+     * minimum value, the current value will be changed.
+     * @param {Number} val The new minimum value
+     */
+    setMinValue : function(val){
+        this.minValue = val;
+        this.syncThumb();
+        if(this.value < val){
+            this.setValue(val);
+        }
+    },
+    
+    /**
+     * Sets the maximum value for the slider instance. If the current value is more than the 
+     * maximum value, the current value will be changed.
+     * @param {Number} val The new maximum value
+     */
+    setMaxValue : function(val){
+        this.maxValue = val;
+        this.syncThumb();
+        if(this.value > val){
+            this.setValue(val);
+        }
+    },
+
+    /**
+     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
+     * the minValue and maxValue.
+     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
+     * @param {Boolean} animate Turn on or off animation, defaults to true
+     */
+    setValue : function(v, animate, changeComplete){
+        v = this.normalizeValue(v);
+        if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
+            this.value = v;
+            this.moveThumb(this.translateValue(v), animate !== false);
+            this.fireEvent('change', this, v);
+            if(changeComplete){
+                this.fireEvent('changecomplete', this, v);
+            }
+        }
+    },
+
+    // private
+    translateValue : function(v){
+        var ratio = this.getRatio();
+        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
+    },
+
+    reverseValue : function(pos){
+        var ratio = this.getRatio();
+        return (pos + (this.minValue * ratio)) / ratio;
+    },
+
+    // private
+    moveThumb: function(v, animate){
+        if(!animate || this.animate === false){
+            this.thumb.setLeft(v);
+        }else{
+            this.thumb.shift({left: v, stopFx: true, duration:.35});
+        }
+    },
+
+    // private
+    focus : function(){
+        this.focusEl.focus(10);
+    },
+
+    // private
+    onBeforeDragStart : function(e){
+        return !this.disabled;
+    },
+
+    // private
+    onDragStart: function(e){
+        this.thumb.addClass('x-slider-thumb-drag');
+        this.dragging = true;
+        this.dragStartValue = this.value;
+        this.fireEvent('dragstart', this, e);
+    },
+
+    // private
+    onDrag: function(e){
+        var pos = this.innerEl.translatePoints(this.tracker.getXY());
+        this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
+        this.fireEvent('drag', this, e);
+    },
+
+    // private
+    onDragEnd: function(e){
+        this.thumb.removeClass('x-slider-thumb-drag');
+        this.dragging = false;
+        this.fireEvent('dragend', this, e);
+        if(this.dragStartValue != this.value){
+            this.fireEvent('changecomplete', this, this.value);
+        }
+    },
+
+    // private
+    onResize : function(w, h){
+        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+        this.syncThumb();
+        Ext.Slider.superclass.onResize.apply(this, arguments);
+    },
+
+    //private
+    onDisable: function(){
+        Ext.Slider.superclass.onDisable.call(this);
+        this.thumb.addClass(this.disabledClass);
+        if(Ext.isIE){
+            //IE breaks when using overflow visible and opacity other than 1.
+            //Create a place holder for the thumb and display it.
+            var xy = this.thumb.getXY();
+            this.thumb.hide();
+            this.innerEl.addClass(this.disabledClass).dom.disabled = true;
+            if (!this.thumbHolder){
+                this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
+            }
+            this.thumbHolder.show().setXY(xy);
+        }
+    },
+
+    //private
+    onEnable: function(){
+        Ext.Slider.superclass.onEnable.call(this);
+        this.thumb.removeClass(this.disabledClass);
+        if(Ext.isIE){
+            this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
+            if(this.thumbHolder){
+                this.thumbHolder.hide();
+            }
+            this.thumb.show();
+            this.syncThumb();
+        }
+    },
+
+    /**
+     * Synchronizes the thumb position to the proper proportion of the total component width based
+     * on the current slider {@link #value}.  This will be called automatically when the Slider
+     * is resized by a layout, but if it is rendered auto width, this method can be called from
+     * another resize handler to sync the Slider if necessary.
+     */
+    syncThumb : function(){
+        if(this.rendered){
+            this.moveThumb(this.translateValue(this.value));
+        }
+    },
+
+    /**
+     * Returns the current value of the slider
+     * @return {Number} The current value of the slider
+     */
+    getValue : function(){
+        return this.value;
+    },
+
+    // private
+    beforeDestroy : function(){
+        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
+        Ext.Slider.superclass.beforeDestroy.call(this);
+    }
+});
+Ext.reg('slider', Ext.Slider);
+
+// private class to support vertical sliders
+Ext.Slider.Vertical = {
+    onResize : function(w, h){
+        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
+        this.syncThumb();
+    },
+
+    getRatio : function(){
+        var h = this.innerEl.getHeight(),
+            v = this.maxValue - this.minValue;
+        return h/v;
+    },
+
+    moveThumb: function(v, animate){
+        if(!animate || this.animate === false){
+            this.thumb.setBottom(v);
+        }else{
+            this.thumb.shift({bottom: v, stopFx: true, duration:.35});
+        }
+    },
+
+    onDrag: function(e){
+        var pos = this.innerEl.translatePoints(this.tracker.getXY()),
+            bottom = this.innerEl.getHeight()-pos.top;
+        this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
+        this.fireEvent('drag', this, e);
+    },
+
+    onClickChange : function(local){
+        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
+            var bottom = this.innerEl.getHeight() - local.top;
+            this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
+        }
+    }
+};/**
+ * @class Ext.ProgressBar
+ * @extends Ext.BoxComponent
+ * 
    An updateable progress bar component.  The progress bar supports two different modes: manual and automatic.
    
+ * 
    In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
+ * progress bar as needed from your own code.  This method is most appropriate when you want to show progress
+ * throughout an operation that has predictable points of interest at which you can update the control.
    
+ * 
    In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
+ * once the operation is complete.  You can optionally have the progress bar wait for a specific amount of time
+ * and then clear itself.  Automatic mode is most appropriate for timed operations or asynchronous operations in
+ * which you have no need for indicating intermediate progress.
    
+ * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
+ * @cfg {String} text The progress bar text (defaults to '')
+ * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
+ * bar's internal text element)
+ * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
+ * @xtype progress
+ */
+Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {
+   /**
+    * @cfg {String} baseCls
+    * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
+    */
+    baseCls : 'x-progress',
+    
+    /**
+    * @cfg {Boolean} animate
+    * True to animate the progress bar during transitions (defaults to false)
+    */
+    animate : false,
+
+    // private
+    waitTimer : null,
+
+    // private
+    initComponent : function(){
+        Ext.ProgressBar.superclass.initComponent.call(this);
+        this.addEvents(
+            /**
+             * @event update
+             * Fires after each update interval
+             * @param {Ext.ProgressBar} this
+             * @param {Number} The current progress value
+             * @param {String} The current progress text
+             */
+            "update"
+        );
+    },
+
+    // private
+    onRender : function(ct, position){
+        var tpl = new Ext.Template(
+            '
    ',
+                '
    ',
+                    '
    ',
+                        '
    ',
+                            '
     
    ',
+                        '
    ',
+                    '
    ',
+                    '
    ',
+                        '
     
    ',
+                    '
    ',
+                '
    ',
+            '
    '
+        );
+
+        this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true)
+        	: tpl.append(ct, {cls: this.baseCls}, true);
+		        
+        if(this.id){
+            this.el.dom.id = this.id;
+        }
+        var inner = this.el.dom.firstChild;
+        this.progressBar = Ext.get(inner.firstChild);
+
+        if(this.textEl){
+            //use an external text el
+            this.textEl = Ext.get(this.textEl);
+            delete this.textTopEl;
+        }else{
+            //setup our internal layered text els
+            this.textTopEl = Ext.get(this.progressBar.dom.firstChild);
+            var textBackEl = Ext.get(inner.childNodes[1]);
+            this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');
+            this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);
+            this.textEl.setWidth(inner.offsetWidth);
+        }
+        this.progressBar.setHeight(inner.offsetHeight);
+    },
+    
+    // private
+    afterRender : function(){
+        Ext.ProgressBar.superclass.afterRender.call(this);
+        if(this.value){
+            this.updateProgress(this.value, this.text);
+        }else{
+            this.updateText(this.text);
+        }
+    },
+
+    /**
+     * Updates the progress bar value, and optionally its text.  If the text argument is not specified,
+     * any existing text value will be unchanged.  To blank out existing text, pass ''.  Note that even
+     * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
+     * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.
+     * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
+     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
+     * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is
+     * not specified, the default for the class is used (default to false)
+     * @return {Ext.ProgressBar} this
+     */
+    updateProgress : function(value, text, animate){
+        this.value = value || 0;
+        if(text){
+            this.updateText(text);
+        }
+        if(this.rendered && !this.isDestroyed){
+            var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
+            this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));
+            if(this.textTopEl){
+                //textTopEl should be the same width as the bar so overflow will clip as the bar moves
+                this.textTopEl.removeClass('x-hidden').setWidth(w);
+            }
+        }
+        this.fireEvent('update', this, value, text);
+        return this;
+    },
+
+    /**
+     * Initiates an auto-updating progress bar.  A duration can be specified, in which case the progress
+     * bar will automatically reset after a fixed amount of time and optionally call a callback function
+     * if specified.  If no duration is passed in, then the progress bar will run indefinitely and must
+     * be manually cleared by calling {@link #reset}.  The wait method accepts a config object with
+     * the following properties:
+     * 
    +Property   Type          Description
+---------- ------------  ----------------------------------------------------------------------
+duration   Number        The length of time in milliseconds that the progress bar should
+                         run before resetting itself (defaults to undefined, in which case it
+                         will run indefinitely until reset is called)
+interval   Number        The length of time in milliseconds between each progress update
+                         (defaults to 1000 ms)
+animate    Boolean       Whether to animate the transition of the progress bar. If this value is
+                         not specified, the default for the class is used.                                                   
+increment  Number        The number of progress update segments to display within the progress
+                         bar (defaults to 10).  If the bar reaches the end and is still
+                         updating, it will automatically wrap back to the beginning.
+text       String        Optional text to display in the progress bar element (defaults to '').
+fn         Function      A callback function to execute after the progress bar finishes auto-
+                         updating.  The function will be called with no arguments.  This function
+                         will be ignored if duration is not specified since in that case the
+                         progress bar can only be stopped programmatically, so any required function
+                         should be called by the same code after it resets the progress bar.
+scope      Object        The scope that is passed to the callback function (only applies when
+                         duration and fn are both passed).
+
    
+         *
+         * Example usage:
+         * 
    
+var p = new Ext.ProgressBar({
+   renderTo: 'my-el'
+});
+
+//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
+p.wait({
+   interval: 100, //bar will move fast!
+   duration: 5000,
+   increment: 15,
+   text: 'Updating...',
+   scope: this,
+   fn: function(){
+      Ext.fly('status').update('Done!');
+   }
+});
+
+//Or update indefinitely until some async action completes, then reset manually
+p.wait();
+myAction.on('complete', function(){
+    p.reset();
+    Ext.fly('status').update('Done!');
+});
+
    
+     * @param {Object} config (optional) Configuration options
+     * @return {Ext.ProgressBar} this
+     */
+    wait : function(o){
+        if(!this.waitTimer){
+            var scope = this;
+            o = o || {};
+            this.updateText(o.text);
+            this.waitTimer = Ext.TaskMgr.start({
+                run: function(i){
+                    var inc = o.increment || 10;
+                    i -= 1;
+                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
+                },
+                interval: o.interval || 1000,
+                duration: o.duration,
+                onStop: function(){
+                    if(o.fn){
+                        o.fn.apply(o.scope || this);
+                    }
+                    this.reset();
+                },
+                scope: scope
+            });
+        }
+        return this;
+    },
+
+    /**
+     * Returns true if the progress bar is currently in a {@link #wait} operation
+     * @return {Boolean} True if waiting, else false
+     */
+    isWaiting : function(){
+        return this.waitTimer !== null;
+    },
+
+    /**
+     * Updates the progress bar text.  If specified, textEl will be updated, otherwise the progress
+     * bar itself will display the updated text.
+     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
+     * @return {Ext.ProgressBar} this
+     */
+    updateText : function(text){
+        this.text = text || ' ';
+        if(this.rendered){
+            this.textEl.update(this.text);
+        }
+        return this;
+    },
+    
+    /**
+     * Synchronizes the inner bar width to the proper proportion of the total componet width based
+     * on the current progress {@link #value}.  This will be called automatically when the ProgressBar
+     * is resized by a layout, but if it is rendered auto width, this method can be called from
+     * another resize handler to sync the ProgressBar if necessary.
+     */
+    syncProgressBar : function(){
+        if(this.value){
+            this.updateProgress(this.value, this.text);
+        }
+        return this;
+    },
+
+    /**
+     * Sets the size of the progress bar.
+     * @param {Number} width The new width in pixels
+     * @param {Number} height The new height in pixels
+     * @return {Ext.ProgressBar} this
+     */
+    setSize : function(w, h){
+        Ext.ProgressBar.superclass.setSize.call(this, w, h);
+        if(this.textTopEl){
+            var inner = this.el.dom.firstChild;
+            this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
+        }
+        this.syncProgressBar();
+        return this;
+    },
+
+    /**
+     * Resets the progress bar value to 0 and text to empty string.  If hide = true, the progress
+     * bar will also be hidden (using the {@link #hideMode} property internally).
+     * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
+     * @return {Ext.ProgressBar} this
+     */
+    reset : function(hide){
+        this.updateProgress(0);
+        if(this.textTopEl){
+            this.textTopEl.addClass('x-hidden');
+        }
+        this.clearTimer();
+        if(hide === true){
+            this.hide();
+        }
+        return this;
+    },
+    
+    // private
+    clearTimer : function(){
+        if(this.waitTimer){
+            this.waitTimer.onStop = null; //prevent recursion
+            Ext.TaskMgr.stop(this.waitTimer);
+            this.waitTimer = null;
+        }
+    },
+    
+    onDestroy: function(){
+        this.clearTimer();
+        if(this.rendered){
+            if(this.textEl.isComposite){
+                this.textEl.clear();
+            }
+            Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
+        }
+        Ext.ProgressBar.superclass.onDestroy.call(this);
+    }
+});
 Ext.reg('progress', Ext.ProgressBar);/*
  * These classes are derivatives of the similarly named classes in the YUI Library.
  * The original license:
@@ -29962,1590 +29962,1590 @@ Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, {
     toString: function() {
         return ("DDTarget " + this.id);
     }
-});/**
- * @class Ext.dd.DragTracker
- * @extends Ext.util.Observable
- */
-Ext.dd.DragTracker = Ext.extend(Ext.util.Observable,  {
-    /**
-     * @cfg {Boolean} active
-	 * Defaults to false.
-	 */	
-    active: false,
-    /**
-     * @cfg {Number} tolerance
-	 * Defaults to 5.
-	 */	
-    tolerance: 5,
-    /**
-     * @cfg {Boolean/Number} autoStart
-	 * Defaults to false. Specify true to defer trigger start by 1000 ms.
-	 * Specify a Number for the number of milliseconds to defer trigger start.
-	 */	
-    autoStart: false,
-    
-    constructor : function(config){
-        Ext.apply(this, config);
-	    this.addEvents(
-	        /**
-	         * @event mousedown
-	         * @param {Object} this
-	         * @param {Object} e event object
-	         */
-	        'mousedown',
-	        /**
-	         * @event mouseup
-	         * @param {Object} this
-	         * @param {Object} e event object
-	         */
-	        'mouseup',
-	        /**
-	         * @event mousemove
-	         * @param {Object} this
-	         * @param {Object} e event object
-	         */
-	        'mousemove',
-	        /**
-	         * @event dragstart
-	         * @param {Object} this
-	         * @param {Object} startXY the page coordinates of the event
-	         */
-	        'dragstart',
-	        /**
-	         * @event dragend
-	         * @param {Object} this
-	         * @param {Object} e event object
-	         */
-	        'dragend',
-	        /**
-	         * @event drag
-	         * @param {Object} this
-	         * @param {Object} e event object
-	         */
-	        'drag'
-	    );
-	
-	    this.dragRegion = new Ext.lib.Region(0,0,0,0);
-	
-	    if(this.el){
-	        this.initEl(this.el);
-	    }
-        Ext.dd.DragTracker.superclass.constructor.call(this, config);
-    },
-
-    initEl: function(el){
-        this.el = Ext.get(el);
-        el.on('mousedown', this.onMouseDown, this,
-                this.delegate ? {delegate: this.delegate} : undefined);
-    },
-
-    destroy : function(){
-        this.el.un('mousedown', this.onMouseDown, this);
-    },
-
-    onMouseDown: function(e, target){
-        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
-            this.startXY = this.lastXY = e.getXY();
-            this.dragTarget = this.delegate ? target : this.el.dom;
-            if(this.preventDefault !== false){
-                e.preventDefault();
-            }
-            var doc = Ext.getDoc();
-            doc.on('mouseup', this.onMouseUp, this);
-            doc.on('mousemove', this.onMouseMove, this);
-            doc.on('selectstart', this.stopSelect, this);
-            if(this.autoStart){
-                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
-            }
-        }
-    },
-
-    onMouseMove: function(e, target){
-        // HACK: IE hack to see if button was released outside of window. */
-        if(this.active && Ext.isIE && !e.browserEvent.button){
-            e.preventDefault();
-            this.onMouseUp(e);
-            return;
-        }
-
-        e.preventDefault();
-        var xy = e.getXY(), s = this.startXY;
-        this.lastXY = xy;
-        if(!this.active){
-            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
-                this.triggerStart();
-            }else{
-                return;
-            }
-        }
-        this.fireEvent('mousemove', this, e);
-        this.onDrag(e);
-        this.fireEvent('drag', this, e);
-    },
-
-    onMouseUp: function(e){
-        var doc = Ext.getDoc();
-        doc.un('mousemove', this.onMouseMove, this);
-        doc.un('mouseup', this.onMouseUp, this);
-        doc.un('selectstart', this.stopSelect, this);
-        e.preventDefault();
-        this.clearStart();
-        var wasActive = this.active;
-        this.active = false;
-        delete this.elRegion;
-        this.fireEvent('mouseup', this, e);
-        if(wasActive){
-            this.onEnd(e);
-            this.fireEvent('dragend', this, e);
-        }
-    },
-
-    triggerStart: function(isTimer){
-        this.clearStart();
-        this.active = true;
-        this.onStart(this.startXY);
-        this.fireEvent('dragstart', this, this.startXY);
-    },
-
-    clearStart : function(){
-        if(this.timer){
-            clearTimeout(this.timer);
-            delete this.timer;
-        }
-    },
-
-    stopSelect : function(e){
-        e.stopEvent();
-        return false;
-    },
-
-    onBeforeStart : function(e){
-
-    },
-
-    onStart : function(xy){
-
-    },
-
-    onDrag : function(e){
-
-    },
-
-    onEnd : function(e){
-
-    },
-
-    getDragTarget : function(){
-        return this.dragTarget;
-    },
-
-    getDragCt : function(){
-        return this.el;
-    },
-
-    getXY : function(constrain){
-        return constrain ?
-               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
-    },
-
-    getOffset : function(constrain){
-        var xy = this.getXY(constrain);
-        var s = this.startXY;
-        return [s[0]-xy[0], s[1]-xy[1]];
-    },
-
-    constrainModes: {
-        'point' : function(xy){
-
-            if(!this.elRegion){
-                this.elRegion = this.getDragCt().getRegion();
-            }
-
-            var dr = this.dragRegion;
-
-            dr.left = xy[0];
-            dr.top = xy[1];
-            dr.right = xy[0];
-            dr.bottom = xy[1];
-
-            dr.constrainTo(this.elRegion);
-
-            return [dr.left, dr.top];
-        }
-    }
-});/**
- * @class Ext.dd.ScrollManager
- * 
    Provides automatic scrolling of overflow regions in the page during drag operations.
    
- * 
    The ScrollManager configs will be used as the defaults for any scroll container registered with it,
- * but you can also override most of the configs per scroll container by adding a 
- * ddScrollConfig object to the target element that contains these properties: {@link #hthresh},
- * {@link #vthresh}, {@link #increment} and {@link #frequency}.  Example usage:
- * 
    
-var el = Ext.get('scroll-ct');
-el.ddScrollConfig = {
-    vthresh: 50,
-    hthresh: -1,
-    frequency: 100,
-    increment: 200
-};
-Ext.dd.ScrollManager.register(el);
-
    
- * Note: This class uses "Point Mode" and is untested in "Intersect Mode".
- * @singleton
- */
-Ext.dd.ScrollManager = function(){
-    var ddm = Ext.dd.DragDropMgr;
-    var els = {};
-    var dragEl = null;
-    var proc = {};
-    
-    var onStop = function(e){
-        dragEl = null;
-        clearProc();
-    };
-    
-    var triggerRefresh = function(){
-        if(ddm.dragCurrent){
-             ddm.refreshCache(ddm.dragCurrent.groups);
-        }
-    };
-    
-    var doScroll = function(){
-        if(ddm.dragCurrent){
-            var dds = Ext.dd.ScrollManager;
-            var inc = proc.el.ddScrollConfig ?
-                      proc.el.ddScrollConfig.increment : dds.increment;
-            if(!dds.animate){
-                if(proc.el.scroll(proc.dir, inc)){
-                    triggerRefresh();
-                }
-            }else{
-                proc.el.scroll(proc.dir, inc, true, dds.animDuration, triggerRefresh);
-            }
-        }
-    };
-    
-    var clearProc = function(){
-        if(proc.id){
-            clearInterval(proc.id);
-        }
-        proc.id = 0;
-        proc.el = null;
-        proc.dir = "";
-    };
-    
-    var startProc = function(el, dir){
-        clearProc();
-        proc.el = el;
-        proc.dir = dir;
-        var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ? 
-                el.ddScrollConfig.frequency : Ext.dd.ScrollManager.frequency;
-        proc.id = setInterval(doScroll, freq);
-    };
-    
-    var onFire = function(e, isDrop){
-        if(isDrop || !ddm.dragCurrent){ return; }
-        var dds = Ext.dd.ScrollManager;
-        if(!dragEl || dragEl != ddm.dragCurrent){
-            dragEl = ddm.dragCurrent;
-            // refresh regions on drag start
-            dds.refreshCache();
-        }
-        
-        var xy = Ext.lib.Event.getXY(e);
-        var pt = new Ext.lib.Point(xy[0], xy[1]);
-        for(var id in els){
-            var el = els[id], r = el._region;
-            var c = el.ddScrollConfig ? el.ddScrollConfig : dds;
-            if(r && r.contains(pt) && el.isScrollable()){
-                if(r.bottom - pt.y <= c.vthresh){
-                    if(proc.el != el){
-                        startProc(el, "down");
-                    }
-                    return;
-                }else if(r.right - pt.x <= c.hthresh){
-                    if(proc.el != el){
-                        startProc(el, "left");
-                    }
-                    return;
-                }else if(pt.y - r.top <= c.vthresh){
-                    if(proc.el != el){
-                        startProc(el, "up");
-                    }
-                    return;
-                }else if(pt.x - r.left <= c.hthresh){
-                    if(proc.el != el){
-                        startProc(el, "right");
-                    }
-                    return;
-                }
-            }
-        }
-        clearProc();
-    };
-    
-    ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
-    ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
-    
-    return {
-        /**
-         * Registers new overflow element(s) to auto scroll
-         * @param {Mixed/Array} el The id of or the element to be scrolled or an array of either
-         */
-        register : function(el){
-            if(Ext.isArray(el)){
-                for(var i = 0, len = el.length; i < len; i++) {
-                	this.register(el[i]);
-                }
-            }else{
-                el = Ext.get(el);
-                els[el.id] = el;
-            }
-        },
-        
-        /**
-         * Unregisters overflow element(s) so they are no longer scrolled
-         * @param {Mixed/Array} el The id of or the element to be removed or an array of either
-         */
-        unregister : function(el){
-            if(Ext.isArray(el)){
-                for(var i = 0, len = el.length; i < len; i++) {
-                	this.unregister(el[i]);
-                }
-            }else{
-                el = Ext.get(el);
-                delete els[el.id];
-            }
-        },
-        
-        /**
-         * The number of pixels from the top or bottom edge of a container the pointer needs to be to
-         * trigger scrolling (defaults to 25)
-         * @type Number
-         */
-        vthresh : 25,
-        /**
-         * The number of pixels from the right or left edge of a container the pointer needs to be to
-         * trigger scrolling (defaults to 25)
-         * @type Number
-         */
-        hthresh : 25,
-
-        /**
-         * The number of pixels to scroll in each scroll increment (defaults to 50)
-         * @type Number
-         */
-        increment : 100,
-        
-        /**
-         * The frequency of scrolls in milliseconds (defaults to 500)
-         * @type Number
-         */
-        frequency : 500,
-        
-        /**
-         * True to animate the scroll (defaults to true)
-         * @type Boolean
-         */
-        animate: true,
-        
-        /**
-         * The animation duration in seconds - 
-         * MUST BE less than Ext.dd.ScrollManager.frequency! (defaults to .4)
-         * @type Number
-         */
-        animDuration: .4,
-        
-        /**
-         * Manually trigger a cache refresh.
-         */
-        refreshCache : function(){
-            for(var id in els){
-                if(typeof els[id] == 'object'){ // for people extending the object prototype
-                    els[id]._region = els[id].getRegion();
-                }
-            }
-        }
-    };
-}();/**
- * @class Ext.dd.Registry
- * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
- * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
- * @singleton
- */
-Ext.dd.Registry = function(){
-    var elements = {}; 
-    var handles = {}; 
-    var autoIdSeed = 0;
-
-    var getId = function(el, autogen){
-        if(typeof el == "string"){
-            return el;
-        }
-        var id = el.id;
-        if(!id && autogen !== false){
-            id = "extdd-" + (++autoIdSeed);
-            el.id = id;
-        }
-        return id;
-    };
-    
-    return {
-    /**
-     * Resgister a drag drop element
-     * @param {String/HTMLElement) element The id or DOM node to register
-     * @param {Object} data (optional) An custom data object that will be passed between the elements that are involved
-     * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
-     * knows how to interpret, plus there are some specific properties known to the Registry that should be
-     * populated in the data object (if applicable):
-     * 
    -Value      Description
    
----------  ------------------------------------------
    
-handles    Array of DOM nodes that trigger dragging
    
-           for the element being registered
    
-isHandle   True if the element passed in triggers
    
-           dragging itself, else false
-
    
-     */
-        register : function(el, data){
-            data = data || {};
-            if(typeof el == "string"){
-                el = document.getElementById(el);
-            }
-            data.ddel = el;
-            elements[getId(el)] = data;
-            if(data.isHandle !== false){
-                handles[data.ddel.id] = data;
-            }
-            if(data.handles){
-                var hs = data.handles;
-                for(var i = 0, len = hs.length; i < len; i++){
-                	handles[getId(hs[i])] = data;
-                }
-            }
-        },
-
-    /**
-     * Unregister a drag drop element
-     * @param {String/HTMLElement) element The id or DOM node to unregister
-     */
-        unregister : function(el){
-            var id = getId(el, false);
-            var data = elements[id];
-            if(data){
-                delete elements[id];
-                if(data.handles){
-                    var hs = data.handles;
-                    for(var i = 0, len = hs.length; i < len; i++){
-                    	delete handles[getId(hs[i], false)];
-                    }
-                }
-            }
-        },
-
-    /**
-     * Returns the handle registered for a DOM Node by id
-     * @param {String/HTMLElement} id The DOM node or id to look up
-     * @return {Object} handle The custom handle data
-     */
-        getHandle : function(id){
-            if(typeof id != "string"){ // must be element?
-                id = id.id;
-            }
-            return handles[id];
-        },
-
-    /**
-     * Returns the handle that is registered for the DOM node that is the target of the event
-     * @param {Event} e The event
-     * @return {Object} handle The custom handle data
-     */
-        getHandleFromEvent : function(e){
-            var t = Ext.lib.Event.getTarget(e);
-            return t ? handles[t.id] : null;
-        },
-
-    /**
-     * Returns a custom data object that is registered for a DOM node by id
-     * @param {String/HTMLElement} id The DOM node or id to look up
-     * @return {Object} data The custom data
-     */
-        getTarget : function(id){
-            if(typeof id != "string"){ // must be element?
-                id = id.id;
-            }
-            return elements[id];
-        },
-
-    /**
-     * Returns a custom data object that is registered for the DOM node that is the target of the event
-     * @param {Event} e The event
-     * @return {Object} data The custom data
-     */
-        getTargetFromEvent : function(e){
-            var t = Ext.lib.Event.getTarget(e);
-            return t ? elements[t.id] || handles[t.id] : null;
-        }
-    };
-}();/**
- * @class Ext.dd.StatusProxy
- * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
- * default drag proxy used by all Ext.dd components.
- * @constructor
- * @param {Object} config
- */
-Ext.dd.StatusProxy = function(config){
-    Ext.apply(this, config);
-    this.id = this.id || Ext.id();
-    this.el = new Ext.Layer({
-        dh: {
-            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
-                {tag: "div", cls: "x-dd-drop-icon"},
-                {tag: "div", cls: "x-dd-drag-ghost"}
-            ]
-        }, 
-        shadow: !config || config.shadow !== false
-    });
-    this.ghost = Ext.get(this.el.dom.childNodes[1]);
-    this.dropStatus = this.dropNotAllowed;
-};
-
-Ext.dd.StatusProxy.prototype = {
-    /**
-     * @cfg {String} dropAllowed
-     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
-     */
-    dropNotAllowed : "x-dd-drop-nodrop",
-
-    /**
-     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
-     * over the current target element.
-     * @param {String} cssClass The css class for the new drop status indicator image
-     */
-    setStatus : function(cssClass){
-        cssClass = cssClass || this.dropNotAllowed;
-        if(this.dropStatus != cssClass){
-            this.el.replaceClass(this.dropStatus, cssClass);
-            this.dropStatus = cssClass;
-        }
-    },
-
-    /**
-     * Resets the status indicator to the default dropNotAllowed value
-     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
-     */
-    reset : function(clearGhost){
-        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
-        this.dropStatus = this.dropNotAllowed;
-        if(clearGhost){
-            this.ghost.update("");
-        }
-    },
-
-    /**
-     * Updates the contents of the ghost element
-     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
-     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
-     */
-    update : function(html){
-        if(typeof html == "string"){
-            this.ghost.update(html);
-        }else{
-            this.ghost.update("");
-            html.style.margin = "0";
-            this.ghost.dom.appendChild(html);
-        }
-        var el = this.ghost.dom.firstChild; 
-        if(el){
-            Ext.fly(el).setStyle('float', 'none');
-        }
-    },
-
-    /**
-     * Returns the underlying proxy {@link Ext.Layer}
-     * @return {Ext.Layer} el
-    */
-    getEl : function(){
-        return this.el;
-    },
-
-    /**
-     * Returns the ghost element
-     * @return {Ext.Element} el
-     */
-    getGhost : function(){
-        return this.ghost;
-    },
-
-    /**
-     * Hides the proxy
-     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
-     */
-    hide : function(clear){
-        this.el.hide();
-        if(clear){
-            this.reset(true);
-        }
-    },
-
-    /**
-     * Stops the repair animation if it's currently running
-     */
-    stop : function(){
-        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
-            this.anim.stop();
-        }
-    },
-
-    /**
-     * Displays this proxy
-     */
-    show : function(){
-        this.el.show();
-    },
-
-    /**
-     * Force the Layer to sync its shadow and shim positions to the element
-     */
-    sync : function(){
-        this.el.sync();
-    },
-
-    /**
-     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
-     * invalid drop operation by the item being dragged.
-     * @param {Array} xy The XY position of the element ([x, y])
-     * @param {Function} callback The function to call after the repair is complete.
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
-     */
-    repair : function(xy, callback, scope){
-        this.callback = callback;
-        this.scope = scope;
-        if(xy && this.animRepair !== false){
-            this.el.addClass("x-dd-drag-repair");
-            this.el.hideUnders(true);
-            this.anim = this.el.shift({
-                duration: this.repairDuration || .5,
-                easing: 'easeOut',
-                xy: xy,
-                stopFx: true,
-                callback: this.afterRepair,
-                scope: this
-            });
-        }else{
-            this.afterRepair();
-        }
-    },
-
-    // private
-    afterRepair : function(){
-        this.hide(true);
-        if(typeof this.callback == "function"){
-            this.callback.call(this.scope || this);
-        }
-        this.callback = null;
-        this.scope = null;
-    },
-    
-    destroy: function(){
-        Ext.destroy(this.ghost, this.el);    
-    }
-};/**
- * @class Ext.dd.DragSource
- * @extends Ext.dd.DDProxy
- * A simple class that provides the basic implementation needed to make any element draggable.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
- */
-Ext.dd.DragSource = function(el, config){
-    this.el = Ext.get(el);
-    if(!this.dragData){
-        this.dragData = {};
-    }
-    
-    Ext.apply(this, config);
-    
-    if(!this.proxy){
-        this.proxy = new Ext.dd.StatusProxy();
-    }
-    Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
-          {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
-    
-    this.dragging = false;
-};
-
-Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
-    /**
-     * @cfg {String} ddGroup
-     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
-     * interact with other drag drop objects in the same group (defaults to undefined).
-     */
-    /**
-     * @cfg {String} dropAllowed
-     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
-     */
-    dropNotAllowed : "x-dd-drop-nodrop",
-
-    /**
-     * Returns the data object associated with this drag source
-     * @return {Object} data An object containing arbitrary data
-     */
-    getDragData : function(e){
-        return this.dragData;
-    },
-
-    // private
-    onDragEnter : function(e, id){
-        var target = Ext.dd.DragDropMgr.getDDById(id);
-        this.cachedTarget = target;
-        if(this.beforeDragEnter(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                var status = target.notifyEnter(this, e, this.dragData);
-                this.proxy.setStatus(status);
-            }else{
-                this.proxy.setStatus(this.dropAllowed);
-            }
-            
-            if(this.afterDragEnter){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * when the dragged item enters the drop target by providing an implementation.
-                 * @param {Ext.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragEnter
-                 */
-                this.afterDragEnter(target, e, id);
-            }
-        }
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action
-     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
-     * @param {Ext.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
-     */
-    beforeDragEnter : function(target, e, id){
-        return true;
-    },
-
-    // private
-    alignElWithMouse: function() {
-        Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
-        this.proxy.sync();
-    },
-
-    // private
-    onDragOver : function(e, id){
-        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragOver(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                var status = target.notifyOver(this, e, this.dragData);
-                this.proxy.setStatus(status);
-            }
-
-            if(this.afterDragOver){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * while the dragged item is over the drop target by providing an implementation.
-                 * @param {Ext.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragOver
-                 */
-                this.afterDragOver(target, e, id);
-            }
-        }
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action
-     * while the dragged item is over the drop target and optionally cancel the onDragOver.
-     * @param {Ext.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
-     */
-    beforeDragOver : function(target, e, id){
-        return true;
-    },
-
-    // private
-    onDragOut : function(e, id){
-        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragOut(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                target.notifyOut(this, e, this.dragData);
-            }
-            this.proxy.reset();
-            if(this.afterDragOut){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * after the dragged item is dragged out of the target without dropping.
-                 * @param {Ext.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragOut
-                 */
-                this.afterDragOut(target, e, id);
-            }
-        }
-        this.cachedTarget = null;
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action before the dragged
-     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
-     * @param {Ext.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
-     */
-    beforeDragOut : function(target, e, id){
-        return true;
-    },
-    
-    // private
-    onDragDrop : function(e, id){
-        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragDrop(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
-                    this.onValidDrop(target, e, id);
-                }else{
-                    this.onInvalidDrop(target, e, id);
-                }
-            }else{
-                this.onValidDrop(target, e, id);
-            }
-            
-            if(this.afterDragDrop){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * after a valid drag drop has occurred by providing an implementation.
-                 * @param {Ext.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dropped element
-                 * @method afterDragDrop
-                 */
-                this.afterDragDrop(target, e, id);
-            }
-        }
-        delete this.cachedTarget;
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action before the dragged
-     * item is dropped onto the target and optionally cancel the onDragDrop.
-     * @param {Ext.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
-     */
-    beforeDragDrop : function(target, e, id){
-        return true;
-    },
-
-    // private
-    onValidDrop : function(target, e, id){
-        this.hideProxy();
-        if(this.afterValidDrop){
-            /**
-             * An empty function by default, but provided so that you can perform a custom action
-             * after a valid drop has occurred by providing an implementation.
-             * @param {Object} target The target DD 
-             * @param {Event} e The event object
-             * @param {String} id The id of the dropped element
-             * @method afterInvalidDrop
-             */
-            this.afterValidDrop(target, e, id);
-        }
-    },
-
-    // private
-    getRepairXY : function(e, data){
-        return this.el.getXY();  
-    },
-
-    // private
-    onInvalidDrop : function(target, e, id){
-        this.beforeInvalidDrop(target, e, id);
-        if(this.cachedTarget){
-            if(this.cachedTarget.isNotifyTarget){
-                this.cachedTarget.notifyOut(this, e, this.dragData);
-            }
-            this.cacheTarget = null;
-        }
-        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
-
-        if(this.afterInvalidDrop){
-            /**
-             * An empty function by default, but provided so that you can perform a custom action
-             * after an invalid drop has occurred by providing an implementation.
-             * @param {Event} e The event object
-             * @param {String} id The id of the dropped element
-             * @method afterInvalidDrop
-             */
-            this.afterInvalidDrop(e, id);
-        }
-    },
-
-    // private
-    afterRepair : function(){
-        if(Ext.enableFx){
-            this.el.highlight(this.hlColor || "c3daf9");
-        }
-        this.dragging = false;
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action after an invalid
-     * drop has occurred.
-     * @param {Ext.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
-     */
-    beforeInvalidDrop : function(target, e, id){
-        return true;
-    },
-
-    // private
-    handleMouseDown : function(e){
-        if(this.dragging) {
-            return;
-        }
-        var data = this.getDragData(e);
-        if(data && this.onBeforeDrag(data, e) !== false){
-            this.dragData = data;
-            this.proxy.stop();
-            Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
-        } 
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action before the initial
-     * drag event begins and optionally cancel it.
-     * @param {Object} data An object containing arbitrary data to be shared with drop targets
-     * @param {Event} e The event object
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
-     */
-    onBeforeDrag : function(data, e){
-        return true;
-    },
-
-    /**
-     * An empty function by default, but provided so that you can perform a custom action once the initial
-     * drag event has begun.  The drag cannot be canceled from this function.
-     * @param {Number} x The x position of the click on the dragged object
-     * @param {Number} y The y position of the click on the dragged object
-     */
-    onStartDrag : Ext.emptyFn,
-
-    // private override
-    startDrag : function(x, y){
-        this.proxy.reset();
-        this.dragging = true;
-        this.proxy.update("");
-        this.onInitDrag(x, y);
-        this.proxy.show();
-    },
-
-    // private
-    onInitDrag : function(x, y){
-        var clone = this.el.dom.cloneNode(true);
-        clone.id = Ext.id(); // prevent duplicate ids
-        this.proxy.update(clone);
-        this.onStartDrag(x, y);
-        return true;
-    },
-
-    /**
-     * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
-     * @return {Ext.dd.StatusProxy} proxy The StatusProxy
-     */
-    getProxy : function(){
-        return this.proxy;  
-    },
-
-    /**
-     * Hides the drag source's {@link Ext.dd.StatusProxy}
-     */
-    hideProxy : function(){
-        this.proxy.hide();  
-        this.proxy.reset(true);
-        this.dragging = false;
-    },
-
-    // private
-    triggerCacheRefresh : function(){
-        Ext.dd.DDM.refreshCache(this.groups);
-    },
-
-    // private - override to prevent hiding
-    b4EndDrag: function(e) {
-    },
-
-    // private - override to prevent moving
-    endDrag : function(e){
-        this.onEndDrag(this.dragData, e);
-    },
-
-    // private
-    onEndDrag : function(data, e){
-    },
-    
-    // private - pin to cursor
-    autoOffset : function(x, y) {
-        this.setDelta(-12, -20);
-    },
-    
-    destroy: function(){
-        Ext.dd.DragSource.superclass.destroy.call(this);
-        Ext.destroy(this.proxy);
-    }
-});/**
- * @class Ext.dd.DropTarget
- * @extends Ext.dd.DDTarget
- * A simple class that provides the basic implementation needed to make any element a drop target that can have
- * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
- */
-Ext.dd.DropTarget = function(el, config){
-    this.el = Ext.get(el);
-    
-    Ext.apply(this, config);
-    
-    if(this.containerScroll){
-        Ext.dd.ScrollManager.register(this.el);
-    }
-    
-    Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
-          {isTarget: true});
-
-};
-
-Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
-    /**
-     * @cfg {String} ddGroup
-     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
-     * interact with other drag drop objects in the same group (defaults to undefined).
-     */
-    /**
-     * @cfg {String} overClass
-     * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
-     */
-    /**
-     * @cfg {String} dropAllowed
-     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
-     */
-    dropNotAllowed : "x-dd-drop-nodrop",
-
-    // private
-    isTarget : true,
-
-    // private
-    isNotifyTarget : true,
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
-     * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
-     * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    notifyEnter : function(dd, e, data){
-        if(this.overClass){
-            this.el.addClass(this.overClass);
-        }
-        return this.dropAllowed;
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
-     * This method will be called on every mouse movement while the drag source is over the drop target.
-     * This default implementation simply returns the dropAllowed config value.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    notifyOver : function(dd, e, data){
-        return this.dropAllowed;
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
-     * out of the target without dropping.  This default implementation simply removes the CSS class specified by
-     * overClass (if any) from the drop element.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     */
-    notifyOut : function(dd, e, data){
-        if(this.overClass){
-            this.el.removeClass(this.overClass);
-        }
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
-     * been dropped on it.  This method has no default implementation and returns false, so you must provide an
-     * implementation that does something to process the drop event and returns true so that the drag source's
-     * repair action does not run.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {Boolean} True if the drop was valid, else false
-     */
-    notifyDrop : function(dd, e, data){
-        return false;
-    }
-});/**
- * @class Ext.dd.DragZone
- * @extends Ext.dd.DragSource
- * 
    This class provides a container DD instance that allows dragging of multiple child source nodes.
    
- * 
    This class does not move the drag target nodes, but a proxy element which may contain
- * any DOM structure you wish. The DOM element to show in the proxy is provided by either a
- * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
    
- * 
    If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
- * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class
- * is the most efficient way to "activate" those nodes.
    
- * 
    By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.
- * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure
- * the DragZone with  an implementation of the {@link #getDragData} method which interrogates the passed
- * mouse event to see if it has taken place within an element, or class of elements. This is easily done
- * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
- * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following
- * technique. Knowledge of the use of the DataView is required:
    
-myDataView.on('render', function(v) {
-    myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
-
-//      On receipt of a mousedown event, see if it is within a DataView node.
-//      Return a drag data object if so.
-        getDragData: function(e) {
-
-//          Use the DataView's own itemSelector (a mandatory property) to
-//          test if the mousedown is within one of the DataView's nodes.
-            var sourceEl = e.getTarget(v.itemSelector, 10);
-
-//          If the mousedown is within a DataView node, clone the node to produce
-//          a ddel element for use by the drag proxy. Also add application data
-//          to the returned data object.
-            if (sourceEl) {
-                d = sourceEl.cloneNode(true);
-                d.id = Ext.id();
-                return {
-                    ddel: d,
-                    sourceEl: sourceEl,
-                    repairXY: Ext.fly(sourceEl).getXY(),
-                    sourceStore: v.store,
-                    draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
-                }
-            }
-        },
-
-//      Provide coordinates for the proxy to slide back to on failed drag.
-//      This is the original XY coordinates of the draggable element captured
-//      in the getDragData method.
-        getRepairXY: function() {
-            return this.dragData.repairXY;
-        }
-    });
-});
    
- * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which
- * cooperates with this DragZone.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
- */
-Ext.dd.DragZone = function(el, config){
-    Ext.dd.DragZone.superclass.constructor.call(this, el, config);
-    if(this.containerScroll){
-        Ext.dd.ScrollManager.register(this.el);
-    }
-};
-
-Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {
-    /**
-     * This property contains the data representing the dragged object. This data is set up by the implementation
-     * of the {@link #getDragData} method. It must contain a ddel property, but can contain
-     * any other data according to the application's needs.
-     * @type Object
-     * @property dragData
-     */
-    /**
-     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
-     * for auto scrolling during drag operations.
-     */
-    /**
-     * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
-     * method after a failed drop (defaults to "c3daf9" - light blue)
-     */
-
-    /**
-     * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
-     * for a valid target to drag based on the mouse down. Override this method
-     * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
-     * object has a "ddel" attribute (with an HTML Element) for other functions to work.
-     * @param {EventObject} e The mouse down event
-     * @return {Object} The dragData
-     */
-    getDragData : function(e){
-        return Ext.dd.Registry.getHandleFromEvent(e);
-    },
-    
-    /**
-     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
-     * this.dragData.ddel
-     * @param {Number} x The x position of the click on the dragged object
-     * @param {Number} y The y position of the click on the dragged object
-     * @return {Boolean} true to continue the drag, false to cancel
-     */
-    onInitDrag : function(x, y){
-        this.proxy.update(this.dragData.ddel.cloneNode(true));
-        this.onStartDrag(x, y);
-        return true;
-    },
-    
-    /**
-     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
-     */
-    afterRepair : function(){
-        if(Ext.enableFx){
-            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
-        }
-        this.dragging = false;
-    },
-
-    /**
-     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
-     * the XY of this.dragData.ddel
-     * @param {EventObject} e The mouse up event
-     * @return {Array} The xy location (e.g. [100, 200])
-     */
-    getRepairXY : function(e){
-        return Ext.Element.fly(this.dragData.ddel).getXY();  
-    }
-});/**
- * @class Ext.dd.DropZone
- * @extends Ext.dd.DropTarget
- * 
    This class provides a container DD instance that allows dropping on multiple child target nodes.
    
- * 
    By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
- * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
- * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
- * mouse event to see if it has taken place within an element, or class of elements. This is easily done
- * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
- * {@link Ext.DomQuery} selector.
    
- * 
    Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
- * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
- * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
- * of these methods to provide application-specific behaviour for these events to update both
- * application state, and UI state.
    
- * 
    For example to make a GridPanel a cooperating target with the example illustrated in
- * {@link Ext.dd.DragZone DragZone}, the following technique might be used:
    
-myGridPanel.on('render', function() {
-    myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
-
-//      If the mouse is over a grid row, return that node. This is
-//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
-        getTargetFromEvent: function(e) {
-            return e.getTarget(myGridPanel.getView().rowSelector);
-        },
-
-//      On entry into a target node, highlight that node.
-        onNodeEnter : function(target, dd, e, data){ 
-            Ext.fly(target).addClass('my-row-highlight-class');
-        },
-
-//      On exit from a target node, unhighlight that node.
-        onNodeOut : function(target, dd, e, data){ 
-            Ext.fly(target).removeClass('my-row-highlight-class');
-        },
-
-//      While over a target node, return the default drop allowed class which
-//      places a "tick" icon into the drag proxy.
-        onNodeOver : function(target, dd, e, data){ 
-            return Ext.dd.DropZone.prototype.dropAllowed;
-        },
-
-//      On node drop we can interrogate the target to find the underlying
-//      application object that is the real target of the dragged data.
-//      In this case, it is a Record in the GridPanel's Store.
-//      We can use the data set up by the DragZone's getDragData method to read
-//      any data we decided to attach in the DragZone's getDragData method.
-        onNodeDrop : function(target, dd, e, data){
-            var rowIndex = myGridPanel.getView().findRowIndex(target);
-            var r = myGridPanel.getStore().getAt(rowIndex);
-            Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
-                ' on Record id ' + r.id);
-            return true;
-        }
-    });
-}
-
    
- * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
- * cooperates with this DropZone.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
- */
-Ext.dd.DropZone = function(el, config){
-    Ext.dd.DropZone.superclass.constructor.call(this, el, config);
-};
-
-Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
-    /**
-     * Returns a custom data object associated with the DOM node that is the target of the event.  By default
-     * this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
-     * provide your own custom lookup.
-     * @param {Event} e The event
-     * @return {Object} data The custom data
-     */
-    getTargetFromEvent : function(e){
-        return Ext.dd.Registry.getTargetFromEvent(e);
-    },
-
-    /**
-     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
-     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
-     * This method has no default implementation and should be overridden to provide
-     * node-specific processing if necessary.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     */
-    onNodeEnter : function(n, dd, e, data){
-        
-    },
-
-    /**
-     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
-     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
-     * The default implementation returns this.dropNotAllowed, so it should be
-     * overridden to provide the proper feedback.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    onNodeOver : function(n, dd, e, data){
-        return this.dropAllowed;
-    },
-
-    /**
-     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
-     * the drop node without dropping.  This method has no default implementation and should be overridden to provide
-     * node-specific processing if necessary.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     */
-    onNodeOut : function(n, dd, e, data){
-        
-    },
-
-    /**
-     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
-     * the drop node.  The default implementation returns false, so it should be overridden to provide the
-     * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {Boolean} True if the drop was valid, else false
-     */
-    onNodeDrop : function(n, dd, e, data){
-        return false;
-    },
-
-    /**
-     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
-     * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
-     * it should be overridden to provide the proper feedback if necessary.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    onContainerOver : function(dd, e, data){
-        return this.dropNotAllowed;
-    },
-
-    /**
-     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
-     * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
-     * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
-     * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {Boolean} True if the drop was valid, else false
-     */
-    onContainerDrop : function(dd, e, data){
-        return false;
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
-     * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
-     * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
-     * you should override this method and provide a custom implementation.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    notifyEnter : function(dd, e, data){
-        return this.dropNotAllowed;
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
-     * This method will be called on every mouse movement while the drag source is over the drop zone.
-     * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
-     * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
-     * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
-     * registered node, it will call {@link #onContainerOver}.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Ext.dd.StatusProxy} can be updated
-     */
-    notifyOver : function(dd, e, data){
-        var n = this.getTargetFromEvent(e);
-        if(!n){ // not over valid drop target
-            if(this.lastOverNode){
-                this.onNodeOut(this.lastOverNode, dd, e, data);
-                this.lastOverNode = null;
-            }
-            return this.onContainerOver(dd, e, data);
-        }
-        if(this.lastOverNode != n){
-            if(this.lastOverNode){
-                this.onNodeOut(this.lastOverNode, dd, e, data);
-            }
-            this.onNodeEnter(n, dd, e, data);
-            this.lastOverNode = n;
-        }
-        return this.onNodeOver(n, dd, e, data);
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
-     * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
-     * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag zone
-     */
-    notifyOut : function(dd, e, data){
-        if(this.lastOverNode){
-            this.onNodeOut(this.lastOverNode, dd, e, data);
-            this.lastOverNode = null;
-        }
-    },
-
-    /**
-     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
-     * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
-     * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
-     * otherwise it will call {@link #onContainerDrop}.
-     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     * @return {Boolean} True if the drop was valid, else false
-     */
-    notifyDrop : function(dd, e, data){
-        if(this.lastOverNode){
-            this.onNodeOut(this.lastOverNode, dd, e, data);
-            this.lastOverNode = null;
-        }
-        var n = this.getTargetFromEvent(e);
-        return n ?
-            this.onNodeDrop(n, dd, e, data) :
-            this.onContainerDrop(dd, e, data);
-    },
-
-    // private
-    triggerCacheRefresh : function(){
-        Ext.dd.DDM.refreshCache(this.groups);
-    }  
-});/**
- * @class Ext.Element
- */
-Ext.Element.addMethods({
-    /**
-     * Initializes a {@link Ext.dd.DD} drag drop object for this element.
-     * @param {String} group The group the DD object is member of
-     * @param {Object} config The DD config object
-     * @param {Object} overrides An object containing methods to override/implement on the DD object
-     * @return {Ext.dd.DD} The DD object
-     */
-    initDD : function(group, config, overrides){
-        var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
-        return Ext.apply(dd, overrides);
-    },
-
-    /**
-     * Initializes a {@link Ext.dd.DDProxy} object for this element.
-     * @param {String} group The group the DDProxy object is member of
-     * @param {Object} config The DDProxy config object
-     * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
-     * @return {Ext.dd.DDProxy} The DDProxy object
-     */
-    initDDProxy : function(group, config, overrides){
-        var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
-        return Ext.apply(dd, overrides);
-    },
-
-    /**
-     * Initializes a {@link Ext.dd.DDTarget} object for this element.
-     * @param {String} group The group the DDTarget object is member of
-     * @param {Object} config The DDTarget config object
-     * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
-     * @return {Ext.dd.DDTarget} The DDTarget object
-     */
-    initDDTarget : function(group, config, overrides){
-        var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
-        return Ext.apply(dd, overrides);
-    }
+});/**
+ * @class Ext.dd.DragTracker
+ * @extends Ext.util.Observable
+ */
+Ext.dd.DragTracker = Ext.extend(Ext.util.Observable,  {
+    /**
+     * @cfg {Boolean} active
+	 * Defaults to false.
+	 */	
+    active: false,
+    /**
+     * @cfg {Number} tolerance
+	 * Defaults to 5.
+	 */	
+    tolerance: 5,
+    /**
+     * @cfg {Boolean/Number} autoStart
+	 * Defaults to false. Specify true to defer trigger start by 1000 ms.
+	 * Specify a Number for the number of milliseconds to defer trigger start.
+	 */	
+    autoStart: false,
+    
+    constructor : function(config){
+        Ext.apply(this, config);
+	    this.addEvents(
+	        /**
+	         * @event mousedown
+	         * @param {Object} this
+	         * @param {Object} e event object
+	         */
+	        'mousedown',
+	        /**
+	         * @event mouseup
+	         * @param {Object} this
+	         * @param {Object} e event object
+	         */
+	        'mouseup',
+	        /**
+	         * @event mousemove
+	         * @param {Object} this
+	         * @param {Object} e event object
+	         */
+	        'mousemove',
+	        /**
+	         * @event dragstart
+	         * @param {Object} this
+	         * @param {Object} startXY the page coordinates of the event
+	         */
+	        'dragstart',
+	        /**
+	         * @event dragend
+	         * @param {Object} this
+	         * @param {Object} e event object
+	         */
+	        'dragend',
+	        /**
+	         * @event drag
+	         * @param {Object} this
+	         * @param {Object} e event object
+	         */
+	        'drag'
+	    );
+	
+	    this.dragRegion = new Ext.lib.Region(0,0,0,0);
+	
+	    if(this.el){
+	        this.initEl(this.el);
+	    }
+        Ext.dd.DragTracker.superclass.constructor.call(this, config);
+    },
+
+    initEl: function(el){
+        this.el = Ext.get(el);
+        el.on('mousedown', this.onMouseDown, this,
+                this.delegate ? {delegate: this.delegate} : undefined);
+    },
+
+    destroy : function(){
+        this.el.un('mousedown', this.onMouseDown, this);
+    },
+
+    onMouseDown: function(e, target){
+        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
+            this.startXY = this.lastXY = e.getXY();
+            this.dragTarget = this.delegate ? target : this.el.dom;
+            if(this.preventDefault !== false){
+                e.preventDefault();
+            }
+            var doc = Ext.getDoc();
+            doc.on('mouseup', this.onMouseUp, this);
+            doc.on('mousemove', this.onMouseMove, this);
+            doc.on('selectstart', this.stopSelect, this);
+            if(this.autoStart){
+                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
+            }
+        }
+    },
+
+    onMouseMove: function(e, target){
+        // HACK: IE hack to see if button was released outside of window. */
+        if(this.active && Ext.isIE && !e.browserEvent.button){
+            e.preventDefault();
+            this.onMouseUp(e);
+            return;
+        }
+
+        e.preventDefault();
+        var xy = e.getXY(), s = this.startXY;
+        this.lastXY = xy;
+        if(!this.active){
+            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
+                this.triggerStart();
+            }else{
+                return;
+            }
+        }
+        this.fireEvent('mousemove', this, e);
+        this.onDrag(e);
+        this.fireEvent('drag', this, e);
+    },
+
+    onMouseUp: function(e){
+        var doc = Ext.getDoc();
+        doc.un('mousemove', this.onMouseMove, this);
+        doc.un('mouseup', this.onMouseUp, this);
+        doc.un('selectstart', this.stopSelect, this);
+        e.preventDefault();
+        this.clearStart();
+        var wasActive = this.active;
+        this.active = false;
+        delete this.elRegion;
+        this.fireEvent('mouseup', this, e);
+        if(wasActive){
+            this.onEnd(e);
+            this.fireEvent('dragend', this, e);
+        }
+    },
+
+    triggerStart: function(isTimer){
+        this.clearStart();
+        this.active = true;
+        this.onStart(this.startXY);
+        this.fireEvent('dragstart', this, this.startXY);
+    },
+
+    clearStart : function(){
+        if(this.timer){
+            clearTimeout(this.timer);
+            delete this.timer;
+        }
+    },
+
+    stopSelect : function(e){
+        e.stopEvent();
+        return false;
+    },
+
+    onBeforeStart : function(e){
+
+    },
+
+    onStart : function(xy){
+
+    },
+
+    onDrag : function(e){
+
+    },
+
+    onEnd : function(e){
+
+    },
+
+    getDragTarget : function(){
+        return this.dragTarget;
+    },
+
+    getDragCt : function(){
+        return this.el;
+    },
+
+    getXY : function(constrain){
+        return constrain ?
+               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
+    },
+
+    getOffset : function(constrain){
+        var xy = this.getXY(constrain);
+        var s = this.startXY;
+        return [s[0]-xy[0], s[1]-xy[1]];
+    },
+
+    constrainModes: {
+        'point' : function(xy){
+
+            if(!this.elRegion){
+                this.elRegion = this.getDragCt().getRegion();
+            }
+
+            var dr = this.dragRegion;
+
+            dr.left = xy[0];
+            dr.top = xy[1];
+            dr.right = xy[0];
+            dr.bottom = xy[1];
+
+            dr.constrainTo(this.elRegion);
+
+            return [dr.left, dr.top];
+        }
+    }
+});/**
+ * @class Ext.dd.ScrollManager
+ * 
    Provides automatic scrolling of overflow regions in the page during drag operations.
    
+ * 
    The ScrollManager configs will be used as the defaults for any scroll container registered with it,
+ * but you can also override most of the configs per scroll container by adding a 
+ * ddScrollConfig object to the target element that contains these properties: {@link #hthresh},
+ * {@link #vthresh}, {@link #increment} and {@link #frequency}.  Example usage:
+ * 
    
+var el = Ext.get('scroll-ct');
+el.ddScrollConfig = {
+    vthresh: 50,
+    hthresh: -1,
+    frequency: 100,
+    increment: 200
+};
+Ext.dd.ScrollManager.register(el);
+
    
+ * Note: This class uses "Point Mode" and is untested in "Intersect Mode".
+ * @singleton
+ */
+Ext.dd.ScrollManager = function(){
+    var ddm = Ext.dd.DragDropMgr;
+    var els = {};
+    var dragEl = null;
+    var proc = {};
+    
+    var onStop = function(e){
+        dragEl = null;
+        clearProc();
+    };
+    
+    var triggerRefresh = function(){
+        if(ddm.dragCurrent){
+             ddm.refreshCache(ddm.dragCurrent.groups);
+        }
+    };
+    
+    var doScroll = function(){
+        if(ddm.dragCurrent){
+            var dds = Ext.dd.ScrollManager;
+            var inc = proc.el.ddScrollConfig ?
+                      proc.el.ddScrollConfig.increment : dds.increment;
+            if(!dds.animate){
+                if(proc.el.scroll(proc.dir, inc)){
+                    triggerRefresh();
+                }
+            }else{
+                proc.el.scroll(proc.dir, inc, true, dds.animDuration, triggerRefresh);
+            }
+        }
+    };
+    
+    var clearProc = function(){
+        if(proc.id){
+            clearInterval(proc.id);
+        }
+        proc.id = 0;
+        proc.el = null;
+        proc.dir = "";
+    };
+    
+    var startProc = function(el, dir){
+        clearProc();
+        proc.el = el;
+        proc.dir = dir;
+        var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ? 
+                el.ddScrollConfig.frequency : Ext.dd.ScrollManager.frequency;
+        proc.id = setInterval(doScroll, freq);
+    };
+    
+    var onFire = function(e, isDrop){
+        if(isDrop || !ddm.dragCurrent){ return; }
+        var dds = Ext.dd.ScrollManager;
+        if(!dragEl || dragEl != ddm.dragCurrent){
+            dragEl = ddm.dragCurrent;
+            // refresh regions on drag start
+            dds.refreshCache();
+        }
+        
+        var xy = Ext.lib.Event.getXY(e);
+        var pt = new Ext.lib.Point(xy[0], xy[1]);
+        for(var id in els){
+            var el = els[id], r = el._region;
+            var c = el.ddScrollConfig ? el.ddScrollConfig : dds;
+            if(r && r.contains(pt) && el.isScrollable()){
+                if(r.bottom - pt.y <= c.vthresh){
+                    if(proc.el != el){
+                        startProc(el, "down");
+                    }
+                    return;
+                }else if(r.right - pt.x <= c.hthresh){
+                    if(proc.el != el){
+                        startProc(el, "left");
+                    }
+                    return;
+                }else if(pt.y - r.top <= c.vthresh){
+                    if(proc.el != el){
+                        startProc(el, "up");
+                    }
+                    return;
+                }else if(pt.x - r.left <= c.hthresh){
+                    if(proc.el != el){
+                        startProc(el, "right");
+                    }
+                    return;
+                }
+            }
+        }
+        clearProc();
+    };
+    
+    ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
+    ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
+    
+    return {
+        /**
+         * Registers new overflow element(s) to auto scroll
+         * @param {Mixed/Array} el The id of or the element to be scrolled or an array of either
+         */
+        register : function(el){
+            if(Ext.isArray(el)){
+                for(var i = 0, len = el.length; i < len; i++) {
+                	this.register(el[i]);
+                }
+            }else{
+                el = Ext.get(el);
+                els[el.id] = el;
+            }
+        },
+        
+        /**
+         * Unregisters overflow element(s) so they are no longer scrolled
+         * @param {Mixed/Array} el The id of or the element to be removed or an array of either
+         */
+        unregister : function(el){
+            if(Ext.isArray(el)){
+                for(var i = 0, len = el.length; i < len; i++) {
+                	this.unregister(el[i]);
+                }
+            }else{
+                el = Ext.get(el);
+                delete els[el.id];
+            }
+        },
+        
+        /**
+         * The number of pixels from the top or bottom edge of a container the pointer needs to be to
+         * trigger scrolling (defaults to 25)
+         * @type Number
+         */
+        vthresh : 25,
+        /**
+         * The number of pixels from the right or left edge of a container the pointer needs to be to
+         * trigger scrolling (defaults to 25)
+         * @type Number
+         */
+        hthresh : 25,
+
+        /**
+         * The number of pixels to scroll in each scroll increment (defaults to 50)
+         * @type Number
+         */
+        increment : 100,
+        
+        /**
+         * The frequency of scrolls in milliseconds (defaults to 500)
+         * @type Number
+         */
+        frequency : 500,
+        
+        /**
+         * True to animate the scroll (defaults to true)
+         * @type Boolean
+         */
+        animate: true,
+        
+        /**
+         * The animation duration in seconds - 
+         * MUST BE less than Ext.dd.ScrollManager.frequency! (defaults to .4)
+         * @type Number
+         */
+        animDuration: .4,
+        
+        /**
+         * Manually trigger a cache refresh.
+         */
+        refreshCache : function(){
+            for(var id in els){
+                if(typeof els[id] == 'object'){ // for people extending the object prototype
+                    els[id]._region = els[id].getRegion();
+                }
+            }
+        }
+    };
+}();/**
+ * @class Ext.dd.Registry
+ * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
+ * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
+ * @singleton
+ */
+Ext.dd.Registry = function(){
+    var elements = {}; 
+    var handles = {}; 
+    var autoIdSeed = 0;
+
+    var getId = function(el, autogen){
+        if(typeof el == "string"){
+            return el;
+        }
+        var id = el.id;
+        if(!id && autogen !== false){
+            id = "extdd-" + (++autoIdSeed);
+            el.id = id;
+        }
+        return id;
+    };
+    
+    return {
+    /**
+     * Resgister a drag drop element
+     * @param {String/HTMLElement) element The id or DOM node to register
+     * @param {Object} data (optional) An custom data object that will be passed between the elements that are involved
+     * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
+     * knows how to interpret, plus there are some specific properties known to the Registry that should be
+     * populated in the data object (if applicable):
+     * 
    +Value      Description
    
+---------  ------------------------------------------
    
+handles    Array of DOM nodes that trigger dragging
    
+           for the element being registered
    
+isHandle   True if the element passed in triggers
    
+           dragging itself, else false
+
    
+     */
+        register : function(el, data){
+            data = data || {};
+            if(typeof el == "string"){
+                el = document.getElementById(el);
+            }
+            data.ddel = el;
+            elements[getId(el)] = data;
+            if(data.isHandle !== false){
+                handles[data.ddel.id] = data;
+            }
+            if(data.handles){
+                var hs = data.handles;
+                for(var i = 0, len = hs.length; i < len; i++){
+                	handles[getId(hs[i])] = data;
+                }
+            }
+        },
+
+    /**
+     * Unregister a drag drop element
+     * @param {String/HTMLElement) element The id or DOM node to unregister
+     */
+        unregister : function(el){
+            var id = getId(el, false);
+            var data = elements[id];
+            if(data){
+                delete elements[id];
+                if(data.handles){
+                    var hs = data.handles;
+                    for(var i = 0, len = hs.length; i < len; i++){
+                    	delete handles[getId(hs[i], false)];
+                    }
+                }
+            }
+        },
+
+    /**
+     * Returns the handle registered for a DOM Node by id
+     * @param {String/HTMLElement} id The DOM node or id to look up
+     * @return {Object} handle The custom handle data
+     */
+        getHandle : function(id){
+            if(typeof id != "string"){ // must be element?
+                id = id.id;
+            }
+            return handles[id];
+        },
+
+    /**
+     * Returns the handle that is registered for the DOM node that is the target of the event
+     * @param {Event} e The event
+     * @return {Object} handle The custom handle data
+     */
+        getHandleFromEvent : function(e){
+            var t = Ext.lib.Event.getTarget(e);
+            return t ? handles[t.id] : null;
+        },
+
+    /**
+     * Returns a custom data object that is registered for a DOM node by id
+     * @param {String/HTMLElement} id The DOM node or id to look up
+     * @return {Object} data The custom data
+     */
+        getTarget : function(id){
+            if(typeof id != "string"){ // must be element?
+                id = id.id;
+            }
+            return elements[id];
+        },
+
+    /**
+     * Returns a custom data object that is registered for the DOM node that is the target of the event
+     * @param {Event} e The event
+     * @return {Object} data The custom data
+     */
+        getTargetFromEvent : function(e){
+            var t = Ext.lib.Event.getTarget(e);
+            return t ? elements[t.id] || handles[t.id] : null;
+        }
+    };
+}();/**
+ * @class Ext.dd.StatusProxy
+ * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
+ * default drag proxy used by all Ext.dd components.
+ * @constructor
+ * @param {Object} config
+ */
+Ext.dd.StatusProxy = function(config){
+    Ext.apply(this, config);
+    this.id = this.id || Ext.id();
+    this.el = new Ext.Layer({
+        dh: {
+            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
+                {tag: "div", cls: "x-dd-drop-icon"},
+                {tag: "div", cls: "x-dd-drag-ghost"}
+            ]
+        }, 
+        shadow: !config || config.shadow !== false
+    });
+    this.ghost = Ext.get(this.el.dom.childNodes[1]);
+    this.dropStatus = this.dropNotAllowed;
+};
+
+Ext.dd.StatusProxy.prototype = {
+    /**
+     * @cfg {String} dropAllowed
+     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
+     */
+    dropAllowed : "x-dd-drop-ok",
+    /**
+     * @cfg {String} dropNotAllowed
+     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
+     */
+    dropNotAllowed : "x-dd-drop-nodrop",
+
+    /**
+     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
+     * over the current target element.
+     * @param {String} cssClass The css class for the new drop status indicator image
+     */
+    setStatus : function(cssClass){
+        cssClass = cssClass || this.dropNotAllowed;
+        if(this.dropStatus != cssClass){
+            this.el.replaceClass(this.dropStatus, cssClass);
+            this.dropStatus = cssClass;
+        }
+    },
+
+    /**
+     * Resets the status indicator to the default dropNotAllowed value
+     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
+     */
+    reset : function(clearGhost){
+        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
+        this.dropStatus = this.dropNotAllowed;
+        if(clearGhost){
+            this.ghost.update("");
+        }
+    },
+
+    /**
+     * Updates the contents of the ghost element
+     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
+     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
+     */
+    update : function(html){
+        if(typeof html == "string"){
+            this.ghost.update(html);
+        }else{
+            this.ghost.update("");
+            html.style.margin = "0";
+            this.ghost.dom.appendChild(html);
+        }
+        var el = this.ghost.dom.firstChild; 
+        if(el){
+            Ext.fly(el).setStyle('float', 'none');
+        }
+    },
+
+    /**
+     * Returns the underlying proxy {@link Ext.Layer}
+     * @return {Ext.Layer} el
+    */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Returns the ghost element
+     * @return {Ext.Element} el
+     */
+    getGhost : function(){
+        return this.ghost;
+    },
+
+    /**
+     * Hides the proxy
+     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
+     */
+    hide : function(clear){
+        this.el.hide();
+        if(clear){
+            this.reset(true);
+        }
+    },
+
+    /**
+     * Stops the repair animation if it's currently running
+     */
+    stop : function(){
+        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
+            this.anim.stop();
+        }
+    },
+
+    /**
+     * Displays this proxy
+     */
+    show : function(){
+        this.el.show();
+    },
+
+    /**
+     * Force the Layer to sync its shadow and shim positions to the element
+     */
+    sync : function(){
+        this.el.sync();
+    },
+
+    /**
+     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
+     * invalid drop operation by the item being dragged.
+     * @param {Array} xy The XY position of the element ([x, y])
+     * @param {Function} callback The function to call after the repair is complete.
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
+     */
+    repair : function(xy, callback, scope){
+        this.callback = callback;
+        this.scope = scope;
+        if(xy && this.animRepair !== false){
+            this.el.addClass("x-dd-drag-repair");
+            this.el.hideUnders(true);
+            this.anim = this.el.shift({
+                duration: this.repairDuration || .5,
+                easing: 'easeOut',
+                xy: xy,
+                stopFx: true,
+                callback: this.afterRepair,
+                scope: this
+            });
+        }else{
+            this.afterRepair();
+        }
+    },
+
+    // private
+    afterRepair : function(){
+        this.hide(true);
+        if(typeof this.callback == "function"){
+            this.callback.call(this.scope || this);
+        }
+        this.callback = null;
+        this.scope = null;
+    },
+    
+    destroy: function(){
+        Ext.destroy(this.ghost, this.el);    
+    }
+};/**
+ * @class Ext.dd.DragSource
+ * @extends Ext.dd.DDProxy
+ * A simple class that provides the basic implementation needed to make any element draggable.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DragSource = function(el, config){
+    this.el = Ext.get(el);
+    if(!this.dragData){
+        this.dragData = {};
+    }
+    
+    Ext.apply(this, config);
+    
+    if(!this.proxy){
+        this.proxy = new Ext.dd.StatusProxy();
+    }
+    Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
+          {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
+    
+    this.dragging = false;
+};
+
+Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
+     * interact with other drag drop objects in the same group (defaults to undefined).
+     */
+    /**
+     * @cfg {String} dropAllowed
+     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+     */
+    dropAllowed : "x-dd-drop-ok",
+    /**
+     * @cfg {String} dropNotAllowed
+     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+     */
+    dropNotAllowed : "x-dd-drop-nodrop",
+
+    /**
+     * Returns the data object associated with this drag source
+     * @return {Object} data An object containing arbitrary data
+     */
+    getDragData : function(e){
+        return this.dragData;
+    },
+
+    // private
+    onDragEnter : function(e, id){
+        var target = Ext.dd.DragDropMgr.getDDById(id);
+        this.cachedTarget = target;
+        if(this.beforeDragEnter(target, e, id) !== false){
+            if(target.isNotifyTarget){
+                var status = target.notifyEnter(this, e, this.dragData);
+                this.proxy.setStatus(status);
+            }else{
+                this.proxy.setStatus(this.dropAllowed);
+            }
+            
+            if(this.afterDragEnter){
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * when the dragged item enters the drop target by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragEnter
+                 */
+                this.afterDragEnter(target, e, id);
+            }
+        }
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action
+     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragEnter : function(target, e, id){
+        return true;
+    },
+
+    // private
+    alignElWithMouse: function() {
+        Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
+        this.proxy.sync();
+    },
+
+    // private
+    onDragOver : function(e, id){
+        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+        if(this.beforeDragOver(target, e, id) !== false){
+            if(target.isNotifyTarget){
+                var status = target.notifyOver(this, e, this.dragData);
+                this.proxy.setStatus(status);
+            }
+
+            if(this.afterDragOver){
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * while the dragged item is over the drop target by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragOver
+                 */
+                this.afterDragOver(target, e, id);
+            }
+        }
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action
+     * while the dragged item is over the drop target and optionally cancel the onDragOver.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragOver : function(target, e, id){
+        return true;
+    },
+
+    // private
+    onDragOut : function(e, id){
+        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+        if(this.beforeDragOut(target, e, id) !== false){
+            if(target.isNotifyTarget){
+                target.notifyOut(this, e, this.dragData);
+            }
+            this.proxy.reset();
+            if(this.afterDragOut){
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * after the dragged item is dragged out of the target without dropping.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragOut
+                 */
+                this.afterDragOut(target, e, id);
+            }
+        }
+        this.cachedTarget = null;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the dragged
+     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragOut : function(target, e, id){
+        return true;
+    },
+    
+    // private
+    onDragDrop : function(e, id){
+        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+        if(this.beforeDragDrop(target, e, id) !== false){
+            if(target.isNotifyTarget){
+                if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
+                    this.onValidDrop(target, e, id);
+                }else{
+                    this.onInvalidDrop(target, e, id);
+                }
+            }else{
+                this.onValidDrop(target, e, id);
+            }
+            
+            if(this.afterDragDrop){
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * after a valid drag drop has occurred by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dropped element
+                 * @method afterDragDrop
+                 */
+                this.afterDragDrop(target, e, id);
+            }
+        }
+        delete this.cachedTarget;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the dragged
+     * item is dropped onto the target and optionally cancel the onDragDrop.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
+     */
+    beforeDragDrop : function(target, e, id){
+        return true;
+    },
+
+    // private
+    onValidDrop : function(target, e, id){
+        this.hideProxy();
+        if(this.afterValidDrop){
+            /**
+             * An empty function by default, but provided so that you can perform a custom action
+             * after a valid drop has occurred by providing an implementation.
+             * @param {Object} target The target DD 
+             * @param {Event} e The event object
+             * @param {String} id The id of the dropped element
+             * @method afterInvalidDrop
+             */
+            this.afterValidDrop(target, e, id);
+        }
+    },
+
+    // private
+    getRepairXY : function(e, data){
+        return this.el.getXY();  
+    },
+
+    // private
+    onInvalidDrop : function(target, e, id){
+        this.beforeInvalidDrop(target, e, id);
+        if(this.cachedTarget){
+            if(this.cachedTarget.isNotifyTarget){
+                this.cachedTarget.notifyOut(this, e, this.dragData);
+            }
+            this.cacheTarget = null;
+        }
+        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
+
+        if(this.afterInvalidDrop){
+            /**
+             * An empty function by default, but provided so that you can perform a custom action
+             * after an invalid drop has occurred by providing an implementation.
+             * @param {Event} e The event object
+             * @param {String} id The id of the dropped element
+             * @method afterInvalidDrop
+             */
+            this.afterInvalidDrop(e, id);
+        }
+    },
+
+    // private
+    afterRepair : function(){
+        if(Ext.enableFx){
+            this.el.highlight(this.hlColor || "c3daf9");
+        }
+        this.dragging = false;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action after an invalid
+     * drop has occurred.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
+     */
+    beforeInvalidDrop : function(target, e, id){
+        return true;
+    },
+
+    // private
+    handleMouseDown : function(e){
+        if(this.dragging) {
+            return;
+        }
+        var data = this.getDragData(e);
+        if(data && this.onBeforeDrag(data, e) !== false){
+            this.dragData = data;
+            this.proxy.stop();
+            Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
+        } 
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the initial
+     * drag event begins and optionally cancel it.
+     * @param {Object} data An object containing arbitrary data to be shared with drop targets
+     * @param {Event} e The event object
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    onBeforeDrag : function(data, e){
+        return true;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action once the initial
+     * drag event has begun.  The drag cannot be canceled from this function.
+     * @param {Number} x The x position of the click on the dragged object
+     * @param {Number} y The y position of the click on the dragged object
+     */
+    onStartDrag : Ext.emptyFn,
+
+    // private override
+    startDrag : function(x, y){
+        this.proxy.reset();
+        this.dragging = true;
+        this.proxy.update("");
+        this.onInitDrag(x, y);
+        this.proxy.show();
+    },
+
+    // private
+    onInitDrag : function(x, y){
+        var clone = this.el.dom.cloneNode(true);
+        clone.id = Ext.id(); // prevent duplicate ids
+        this.proxy.update(clone);
+        this.onStartDrag(x, y);
+        return true;
+    },
+
+    /**
+     * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
+     * @return {Ext.dd.StatusProxy} proxy The StatusProxy
+     */
+    getProxy : function(){
+        return this.proxy;  
+    },
+
+    /**
+     * Hides the drag source's {@link Ext.dd.StatusProxy}
+     */
+    hideProxy : function(){
+        this.proxy.hide();  
+        this.proxy.reset(true);
+        this.dragging = false;
+    },
+
+    // private
+    triggerCacheRefresh : function(){
+        Ext.dd.DDM.refreshCache(this.groups);
+    },
+
+    // private - override to prevent hiding
+    b4EndDrag: function(e) {
+    },
+
+    // private - override to prevent moving
+    endDrag : function(e){
+        this.onEndDrag(this.dragData, e);
+    },
+
+    // private
+    onEndDrag : function(data, e){
+    },
+    
+    // private - pin to cursor
+    autoOffset : function(x, y) {
+        this.setDelta(-12, -20);
+    },
+    
+    destroy: function(){
+        Ext.dd.DragSource.superclass.destroy.call(this);
+        Ext.destroy(this.proxy);
+    }
+});/**
+ * @class Ext.dd.DropTarget
+ * @extends Ext.dd.DDTarget
+ * A simple class that provides the basic implementation needed to make any element a drop target that can have
+ * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DropTarget = function(el, config){
+    this.el = Ext.get(el);
+    
+    Ext.apply(this, config);
+    
+    if(this.containerScroll){
+        Ext.dd.ScrollManager.register(this.el);
+    }
+    
+    Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
+          {isTarget: true});
+
+};
+
+Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
+     * interact with other drag drop objects in the same group (defaults to undefined).
+     */
+    /**
+     * @cfg {String} overClass
+     * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
+     */
+    /**
+     * @cfg {String} dropAllowed
+     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+     */
+    dropAllowed : "x-dd-drop-ok",
+    /**
+     * @cfg {String} dropNotAllowed
+     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+     */
+    dropNotAllowed : "x-dd-drop-nodrop",
+
+    // private
+    isTarget : true,
+
+    // private
+    isNotifyTarget : true,
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
+     * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
+     * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    notifyEnter : function(dd, e, data){
+        if(this.overClass){
+            this.el.addClass(this.overClass);
+        }
+        return this.dropAllowed;
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
+     * This method will be called on every mouse movement while the drag source is over the drop target.
+     * This default implementation simply returns the dropAllowed config value.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    notifyOver : function(dd, e, data){
+        return this.dropAllowed;
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
+     * out of the target without dropping.  This default implementation simply removes the CSS class specified by
+     * overClass (if any) from the drop element.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     */
+    notifyOut : function(dd, e, data){
+        if(this.overClass){
+            this.el.removeClass(this.overClass);
+        }
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
+     * been dropped on it.  This method has no default implementation and returns false, so you must provide an
+     * implementation that does something to process the drop event and returns true so that the drag source's
+     * repair action does not run.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {Boolean} True if the drop was valid, else false
+     */
+    notifyDrop : function(dd, e, data){
+        return false;
+    }
+});/**
+ * @class Ext.dd.DragZone
+ * @extends Ext.dd.DragSource
+ * 
    This class provides a container DD instance that allows dragging of multiple child source nodes.
    
+ * 
    This class does not move the drag target nodes, but a proxy element which may contain
+ * any DOM structure you wish. The DOM element to show in the proxy is provided by either a
+ * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
    
+ * 
    If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
+ * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class
+ * is the most efficient way to "activate" those nodes.
    
+ * 
    By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.
+ * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure
+ * the DragZone with  an implementation of the {@link #getDragData} method which interrogates the passed
+ * mouse event to see if it has taken place within an element, or class of elements. This is easily done
+ * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
+ * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following
+ * technique. Knowledge of the use of the DataView is required:
    
+myDataView.on('render', function(v) {
+    myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
+
+//      On receipt of a mousedown event, see if it is within a DataView node.
+//      Return a drag data object if so.
+        getDragData: function(e) {
+
+//          Use the DataView's own itemSelector (a mandatory property) to
+//          test if the mousedown is within one of the DataView's nodes.
+            var sourceEl = e.getTarget(v.itemSelector, 10);
+
+//          If the mousedown is within a DataView node, clone the node to produce
+//          a ddel element for use by the drag proxy. Also add application data
+//          to the returned data object.
+            if (sourceEl) {
+                d = sourceEl.cloneNode(true);
+                d.id = Ext.id();
+                return {
+                    ddel: d,
+                    sourceEl: sourceEl,
+                    repairXY: Ext.fly(sourceEl).getXY(),
+                    sourceStore: v.store,
+                    draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
+                }
+            }
+        },
+
+//      Provide coordinates for the proxy to slide back to on failed drag.
+//      This is the original XY coordinates of the draggable element captured
+//      in the getDragData method.
+        getRepairXY: function() {
+            return this.dragData.repairXY;
+        }
+    });
+});
    
+ * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which
+ * cooperates with this DragZone.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DragZone = function(el, config){
+    Ext.dd.DragZone.superclass.constructor.call(this, el, config);
+    if(this.containerScroll){
+        Ext.dd.ScrollManager.register(this.el);
+    }
+};
+
+Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {
+    /**
+     * This property contains the data representing the dragged object. This data is set up by the implementation
+     * of the {@link #getDragData} method. It must contain a ddel property, but can contain
+     * any other data according to the application's needs.
+     * @type Object
+     * @property dragData
+     */
+    /**
+     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
+     * for auto scrolling during drag operations.
+     */
+    /**
+     * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
+     * method after a failed drop (defaults to "c3daf9" - light blue)
+     */
+
+    /**
+     * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
+     * for a valid target to drag based on the mouse down. Override this method
+     * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
+     * object has a "ddel" attribute (with an HTML Element) for other functions to work.
+     * @param {EventObject} e The mouse down event
+     * @return {Object} The dragData
+     */
+    getDragData : function(e){
+        return Ext.dd.Registry.getHandleFromEvent(e);
+    },
+    
+    /**
+     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
+     * this.dragData.ddel
+     * @param {Number} x The x position of the click on the dragged object
+     * @param {Number} y The y position of the click on the dragged object
+     * @return {Boolean} true to continue the drag, false to cancel
+     */
+    onInitDrag : function(x, y){
+        this.proxy.update(this.dragData.ddel.cloneNode(true));
+        this.onStartDrag(x, y);
+        return true;
+    },
+    
+    /**
+     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
+     */
+    afterRepair : function(){
+        if(Ext.enableFx){
+            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
+        }
+        this.dragging = false;
+    },
+
+    /**
+     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
+     * the XY of this.dragData.ddel
+     * @param {EventObject} e The mouse up event
+     * @return {Array} The xy location (e.g. [100, 200])
+     */
+    getRepairXY : function(e){
+        return Ext.Element.fly(this.dragData.ddel).getXY();  
+    }
+});/**
+ * @class Ext.dd.DropZone
+ * @extends Ext.dd.DropTarget
+ * 
    This class provides a container DD instance that allows dropping on multiple child target nodes.
    
+ * 
    By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
+ * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
+ * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
+ * mouse event to see if it has taken place within an element, or class of elements. This is easily done
+ * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
+ * {@link Ext.DomQuery} selector.
    
+ * 
    Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
+ * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
+ * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
+ * of these methods to provide application-specific behaviour for these events to update both
+ * application state, and UI state.
    
+ * 
    For example to make a GridPanel a cooperating target with the example illustrated in
+ * {@link Ext.dd.DragZone DragZone}, the following technique might be used:
    
+myGridPanel.on('render', function() {
+    myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
+
+//      If the mouse is over a grid row, return that node. This is
+//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
+        getTargetFromEvent: function(e) {
+            return e.getTarget(myGridPanel.getView().rowSelector);
+        },
+
+//      On entry into a target node, highlight that node.
+        onNodeEnter : function(target, dd, e, data){ 
+            Ext.fly(target).addClass('my-row-highlight-class');
+        },
+
+//      On exit from a target node, unhighlight that node.
+        onNodeOut : function(target, dd, e, data){ 
+            Ext.fly(target).removeClass('my-row-highlight-class');
+        },
+
+//      While over a target node, return the default drop allowed class which
+//      places a "tick" icon into the drag proxy.
+        onNodeOver : function(target, dd, e, data){ 
+            return Ext.dd.DropZone.prototype.dropAllowed;
+        },
+
+//      On node drop we can interrogate the target to find the underlying
+//      application object that is the real target of the dragged data.
+//      In this case, it is a Record in the GridPanel's Store.
+//      We can use the data set up by the DragZone's getDragData method to read
+//      any data we decided to attach in the DragZone's getDragData method.
+        onNodeDrop : function(target, dd, e, data){
+            var rowIndex = myGridPanel.getView().findRowIndex(target);
+            var r = myGridPanel.getStore().getAt(rowIndex);
+            Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
+                ' on Record id ' + r.id);
+            return true;
+        }
+    });
+}
+
    
+ * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
+ * cooperates with this DropZone.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DropZone = function(el, config){
+    Ext.dd.DropZone.superclass.constructor.call(this, el, config);
+};
+
+Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
+    /**
+     * Returns a custom data object associated with the DOM node that is the target of the event.  By default
+     * this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
+     * provide your own custom lookup.
+     * @param {Event} e The event
+     * @return {Object} data The custom data
+     */
+    getTargetFromEvent : function(e){
+        return Ext.dd.Registry.getTargetFromEvent(e);
+    },
+
+    /**
+     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
+     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
+     * This method has no default implementation and should be overridden to provide
+     * node-specific processing if necessary.
+     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
+     * {@link #getTargetFromEvent} for this node)
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     */
+    onNodeEnter : function(n, dd, e, data){
+        
+    },
+
+    /**
+     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
+     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
+     * The default implementation returns this.dropNotAllowed, so it should be
+     * overridden to provide the proper feedback.
+     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+     * {@link #getTargetFromEvent} for this node)
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    onNodeOver : function(n, dd, e, data){
+        return this.dropAllowed;
+    },
+
+    /**
+     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
+     * the drop node without dropping.  This method has no default implementation and should be overridden to provide
+     * node-specific processing if necessary.
+     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+     * {@link #getTargetFromEvent} for this node)
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     */
+    onNodeOut : function(n, dd, e, data){
+        
+    },
+
+    /**
+     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
+     * the drop node.  The default implementation returns false, so it should be overridden to provide the
+     * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
+     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+     * {@link #getTargetFromEvent} for this node)
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {Boolean} True if the drop was valid, else false
+     */
+    onNodeDrop : function(n, dd, e, data){
+        return false;
+    },
+
+    /**
+     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
+     * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
+     * it should be overridden to provide the proper feedback if necessary.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    onContainerOver : function(dd, e, data){
+        return this.dropNotAllowed;
+    },
+
+    /**
+     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
+     * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
+     * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
+     * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {Boolean} True if the drop was valid, else false
+     */
+    onContainerDrop : function(dd, e, data){
+        return false;
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
+     * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
+     * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
+     * you should override this method and provide a custom implementation.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    notifyEnter : function(dd, e, data){
+        return this.dropNotAllowed;
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
+     * This method will be called on every mouse movement while the drag source is over the drop zone.
+     * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
+     * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
+     * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
+     * registered node, it will call {@link #onContainerOver}.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {String} status The CSS class that communicates the drop status back to the source so that the
+     * underlying {@link Ext.dd.StatusProxy} can be updated
+     */
+    notifyOver : function(dd, e, data){
+        var n = this.getTargetFromEvent(e);
+        if(!n){ // not over valid drop target
+            if(this.lastOverNode){
+                this.onNodeOut(this.lastOverNode, dd, e, data);
+                this.lastOverNode = null;
+            }
+            return this.onContainerOver(dd, e, data);
+        }
+        if(this.lastOverNode != n){
+            if(this.lastOverNode){
+                this.onNodeOut(this.lastOverNode, dd, e, data);
+            }
+            this.onNodeEnter(n, dd, e, data);
+            this.lastOverNode = n;
+        }
+        return this.onNodeOver(n, dd, e, data);
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
+     * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
+     * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag zone
+     */
+    notifyOut : function(dd, e, data){
+        if(this.lastOverNode){
+            this.onNodeOut(this.lastOverNode, dd, e, data);
+            this.lastOverNode = null;
+        }
+    },
+
+    /**
+     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
+     * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
+     * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
+     * otherwise it will call {@link #onContainerDrop}.
+     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
+     * @param {Event} e The event
+     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * @return {Boolean} True if the drop was valid, else false
+     */
+    notifyDrop : function(dd, e, data){
+        if(this.lastOverNode){
+            this.onNodeOut(this.lastOverNode, dd, e, data);
+            this.lastOverNode = null;
+        }
+        var n = this.getTargetFromEvent(e);
+        return n ?
+            this.onNodeDrop(n, dd, e, data) :
+            this.onContainerDrop(dd, e, data);
+    },
+
+    // private
+    triggerCacheRefresh : function(){
+        Ext.dd.DDM.refreshCache(this.groups);
+    }  
+});/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+    /**
+     * Initializes a {@link Ext.dd.DD} drag drop object for this element.
+     * @param {String} group The group the DD object is member of
+     * @param {Object} config The DD config object
+     * @param {Object} overrides An object containing methods to override/implement on the DD object
+     * @return {Ext.dd.DD} The DD object
+     */
+    initDD : function(group, config, overrides){
+        var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
+        return Ext.apply(dd, overrides);
+    },
+
+    /**
+     * Initializes a {@link Ext.dd.DDProxy} object for this element.
+     * @param {String} group The group the DDProxy object is member of
+     * @param {Object} config The DDProxy config object
+     * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
+     * @return {Ext.dd.DDProxy} The DDProxy object
+     */
+    initDDProxy : function(group, config, overrides){
+        var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
+        return Ext.apply(dd, overrides);
+    },
+
+    /**
+     * Initializes a {@link Ext.dd.DDTarget} object for this element.
+     * @param {String} group The group the DDTarget object is member of
+     * @param {Object} config The DDTarget config object
+     * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
+     * @return {Ext.dd.DDTarget} The DDTarget object
+     */
+    initDDTarget : function(group, config, overrides){
+        var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
+        return Ext.apply(dd, overrides);
+    }
 });
 /**
  * @class Ext.data.Api
@@ -31826,90 +31826,90 @@ Ext.apply(Ext.data.Api.Error.prototype, {
 });
 
 
-
-/**
- * @class Ext.data.SortTypes
- * @singleton
- * Defines the default sorting (casting?) comparison functions used when sorting data.
- */
-Ext.data.SortTypes = {
-    /**
-     * Default sort that does nothing
-     * @param {Mixed} s The value being converted
-     * @return {Mixed} The comparison value
-     */
-    none : function(s){
-        return s;
-    },
-    
-    /**
-     * The regular expression used to strip tags
-     * @type {RegExp}
-     * @property
-     */
-    stripTagsRE : /<\/?[^>]+>/gi,
-    
-    /**
-     * Strips all HTML tags to sort on text only
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
-     */
-    asText : function(s){
-        return String(s).replace(this.stripTagsRE, "");
-    },
-    
-    /**
-     * Strips all HTML tags to sort on text only - Case insensitive
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
-     */
-    asUCText : function(s){
-        return String(s).toUpperCase().replace(this.stripTagsRE, "");
-    },
-    
-    /**
-     * Case insensitive string
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
-     */
-    asUCString : function(s) {
-    	return String(s).toUpperCase();
-    },
-    
-    /**
-     * Date sorting
-     * @param {Mixed} s The value being converted
-     * @return {Number} The comparison value
-     */
-    asDate : function(s) {
-        if(!s){
-            return 0;
-        }
-        if(Ext.isDate(s)){
-            return s.getTime();
-        }
-    	return Date.parse(String(s));
-    },
-    
-    /**
-     * Float sorting
-     * @param {Mixed} s The value being converted
-     * @return {Float} The comparison value
-     */
-    asFloat : function(s) {
-    	var val = parseFloat(String(s).replace(/,/g, ""));
-    	return isNaN(val) ? 0 : val;
-    },
-    
-    /**
-     * Integer sorting
-     * @param {Mixed} s The value being converted
-     * @return {Number} The comparison value
-     */
-    asInt : function(s) {
-        var val = parseInt(String(s).replace(/,/g, ""), 10);
-        return isNaN(val) ? 0 : val;
-    }
+
+/**
+ * @class Ext.data.SortTypes
+ * @singleton
+ * Defines the default sorting (casting?) comparison functions used when sorting data.
+ */
+Ext.data.SortTypes = {
+    /**
+     * Default sort that does nothing
+     * @param {Mixed} s The value being converted
+     * @return {Mixed} The comparison value
+     */
+    none : function(s){
+        return s;
+    },
+    
+    /**
+     * The regular expression used to strip tags
+     * @type {RegExp}
+     * @property
+     */
+    stripTagsRE : /<\/?[^>]+>/gi,
+    
+    /**
+     * Strips all HTML tags to sort on text only
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asText : function(s){
+        return String(s).replace(this.stripTagsRE, "");
+    },
+    
+    /**
+     * Strips all HTML tags to sort on text only - Case insensitive
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asUCText : function(s){
+        return String(s).toUpperCase().replace(this.stripTagsRE, "");
+    },
+    
+    /**
+     * Case insensitive string
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asUCString : function(s) {
+    	return String(s).toUpperCase();
+    },
+    
+    /**
+     * Date sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
+     */
+    asDate : function(s) {
+        if(!s){
+            return 0;
+        }
+        if(Ext.isDate(s)){
+            return s.getTime();
+        }
+    	return Date.parse(String(s));
+    },
+    
+    /**
+     * Float sorting
+     * @param {Mixed} s The value being converted
+     * @return {Float} The comparison value
+     */
+    asFloat : function(s) {
+    	var val = parseFloat(String(s).replace(/,/g, ""));
+    	return isNaN(val) ? 0 : val;
+    },
+    
+    /**
+     * Integer sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
+     */
+    asInt : function(s) {
+        var val = parseInt(String(s).replace(/,/g, ""), 10);
+        return isNaN(val) ? 0 : val;
+    }
 };/**
  * @class Ext.data.Record
  * 
    Instances of this class encapsulate both Record definition information, and Record
@@ -34296,240 +34296,240 @@ sortType: function(value) {
      * to evaluate to false.
      */
     allowBlank : true
-};/**
- * @class Ext.data.DataReader
- * Abstract base class for reading structured data from a data source and converting
- * it into an object containing {@link Ext.data.Record} objects and metadata for use
- * by an {@link Ext.data.Store}.  This class is intended to be extended and should not
- * be created directly. For existing implementations, see {@link Ext.data.ArrayReader},
- * {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}.
- * @constructor Create a new DataReader
- * @param {Object} meta Metadata configuration options (implementation-specific).
- * @param {Array/Object} recordType
- * 
    Either an Array of {@link Ext.data.Field Field} definition objects (which
- * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
- * constructor created using {@link Ext.data.Record#create}.
    
- */
-Ext.data.DataReader = function(meta, recordType){
-    /**
-     * This DataReader's configured metadata as passed to the constructor.
-     * @type Mixed
-     * @property meta
-     */
-    this.meta = meta;
-    /**
-     * @cfg {Array/Object} fields
-     * 
    Either an Array of {@link Ext.data.Field Field} definition objects (which
-     * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
-     * constructor created from {@link Ext.data.Record#create}.
    
-     */
-    this.recordType = Ext.isArray(recordType) ?
-        Ext.data.Record.create(recordType) : recordType;
+};/**
+ * @class Ext.data.DataReader
+ * Abstract base class for reading structured data from a data source and converting
+ * it into an object containing {@link Ext.data.Record} objects and metadata for use
+ * by an {@link Ext.data.Store}.  This class is intended to be extended and should not
+ * be created directly. For existing implementations, see {@link Ext.data.ArrayReader},
+ * {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}.
+ * @constructor Create a new DataReader
+ * @param {Object} meta Metadata configuration options (implementation-specific).
+ * @param {Array/Object} recordType
+ * 
    Either an Array of {@link Ext.data.Field Field} definition objects (which
+ * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
+ * constructor created using {@link Ext.data.Record#create}.
    
+ */
+Ext.data.DataReader = function(meta, recordType){
+    /**
+     * This DataReader's configured metadata as passed to the constructor.
+     * @type Mixed
+     * @property meta
+     */
+    this.meta = meta;
+    /**
+     * @cfg {Array/Object} fields
+     * 
    Either an Array of {@link Ext.data.Field Field} definition objects (which
+     * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
+     * constructor created from {@link Ext.data.Record#create}.
    
+     */
+    this.recordType = Ext.isArray(recordType) ?
+        Ext.data.Record.create(recordType) : recordType;
 
-    // if recordType defined make sure extraction functions are defined
-    if (this.recordType){
-        this.buildExtractors();
+    // if recordType defined make sure extraction functions are defined
+    if (this.recordType){
+        this.buildExtractors();
     }
-};
-
-Ext.data.DataReader.prototype = {
-    /**
-     * @cfg {String} messageProperty [undefined] Optional name of a property within a server-response that represents a user-feedback message.
-     */
-    /**
-     * Abstract method created in extension's buildExtractors impl.
-     */
-    getTotal: Ext.emptyFn,
-    /**
-     * Abstract method created in extension's buildExtractors impl.
-     */
-    getRoot: Ext.emptyFn,
-    /**
-     * Abstract method created in extension's buildExtractors impl.
-     */
-    getMessage: Ext.emptyFn,
-    /**
-     * Abstract method created in extension's buildExtractors impl.
-     */
-    getSuccess: Ext.emptyFn,
-    /**
-     * Abstract method created in extension's buildExtractors impl.
-     */
-    getId: Ext.emptyFn,
-    /**
-     * Abstract method, overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
-     */
-    buildExtractors : Ext.emptyFn,
-    /**
-     * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
-     */
-    extractData : Ext.emptyFn,
-    /**
-     * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
-     */
-    extractValues : Ext.emptyFn,
-
-    /**
-     * Used for un-phantoming a record after a successful database insert.  Sets the records pk along with new data from server.
-     * You must return at least the database pk using the idProperty defined in your DataReader configuration.  The incoming
-     * data from server will be merged with the data in the local record.
-     * In addition, you must return record-data from the server in the same order received.
-     * Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be suppressed.
-     * @param {Record/Record[]} record The phantom record to be realized.
-     * @param {Object/Object[]} data The new record data to apply.  Must include the primary-key from database defined in idProperty field.
-     */
-    realize: function(rs, data){
-        if (Ext.isArray(rs)) {
-            for (var i = rs.length - 1; i >= 0; i--) {
-                // recurse
-                if (Ext.isArray(data)) {
-                    this.realize(rs.splice(i,1).shift(), data.splice(i,1).shift());
-                }
-                else {
-                    // weird...rs is an array but data isn't??  recurse but just send in the whole invalid data object.
-                    // the else clause below will detect !this.isData and throw exception.
-                    this.realize(rs.splice(i,1).shift(), data);
-                }
-            }
-        }
-        else {
-            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
-            if (Ext.isArray(data) && data.length == 1) {
-                data = data.shift();
-            }
-            if (!this.isData(data)) {
-                // TODO: Let exception-handler choose to commit or not rather than blindly rs.commit() here.
-                //rs.commit();
-                throw new Ext.data.DataReader.Error('realize', rs);
-            }
-            rs.phantom = false; // <-- That's what it's all about
-            rs._phid = rs.id;  // <-- copy phantom-id -> _phid, so we can remap in Store#onCreateRecords
-            rs.id = this.getId(data);
-
-            rs.fields.each(function(f) {
-                if (data[f.name] !== f.defaultValue) {
-                    rs.data[f.name] = data[f.name];
-                }
-            });
-            rs.commit();
-        }
-    },
-
-    /**
-     * Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
-     * If returning data from multiple-records after a batch-update, you must return record-data from the server in
-     * the same order received.  Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be
-     * suppressed as the record receives fresh new data-hash
-     * @param {Record/Record[]} rs
-     * @param {Object/Object[]} data
-     */
-    update : function(rs, data) {
-        if (Ext.isArray(rs)) {
-            for (var i=rs.length-1; i >= 0; i--) {
-                if (Ext.isArray(data)) {
-                    this.update(rs.splice(i,1).shift(), data.splice(i,1).shift());
-                }
-                else {
-                    // weird...rs is an array but data isn't??  recurse but just send in the whole data object.
-                    // the else clause below will detect !this.isData and throw exception.
-                    this.update(rs.splice(i,1).shift(), data);
-                }
-            }
-        }
-        else {
-            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
-            if (Ext.isArray(data) && data.length == 1) {
-                data = data.shift();
-            }
-            if (this.isData(data)) {
-                rs.fields.each(function(f) {
-                    if (data[f.name] !== f.defaultValue) {
-                        rs.data[f.name] = data[f.name];
-                    }
-                });
-            }
-            rs.commit();
-        }
-    },
-
-    /**
-     * returns extracted, type-cast rows of data.  Iterates to call #extractValues for each row
-     * @param {Object[]/Object} data-root from server response
-     * @param {Boolean} returnRecords [false] Set true to return instances of Ext.data.Record
-     * @private
-     */
-    extractData : function(root, returnRecords) {
-        // A bit ugly this, too bad the Record's raw data couldn't be saved in a common property named "raw" or something.
-        var rawName = (this instanceof Ext.data.JsonReader) ? 'json' : 'node';
-
-        var rs = [];
-
-        // Had to add Check for XmlReader, #isData returns true if root is an Xml-object.  Want to check in order to re-factor
-        // #extractData into DataReader base, since the implementations are almost identical for JsonReader, XmlReader
-        if (this.isData(root) && !(this instanceof Ext.data.XmlReader)) {
-            root = [root];
-        }
-        var f       = this.recordType.prototype.fields,
-            fi      = f.items,
-            fl      = f.length,
-            rs      = [];
-        if (returnRecords === true) {
-            var Record = this.recordType;
-            for (var i = 0; i < root.length; i++) {
-                var n = root[i];
-                var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
-                record[rawName] = n;    // <-- There's implementation of ugly bit, setting the raw record-data.
-                rs.push(record);
-            }
-        }
-        else {
-            for (var i = 0; i < root.length; i++) {
-                var data = this.extractValues(root[i], fi, fl);
-                data[this.meta.idProperty] = this.getId(root[i]);
-                rs.push(data);
-            }
-        }
-        return rs;
-    },
-
-    /**
-     * Returns true if the supplied data-hash looks and quacks like data.  Checks to see if it has a key
-     * corresponding to idProperty defined in your DataReader config containing non-empty pk.
-     * @param {Object} data
-     * @return {Boolean}
-     */
-    isData : function(data) {
-        return (data && Ext.isObject(data) && !Ext.isEmpty(this.getId(data))) ? true : false;
-    },
-
-    // private function a store will createSequence upon
-    onMetaChange : function(meta){
-        delete this.ef;
-        this.meta = meta;
-        this.recordType = Ext.data.Record.create(meta.fields);
-        this.buildExtractors();
-    }
-};
-
-/**
- * @class Ext.data.DataReader.Error
- * @extends Ext.Error
- * General error class for Ext.data.DataReader
- */
-Ext.data.DataReader.Error = Ext.extend(Ext.Error, {
-    constructor : function(message, arg) {
-        this.arg = arg;
-        Ext.Error.call(this, message);
-    },
-    name: 'Ext.data.DataReader'
-});
-Ext.apply(Ext.data.DataReader.Error.prototype, {
-    lang : {
-        'update': "#update received invalid data from server.  Please see docs for DataReader#update and review your DataReader configuration.",
-        'realize': "#realize was called with invalid remote-data.  Please see the docs for DataReader#realize and review your DataReader configuration.",
-        'invalid-response': "#readResponse received an invalid response from the server."
-    }
-});
+};
+
+Ext.data.DataReader.prototype = {
+    /**
+     * @cfg {String} messageProperty [undefined] Optional name of a property within a server-response that represents a user-feedback message.
+     */
+    /**
+     * Abstract method created in extension's buildExtractors impl.
+     */
+    getTotal: Ext.emptyFn,
+    /**
+     * Abstract method created in extension's buildExtractors impl.
+     */
+    getRoot: Ext.emptyFn,
+    /**
+     * Abstract method created in extension's buildExtractors impl.
+     */
+    getMessage: Ext.emptyFn,
+    /**
+     * Abstract method created in extension's buildExtractors impl.
+     */
+    getSuccess: Ext.emptyFn,
+    /**
+     * Abstract method created in extension's buildExtractors impl.
+     */
+    getId: Ext.emptyFn,
+    /**
+     * Abstract method, overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
+     */
+    buildExtractors : Ext.emptyFn,
+    /**
+     * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
+     */
+    extractData : Ext.emptyFn,
+    /**
+     * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
+     */
+    extractValues : Ext.emptyFn,
+
+    /**
+     * Used for un-phantoming a record after a successful database insert.  Sets the records pk along with new data from server.
+     * You must return at least the database pk using the idProperty defined in your DataReader configuration.  The incoming
+     * data from server will be merged with the data in the local record.
+     * In addition, you must return record-data from the server in the same order received.
+     * Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be suppressed.
+     * @param {Record/Record[]} record The phantom record to be realized.
+     * @param {Object/Object[]} data The new record data to apply.  Must include the primary-key from database defined in idProperty field.
+     */
+    realize: function(rs, data){
+        if (Ext.isArray(rs)) {
+            for (var i = rs.length - 1; i >= 0; i--) {
+                // recurse
+                if (Ext.isArray(data)) {
+                    this.realize(rs.splice(i,1).shift(), data.splice(i,1).shift());
+                }
+                else {
+                    // weird...rs is an array but data isn't??  recurse but just send in the whole invalid data object.
+                    // the else clause below will detect !this.isData and throw exception.
+                    this.realize(rs.splice(i,1).shift(), data);
+                }
+            }
+        }
+        else {
+            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
+            if (Ext.isArray(data) && data.length == 1) {
+                data = data.shift();
+            }
+            if (!this.isData(data)) {
+                // TODO: Let exception-handler choose to commit or not rather than blindly rs.commit() here.
+                //rs.commit();
+                throw new Ext.data.DataReader.Error('realize', rs);
+            }
+            rs.phantom = false; // <-- That's what it's all about
+            rs._phid = rs.id;  // <-- copy phantom-id -> _phid, so we can remap in Store#onCreateRecords
+            rs.id = this.getId(data);
+
+            rs.fields.each(function(f) {
+                if (data[f.name] !== f.defaultValue) {
+                    rs.data[f.name] = data[f.name];
+                }
+            });
+            rs.commit();
+        }
+    },
+
+    /**
+     * Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
+     * If returning data from multiple-records after a batch-update, you must return record-data from the server in
+     * the same order received.  Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be
+     * suppressed as the record receives fresh new data-hash
+     * @param {Record/Record[]} rs
+     * @param {Object/Object[]} data
+     */
+    update : function(rs, data) {
+        if (Ext.isArray(rs)) {
+            for (var i=rs.length-1; i >= 0; i--) {
+                if (Ext.isArray(data)) {
+                    this.update(rs.splice(i,1).shift(), data.splice(i,1).shift());
+                }
+                else {
+                    // weird...rs is an array but data isn't??  recurse but just send in the whole data object.
+                    // the else clause below will detect !this.isData and throw exception.
+                    this.update(rs.splice(i,1).shift(), data);
+                }
+            }
+        }
+        else {
+            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
+            if (Ext.isArray(data) && data.length == 1) {
+                data = data.shift();
+            }
+            if (this.isData(data)) {
+                rs.fields.each(function(f) {
+                    if (data[f.name] !== f.defaultValue) {
+                        rs.data[f.name] = data[f.name];
+                    }
+                });
+            }
+            rs.commit();
+        }
+    },
+
+    /**
+     * returns extracted, type-cast rows of data.  Iterates to call #extractValues for each row
+     * @param {Object[]/Object} data-root from server response
+     * @param {Boolean} returnRecords [false] Set true to return instances of Ext.data.Record
+     * @private
+     */
+    extractData : function(root, returnRecords) {
+        // A bit ugly this, too bad the Record's raw data couldn't be saved in a common property named "raw" or something.
+        var rawName = (this instanceof Ext.data.JsonReader) ? 'json' : 'node';
+
+        var rs = [];
+
+        // Had to add Check for XmlReader, #isData returns true if root is an Xml-object.  Want to check in order to re-factor
+        // #extractData into DataReader base, since the implementations are almost identical for JsonReader, XmlReader
+        if (this.isData(root) && !(this instanceof Ext.data.XmlReader)) {
+            root = [root];
+        }
+        var f       = this.recordType.prototype.fields,
+            fi      = f.items,
+            fl      = f.length,
+            rs      = [];
+        if (returnRecords === true) {
+            var Record = this.recordType;
+            for (var i = 0; i < root.length; i++) {
+                var n = root[i];
+                var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
+                record[rawName] = n;    // <-- There's implementation of ugly bit, setting the raw record-data.
+                rs.push(record);
+            }
+        }
+        else {
+            for (var i = 0; i < root.length; i++) {
+                var data = this.extractValues(root[i], fi, fl);
+                data[this.meta.idProperty] = this.getId(root[i]);
+                rs.push(data);
+            }
+        }
+        return rs;
+    },
+
+    /**
+     * Returns true if the supplied data-hash looks and quacks like data.  Checks to see if it has a key
+     * corresponding to idProperty defined in your DataReader config containing non-empty pk.
+     * @param {Object} data
+     * @return {Boolean}
+     */
+    isData : function(data) {
+        return (data && Ext.isObject(data) && !Ext.isEmpty(this.getId(data))) ? true : false;
+    },
+
+    // private function a store will createSequence upon
+    onMetaChange : function(meta){
+        delete this.ef;
+        this.meta = meta;
+        this.recordType = Ext.data.Record.create(meta.fields);
+        this.buildExtractors();
+    }
+};
+
+/**
+ * @class Ext.data.DataReader.Error
+ * @extends Ext.Error
+ * General error class for Ext.data.DataReader
+ */
+Ext.data.DataReader.Error = Ext.extend(Ext.Error, {
+    constructor : function(message, arg) {
+        this.arg = arg;
+        Ext.Error.call(this, message);
+    },
+    name: 'Ext.data.DataReader'
+});
+Ext.apply(Ext.data.DataReader.Error.prototype, {
+    lang : {
+        'update': "#update received invalid data from server.  Please see docs for DataReader#update and review your DataReader configuration.",
+        'realize': "#realize was called with invalid remote-data.  Please see the docs for DataReader#realize and review your DataReader configuration.",
+        'invalid-response': "#readResponse received an invalid response from the server."
+    }
+});
 /**
  * @class Ext.data.DataWriter
  * 
    Ext.data.DataWriter facilitates create, update, and destroy actions between
@@ -34733,511 +34733,511 @@ Ext.data.DataWriter.prototype = {
         Ext.iterate(data, function(k, v) {fields.push({name: k, value: v});},this);
         return fields;
     }
-};/**
- * @class Ext.data.DataProxy
- * @extends Ext.util.Observable
- * 
    Abstract base class for implementations which provide retrieval of unformatted data objects.
- * This class is intended to be extended and should not be created directly. For existing implementations,
- * see {@link Ext.data.DirectProxy}, {@link Ext.data.HttpProxy}, {@link Ext.data.ScriptTagProxy} and
- * {@link Ext.data.MemoryProxy}.
    
- * 
    DataProxy implementations are usually used in conjunction with an implementation of {@link Ext.data.DataReader}
- * (of the appropriate type which knows how to parse the data object) to provide a block of
- * {@link Ext.data.Records} to an {@link Ext.data.Store}.
    
- * 
    The parameter to a DataProxy constructor may be an {@link Ext.data.Connection} or can also be the
- * config object to an {@link Ext.data.Connection}.
    
- * 
    Custom implementations must implement either the doRequest method (preferred) or the
- * load method (deprecated). See
- * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#doRequest doRequest} or
- * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#load load} for additional details.
    
- * 
    Example 1
    
- * 
    
-proxy: new Ext.data.ScriptTagProxy({
-    {@link Ext.data.Connection#url url}: 'http://extjs.com/forum/topics-remote.php'
-}),
- * 
    
- * 
    Example 2
    
- * 
    
-proxy : new Ext.data.HttpProxy({
-    {@link Ext.data.Connection#method method}: 'GET',
-    {@link Ext.data.HttpProxy#prettyUrls prettyUrls}: false,
-    {@link Ext.data.Connection#url url}: 'local/default.php', // see options parameter for {@link Ext.Ajax#request}
-    {@link #api}: {
-        // all actions except the following will use above url
-        create  : 'local/new.php',
-        update  : 'local/update.php'
-    }
-}),
- * 
    
- * 
    And new in Ext version 3, attach centralized event-listeners upon the DataProxy class itself!  This is a great place
- * to implement a messaging system to centralize your application's user-feedback and error-handling.
    
- * 
    
-// Listen to all "beforewrite" event fired by all proxies.
-Ext.data.DataProxy.on('beforewrite', function(proxy, action) {
-    console.log('beforewrite: ', action);
-});
-
-// Listen to "write" event fired by all proxies
-Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
-    console.info('write: ', action);
-});
-
-// Listen to "exception" event fired by all proxies
-Ext.data.DataProxy.on('exception', function(proxy, type, action) {
-    console.error(type + action + ' exception);
-});
- * 
    
- * Note: These three events are all fired with the signature of the corresponding DataProxy instance event {@link #beforewrite beforewrite}, {@link #write write} and {@link #exception exception}.
- */
-Ext.data.DataProxy = function(conn){
-    // make sure we have a config object here to support ux proxies.
-    // All proxies should now send config into superclass constructor.
-    conn = conn || {};
-
-    // This line caused a bug when people use custom Connection object having its own request method.
-    // http://extjs.com/forum/showthread.php?t=67194.  Have to set DataProxy config
-    //Ext.applyIf(this, conn);
-
-    this.api     = conn.api;
-    this.url     = conn.url;
-    this.restful = conn.restful;
-    this.listeners = conn.listeners;
-
-    // deprecated
-    this.prettyUrls = conn.prettyUrls;
-
-    /**
-     * @cfg {Object} api
-     * Specific urls to call on CRUD action methods "read", "create", "update" and "destroy".
-     * Defaults to:
    
-api: {
-    read    : undefined,
-    create  : undefined,
-    update  : undefined,
-    destroy : undefined
-}
-     * 
    
-     * 
    The url is built based upon the action being executed [load|create|save|destroy]
-     * using the commensurate {@link #api} property, or if undefined default to the
-     * configured {@link Ext.data.Store}.{@link Ext.data.Store#url url}.

    
-     * 
    For example:
    
-     * 
    
-api: {
-    load :    '/controller/load',
-    create :  '/controller/new',  // Server MUST return idProperty of new record
-    save :    '/controller/update',
-    destroy : '/controller/destroy_action'
-}
-
-// Alternatively, one can use the object-form to specify each API-action
-api: {
-    load: {url: 'read.php', method: 'GET'},
-    create: 'create.php',
-    destroy: 'destroy.php',
-    save: 'update.php'
-}
-     * 
    
-     * 
    If the specific URL for a given CRUD action is undefined, the CRUD action request
-     * will be directed to the configured {@link Ext.data.Connection#url url}.
    
-     * 
    Note: To modify the URL for an action dynamically the appropriate API
-     * property should be modified before the action is requested using the corresponding before
-     * action event.  For example to modify the URL associated with the load action:
-     * 
    
-// modify the url for the action
-myStore.on({
-    beforeload: {
-        fn: function (store, options) {
-            // use {@link Ext.data.HttpProxy#setUrl setUrl} to change the URL for *just* this request.
-            store.proxy.setUrl('changed1.php');
-
-            // set optional second parameter to true to make this URL change
-            // permanent, applying this URL for all subsequent requests.
-            store.proxy.setUrl('changed1.php', true);
-
-            // Altering the proxy API should be done using the public
-            // method {@link Ext.data.DataProxy#setApi setApi}.
-            store.proxy.setApi('read', 'changed2.php');
-
-            // Or set the entire API with a config-object.
-            // When using the config-object option, you must redefine the entire
-            // API -- not just a specific action of it.
-            store.proxy.setApi({
-                read    : 'changed_read.php',
-                create  : 'changed_create.php',
-                update  : 'changed_update.php',
-                destroy : 'changed_destroy.php'
-            });
-        }
-    }
-});
-     * 
    
-     * 
    
-     */
-
-    this.addEvents(
-        /**
-         * @event exception
-         * 
    Fires if an exception occurs in the Proxy during a remote request. This event is relayed
-         * through a corresponding {@link Ext.data.Store}.{@link Ext.data.Store#exception exception},
-         * so any Store instance may observe this event.
    
-         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
-         * through the Ext.data.DataProxy class to allow for centralized processing of exception events from all
-         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
-         * 
    This event can be fired for one of two reasons:
    
-         * 
      
-         * 
    • remote-request failed : 
      
-         * The server did not return status === 200.
-         * 
      • 
-         * 
    • remote-request succeeded : 
      
-         * The remote-request succeeded but the reader could not read the response.
-         * This means the server returned data, but the configured Reader threw an
-         * error while reading the response.  In this case, this event will be
-         * raised and the caught error will be passed along into this event.
-         * 
      • 
-         * 
    
-         * 
    This event fires with two different contexts based upon the 2nd
-         * parameter type [remote|response].  The first four parameters
-         * are identical between the two contexts -- only the final two parameters
-         * differ.
    
-         * @param {DataProxy} this The proxy that sent the request
-         * @param {String} type
-         * 
    The value of this parameter will be either 'response' or 'remote'.
    
-         * 
      
-         * 
    • 'response' : 
      
-         * 
      An invalid response from the server was returned: either 404,
-         * 500 or the response meta-data does not match that defined in the DataReader
-         * (e.g.: root, idProperty, successProperty).
      
-         * 
      • 
-         * 
    • 'remote' : 
      
-         * 
      A valid response was returned from the server having
-         * successProperty === false.  This response might contain an error-message
-         * sent from the server.  For example, the user may have failed
-         * authentication/authorization or a database validation error occurred.
      
-         * 
      • 
-         * 
    
-         * @param {String} action Name of the action (see {@link Ext.data.Api#actions}.
-         * @param {Object} options The options for the action that were specified in the {@link #request}.
-         * @param {Object} response
-         * 
    The value of this parameter depends on the value of the type parameter:
    
-         * 
      
-         * 
    • 'response' : 
      
-         * 
      The raw browser response object (e.g.: XMLHttpRequest)
      
-         * 
      • 
-         * 
    • 'remote' : 
      
-         * 
      The decoded response object sent from the server.
      
-         * 
      • 
-         * 
    
-         * @param {Mixed} arg
-         * 
    The type and value of this parameter depends on the value of the type parameter:
    
-         * 
      
-         * 
    • 'response' : Error
      
-         * 
      The JavaScript Error object caught if the configured Reader could not read the data.
-         * If the remote request returns success===false, this parameter will be null.
      
-         * 
      • 
-         * 
    • 'remote' : Record/Record[]
      
-         * 
      This parameter will only exist if the action was a write action
-         * (Ext.data.Api.actions.create|update|destroy).
      
-         * 
      • 
-         * 
    
-         */
-        'exception',
-        /**
-         * @event beforeload
-         * Fires before a request to retrieve a data object.
-         * @param {DataProxy} this The proxy for the request
-         * @param {Object} params The params object passed to the {@link #request} function
-         */
-        'beforeload',
-        /**
-         * @event load
-         * Fires before the load method's callback is called.
-         * @param {DataProxy} this The proxy for the request
-         * @param {Object} o The request transaction object
-         * @param {Object} options The callback's options property as passed to the {@link #request} function
-         */
-        'load',
-        /**
-         * @event loadexception
-         * 
    This event is deprecated.  The signature of the loadexception event
-         * varies depending on the proxy, use the catch-all {@link #exception} event instead.
-         * This event will fire in addition to the {@link #exception} event.
    
-         * @param {misc} misc See {@link #exception}.
-         * @deprecated
-         */
-        'loadexception',
-        /**
-         * @event beforewrite
-         * 
    Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy
    
-         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
-         * through the Ext.data.DataProxy class to allow for centralized processing of beforewrite events from all
-         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
-         * @param {DataProxy} this The proxy for the request
-         * @param {String} action [Ext.data.Api.actions.create|update|destroy]
-         * @param {Record/Array[Record]} rs The Record(s) to create|update|destroy.
-         * @param {Object} params The request params object.  Edit params to add parameters to the request.
-         */
-        'beforewrite',
-        /**
-         * @event write
-         * 
    Fires before the request-callback is called
    
-         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
-         * through the Ext.data.DataProxy class to allow for centralized processing of write events from all
-         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
-         * @param {DataProxy} this The proxy that sent the request
-         * @param {String} action [Ext.data.Api.actions.create|upate|destroy]
-         * @param {Object} data The data object extracted from the server-response
-         * @param {Object} response The decoded response from server
-         * @param {Record/Record{}} rs The records from Store
-         * @param {Object} options The callback's options property as passed to the {@link #request} function
-         */
-        'write'
-    );
-    Ext.data.DataProxy.superclass.constructor.call(this);
-
-    // Prepare the proxy api.  Ensures all API-actions are defined with the Object-form.
-    try {
-        Ext.data.Api.prepare(this);
-    } catch (e) {
-        if (e instanceof Ext.data.Api.Error) {
-            e.toConsole();
-        }
-    }
-    // relay each proxy's events onto Ext.data.DataProxy class for centralized Proxy-listening
-    Ext.data.DataProxy.relayEvents(this, ['beforewrite', 'write', 'exception']);
-};
-
-Ext.extend(Ext.data.DataProxy, Ext.util.Observable, {
-    /**
-     * @cfg {Boolean} restful
-     * 
    Defaults to false.  Set to true to operate in a RESTful manner.
    
-     * 
     Note: this parameter will automatically be set to true if the
-     * {@link Ext.data.Store} it is plugged into is set to restful: true. If the
-     * Store is RESTful, there is no need to set this option on the proxy.
    
-     * 
    RESTful implementations enable the serverside framework to automatically route
-     * actions sent to one url based upon the HTTP method, for example:
-     * 
    
-store: new Ext.data.Store({
-    restful: true,
-    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
-    ...
-)}
-     * 
    
-     * If there is no {@link #api} specified in the configuration of the proxy,
-     * all requests will be marshalled to a single RESTful url (/users) so the serverside
-     * framework can inspect the HTTP Method and act accordingly:
-     * 
    -Method   url        action
-POST     /users     create
-GET      /users     read
-PUT      /users/23  update
-DESTROY  /users/23  delete
-     * 
    
-     * 
    If set to true, a {@link Ext.data.Record#phantom non-phantom} record's
-     * {@link Ext.data.Record#id id} will be appended to the url. Some MVC (e.g., Ruby on Rails,
-     * Merb and Django) support segment based urls where the segments in the URL follow the
-     * Model-View-Controller approach:
    
-     * someSite.com/controller/action/id
-     * 
    
-     * Where the segments in the url are typically:
      
-     * 
    • The first segment : represents the controller class that should be invoked.
      • 
-     * 
    • The second segment : represents the class function, or method, that should be called.
      • 
-     * 
    • The third segment : represents the ID (a variable typically passed to the method).
      • 
-     * 
    
-     * 
    Refer to {@link Ext.data.DataProxy#api} for additional information.
    
-     */
-    restful: false,
-
-    /**
-     * 
    Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
    
-     * 
    If called with an object as the only parameter, the object should redefine the entire API, e.g.:
    
-proxy.setApi({
-    read    : '/users/read',
-    create  : '/users/create',
-    update  : '/users/update',
-    destroy : '/users/destroy'
-});
-
    
-     * 
    If called with two parameters, the first parameter should be a string specifying the API action to
-     * redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:
    
-proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
-
    
-     * @param {String/Object} api An API specification object, or the name of an action.
-     * @param {String/Function} url The URL (or function if using DirectProxy) to call for the action.
-     */
-    setApi : function() {
-        if (arguments.length == 1) {
-            var valid = Ext.data.Api.isValid(arguments[0]);
-            if (valid === true) {
-                this.api = arguments[0];
-            }
-            else {
-                throw new Ext.data.Api.Error('invalid', valid);
-            }
-        }
-        else if (arguments.length == 2) {
-            if (!Ext.data.Api.isAction(arguments[0])) {
-                throw new Ext.data.Api.Error('invalid', arguments[0]);
-            }
-            this.api[arguments[0]] = arguments[1];
-        }
-        Ext.data.Api.prepare(this);
-    },
-
-    /**
-     * Returns true if the specified action is defined as a unique action in the api-config.
-     * request.  If all API-actions are routed to unique urls, the xaction parameter is unecessary.  However, if no api is defined
-     * and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
-     * the corresponding code for CRUD action.
-     * @param {String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} action
-     * @return {Boolean}
-     */
-    isApiAction : function(action) {
-        return (this.api[action]) ? true : false;
-    },
-
-    /**
-     * All proxy actions are executed through this method.  Automatically fires the "before" + action event
-     * @param {String} action Name of the action
-     * @param {Ext.data.Record/Ext.data.Record[]/null} rs Will be null when action is 'load'
-     * @param {Object} params
-     * @param {Ext.data.DataReader} reader
-     * @param {Function} callback
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the Proxy object.
-     * @param {Object} options Any options specified for the action (e.g. see {@link Ext.data.Store#load}.
-     */
-    request : function(action, rs, params, reader, callback, scope, options) {
-        if (!this.api[action] && !this.load) {
-            throw new Ext.data.DataProxy.Error('action-undefined', action);
-        }
-        params = params || {};
-        if ((action === Ext.data.Api.actions.read) ? this.fireEvent("beforeload", this, params) : this.fireEvent("beforewrite", this, action, rs, params) !== false) {
-            this.doRequest.apply(this, arguments);
-        }
-        else {
-            callback.call(scope || this, null, options, false);
-        }
-    },
-
-
-    /**
-     * Deprecated load method using old method signature. See {@doRequest} for preferred method.
-     * @deprecated
-     * @param {Object} params
-     * @param {Object} reader
-     * @param {Object} callback
-     * @param {Object} scope
-     * @param {Object} arg
-     */
-    load : null,
-
-    /**
-     * @cfg {Function} doRequest Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.
-     * (e.g.: {@link Ext.data.HttpProxy#doRequest HttpProxy.doRequest},
-     * {@link Ext.data.DirectProxy#doRequest DirectProxy.doRequest}).
-     */
-    doRequest : function(action, rs, params, reader, callback, scope, options) {
-        // default implementation of doRequest for backwards compatibility with 2.0 proxies.
-        // If we're executing here, the action is probably "load".
-        // Call with the pre-3.0 method signature.
-        this.load(params, reader, callback, scope, options);
-    },
-
-    /**
-     * @cfg {Function} onRead Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for read {@link Ext.data.Api#actions action}.
-     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
-     * @param {Object} o The request transaction object
-     * @param {Object} res The server response
-     * @fires loadexception (deprecated)
-     * @fires exception
-     * @fires load
-     * @protected
-     */
-    onRead : Ext.emptyFn,
-    /**
-     * @cfg {Function} onWrite Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for create, update and destroy {@link Ext.data.Api#actions actions}.
-     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
-     * @param {Object} trans The request transaction object
-     * @param {Object} res The server response
-     * @fires exception
-     * @fires write
-     * @protected
-     */
-    onWrite : Ext.emptyFn,
-    /**
-     * buildUrl
-     * Sets the appropriate url based upon the action being executed.  If restful is true, and only a single record is being acted upon,
-     * url will be built Rails-style, as in "/controller/action/32".  restful will aply iff the supplied record is an
-     * instance of Ext.data.Record rather than an Array of them.
-     * @param {String} action The api action being executed [read|create|update|destroy]
-     * @param {Ext.data.Record/Array[Ext.data.Record]} The record or Array of Records being acted upon.
-     * @return {String} url
-     * @private
-     */
-    buildUrl : function(action, record) {
-        record = record || null;
-
-        // conn.url gets nullified after each request.  If it's NOT null here, that means the user must have intervened with a call
-        // to DataProxy#setUrl or DataProxy#setApi and changed it before the request was executed.  If that's the case, use conn.url,
-        // otherwise, build the url from the api or this.url.
-        var url = (this.conn && this.conn.url) ? this.conn.url : (this.api[action]) ? this.api[action].url : this.url;
-        if (!url) {
-            throw new Ext.data.Api.Error('invalid-url', action);
-        }
-
-        // look for urls having "provides" suffix used in some MVC frameworks like Rails/Merb and others.  The provides suffice informs
-        // the server what data-format the client is dealing with and returns data in the same format (eg: application/json, application/xml, etc)
-        // e.g.: /users.json, /users.xml, etc.
-        // with restful routes, we need urls like:
-        // PUT /users/1.json
-        // DELETE /users/1.json
-        var provides = null;
-        var m = url.match(/(.*)(\.json|\.xml|\.html)$/);
-        if (m) {
-            provides = m[2];    // eg ".json"
-            url      = m[1];    // eg: "/users"
-        }
-        // prettyUrls is deprectated in favor of restful-config
-        if ((this.restful === true || this.prettyUrls === true) && record instanceof Ext.data.Record && !record.phantom) {
-            url += '/' + record.id;
-        }
-        return (provides === null) ? url : url + provides;
-    },
-
-    /**
-     * Destroys the proxy by purging any event listeners and cancelling any active requests.
-     */
-    destroy: function(){
-        this.purgeListeners();
-    }
-});
-
-// Apply the Observable prototype to the DataProxy class so that proxy instances can relay their
-// events to the class.  Allows for centralized listening of all proxy instances upon the DataProxy class.
-Ext.apply(Ext.data.DataProxy, Ext.util.Observable.prototype);
-Ext.util.Observable.call(Ext.data.DataProxy);
-
-/**
- * @class Ext.data.DataProxy.Error
- * @extends Ext.Error
- * DataProxy Error extension.
- * constructor
- * @param {String} name
- * @param {Record/Array[Record]/Array}
- */
-Ext.data.DataProxy.Error = Ext.extend(Ext.Error, {
-    constructor : function(message, arg) {
-        this.arg = arg;
-        Ext.Error.call(this, message);
-    },
-    name: 'Ext.data.DataProxy'
-});
-Ext.apply(Ext.data.DataProxy.Error.prototype, {
-    lang: {
-        'action-undefined': "DataProxy attempted to execute an API-action but found an undefined url / function.  Please review your Proxy url/api-configuration.",
-        'api-invalid': 'Recieved an invalid API-configuration.  Please ensure your proxy API-configuration contains only the actions from Ext.data.Api.actions.'
-    }
-});
-
-
+};/**
+ * @class Ext.data.DataProxy
+ * @extends Ext.util.Observable
+ * 
    Abstract base class for implementations which provide retrieval of unformatted data objects.
+ * This class is intended to be extended and should not be created directly. For existing implementations,
+ * see {@link Ext.data.DirectProxy}, {@link Ext.data.HttpProxy}, {@link Ext.data.ScriptTagProxy} and
+ * {@link Ext.data.MemoryProxy}.
    
+ * 
    DataProxy implementations are usually used in conjunction with an implementation of {@link Ext.data.DataReader}
+ * (of the appropriate type which knows how to parse the data object) to provide a block of
+ * {@link Ext.data.Records} to an {@link Ext.data.Store}.
    
+ * 
    The parameter to a DataProxy constructor may be an {@link Ext.data.Connection} or can also be the
+ * config object to an {@link Ext.data.Connection}.
    
+ * 
    Custom implementations must implement either the doRequest method (preferred) or the
+ * load method (deprecated). See
+ * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#doRequest doRequest} or
+ * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#load load} for additional details.
    
+ * 
    Example 1
    
+ * 
    
+proxy: new Ext.data.ScriptTagProxy({
+    {@link Ext.data.Connection#url url}: 'http://extjs.com/forum/topics-remote.php'
+}),
+ * 
    
+ * 
    Example 2
    
+ * 
    
+proxy : new Ext.data.HttpProxy({
+    {@link Ext.data.Connection#method method}: 'GET',
+    {@link Ext.data.HttpProxy#prettyUrls prettyUrls}: false,
+    {@link Ext.data.Connection#url url}: 'local/default.php', // see options parameter for {@link Ext.Ajax#request}
+    {@link #api}: {
+        // all actions except the following will use above url
+        create  : 'local/new.php',
+        update  : 'local/update.php'
+    }
+}),
+ * 
    
+ * 
    And new in Ext version 3, attach centralized event-listeners upon the DataProxy class itself!  This is a great place
+ * to implement a messaging system to centralize your application's user-feedback and error-handling.
    
+ * 
    
+// Listen to all "beforewrite" event fired by all proxies.
+Ext.data.DataProxy.on('beforewrite', function(proxy, action) {
+    console.log('beforewrite: ', action);
+});
+
+// Listen to "write" event fired by all proxies
+Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
+    console.info('write: ', action);
+});
+
+// Listen to "exception" event fired by all proxies
+Ext.data.DataProxy.on('exception', function(proxy, type, action) {
+    console.error(type + action + ' exception);
+});
+ * 
    
+ * Note: These three events are all fired with the signature of the corresponding DataProxy instance event {@link #beforewrite beforewrite}, {@link #write write} and {@link #exception exception}.
+ */
+Ext.data.DataProxy = function(conn){
+    // make sure we have a config object here to support ux proxies.
+    // All proxies should now send config into superclass constructor.
+    conn = conn || {};
+
+    // This line caused a bug when people use custom Connection object having its own request method.
+    // http://extjs.com/forum/showthread.php?t=67194.  Have to set DataProxy config
+    //Ext.applyIf(this, conn);
+
+    this.api     = conn.api;
+    this.url     = conn.url;
+    this.restful = conn.restful;
+    this.listeners = conn.listeners;
+
+    // deprecated
+    this.prettyUrls = conn.prettyUrls;
+
+    /**
+     * @cfg {Object} api
+     * Specific urls to call on CRUD action methods "read", "create", "update" and "destroy".
+     * Defaults to:
    
+api: {
+    read    : undefined,
+    create  : undefined,
+    update  : undefined,
+    destroy : undefined
+}
+     * 
    
+     * 
    The url is built based upon the action being executed [load|create|save|destroy]
+     * using the commensurate {@link #api} property, or if undefined default to the
+     * configured {@link Ext.data.Store}.{@link Ext.data.Store#url url}.

    
+     * 
    For example:
    
+     * 
    
+api: {
+    load :    '/controller/load',
+    create :  '/controller/new',  // Server MUST return idProperty of new record
+    save :    '/controller/update',
+    destroy : '/controller/destroy_action'
+}
+
+// Alternatively, one can use the object-form to specify each API-action
+api: {
+    load: {url: 'read.php', method: 'GET'},
+    create: 'create.php',
+    destroy: 'destroy.php',
+    save: 'update.php'
+}
+     * 
    
+     * 
    If the specific URL for a given CRUD action is undefined, the CRUD action request
+     * will be directed to the configured {@link Ext.data.Connection#url url}.
    
+     * 
    Note: To modify the URL for an action dynamically the appropriate API
+     * property should be modified before the action is requested using the corresponding before
+     * action event.  For example to modify the URL associated with the load action:
+     * 
    
+// modify the url for the action
+myStore.on({
+    beforeload: {
+        fn: function (store, options) {
+            // use {@link Ext.data.HttpProxy#setUrl setUrl} to change the URL for *just* this request.
+            store.proxy.setUrl('changed1.php');
+
+            // set optional second parameter to true to make this URL change
+            // permanent, applying this URL for all subsequent requests.
+            store.proxy.setUrl('changed1.php', true);
+
+            // Altering the proxy API should be done using the public
+            // method {@link Ext.data.DataProxy#setApi setApi}.
+            store.proxy.setApi('read', 'changed2.php');
+
+            // Or set the entire API with a config-object.
+            // When using the config-object option, you must redefine the entire
+            // API -- not just a specific action of it.
+            store.proxy.setApi({
+                read    : 'changed_read.php',
+                create  : 'changed_create.php',
+                update  : 'changed_update.php',
+                destroy : 'changed_destroy.php'
+            });
+        }
+    }
+});
+     * 
    
+     * 
    
+     */
+
+    this.addEvents(
+        /**
+         * @event exception
+         * 
    Fires if an exception occurs in the Proxy during a remote request. This event is relayed
+         * through a corresponding {@link Ext.data.Store}.{@link Ext.data.Store#exception exception},
+         * so any Store instance may observe this event.
    
+         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
+         * through the Ext.data.DataProxy class to allow for centralized processing of exception events from all
+         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
+         * 
    This event can be fired for one of two reasons:
    
+         * 
      
+         * 
    • remote-request failed : 
      
+         * The server did not return status === 200.
+         * 
      • 
+         * 
    • remote-request succeeded : 
      
+         * The remote-request succeeded but the reader could not read the response.
+         * This means the server returned data, but the configured Reader threw an
+         * error while reading the response.  In this case, this event will be
+         * raised and the caught error will be passed along into this event.
+         * 
      • 
+         * 
    
+         * 
    This event fires with two different contexts based upon the 2nd
+         * parameter type [remote|response].  The first four parameters
+         * are identical between the two contexts -- only the final two parameters
+         * differ.
    
+         * @param {DataProxy} this The proxy that sent the request
+         * @param {String} type
+         * 
    The value of this parameter will be either 'response' or 'remote'.
    
+         * 
      
+         * 
    • 'response' : 
      
+         * 
      An invalid response from the server was returned: either 404,
+         * 500 or the response meta-data does not match that defined in the DataReader
+         * (e.g.: root, idProperty, successProperty).
      
+         * 
      • 
+         * 
    • 'remote' : 
      
+         * 
      A valid response was returned from the server having
+         * successProperty === false.  This response might contain an error-message
+         * sent from the server.  For example, the user may have failed
+         * authentication/authorization or a database validation error occurred.
      
+         * 
      • 
+         * 
    
+         * @param {String} action Name of the action (see {@link Ext.data.Api#actions}.
+         * @param {Object} options The options for the action that were specified in the {@link #request}.
+         * @param {Object} response
+         * 
    The value of this parameter depends on the value of the type parameter:
    
+         * 
      
+         * 
    • 'response' : 
      
+         * 
      The raw browser response object (e.g.: XMLHttpRequest)
      
+         * 
      • 
+         * 
    • 'remote' : 
      
+         * 
      The decoded response object sent from the server.
      
+         * 
      • 
+         * 
    
+         * @param {Mixed} arg
+         * 
    The type and value of this parameter depends on the value of the type parameter:
    
+         * 
      
+         * 
    • 'response' : Error
      
+         * 
      The JavaScript Error object caught if the configured Reader could not read the data.
+         * If the remote request returns success===false, this parameter will be null.
      
+         * 
      • 
+         * 
    • 'remote' : Record/Record[]
      
+         * 
      This parameter will only exist if the action was a write action
+         * (Ext.data.Api.actions.create|update|destroy).
      
+         * 
      • 
+         * 
    
+         */
+        'exception',
+        /**
+         * @event beforeload
+         * Fires before a request to retrieve a data object.
+         * @param {DataProxy} this The proxy for the request
+         * @param {Object} params The params object passed to the {@link #request} function
+         */
+        'beforeload',
+        /**
+         * @event load
+         * Fires before the load method's callback is called.
+         * @param {DataProxy} this The proxy for the request
+         * @param {Object} o The request transaction object
+         * @param {Object} options The callback's options property as passed to the {@link #request} function
+         */
+        'load',
+        /**
+         * @event loadexception
+         * 
    This event is deprecated.  The signature of the loadexception event
+         * varies depending on the proxy, use the catch-all {@link #exception} event instead.
+         * This event will fire in addition to the {@link #exception} event.
    
+         * @param {misc} misc See {@link #exception}.
+         * @deprecated
+         */
+        'loadexception',
+        /**
+         * @event beforewrite
+         * 
    Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy
    
+         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
+         * through the Ext.data.DataProxy class to allow for centralized processing of beforewrite events from all
+         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
+         * @param {DataProxy} this The proxy for the request
+         * @param {String} action [Ext.data.Api.actions.create|update|destroy]
+         * @param {Record/Array[Record]} rs The Record(s) to create|update|destroy.
+         * @param {Object} params The request params object.  Edit params to add parameters to the request.
+         */
+        'beforewrite',
+        /**
+         * @event write
+         * 
    Fires before the request-callback is called
    
+         * 
    In addition to being fired through the DataProxy instance that raised the event, this event is also fired
+         * through the Ext.data.DataProxy class to allow for centralized processing of write events from all
+         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
    
+         * @param {DataProxy} this The proxy that sent the request
+         * @param {String} action [Ext.data.Api.actions.create|upate|destroy]
+         * @param {Object} data The data object extracted from the server-response
+         * @param {Object} response The decoded response from server
+         * @param {Record/Record{}} rs The records from Store
+         * @param {Object} options The callback's options property as passed to the {@link #request} function
+         */
+        'write'
+    );
+    Ext.data.DataProxy.superclass.constructor.call(this);
+
+    // Prepare the proxy api.  Ensures all API-actions are defined with the Object-form.
+    try {
+        Ext.data.Api.prepare(this);
+    } catch (e) {
+        if (e instanceof Ext.data.Api.Error) {
+            e.toConsole();
+        }
+    }
+    // relay each proxy's events onto Ext.data.DataProxy class for centralized Proxy-listening
+    Ext.data.DataProxy.relayEvents(this, ['beforewrite', 'write', 'exception']);
+};
+
+Ext.extend(Ext.data.DataProxy, Ext.util.Observable, {
+    /**
+     * @cfg {Boolean} restful
+     * 
    Defaults to false.  Set to true to operate in a RESTful manner.
    
+     * 
     Note: this parameter will automatically be set to true if the
+     * {@link Ext.data.Store} it is plugged into is set to restful: true. If the
+     * Store is RESTful, there is no need to set this option on the proxy.
    
+     * 
    RESTful implementations enable the serverside framework to automatically route
+     * actions sent to one url based upon the HTTP method, for example:
+     * 
    
+store: new Ext.data.Store({
+    restful: true,
+    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
+    ...
+)}
+     * 
    
+     * If there is no {@link #api} specified in the configuration of the proxy,
+     * all requests will be marshalled to a single RESTful url (/users) so the serverside
+     * framework can inspect the HTTP Method and act accordingly:
+     * 
    +Method   url        action
+POST     /users     create
+GET      /users     read
+PUT      /users/23  update
+DESTROY  /users/23  delete
+     * 
    
+     * 
    If set to true, a {@link Ext.data.Record#phantom non-phantom} record's
+     * {@link Ext.data.Record#id id} will be appended to the url. Some MVC (e.g., Ruby on Rails,
+     * Merb and Django) support segment based urls where the segments in the URL follow the
+     * Model-View-Controller approach:
    
+     * someSite.com/controller/action/id
+     * 
    
+     * Where the segments in the url are typically:
      
+     * 
    • The first segment : represents the controller class that should be invoked.
      • 
+     * 
    • The second segment : represents the class function, or method, that should be called.
      • 
+     * 
    • The third segment : represents the ID (a variable typically passed to the method).
      • 
+     * 
    
+     * 
    Refer to {@link Ext.data.DataProxy#api} for additional information.
    
+     */
+    restful: false,
+
+    /**
+     * 
    Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
    
+     * 
    If called with an object as the only parameter, the object should redefine the entire API, e.g.:
    
+proxy.setApi({
+    read    : '/users/read',
+    create  : '/users/create',
+    update  : '/users/update',
+    destroy : '/users/destroy'
+});
+
    
+     * 
    If called with two parameters, the first parameter should be a string specifying the API action to
+     * redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:
    
+proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
+
    
+     * @param {String/Object} api An API specification object, or the name of an action.
+     * @param {String/Function} url The URL (or function if using DirectProxy) to call for the action.
+     */
+    setApi : function() {
+        if (arguments.length == 1) {
+            var valid = Ext.data.Api.isValid(arguments[0]);
+            if (valid === true) {
+                this.api = arguments[0];
+            }
+            else {
+                throw new Ext.data.Api.Error('invalid', valid);
+            }
+        }
+        else if (arguments.length == 2) {
+            if (!Ext.data.Api.isAction(arguments[0])) {
+                throw new Ext.data.Api.Error('invalid', arguments[0]);
+            }
+            this.api[arguments[0]] = arguments[1];
+        }
+        Ext.data.Api.prepare(this);
+    },
+
+    /**
+     * Returns true if the specified action is defined as a unique action in the api-config.
+     * request.  If all API-actions are routed to unique urls, the xaction parameter is unecessary.  However, if no api is defined
+     * and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
+     * the corresponding code for CRUD action.
+     * @param {String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} action
+     * @return {Boolean}
+     */
+    isApiAction : function(action) {
+        return (this.api[action]) ? true : false;
+    },
+
+    /**
+     * All proxy actions are executed through this method.  Automatically fires the "before" + action event
+     * @param {String} action Name of the action
+     * @param {Ext.data.Record/Ext.data.Record[]/null} rs Will be null when action is 'load'
+     * @param {Object} params
+     * @param {Ext.data.DataReader} reader
+     * @param {Function} callback
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the Proxy object.
+     * @param {Object} options Any options specified for the action (e.g. see {@link Ext.data.Store#load}.
+     */
+    request : function(action, rs, params, reader, callback, scope, options) {
+        if (!this.api[action] && !this.load) {
+            throw new Ext.data.DataProxy.Error('action-undefined', action);
+        }
+        params = params || {};
+        if ((action === Ext.data.Api.actions.read) ? this.fireEvent("beforeload", this, params) : this.fireEvent("beforewrite", this, action, rs, params) !== false) {
+            this.doRequest.apply(this, arguments);
+        }
+        else {
+            callback.call(scope || this, null, options, false);
+        }
+    },
+
+
+    /**
+     * Deprecated load method using old method signature. See {@doRequest} for preferred method.
+     * @deprecated
+     * @param {Object} params
+     * @param {Object} reader
+     * @param {Object} callback
+     * @param {Object} scope
+     * @param {Object} arg
+     */
+    load : null,
+
+    /**
+     * @cfg {Function} doRequest Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.
+     * (e.g.: {@link Ext.data.HttpProxy#doRequest HttpProxy.doRequest},
+     * {@link Ext.data.DirectProxy#doRequest DirectProxy.doRequest}).
+     */
+    doRequest : function(action, rs, params, reader, callback, scope, options) {
+        // default implementation of doRequest for backwards compatibility with 2.0 proxies.
+        // If we're executing here, the action is probably "load".
+        // Call with the pre-3.0 method signature.
+        this.load(params, reader, callback, scope, options);
+    },
+
+    /**
+     * @cfg {Function} onRead Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for read {@link Ext.data.Api#actions action}.
+     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
+     * @param {Object} o The request transaction object
+     * @param {Object} res The server response
+     * @fires loadexception (deprecated)
+     * @fires exception
+     * @fires load
+     * @protected
+     */
+    onRead : Ext.emptyFn,
+    /**
+     * @cfg {Function} onWrite Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for create, update and destroy {@link Ext.data.Api#actions actions}.
+     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
+     * @param {Object} trans The request transaction object
+     * @param {Object} res The server response
+     * @fires exception
+     * @fires write
+     * @protected
+     */
+    onWrite : Ext.emptyFn,
+    /**
+     * buildUrl
+     * Sets the appropriate url based upon the action being executed.  If restful is true, and only a single record is being acted upon,
+     * url will be built Rails-style, as in "/controller/action/32".  restful will aply iff the supplied record is an
+     * instance of Ext.data.Record rather than an Array of them.
+     * @param {String} action The api action being executed [read|create|update|destroy]
+     * @param {Ext.data.Record/Array[Ext.data.Record]} The record or Array of Records being acted upon.
+     * @return {String} url
+     * @private
+     */
+    buildUrl : function(action, record) {
+        record = record || null;
+
+        // conn.url gets nullified after each request.  If it's NOT null here, that means the user must have intervened with a call
+        // to DataProxy#setUrl or DataProxy#setApi and changed it before the request was executed.  If that's the case, use conn.url,
+        // otherwise, build the url from the api or this.url.
+        var url = (this.conn && this.conn.url) ? this.conn.url : (this.api[action]) ? this.api[action].url : this.url;
+        if (!url) {
+            throw new Ext.data.Api.Error('invalid-url', action);
+        }
+
+        // look for urls having "provides" suffix used in some MVC frameworks like Rails/Merb and others.  The provides suffice informs
+        // the server what data-format the client is dealing with and returns data in the same format (eg: application/json, application/xml, etc)
+        // e.g.: /users.json, /users.xml, etc.
+        // with restful routes, we need urls like:
+        // PUT /users/1.json
+        // DELETE /users/1.json
+        var provides = null;
+        var m = url.match(/(.*)(\.json|\.xml|\.html)$/);
+        if (m) {
+            provides = m[2];    // eg ".json"
+            url      = m[1];    // eg: "/users"
+        }
+        // prettyUrls is deprectated in favor of restful-config
+        if ((this.restful === true || this.prettyUrls === true) && record instanceof Ext.data.Record && !record.phantom) {
+            url += '/' + record.id;
+        }
+        return (provides === null) ? url : url + provides;
+    },
+
+    /**
+     * Destroys the proxy by purging any event listeners and cancelling any active requests.
+     */
+    destroy: function(){
+        this.purgeListeners();
+    }
+});
+
+// Apply the Observable prototype to the DataProxy class so that proxy instances can relay their
+// events to the class.  Allows for centralized listening of all proxy instances upon the DataProxy class.
+Ext.apply(Ext.data.DataProxy, Ext.util.Observable.prototype);
+Ext.util.Observable.call(Ext.data.DataProxy);
+
+/**
+ * @class Ext.data.DataProxy.Error
+ * @extends Ext.Error
+ * DataProxy Error extension.
+ * constructor
+ * @param {String} name
+ * @param {Record/Array[Record]/Array}
+ */
+Ext.data.DataProxy.Error = Ext.extend(Ext.Error, {
+    constructor : function(message, arg) {
+        this.arg = arg;
+        Ext.Error.call(this, message);
+    },
+    name: 'Ext.data.DataProxy'
+});
+Ext.apply(Ext.data.DataProxy.Error.prototype, {
+    lang: {
+        'action-undefined': "DataProxy attempted to execute an API-action but found an undefined url / function.  Please review your Proxy url/api-configuration.",
+        'api-invalid': 'Recieved an invalid API-configuration.  Please ensure your proxy API-configuration contains only the actions from Ext.data.Api.actions.'
+    }
+});
+
+
 /**
  * @class Ext.data.Request
  * A simple Request class used internally to the data package to provide more generalized remote-requests
@@ -35306,620 +35306,620 @@ Ext.data.Response.prototype = {
      */
     records: undefined
 };
-/**
- * @class Ext.data.ScriptTagProxy
- * @extends Ext.data.DataProxy
- * An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain
- * other than the originating domain of the running page.
    
- * 
    
- * Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
- * of the running page, you must use this class, rather than HttpProxy.
    
- * 
    
- * The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript
- * source code because it is used as the source inside a <script> tag.
    
- * 
    
- * In order for the browser to process the returned data, the server must wrap the data object
- * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
- * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
- * depending on whether the callback name was passed:
- * 
    
- * 
    
-boolean scriptTag = false;
-String cb = request.getParameter("callback");
-if (cb != null) {
-    scriptTag = true;
-    response.setContentType("text/javascript");
-} else {
-    response.setContentType("application/x-json");
-}
-Writer out = response.getWriter();
-if (scriptTag) {
-    out.write(cb + "(");
-}
-out.print(dataBlock.toJsonString());
-if (scriptTag) {
-    out.write(");");
-}
-
    
- * 
    Below is a PHP example to do the same thing:
    
-$callback = $_REQUEST['callback'];
-
-// Create the output object.
-$output = array('a' => 'Apple', 'b' => 'Banana');
-
-//start output
-if ($callback) {
-    header('Content-Type: text/javascript');
-    echo $callback . '(' . json_encode($output) . ');';
-} else {
-    header('Content-Type: application/x-json');
-    echo json_encode($output);
-}
-
    
- * 
    Below is the ASP.Net code to do the same thing:
    
-String jsonString = "{success: true}";
-String cb = Request.Params.Get("callback");
-String responseString = "";
-if (!String.IsNullOrEmpty(cb)) {
-    responseString = cb + "(" + jsonString + ")";
-} else {
-    responseString = jsonString;
-}
-Response.Write(responseString);
-
    
- *
- * @constructor
- * @param {Object} config A configuration object.
- */
-Ext.data.ScriptTagProxy = function(config){
-    Ext.apply(this, config);
-
-    Ext.data.ScriptTagProxy.superclass.constructor.call(this, config);
-
-    this.head = document.getElementsByTagName("head")[0];
-
-    /**
-     * @event loadexception
-     * Deprecated in favor of 'exception' event.
-     * Fires if an exception occurs in the Proxy during data loading.  This event can be fired for one of two reasons:
-     * 
    • The load call timed out.  This means the load callback did not execute within the time limit
-     * specified by {@link #timeout}.  In this case, this event will be raised and the
-     * fourth parameter (read error) will be null.
      • 
-     * 
    • The load succeeded but the reader could not read the response.  This means the server returned
-     * data, but the configured Reader threw an error while reading the data.  In this case, this event will be
-     * raised and the caught error will be passed along as the fourth parameter of this event.
    
-     * Note that this event is also relayed through {@link Ext.data.Store}, so you can listen for it directly
-     * on any Store instance.
-     * @param {Object} this
-     * @param {Object} options The loading options that were specified (see {@link #load} for details).  If the load
-     * call timed out, this parameter will be null.
-     * @param {Object} arg The callback's arg object passed to the {@link #load} function
-     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data.
-     * If the remote request returns success: false, this parameter will be null.
-     */
-};
-
-Ext.data.ScriptTagProxy.TRANS_ID = 1000;
-
-Ext.extend(Ext.data.ScriptTagProxy, Ext.data.DataProxy, {
-    /**
-     * @cfg {String} url The URL from which to request the data object.
-     */
-    /**
-     * @cfg {Number} timeout (optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
-     */
-    timeout : 30000,
-    /**
-     * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
-     * the server the name of the callback function set up by the load call to process the returned data object.
-     * Defaults to "callback".
    The server-side processing must read this parameter value, and generate
-     * javascript output which calls this named function passing the data object as its only parameter.
-     */
-    callbackParam : "callback",
-    /**
-     *  @cfg {Boolean} nocache (optional) Defaults to true. Disable caching by adding a unique parameter
-     * name to the request.
-     */
-    nocache : true,
-
-    /**
-     * HttpProxy implementation of DataProxy#doRequest
-     * @param {String} action
-     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is read, rs will be null
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Ext.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Ext.data.Records.
-     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
-     * The function must be passed 
      
-     * 
    • The Record block object
      • 
-     * 
    • The "arg" argument from the load function
      • 
-     * 
    • A boolean success indicator
      • 
-     * 
    
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
-     */
-    doRequest : function(action, rs, params, reader, callback, scope, arg) {
-        var p = Ext.urlEncode(Ext.apply(params, this.extraParams));
-
-        var url = this.buildUrl(action, rs);
-        if (!url) {
-            throw new Ext.data.Api.Error('invalid-url', url);
-        }
-        url = Ext.urlAppend(url, p);
-
-        if(this.nocache){
-            url = Ext.urlAppend(url, '_dc=' + (new Date().getTime()));
-        }
-        var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
-        var trans = {
-            id : transId,
-            action: action,
-            cb : "stcCallback"+transId,
-            scriptId : "stcScript"+transId,
-            params : params,
-            arg : arg,
-            url : url,
-            callback : callback,
-            scope : scope,
-            reader : reader
-        };
-        window[trans.cb] = this.createCallback(action, rs, trans);
-        url += String.format("&{0}={1}", this.callbackParam, trans.cb);
-        if(this.autoAbort !== false){
-            this.abort();
-        }
-
-        trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
-
-        var script = document.createElement("script");
-        script.setAttribute("src", url);
-        script.setAttribute("type", "text/javascript");
-        script.setAttribute("id", trans.scriptId);
-        this.head.appendChild(script);
-
-        this.trans = trans;
-    },
-
-    // @private createCallback
-    createCallback : function(action, rs, trans) {
-        var self = this;
-        return function(res) {
-            self.trans = false;
-            self.destroyTrans(trans, true);
-            if (action === Ext.data.Api.actions.read) {
-                self.onRead.call(self, action, trans, res);
-            } else {
-                self.onWrite.call(self, action, trans, res, rs);
-            }
-        };
-    },
-    /**
-     * Callback for read actions
-     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
-     * @param {Object} trans The request transaction object
-     * @param {Object} res The server response
-     * @protected
-     */
-    onRead : function(action, trans, res) {
-        var result;
-        try {
-            result = trans.reader.readRecords(res);
-        }catch(e){
-            // @deprecated: fire loadexception
-            this.fireEvent("loadexception", this, trans, res, e);
-
-            this.fireEvent('exception', this, 'response', action, trans, res, e);
-            trans.callback.call(trans.scope||window, null, trans.arg, false);
-            return;
-        }
-        if (result.success === false) {
-            // @deprecated: fire old loadexception for backwards-compat.
-            this.fireEvent('loadexception', this, trans, res);
-
-            this.fireEvent('exception', this, 'remote', action, trans, res, null);
-        } else {
-            this.fireEvent("load", this, res, trans.arg);
-        }
-        trans.callback.call(trans.scope||window, result, trans.arg, result.success);
-    },
-    /**
-     * Callback for write actions
-     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
-     * @param {Object} trans The request transaction object
-     * @param {Object} res The server response
-     * @protected
-     */
-    onWrite : function(action, trans, response, rs) {
-        var reader = trans.reader;
-        try {
-            // though we already have a response object here in STP, run through readResponse to catch any meta-data exceptions.
-            var res = reader.readResponse(action, response);
-        } catch (e) {
-            this.fireEvent('exception', this, 'response', action, trans, res, e);
-            trans.callback.call(trans.scope||window, null, res, false);
-            return;
-        }
-        if(!res.success === true){
-            this.fireEvent('exception', this, 'remote', action, trans, res, rs);
-            trans.callback.call(trans.scope||window, null, res, false);
-            return;
-        }
-        this.fireEvent("write", this, action, res.data, res, rs, trans.arg );
-        trans.callback.call(trans.scope||window, res.data, res, true);
-    },
-
-    // private
-    isLoading : function(){
-        return this.trans ? true : false;
-    },
-
-    /**
-     * Abort the current server request.
-     */
-    abort : function(){
-        if(this.isLoading()){
-            this.destroyTrans(this.trans);
-        }
-    },
-
-    // private
-    destroyTrans : function(trans, isLoaded){
-        this.head.removeChild(document.getElementById(trans.scriptId));
-        clearTimeout(trans.timeoutId);
-        if(isLoaded){
-            window[trans.cb] = undefined;
-            try{
-                delete window[trans.cb];
-            }catch(e){}
-        }else{
-            // if hasn't been loaded, wait for load to remove it to prevent script error
-            window[trans.cb] = function(){
-                window[trans.cb] = undefined;
-                try{
-                    delete window[trans.cb];
-                }catch(e){}
-            };
-        }
-    },
-
-    // private
-    handleFailure : function(trans){
-        this.trans = false;
-        this.destroyTrans(trans, false);
-        if (trans.action === Ext.data.Api.actions.read) {
-            // @deprecated firing loadexception
-            this.fireEvent("loadexception", this, null, trans.arg);
-        }
-
-        this.fireEvent('exception', this, 'response', trans.action, {
-            response: null,
-            options: trans.arg
-        });
-        trans.callback.call(trans.scope||window, null, trans.arg, false);
-    },
-
-    // inherit docs
-    destroy: function(){
-        this.abort();
-        Ext.data.ScriptTagProxy.superclass.destroy.call(this);
-    }
-});/**
- * @class Ext.data.HttpProxy
- * @extends Ext.data.DataProxy
- * 
    An implementation of {@link Ext.data.DataProxy} that processes data requests within the same
- * domain of the originating page.
    
- * 
    Note: this class cannot be used to retrieve data from a domain other
- * than the domain from which the running page was served. For cross-domain requests, use a
- * {@link Ext.data.ScriptTagProxy ScriptTagProxy}.
    
- * 
    Be aware that to enable the browser to parse an XML document, the server must set
- * the Content-Type header in the HTTP response to "text/xml".
    
- * @constructor
- * @param {Object} conn
- * An {@link Ext.data.Connection} object, or options parameter to {@link Ext.Ajax#request}.
- * 
    Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the
- * Store's call to {@link #load} will override any specified callback and params
- * options. In this case, use the Store's {@link Ext.data.Store#events events} to modify parameters,
- * or react to loading events. The Store's {@link Ext.data.Store#baseParams baseParams} may also be
- * used to pass parameters known at instantiation time.
    
- * 
    If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make
- * the request.
    
- */
-Ext.data.HttpProxy = function(conn){
-    Ext.data.HttpProxy.superclass.constructor.call(this, conn);
-
-    /**
-     * The Connection object (Or options parameter to {@link Ext.Ajax#request}) which this HttpProxy
-     * uses to make requests to the server. Properties of this object may be changed dynamically to
-     * change the way data is requested.
-     * @property
-     */
-    this.conn = conn;
-
-    // nullify the connection url.  The url param has been copied to 'this' above.  The connection
-    // url will be set during each execution of doRequest when buildUrl is called.  This makes it easier for users to override the
-    // connection url during beforeaction events (ie: beforeload, beforewrite, etc).
-    // Url is always re-defined during doRequest.
-    this.conn.url = null;
-
-    this.useAjax = !conn || !conn.events;
-
-    // A hash containing active requests, keyed on action [Ext.data.Api.actions.create|read|update|destroy]
-    var actions = Ext.data.Api.actions;
-    this.activeRequest = {};
-    for (var verb in actions) {
-        this.activeRequest[actions[verb]] = undefined;
-    }
-};
-
-Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, {
-    /**
-     * Return the {@link Ext.data.Connection} object being used by this Proxy.
-     * @return {Connection} The Connection object. This object may be used to subscribe to events on
-     * a finer-grained basis than the DataProxy events.
-     */
-    getConnection : function() {
-        return this.useAjax ? Ext.Ajax : this.conn;
-    },
-
-    /**
-     * Used for overriding the url used for a single request.  Designed to be called during a beforeaction event.  Calling setUrl
-     * will override any urls set via the api configuration parameter.  Set the optional parameter makePermanent to set the url for
-     * all subsequent requests.  If not set to makePermanent, the next request will use the same url or api configuration defined
-     * in the initial proxy configuration.
-     * @param {String} url
-     * @param {Boolean} makePermanent (Optional) [false]
-     *
-     * (e.g.: beforeload, beforesave, etc).
-     */
-    setUrl : function(url, makePermanent) {
-        this.conn.url = url;
-        if (makePermanent === true) {
-            this.url = url;
-            this.api = null;
-            Ext.data.Api.prepare(this);
-        }
-    },
-
-    /**
-     * HttpProxy implementation of DataProxy#doRequest
-     * @param {String} action The crud action type (create, read, update, destroy)
-     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Ext.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Ext.data.Records.
-     * @param {Function} callback
-     * 
    A function to be called after the request.
-     * The callback is passed the following arguments:
      
-     * 
    • r : Ext.data.Record[] The block of Ext.data.Records.
      • 
-     * 
    • options: Options object from the action request
      • 
-     * 
    • success: Boolean success indicator
    
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
-     * @protected
-     */
-    doRequest : function(action, rs, params, reader, cb, scope, arg) {
-        var  o = {
-            method: (this.api[action]) ? this.api[action]['method'] : undefined,
-            request: {
-                callback : cb,
-                scope : scope,
-                arg : arg
-            },
-            reader: reader,
-            callback : this.createCallback(action, rs),
-            scope: this
-        };
-
-        // If possible, transmit data using jsonData || xmlData on Ext.Ajax.request (An installed DataWriter would have written it there.).
-        // Use std HTTP params otherwise.
-        if (params.jsonData) {
-            o.jsonData = params.jsonData;
-        } else if (params.xmlData) {
-            o.xmlData = params.xmlData;
-        } else {
-            o.params = params || {};
-        }
-        // Set the connection url.  If this.conn.url is not null here,
-        // the user must have overridden the url during a beforewrite/beforeload event-handler.
-        // this.conn.url is nullified after each request.
-        this.conn.url = this.buildUrl(action, rs);
-
-        if(this.useAjax){
-
-            Ext.applyIf(o, this.conn);
-
-            // If a currently running request is found for this action, abort it.
-            if (this.activeRequest[action]) {
-                ////
-                // Disabled aborting activeRequest while implementing REST.  activeRequest[action] will have to become an array
-                // TODO ideas anyone?
-                //
-                //Ext.Ajax.abort(this.activeRequest[action]);
-            }
-            this.activeRequest[action] = Ext.Ajax.request(o);
-        }else{
-            this.conn.request(o);
-        }
-        // request is sent, nullify the connection url in preparation for the next request
-        this.conn.url = null;
-    },
-
-    /**
-     * Returns a callback function for a request.  Note a special case is made for the
-     * read action vs all the others.
-     * @param {String} action [create|update|delete|load]
-     * @param {Ext.data.Record[]} rs The Store-recordset being acted upon
-     * @private
-     */
-    createCallback : function(action, rs) {
-        return function(o, success, response) {
-            this.activeRequest[action] = undefined;
-            if (!success) {
-                if (action === Ext.data.Api.actions.read) {
-                    // @deprecated: fire loadexception for backwards compat.
-                    // TODO remove in 3.1
-                    this.fireEvent('loadexception', this, o, response);
-                }
-                this.fireEvent('exception', this, 'response', action, o, response);
-                o.request.callback.call(o.request.scope, null, o.request.arg, false);
-                return;
-            }
-            if (action === Ext.data.Api.actions.read) {
-                this.onRead(action, o, response);
-            } else {
-                this.onWrite(action, o, response, rs);
-            }
-        };
-    },
-
-    /**
-     * Callback for read action
-     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
-     * @param {Object} o The request transaction object
-     * @param {Object} res The server response
-     * @fires loadexception (deprecated)
-     * @fires exception
-     * @fires load
-     * @protected
-     */
-    onRead : function(action, o, response) {
-        var result;
-        try {
-            result = o.reader.read(response);
-        }catch(e){
-            // @deprecated: fire old loadexception for backwards-compat.
-            // TODO remove in 3.1
-            this.fireEvent('loadexception', this, o, response, e);
-
-            this.fireEvent('exception', this, 'response', action, o, response, e);
-            o.request.callback.call(o.request.scope, null, o.request.arg, false);
-            return;
-        }
-        if (result.success === false) {
-            // @deprecated: fire old loadexception for backwards-compat.
-            // TODO remove in 3.1
-            this.fireEvent('loadexception', this, o, response);
-
-            // Get DataReader read-back a response-object to pass along to exception event
-            var res = o.reader.readResponse(action, response);
-            this.fireEvent('exception', this, 'remote', action, o, res, null);
-        }
-        else {
-            this.fireEvent('load', this, o, o.request.arg);
-        }
-        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
-        // the calls to request.callback(...) in each will have to be made identical.
-        // NOTE reader.readResponse does not currently return Ext.data.Response
-        o.request.callback.call(o.request.scope, result, o.request.arg, result.success);
-    },
-    /**
-     * Callback for write actions
-     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
-     * @param {Object} trans The request transaction object
-     * @param {Object} res The server response
-     * @fires exception
-     * @fires write
-     * @protected
-     */
-    onWrite : function(action, o, response, rs) {
-        var reader = o.reader;
-        var res;
-        try {
-            res = reader.readResponse(action, response);
-        } catch (e) {
-            this.fireEvent('exception', this, 'response', action, o, response, e);
-            o.request.callback.call(o.request.scope, null, o.request.arg, false);
-            return;
-        }
-        if (res.success === true) {
-            this.fireEvent('write', this, action, res.data, res, rs, o.request.arg);
-        } else {
-            this.fireEvent('exception', this, 'remote', action, o, res, rs);
-        }
-        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
-        // the calls to request.callback(...) in each will have to be made similar.
-        // NOTE reader.readResponse does not currently return Ext.data.Response
-        o.request.callback.call(o.request.scope, res.data, res, res.success);
-    },
-
-    // inherit docs
-    destroy: function(){
-        if(!this.useAjax){
-            this.conn.abort();
-        }else if(this.activeRequest){
-            var actions = Ext.data.Api.actions;
-            for (var verb in actions) {
-                if(this.activeRequest[actions[verb]]){
-                    Ext.Ajax.abort(this.activeRequest[actions[verb]]);
-                }
-            }
-        }
-        Ext.data.HttpProxy.superclass.destroy.call(this);
-    }
-});/**
- * @class Ext.data.MemoryProxy
- * @extends Ext.data.DataProxy
- * An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor
- * to the Reader when its load method is called.
- * @constructor
- * @param {Object} data The data object which the Reader uses to construct a block of Ext.data.Records.
- */
-Ext.data.MemoryProxy = function(data){
-    // Must define a dummy api with "read" action to satisfy DataProxy#doRequest and Ext.data.Api#prepare *before* calling super
-    var api = {};
-    api[Ext.data.Api.actions.read] = true;
-    Ext.data.MemoryProxy.superclass.constructor.call(this, {
-        api: api
-    });
-    this.data = data;
-};
-
-Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, {
-    /**
-     * @event loadexception
-     * Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed
-     * through {@link Ext.data.Store}, so you can listen for it directly on any Store instance.
-     * @param {Object} this
-     * @param {Object} arg The callback's arg object passed to the {@link #load} function
-     * @param {Object} null This parameter does not apply and will always be null for MemoryProxy
-     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data
-     */
-
-       /**
-     * MemoryProxy implementation of DataProxy#doRequest
-     * @param {String} action
-     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Ext.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Ext.data.Records.
-     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
-     * The function must be passed 
      
-     * 
    • The Record block object
      • 
-     * 
    • The "arg" argument from the load function
      • 
-     * 
    • A boolean success indicator
      • 
-     * 
    
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
-     */
-    doRequest : function(action, rs, params, reader, callback, scope, arg) {
-        // No implementation for CRUD in MemoryProxy.  Assumes all actions are 'load'
-        params = params || {};
-        var result;
-        try {
-            result = reader.readRecords(this.data);
-        }catch(e){
-            // @deprecated loadexception
-            this.fireEvent("loadexception", this, null, arg, e);
-
-            this.fireEvent('exception', this, 'response', action, arg, null, e);
-            callback.call(scope, null, arg, false);
-            return;
-        }
-        callback.call(scope, result, arg, true);
-    }
+/**
+ * @class Ext.data.ScriptTagProxy
+ * @extends Ext.data.DataProxy
+ * An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain
+ * other than the originating domain of the running page.
    
+ * 
    
+ * Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
+ * of the running page, you must use this class, rather than HttpProxy.
    
+ * 
    
+ * The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript
+ * source code because it is used as the source inside a <script> tag.
    
+ * 
    
+ * In order for the browser to process the returned data, the server must wrap the data object
+ * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
+ * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
+ * depending on whether the callback name was passed:
+ * 
    
+ * 
    
+boolean scriptTag = false;
+String cb = request.getParameter("callback");
+if (cb != null) {
+    scriptTag = true;
+    response.setContentType("text/javascript");
+} else {
+    response.setContentType("application/x-json");
+}
+Writer out = response.getWriter();
+if (scriptTag) {
+    out.write(cb + "(");
+}
+out.print(dataBlock.toJsonString());
+if (scriptTag) {
+    out.write(");");
+}
+
    
+ * 
    Below is a PHP example to do the same thing:
    
+$callback = $_REQUEST['callback'];
+
+// Create the output object.
+$output = array('a' => 'Apple', 'b' => 'Banana');
+
+//start output
+if ($callback) {
+    header('Content-Type: text/javascript');
+    echo $callback . '(' . json_encode($output) . ');';
+} else {
+    header('Content-Type: application/x-json');
+    echo json_encode($output);
+}
+
    
+ * 
    Below is the ASP.Net code to do the same thing:
    
+String jsonString = "{success: true}";
+String cb = Request.Params.Get("callback");
+String responseString = "";
+if (!String.IsNullOrEmpty(cb)) {
+    responseString = cb + "(" + jsonString + ")";
+} else {
+    responseString = jsonString;
+}
+Response.Write(responseString);
+
    
+ *
+ * @constructor
+ * @param {Object} config A configuration object.
+ */
+Ext.data.ScriptTagProxy = function(config){
+    Ext.apply(this, config);
+
+    Ext.data.ScriptTagProxy.superclass.constructor.call(this, config);
+
+    this.head = document.getElementsByTagName("head")[0];
+
+    /**
+     * @event loadexception
+     * Deprecated in favor of 'exception' event.
+     * Fires if an exception occurs in the Proxy during data loading.  This event can be fired for one of two reasons:
+     * 
    • The load call timed out.  This means the load callback did not execute within the time limit
+     * specified by {@link #timeout}.  In this case, this event will be raised and the
+     * fourth parameter (read error) will be null.
      • 
+     * 
    • The load succeeded but the reader could not read the response.  This means the server returned
+     * data, but the configured Reader threw an error while reading the data.  In this case, this event will be
+     * raised and the caught error will be passed along as the fourth parameter of this event.
    
+     * Note that this event is also relayed through {@link Ext.data.Store}, so you can listen for it directly
+     * on any Store instance.
+     * @param {Object} this
+     * @param {Object} options The loading options that were specified (see {@link #load} for details).  If the load
+     * call timed out, this parameter will be null.
+     * @param {Object} arg The callback's arg object passed to the {@link #load} function
+     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data.
+     * If the remote request returns success: false, this parameter will be null.
+     */
+};
+
+Ext.data.ScriptTagProxy.TRANS_ID = 1000;
+
+Ext.extend(Ext.data.ScriptTagProxy, Ext.data.DataProxy, {
+    /**
+     * @cfg {String} url The URL from which to request the data object.
+     */
+    /**
+     * @cfg {Number} timeout (optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
+     */
+    timeout : 30000,
+    /**
+     * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
+     * the server the name of the callback function set up by the load call to process the returned data object.
+     * Defaults to "callback".
    The server-side processing must read this parameter value, and generate
+     * javascript output which calls this named function passing the data object as its only parameter.
+     */
+    callbackParam : "callback",
+    /**
+     *  @cfg {Boolean} nocache (optional) Defaults to true. Disable caching by adding a unique parameter
+     * name to the request.
+     */
+    nocache : true,
+
+    /**
+     * HttpProxy implementation of DataProxy#doRequest
+     * @param {String} action
+     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is read, rs will be null
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Ext.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Ext.data.Records.
+     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
+     * The function must be passed 
      
+     * 
    • The Record block object
      • 
+     * 
    • The "arg" argument from the load function
      • 
+     * 
    • A boolean success indicator
      • 
+     * 
    
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     */
+    doRequest : function(action, rs, params, reader, callback, scope, arg) {
+        var p = Ext.urlEncode(Ext.apply(params, this.extraParams));
+
+        var url = this.buildUrl(action, rs);
+        if (!url) {
+            throw new Ext.data.Api.Error('invalid-url', url);
+        }
+        url = Ext.urlAppend(url, p);
+
+        if(this.nocache){
+            url = Ext.urlAppend(url, '_dc=' + (new Date().getTime()));
+        }
+        var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
+        var trans = {
+            id : transId,
+            action: action,
+            cb : "stcCallback"+transId,
+            scriptId : "stcScript"+transId,
+            params : params,
+            arg : arg,
+            url : url,
+            callback : callback,
+            scope : scope,
+            reader : reader
+        };
+        window[trans.cb] = this.createCallback(action, rs, trans);
+        url += String.format("&{0}={1}", this.callbackParam, trans.cb);
+        if(this.autoAbort !== false){
+            this.abort();
+        }
+
+        trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
+
+        var script = document.createElement("script");
+        script.setAttribute("src", url);
+        script.setAttribute("type", "text/javascript");
+        script.setAttribute("id", trans.scriptId);
+        this.head.appendChild(script);
+
+        this.trans = trans;
+    },
+
+    // @private createCallback
+    createCallback : function(action, rs, trans) {
+        var self = this;
+        return function(res) {
+            self.trans = false;
+            self.destroyTrans(trans, true);
+            if (action === Ext.data.Api.actions.read) {
+                self.onRead.call(self, action, trans, res);
+            } else {
+                self.onWrite.call(self, action, trans, res, rs);
+            }
+        };
+    },
+    /**
+     * Callback for read actions
+     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
+     * @param {Object} trans The request transaction object
+     * @param {Object} res The server response
+     * @protected
+     */
+    onRead : function(action, trans, res) {
+        var result;
+        try {
+            result = trans.reader.readRecords(res);
+        }catch(e){
+            // @deprecated: fire loadexception
+            this.fireEvent("loadexception", this, trans, res, e);
+
+            this.fireEvent('exception', this, 'response', action, trans, res, e);
+            trans.callback.call(trans.scope||window, null, trans.arg, false);
+            return;
+        }
+        if (result.success === false) {
+            // @deprecated: fire old loadexception for backwards-compat.
+            this.fireEvent('loadexception', this, trans, res);
+
+            this.fireEvent('exception', this, 'remote', action, trans, res, null);
+        } else {
+            this.fireEvent("load", this, res, trans.arg);
+        }
+        trans.callback.call(trans.scope||window, result, trans.arg, result.success);
+    },
+    /**
+     * Callback for write actions
+     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
+     * @param {Object} trans The request transaction object
+     * @param {Object} res The server response
+     * @protected
+     */
+    onWrite : function(action, trans, response, rs) {
+        var reader = trans.reader;
+        try {
+            // though we already have a response object here in STP, run through readResponse to catch any meta-data exceptions.
+            var res = reader.readResponse(action, response);
+        } catch (e) {
+            this.fireEvent('exception', this, 'response', action, trans, res, e);
+            trans.callback.call(trans.scope||window, null, res, false);
+            return;
+        }
+        if(!res.success === true){
+            this.fireEvent('exception', this, 'remote', action, trans, res, rs);
+            trans.callback.call(trans.scope||window, null, res, false);
+            return;
+        }
+        this.fireEvent("write", this, action, res.data, res, rs, trans.arg );
+        trans.callback.call(trans.scope||window, res.data, res, true);
+    },
+
+    // private
+    isLoading : function(){
+        return this.trans ? true : false;
+    },
+
+    /**
+     * Abort the current server request.
+     */
+    abort : function(){
+        if(this.isLoading()){
+            this.destroyTrans(this.trans);
+        }
+    },
+
+    // private
+    destroyTrans : function(trans, isLoaded){
+        this.head.removeChild(document.getElementById(trans.scriptId));
+        clearTimeout(trans.timeoutId);
+        if(isLoaded){
+            window[trans.cb] = undefined;
+            try{
+                delete window[trans.cb];
+            }catch(e){}
+        }else{
+            // if hasn't been loaded, wait for load to remove it to prevent script error
+            window[trans.cb] = function(){
+                window[trans.cb] = undefined;
+                try{
+                    delete window[trans.cb];
+                }catch(e){}
+            };
+        }
+    },
+
+    // private
+    handleFailure : function(trans){
+        this.trans = false;
+        this.destroyTrans(trans, false);
+        if (trans.action === Ext.data.Api.actions.read) {
+            // @deprecated firing loadexception
+            this.fireEvent("loadexception", this, null, trans.arg);
+        }
+
+        this.fireEvent('exception', this, 'response', trans.action, {
+            response: null,
+            options: trans.arg
+        });
+        trans.callback.call(trans.scope||window, null, trans.arg, false);
+    },
+
+    // inherit docs
+    destroy: function(){
+        this.abort();
+        Ext.data.ScriptTagProxy.superclass.destroy.call(this);
+    }
+});/**
+ * @class Ext.data.HttpProxy
+ * @extends Ext.data.DataProxy
+ * 
    An implementation of {@link Ext.data.DataProxy} that processes data requests within the same
+ * domain of the originating page.
    
+ * 
    Note: this class cannot be used to retrieve data from a domain other
+ * than the domain from which the running page was served. For cross-domain requests, use a
+ * {@link Ext.data.ScriptTagProxy ScriptTagProxy}.
    
+ * 
    Be aware that to enable the browser to parse an XML document, the server must set
+ * the Content-Type header in the HTTP response to "text/xml".
    
+ * @constructor
+ * @param {Object} conn
+ * An {@link Ext.data.Connection} object, or options parameter to {@link Ext.Ajax#request}.
+ * 
    Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the
+ * Store's call to {@link #load} will override any specified callback and params
+ * options. In this case, use the Store's {@link Ext.data.Store#events events} to modify parameters,
+ * or react to loading events. The Store's {@link Ext.data.Store#baseParams baseParams} may also be
+ * used to pass parameters known at instantiation time.
    
+ * 
    If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make
+ * the request.
    
+ */
+Ext.data.HttpProxy = function(conn){
+    Ext.data.HttpProxy.superclass.constructor.call(this, conn);
+
+    /**
+     * The Connection object (Or options parameter to {@link Ext.Ajax#request}) which this HttpProxy
+     * uses to make requests to the server. Properties of this object may be changed dynamically to
+     * change the way data is requested.
+     * @property
+     */
+    this.conn = conn;
+
+    // nullify the connection url.  The url param has been copied to 'this' above.  The connection
+    // url will be set during each execution of doRequest when buildUrl is called.  This makes it easier for users to override the
+    // connection url during beforeaction events (ie: beforeload, beforewrite, etc).
+    // Url is always re-defined during doRequest.
+    this.conn.url = null;
+
+    this.useAjax = !conn || !conn.events;
+
+    // A hash containing active requests, keyed on action [Ext.data.Api.actions.create|read|update|destroy]
+    var actions = Ext.data.Api.actions;
+    this.activeRequest = {};
+    for (var verb in actions) {
+        this.activeRequest[actions[verb]] = undefined;
+    }
+};
+
+Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, {
+    /**
+     * Return the {@link Ext.data.Connection} object being used by this Proxy.
+     * @return {Connection} The Connection object. This object may be used to subscribe to events on
+     * a finer-grained basis than the DataProxy events.
+     */
+    getConnection : function() {
+        return this.useAjax ? Ext.Ajax : this.conn;
+    },
+
+    /**
+     * Used for overriding the url used for a single request.  Designed to be called during a beforeaction event.  Calling setUrl
+     * will override any urls set via the api configuration parameter.  Set the optional parameter makePermanent to set the url for
+     * all subsequent requests.  If not set to makePermanent, the next request will use the same url or api configuration defined
+     * in the initial proxy configuration.
+     * @param {String} url
+     * @param {Boolean} makePermanent (Optional) [false]
+     *
+     * (e.g.: beforeload, beforesave, etc).
+     */
+    setUrl : function(url, makePermanent) {
+        this.conn.url = url;
+        if (makePermanent === true) {
+            this.url = url;
+            this.api = null;
+            Ext.data.Api.prepare(this);
+        }
+    },
+
+    /**
+     * HttpProxy implementation of DataProxy#doRequest
+     * @param {String} action The crud action type (create, read, update, destroy)
+     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Ext.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Ext.data.Records.
+     * @param {Function} callback
+     * 
    A function to be called after the request.
+     * The callback is passed the following arguments:
      
+     * 
    • r : Ext.data.Record[] The block of Ext.data.Records.
      • 
+     * 
    • options: Options object from the action request
      • 
+     * 
    • success: Boolean success indicator
    
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     * @protected
+     */
+    doRequest : function(action, rs, params, reader, cb, scope, arg) {
+        var  o = {
+            method: (this.api[action]) ? this.api[action]['method'] : undefined,
+            request: {
+                callback : cb,
+                scope : scope,
+                arg : arg
+            },
+            reader: reader,
+            callback : this.createCallback(action, rs),
+            scope: this
+        };
+
+        // If possible, transmit data using jsonData || xmlData on Ext.Ajax.request (An installed DataWriter would have written it there.).
+        // Use std HTTP params otherwise.
+        if (params.jsonData) {
+            o.jsonData = params.jsonData;
+        } else if (params.xmlData) {
+            o.xmlData = params.xmlData;
+        } else {
+            o.params = params || {};
+        }
+        // Set the connection url.  If this.conn.url is not null here,
+        // the user must have overridden the url during a beforewrite/beforeload event-handler.
+        // this.conn.url is nullified after each request.
+        this.conn.url = this.buildUrl(action, rs);
+
+        if(this.useAjax){
+
+            Ext.applyIf(o, this.conn);
+
+            // If a currently running request is found for this action, abort it.
+            if (this.activeRequest[action]) {
+                ////
+                // Disabled aborting activeRequest while implementing REST.  activeRequest[action] will have to become an array
+                // TODO ideas anyone?
+                //
+                //Ext.Ajax.abort(this.activeRequest[action]);
+            }
+            this.activeRequest[action] = Ext.Ajax.request(o);
+        }else{
+            this.conn.request(o);
+        }
+        // request is sent, nullify the connection url in preparation for the next request
+        this.conn.url = null;
+    },
+
+    /**
+     * Returns a callback function for a request.  Note a special case is made for the
+     * read action vs all the others.
+     * @param {String} action [create|update|delete|load]
+     * @param {Ext.data.Record[]} rs The Store-recordset being acted upon
+     * @private
+     */
+    createCallback : function(action, rs) {
+        return function(o, success, response) {
+            this.activeRequest[action] = undefined;
+            if (!success) {
+                if (action === Ext.data.Api.actions.read) {
+                    // @deprecated: fire loadexception for backwards compat.
+                    // TODO remove in 3.1
+                    this.fireEvent('loadexception', this, o, response);
+                }
+                this.fireEvent('exception', this, 'response', action, o, response);
+                o.request.callback.call(o.request.scope, null, o.request.arg, false);
+                return;
+            }
+            if (action === Ext.data.Api.actions.read) {
+                this.onRead(action, o, response);
+            } else {
+                this.onWrite(action, o, response, rs);
+            }
+        };
+    },
+
+    /**
+     * Callback for read action
+     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
+     * @param {Object} o The request transaction object
+     * @param {Object} res The server response
+     * @fires loadexception (deprecated)
+     * @fires exception
+     * @fires load
+     * @protected
+     */
+    onRead : function(action, o, response) {
+        var result;
+        try {
+            result = o.reader.read(response);
+        }catch(e){
+            // @deprecated: fire old loadexception for backwards-compat.
+            // TODO remove in 3.1
+            this.fireEvent('loadexception', this, o, response, e);
+
+            this.fireEvent('exception', this, 'response', action, o, response, e);
+            o.request.callback.call(o.request.scope, null, o.request.arg, false);
+            return;
+        }
+        if (result.success === false) {
+            // @deprecated: fire old loadexception for backwards-compat.
+            // TODO remove in 3.1
+            this.fireEvent('loadexception', this, o, response);
+
+            // Get DataReader read-back a response-object to pass along to exception event
+            var res = o.reader.readResponse(action, response);
+            this.fireEvent('exception', this, 'remote', action, o, res, null);
+        }
+        else {
+            this.fireEvent('load', this, o, o.request.arg);
+        }
+        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
+        // the calls to request.callback(...) in each will have to be made identical.
+        // NOTE reader.readResponse does not currently return Ext.data.Response
+        o.request.callback.call(o.request.scope, result, o.request.arg, result.success);
+    },
+    /**
+     * Callback for write actions
+     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
+     * @param {Object} trans The request transaction object
+     * @param {Object} res The server response
+     * @fires exception
+     * @fires write
+     * @protected
+     */
+    onWrite : function(action, o, response, rs) {
+        var reader = o.reader;
+        var res;
+        try {
+            res = reader.readResponse(action, response);
+        } catch (e) {
+            this.fireEvent('exception', this, 'response', action, o, response, e);
+            o.request.callback.call(o.request.scope, null, o.request.arg, false);
+            return;
+        }
+        if (res.success === true) {
+            this.fireEvent('write', this, action, res.data, res, rs, o.request.arg);
+        } else {
+            this.fireEvent('exception', this, 'remote', action, o, res, rs);
+        }
+        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
+        // the calls to request.callback(...) in each will have to be made similar.
+        // NOTE reader.readResponse does not currently return Ext.data.Response
+        o.request.callback.call(o.request.scope, res.data, res, res.success);
+    },
+
+    // inherit docs
+    destroy: function(){
+        if(!this.useAjax){
+            this.conn.abort();
+        }else if(this.activeRequest){
+            var actions = Ext.data.Api.actions;
+            for (var verb in actions) {
+                if(this.activeRequest[actions[verb]]){
+                    Ext.Ajax.abort(this.activeRequest[actions[verb]]);
+                }
+            }
+        }
+        Ext.data.HttpProxy.superclass.destroy.call(this);
+    }
+});/**
+ * @class Ext.data.MemoryProxy
+ * @extends Ext.data.DataProxy
+ * An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor
+ * to the Reader when its load method is called.
+ * @constructor
+ * @param {Object} data The data object which the Reader uses to construct a block of Ext.data.Records.
+ */
+Ext.data.MemoryProxy = function(data){
+    // Must define a dummy api with "read" action to satisfy DataProxy#doRequest and Ext.data.Api#prepare *before* calling super
+    var api = {};
+    api[Ext.data.Api.actions.read] = true;
+    Ext.data.MemoryProxy.superclass.constructor.call(this, {
+        api: api
+    });
+    this.data = data;
+};
+
+Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, {
+    /**
+     * @event loadexception
+     * Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed
+     * through {@link Ext.data.Store}, so you can listen for it directly on any Store instance.
+     * @param {Object} this
+     * @param {Object} arg The callback's arg object passed to the {@link #load} function
+     * @param {Object} null This parameter does not apply and will always be null for MemoryProxy
+     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data
+     */
+
+       /**
+     * MemoryProxy implementation of DataProxy#doRequest
+     * @param {String} action
+     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Ext.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Ext.data.Records.
+     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
+     * The function must be passed 
      
+     * 
    • The Record block object
      • 
+     * 
    • The "arg" argument from the load function
      • 
+     * 
    • A boolean success indicator
      • 
+     * 
    
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     */
+    doRequest : function(action, rs, params, reader, callback, scope, arg) {
+        // No implementation for CRUD in MemoryProxy.  Assumes all actions are 'load'
+        params = params || {};
+        var result;
+        try {
+            result = reader.readRecords(this.data);
+        }catch(e){
+            // @deprecated loadexception
+            this.fireEvent("loadexception", this, null, arg, e);
+
+            this.fireEvent('exception', this, 'response', action, arg, null, e);
+            callback.call(scope, null, arg, false);
+            return;
+        }
+        callback.call(scope, result, arg, true);
+    }
 });/**
  * @class Ext.data.JsonWriter
  * @extends Ext.data.DataWriter
@@ -36951,2136 +36951,2136 @@ Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, {
         }
         return values;
     }
-});/**
- * @class Ext.data.XmlStore
- * @extends Ext.data.Store
- * 
    Small helper class to make creating {@link Ext.data.Store}s from XML data easier.
- * A XmlStore will be automatically configured with a {@link Ext.data.XmlReader}.
    
- * 
    A store configuration would be something like:
    
-var store = new Ext.data.XmlStore({
-    // store configs
-    autoDestroy: true,
-    storeId: 'myStore',
-    url: 'sheldon.xml', // automatically configures a HttpProxy
-    // reader configs
-    record: 'Item', // records will have an "Item" tag
-    idPath: 'ASIN',
-    totalRecords: '@TotalResults'
-    fields: [
-        // set up the fields mapping into the xml doc
-        // The first needs mapping, the others are very basic
-        {name: 'Author', mapping: 'ItemAttributes > Author'},
-        'Title', 'Manufacturer', 'ProductGroup'
-    ]
-});
- * 
    
- * 
    This store is configured to consume a returned object of the form:
    
-<?xml version="1.0" encoding="UTF-8"?>
-<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15">
-    <Items>
-        <Request>
-            <IsValid>True</IsValid>
-            <ItemSearchRequest>
-                <Author>Sidney Sheldon</Author>
-                <SearchIndex>Books</SearchIndex>
-            </ItemSearchRequest>
-        </Request>
-        <TotalResults>203</TotalResults>
-        <TotalPages>21</TotalPages>
-        <Item>
-            <ASIN>0446355453</ASIN>
-            <DetailPageURL>
-                http://www.amazon.com/
-            </DetailPageURL>
-            <ItemAttributes>
-                <Author>Sidney Sheldon</Author>
-                <Manufacturer>Warner Books</Manufacturer>
-                <ProductGroup>Book</ProductGroup>
-                <Title>Master of the Game</Title>
-            </ItemAttributes>
-        </Item>
-    </Items>
-</ItemSearchResponse>
- * 
    
- * An object literal of this form could also be used as the {@link #data} config option.
    
- * 
    Note: Although not listed here, this class accepts all of the configuration options of 
- * {@link Ext.data.XmlReader XmlReader}.
    
- * @constructor
- * @param {Object} config
- * @xtype xmlstore
- */
-Ext.data.XmlStore = Ext.extend(Ext.data.Store, {
-    /**
-     * @cfg {Ext.data.DataReader} reader @hide
-     */
-    constructor: function(config){
-        Ext.data.XmlStore.superclass.constructor.call(this, Ext.apply(config, {
-            reader: new Ext.data.XmlReader(config)
-        }));
-    }
-});
-Ext.reg('xmlstore', Ext.data.XmlStore);/**
- * @class Ext.data.GroupingStore
- * @extends Ext.data.Store
- * A specialized store implementation that provides for grouping records by one of the available fields. This
- * is usually used in conjunction with an {@link Ext.grid.GroupingView} to proved the data model for
- * a grouped GridPanel.
- * @constructor
- * Creates a new GroupingStore.
- * @param {Object} config A config object containing the objects needed for the Store to access data,
- * and read the data into Records.
- * @xtype groupingstore
- */
-Ext.data.GroupingStore = Ext.extend(Ext.data.Store, {
-
-    //inherit docs
-    constructor: function(config){
-        Ext.data.GroupingStore.superclass.constructor.call(this, config);
-        this.applyGroupField();
-    },
-
-    /**
-     * @cfg {String} groupField
-     * The field name by which to sort the store's data (defaults to '').
-     */
-    /**
-     * @cfg {Boolean} remoteGroup
-     * True if the grouping should apply on the server side, false if it is local only (defaults to false).  If the
-     * grouping is local, it can be applied immediately to the data.  If it is remote, then it will simply act as a
-     * helper, automatically sending the grouping field name as the 'groupBy' param with each XHR call.
-     */
-    remoteGroup : false,
-    /**
-     * @cfg {Boolean} groupOnSort
-     * True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the
-     * existing sort info (defaults to false).
-     */
-    groupOnSort:false,
-
-    groupDir : 'ASC',
-
-    /**
-     * Clears any existing grouping and refreshes the data using the default sort.
-     */
-    clearGrouping : function(){
-        this.groupField = false;
-
-        if(this.remoteGroup){
-            if(this.baseParams){
-                delete this.baseParams.groupBy;
-                delete this.baseParams.groupDir;
-            }
-            var lo = this.lastOptions;
-            if(lo && lo.params){
-                delete lo.params.groupBy;
-                delete lo.params.groupDir;
-            }
-
-            this.reload();
-        }else{
-            this.applySort();
-            this.fireEvent('datachanged', this);
-        }
-    },
-
-    /**
-     * Groups the data by the specified field.
-     * @param {String} field The field name by which to sort the store's data
-     * @param {Boolean} forceRegroup (optional) True to force the group to be refreshed even if the field passed
-     * in is the same as the current grouping field, false to skip grouping on the same field (defaults to false)
-     */
-    groupBy : function(field, forceRegroup, direction){
-        direction = direction ? (String(direction).toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : this.groupDir;
-        if(this.groupField == field && this.groupDir == direction && !forceRegroup){
-            return; // already grouped by this field
-        }
-        this.groupField = field;
-        this.groupDir = direction;
-        this.applyGroupField();
-        if(this.groupOnSort){
-            this.sort(field, direction);
-            return;
-        }
-        if(this.remoteGroup){
-            this.reload();
-        }else{
-            var si = this.sortInfo || {};
-            if(forceRegroup || si.field != field || si.direction != direction){
-                this.applySort();
-            }else{
-                this.sortData(field, direction);
-            }
-            this.fireEvent('datachanged', this);
-        }
-    },
-
-    // private
-    applyGroupField: function(){
-        if(this.remoteGroup){
-            if(!this.baseParams){
-                this.baseParams = {};
-            }
-            Ext.apply(this.baseParams, {
-                groupBy : this.groupField,
-                groupDir : this.groupDir
-            });
-
-            var lo = this.lastOptions;
-            if(lo && lo.params){
-                Ext.apply(lo.params, {
-                    groupBy : this.groupField,
-                    groupDir : this.groupDir
-                });
-            }
-        }
-    },
-
-    // private
-    applySort : function(){
-        Ext.data.GroupingStore.superclass.applySort.call(this);
-        if(!this.groupOnSort && !this.remoteGroup){
-            var gs = this.getGroupState();
-            if(gs && (gs != this.sortInfo.field || this.groupDir != this.sortInfo.direction)){
-                this.sortData(this.groupField, this.groupDir);
-            }
-        }
-    },
-
-    // private
-    applyGrouping : function(alwaysFireChange){
-        if(this.groupField !== false){
-            this.groupBy(this.groupField, true, this.groupDir);
-            return true;
-        }else{
-            if(alwaysFireChange === true){
-                this.fireEvent('datachanged', this);
-            }
-            return false;
-        }
-    },
-
-    // private
-    getGroupState : function(){
-        return this.groupOnSort && this.groupField !== false ?
-               (this.sortInfo ? this.sortInfo.field : undefined) : this.groupField;
-    }
-});
-Ext.reg('groupingstore', Ext.data.GroupingStore);/**
- * @class Ext.data.DirectProxy
- * @extends Ext.data.DataProxy
- */
-Ext.data.DirectProxy = function(config){
-    Ext.apply(this, config);
-    if(typeof this.paramOrder == 'string'){
-        this.paramOrder = this.paramOrder.split(/[\s,|]/);
-    }
-    Ext.data.DirectProxy.superclass.constructor.call(this, config);
-};
-
-Ext.extend(Ext.data.DirectProxy, Ext.data.DataProxy, {
-    /**
-     * @cfg {Array/String} paramOrder Defaults to undefined. A list of params to be executed
-     * server side.  Specify the params in the order in which they must be executed on the server-side
-     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
-     * comma, or pipe. For example,
-     * any of the following would be acceptable:
    
-paramOrder: ['param1','param2','param3']
-paramOrder: 'param1 param2 param3'
-paramOrder: 'param1,param2,param3'
-paramOrder: 'param1|param2|param'
-     
    
-     */
-    paramOrder: undefined,
-
-    /**
-     * @cfg {Boolean} paramsAsHash
-     * Send parameters as a collection of named arguments (defaults to true). Providing a
-     * {@link #paramOrder} nullifies this configuration.
-     */
-    paramsAsHash: true,
-
-    /**
-     * @cfg {Function} directFn
-     * Function to call when executing a request.  directFn is a simple alternative to defining the api configuration-parameter
-     * for Store's which will not implement a full CRUD api.
-     */
-    directFn : undefined,
-
-    /**
-     * DirectProxy implementation of {@link Ext.data.DataProxy#doRequest}
-     * @param {String} action The crud action type (create, read, update, destroy)
-     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Ext.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Ext.data.Records.
-     * @param {Function} callback
-     * 
    A function to be called after the request.
-     * The callback is passed the following arguments:
      
-     * 
    • r : Ext.data.Record[] The block of Ext.data.Records.
      • 
-     * 
    • options: Options object from the action request
      • 
-     * 
    • success: Boolean success indicator
    
-     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
-     * @protected
-     */
-    doRequest : function(action, rs, params, reader, callback, scope, options) {
-        var args = [],
-            directFn = this.api[action] || this.directFn;
-
-        switch (action) {
-            case Ext.data.Api.actions.create:
-                args.push(params.jsonData);		// <-- create(Hash)
-                break;
-            case Ext.data.Api.actions.read:
-                // If the method has no parameters, ignore the paramOrder/paramsAsHash.
-                if(directFn.directCfg.method.len > 0){
-                    if(this.paramOrder){
-                        for(var i = 0, len = this.paramOrder.length; i < len; i++){
-                            args.push(params[this.paramOrder[i]]);
-                        }
-                    }else if(this.paramsAsHash){
-                        args.push(params);
-                    }
-                }
-                break;
-            case Ext.data.Api.actions.update:
-                args.push(params.jsonData);        // <-- update(Hash/Hash[])
-                break;
-            case Ext.data.Api.actions.destroy:
-                args.push(params.jsonData);        // <-- destroy(Int/Int[])
-                break;
-        }
-
-        var trans = {
-            params : params || {},
-            request: {
-                callback : callback,
-                scope : scope,
-                arg : options
-            },
-            reader: reader
-        };
-
-        args.push(this.createCallback(action, rs, trans), this);
-        directFn.apply(window, args);
-    },
-
-    // private
-    createCallback : function(action, rs, trans) {
-        return function(result, res) {
-            if (!res.status) {
-                // @deprecated fire loadexception
-                if (action === Ext.data.Api.actions.read) {
-                    this.fireEvent("loadexception", this, trans, res, null);
-                }
-                this.fireEvent('exception', this, 'remote', action, trans, res, null);
-                trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
-                return;
-            }
-            if (action === Ext.data.Api.actions.read) {
-                this.onRead(action, trans, result, res);
-            } else {
-                this.onWrite(action, trans, result, res, rs);
-            }
-        };
-    },
-    /**
-     * Callback for read actions
-     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
-     * @param {Object} trans The request transaction object
-     * @param {Object} result Data object picked out of the server-response.
-     * @param {Object} res The server response
-     * @protected
-     */
-    onRead : function(action, trans, result, res) {
-        var records;
-        try {
-            records = trans.reader.readRecords(result);
-        }
-        catch (ex) {
-            // @deprecated: Fire old loadexception for backwards-compat.
-            this.fireEvent("loadexception", this, trans, res, ex);
-
-            this.fireEvent('exception', this, 'response', action, trans, res, ex);
-            trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
-            return;
-        }
-        this.fireEvent("load", this, res, trans.request.arg);
-        trans.request.callback.call(trans.request.scope, records, trans.request.arg, true);
-    },
-    /**
-     * Callback for write actions
-     * @param {String} action [{@link Ext.data.Api#actions create|read|update|destroy}]
-     * @param {Object} trans The request transaction object
-     * @param {Object} result Data object picked out of the server-response.
-     * @param {Object} res The server response
-     * @param {Ext.data.Record/[Ext.data.Record]} rs The Store resultset associated with the action.
-     * @protected
-     */
-    onWrite : function(action, trans, result, res, rs) {
-        var data = trans.reader.extractData(result, false);
-        this.fireEvent("write", this, action, data, res, rs, trans.request.arg);
-        trans.request.callback.call(trans.request.scope, data, res, true);
-    }
-});
-
-/**
- * @class Ext.data.DirectStore
- * @extends Ext.data.Store
- * 
    Small helper class to create an {@link Ext.data.Store} configured with an
- * {@link Ext.data.DirectProxy} and {@link Ext.data.JsonReader} to make interacting
- * with an {@link Ext.Direct} Server-side {@link Ext.direct.Provider Provider} easier.
- * To create a different proxy/reader combination create a basic {@link Ext.data.Store}
- * configured as needed.
    
- *
- * 
    *Note: Although they are not listed, this class inherits all of the config options of:
    
- * 
      
- * 
    • {@link Ext.data.Store Store}
      • 
- * 
        
- *
- * 
      
- * 
    • {@link Ext.data.JsonReader JsonReader}
      • 
- * 
        
- * 
      • {@link Ext.data.JsonReader#root root}
        • 
- * 
      • {@link Ext.data.JsonReader#idProperty idProperty}
        • 
- * 
      • {@link Ext.data.JsonReader#totalProperty totalProperty}
        • 
- * 
      
- *
- * 
    • {@link Ext.data.DirectProxy DirectProxy}
      • 
- * 
        
- * 
      • {@link Ext.data.DirectProxy#directFn directFn}
        • 
- * 
      • {@link Ext.data.DirectProxy#paramOrder paramOrder}
        • 
- * 
      • {@link Ext.data.DirectProxy#paramsAsHash paramsAsHash}
        • 
- * 
      
- * 
    
- *
- * @xtype directstore
- *
- * @constructor
- * @param {Object} config
- */
-Ext.data.DirectStore = Ext.extend(Ext.data.Store, {
-    constructor : function(config){
-        // each transaction upon a singe record will generate a distinct Direct transaction since Direct queues them into one Ajax request.
-        var c = Ext.apply({}, {
-            batchTransactions: false
-        }, config);
-        Ext.data.DirectStore.superclass.constructor.call(this, Ext.apply(c, {
-            proxy: Ext.isDefined(c.proxy) ? c.proxy : new Ext.data.DirectProxy(Ext.copyTo({}, c, 'paramOrder,paramsAsHash,directFn,api')),
-            reader: (!Ext.isDefined(c.reader) && c.fields) ? new Ext.data.JsonReader(Ext.copyTo({}, c, 'totalProperty,root,idProperty'), c.fields) : c.reader
-        }));
-    }
-});
+});/**
+ * @class Ext.data.XmlStore
+ * @extends Ext.data.Store
+ * 
    Small helper class to make creating {@link Ext.data.Store}s from XML data easier.
+ * A XmlStore will be automatically configured with a {@link Ext.data.XmlReader}.
    
+ * 
    A store configuration would be something like:
    
+var store = new Ext.data.XmlStore({
+    // store configs
+    autoDestroy: true,
+    storeId: 'myStore',
+    url: 'sheldon.xml', // automatically configures a HttpProxy
+    // reader configs
+    record: 'Item', // records will have an "Item" tag
+    idPath: 'ASIN',
+    totalRecords: '@TotalResults'
+    fields: [
+        // set up the fields mapping into the xml doc
+        // The first needs mapping, the others are very basic
+        {name: 'Author', mapping: 'ItemAttributes > Author'},
+        'Title', 'Manufacturer', 'ProductGroup'
+    ]
+});
+ * 
    
+ * 
    This store is configured to consume a returned object of the form:
    
+<?xml version="1.0" encoding="UTF-8"?>
+<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15">
+    <Items>
+        <Request>
+            <IsValid>True</IsValid>
+            <ItemSearchRequest>
+                <Author>Sidney Sheldon</Author>
+                <SearchIndex>Books</SearchIndex>
+            </ItemSearchRequest>
+        </Request>
+        <TotalResults>203</TotalResults>
+        <TotalPages>21</TotalPages>
+        <Item>
+            <ASIN>0446355453</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Master of the Game</Title>
+            </ItemAttributes>
+        </Item>
+    </Items>
+</ItemSearchResponse>
+ * 
    
+ * An object literal of this form could also be used as the {@link #data} config option.
    
+ * 
    Note: Although not listed here, this class accepts all of the configuration options of 
+ * {@link Ext.data.XmlReader XmlReader}.
    
+ * @constructor
+ * @param {Object} config
+ * @xtype xmlstore
+ */
+Ext.data.XmlStore = Ext.extend(Ext.data.Store, {
+    /**
+     * @cfg {Ext.data.DataReader} reader @hide
+     */
+    constructor: function(config){
+        Ext.data.XmlStore.superclass.constructor.call(this, Ext.apply(config, {
+            reader: new Ext.data.XmlReader(config)
+        }));
+    }
+});
+Ext.reg('xmlstore', Ext.data.XmlStore);/**
+ * @class Ext.data.GroupingStore
+ * @extends Ext.data.Store
+ * A specialized store implementation that provides for grouping records by one of the available fields. This
+ * is usually used in conjunction with an {@link Ext.grid.GroupingView} to proved the data model for
+ * a grouped GridPanel.
+ * @constructor
+ * Creates a new GroupingStore.
+ * @param {Object} config A config object containing the objects needed for the Store to access data,
+ * and read the data into Records.
+ * @xtype groupingstore
+ */
+Ext.data.GroupingStore = Ext.extend(Ext.data.Store, {
+
+    //inherit docs
+    constructor: function(config){
+        Ext.data.GroupingStore.superclass.constructor.call(this, config);
+        this.applyGroupField();
+    },
+
+    /**
+     * @cfg {String} groupField
+     * The field name by which to sort the store's data (defaults to '').
+     */
+    /**
+     * @cfg {Boolean} remoteGroup
+     * True if the grouping should apply on the server side, false if it is local only (defaults to false).  If the
+     * grouping is local, it can be applied immediately to the data.  If it is remote, then it will simply act as a
+     * helper, automatically sending the grouping field name as the 'groupBy' param with each XHR call.
+     */
+    remoteGroup : false,
+    /**
+     * @cfg {Boolean} groupOnSort
+     * True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the
+     * existing sort info (defaults to false).
+     */
+    groupOnSort:false,
+
+    groupDir : 'ASC',
+
+    /**
+     * Clears any existing grouping and refreshes the data using the default sort.
+     */
+    clearGrouping : function(){
+        this.groupField = false;
+
+        if(this.remoteGroup){
+            if(this.baseParams){
+                delete this.baseParams.groupBy;
+                delete this.baseParams.groupDir;
+            }
+            var lo = this.lastOptions;
+            if(lo && lo.params){
+                delete lo.params.groupBy;
+                delete lo.params.groupDir;
+            }
+
+            this.reload();
+        }else{
+            this.applySort();
+            this.fireEvent('datachanged', this);
+        }
+    },
+
+    /**
+     * Groups the data by the specified field.
+     * @param {String} field The field name by which to sort the store's data
+     * @param {Boolean} forceRegroup (optional) True to force the group to be refreshed even if the field passed
+     * in is the same as the current grouping field, false to skip grouping on the same field (defaults to false)
+     */
+    groupBy : function(field, forceRegroup, direction){
+        direction = direction ? (String(direction).toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : this.groupDir;
+        if(this.groupField == field && this.groupDir == direction && !forceRegroup){
+            return; // already grouped by this field
+        }
+        this.groupField = field;
+        this.groupDir = direction;
+        this.applyGroupField();
+        if(this.groupOnSort){
+            this.sort(field, direction);
+            return;
+        }
+        if(this.remoteGroup){
+            this.reload();
+        }else{
+            var si = this.sortInfo || {};
+            if(forceRegroup || si.field != field || si.direction != direction){
+                this.applySort();
+            }else{
+                this.sortData(field, direction);
+            }
+            this.fireEvent('datachanged', this);
+        }
+    },
+
+    // private
+    applyGroupField: function(){
+        if(this.remoteGroup){
+            if(!this.baseParams){
+                this.baseParams = {};
+            }
+            Ext.apply(this.baseParams, {
+                groupBy : this.groupField,
+                groupDir : this.groupDir
+            });
+
+            var lo = this.lastOptions;
+            if(lo && lo.params){
+                Ext.apply(lo.params, {
+                    groupBy : this.groupField,
+                    groupDir : this.groupDir
+                });
+            }
+        }
+    },
+
+    // private
+    applySort : function(){
+        Ext.data.GroupingStore.superclass.applySort.call(this);
+        if(!this.groupOnSort && !this.remoteGroup){
+            var gs = this.getGroupState();
+            if(gs && (gs != this.sortInfo.field || this.groupDir != this.sortInfo.direction)){
+                this.sortData(this.groupField, this.groupDir);
+            }
+        }
+    },
+
+    // private
+    applyGrouping : function(alwaysFireChange){
+        if(this.groupField !== false){
+            this.groupBy(this.groupField, true, this.groupDir);
+            return true;
+        }else{
+            if(alwaysFireChange === true){
+                this.fireEvent('datachanged', this);
+            }
+            return false;
+        }
+    },
+
+    // private
+    getGroupState : function(){
+        return this.groupOnSort && this.groupField !== false ?
+               (this.sortInfo ? this.sortInfo.field : undefined) : this.groupField;
+    }
+});
+Ext.reg('groupingstore', Ext.data.GroupingStore);/**
+ * @class Ext.data.DirectProxy
+ * @extends Ext.data.DataProxy
+ */
+Ext.data.DirectProxy = function(config){
+    Ext.apply(this, config);
+    if(typeof this.paramOrder == 'string'){
+        this.paramOrder = this.paramOrder.split(/[\s,|]/);
+    }
+    Ext.data.DirectProxy.superclass.constructor.call(this, config);
+};
+
+Ext.extend(Ext.data.DirectProxy, Ext.data.DataProxy, {
+    /**
+     * @cfg {Array/String} paramOrder Defaults to undefined. A list of params to be executed
+     * server side.  Specify the params in the order in which they must be executed on the server-side
+     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
+     * comma, or pipe. For example,
+     * any of the following would be acceptable:
    
+paramOrder: ['param1','param2','param3']
+paramOrder: 'param1 param2 param3'
+paramOrder: 'param1,param2,param3'
+paramOrder: 'param1|param2|param'
+     
    
+     */
+    paramOrder: undefined,
+
+    /**
+     * @cfg {Boolean} paramsAsHash
+     * Send parameters as a collection of named arguments (defaults to true). Providing a
+     * {@link #paramOrder} nullifies this configuration.
+     */
+    paramsAsHash: true,
+
+    /**
+     * @cfg {Function} directFn
+     * Function to call when executing a request.  directFn is a simple alternative to defining the api configuration-parameter
+     * for Store's which will not implement a full CRUD api.
+     */
+    directFn : undefined,
+
+    /**
+     * DirectProxy implementation of {@link Ext.data.DataProxy#doRequest}
+     * @param {String} action The crud action type (create, read, update, destroy)
+     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Ext.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Ext.data.Records.
+     * @param {Function} callback
+     * 
    A function to be called after the request.
+     * The callback is passed the following arguments:
      
+     * 
    • r : Ext.data.Record[] The block of Ext.data.Records.
      • 
+     * 
    • options: Options object from the action request
      • 
+     * 
    • success: Boolean success indicator
    
+     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     * @protected
+     */
+    doRequest : function(action, rs, params, reader, callback, scope, options) {
+        var args = [],
+            directFn = this.api[action] || this.directFn;
+
+        switch (action) {
+            case Ext.data.Api.actions.create:
+                args.push(params.jsonData);		// <-- create(Hash)
+                break;
+            case Ext.data.Api.actions.read:
+                // If the method has no parameters, ignore the paramOrder/paramsAsHash.
+                if(directFn.directCfg.method.len > 0){
+                    if(this.paramOrder){
+                        for(var i = 0, len = this.paramOrder.length; i < len; i++){
+                            args.push(params[this.paramOrder[i]]);
+                        }
+                    }else if(this.paramsAsHash){
+                        args.push(params);
+                    }
+                }
+                break;
+            case Ext.data.Api.actions.update:
+                args.push(params.jsonData);        // <-- update(Hash/Hash[])
+                break;
+            case Ext.data.Api.actions.destroy:
+                args.push(params.jsonData);        // <-- destroy(Int/Int[])
+                break;
+        }
+
+        var trans = {
+            params : params || {},
+            request: {
+                callback : callback,
+                scope : scope,
+                arg : options
+            },
+            reader: reader
+        };
+
+        args.push(this.createCallback(action, rs, trans), this);
+        directFn.apply(window, args);
+    },
+
+    // private
+    createCallback : function(action, rs, trans) {
+        return function(result, res) {
+            if (!res.status) {
+                // @deprecated fire loadexception
+                if (action === Ext.data.Api.actions.read) {
+                    this.fireEvent("loadexception", this, trans, res, null);
+                }
+                this.fireEvent('exception', this, 'remote', action, trans, res, null);
+                trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
+                return;
+            }
+            if (action === Ext.data.Api.actions.read) {
+                this.onRead(action, trans, result, res);
+            } else {
+                this.onWrite(action, trans, result, res, rs);
+            }
+        };
+    },
+    /**
+     * Callback for read actions
+     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
+     * @param {Object} trans The request transaction object
+     * @param {Object} result Data object picked out of the server-response.
+     * @param {Object} res The server response
+     * @protected
+     */
+    onRead : function(action, trans, result, res) {
+        var records;
+        try {
+            records = trans.reader.readRecords(result);
+        }
+        catch (ex) {
+            // @deprecated: Fire old loadexception for backwards-compat.
+            this.fireEvent("loadexception", this, trans, res, ex);
+
+            this.fireEvent('exception', this, 'response', action, trans, res, ex);
+            trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
+            return;
+        }
+        this.fireEvent("load", this, res, trans.request.arg);
+        trans.request.callback.call(trans.request.scope, records, trans.request.arg, true);
+    },
+    /**
+     * Callback for write actions
+     * @param {String} action [{@link Ext.data.Api#actions create|read|update|destroy}]
+     * @param {Object} trans The request transaction object
+     * @param {Object} result Data object picked out of the server-response.
+     * @param {Object} res The server response
+     * @param {Ext.data.Record/[Ext.data.Record]} rs The Store resultset associated with the action.
+     * @protected
+     */
+    onWrite : function(action, trans, result, res, rs) {
+        var data = trans.reader.extractData(result, false);
+        this.fireEvent("write", this, action, data, res, rs, trans.request.arg);
+        trans.request.callback.call(trans.request.scope, data, res, true);
+    }
+});
+
+/**
+ * @class Ext.data.DirectStore
+ * @extends Ext.data.Store
+ * 
    Small helper class to create an {@link Ext.data.Store} configured with an
+ * {@link Ext.data.DirectProxy} and {@link Ext.data.JsonReader} to make interacting
+ * with an {@link Ext.Direct} Server-side {@link Ext.direct.Provider Provider} easier.
+ * To create a different proxy/reader combination create a basic {@link Ext.data.Store}
+ * configured as needed.
    
+ *
+ * 
    *Note: Although they are not listed, this class inherits all of the config options of:
    
+ * 
      
+ * 
    • {@link Ext.data.Store Store}
      • 
+ * 
        
+ *
+ * 
      
+ * 
    • {@link Ext.data.JsonReader JsonReader}
      • 
+ * 
        
+ * 
      • {@link Ext.data.JsonReader#root root}
        • 
+ * 
      • {@link Ext.data.JsonReader#idProperty idProperty}
        • 
+ * 
      • {@link Ext.data.JsonReader#totalProperty totalProperty}
        • 
+ * 
      
+ *
+ * 
    • {@link Ext.data.DirectProxy DirectProxy}
      • 
+ * 
        
+ * 
      • {@link Ext.data.DirectProxy#directFn directFn}
        • 
+ * 
      • {@link Ext.data.DirectProxy#paramOrder paramOrder}
        • 
+ * 
      • {@link Ext.data.DirectProxy#paramsAsHash paramsAsHash}
        • 
+ * 
      
+ * 
    
+ *
+ * @xtype directstore
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Ext.data.DirectStore = Ext.extend(Ext.data.Store, {
+    constructor : function(config){
+        // each transaction upon a singe record will generate a distinct Direct transaction since Direct queues them into one Ajax request.
+        var c = Ext.apply({}, {
+            batchTransactions: false
+        }, config);
+        Ext.data.DirectStore.superclass.constructor.call(this, Ext.apply(c, {
+            proxy: Ext.isDefined(c.proxy) ? c.proxy : new Ext.data.DirectProxy(Ext.copyTo({}, c, 'paramOrder,paramsAsHash,directFn,api')),
+            reader: (!Ext.isDefined(c.reader) && c.fields) ? new Ext.data.JsonReader(Ext.copyTo({}, c, 'totalProperty,root,idProperty'), c.fields) : c.reader
+        }));
+    }
+});
 Ext.reg('directstore', Ext.data.DirectStore);
-/**
- * @class Ext.Direct
- * @extends Ext.util.Observable
- * 
    Overview
    
- * 
- * 
    Ext.Direct aims to streamline communication between the client and server
- * by providing a single interface that reduces the amount of common code
- * typically required to validate data and handle returned data packets
- * (reading data, error conditions, etc).
    
- *  
- * 
    The Ext.direct namespace includes several classes for a closer integration
- * with the server-side. The Ext.data namespace also includes classes for working
- * with Ext.data.Stores which are backed by data from an Ext.Direct method.
    
- * 
- * 
    Specification
    
- * 
- * 
    For additional information consult the 
- * Ext.Direct Specification.
    
- *   
- * 
    Providers
    
- * 
- * 
    Ext.Direct uses a provider architecture, where one or more providers are
- * used to transport data to and from the server. There are several providers
- * that exist in the core at the moment:
      
- * 
- * 
    • {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations
      • 
- * 
    • {@link Ext.direct.PollingProvider PollingProvider} for repeated requests
      • 
- * 
    • {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
- * on the client.
      • 
- * 
    
- * 
- * 
    A provider does not need to be invoked directly, providers are added via
- * {@link Ext.Direct}.{@link Ext.Direct#add add}.
    
- * 
- * 
    Router
    
- * 
- * 
    Ext.Direct utilizes a "router" on the server to direct requests from the client
- * to the appropriate server-side method. Because the Ext.Direct API is completely
- * platform-agnostic, you could completely swap out a Java based server solution
- * and replace it with one that uses C# without changing the client side JavaScript
- * at all.
    
- * 
- * 
    Server side events
    
- * 
- * 
    Custom events from the server may be handled by the client by adding
- * listeners, for example:
    
- * 
    
-{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
-
-// add a handler for a 'message' event sent by the server 
-Ext.Direct.on('message', function(e){
-    out.append(String.format('<p><i>{0}</i></p>', e.data));
-            out.el.scrollTo('t', 100000, true);
-});
- * 
    
- * @singleton
- */
-Ext.Direct = Ext.extend(Ext.util.Observable, {
-    /**
-     * Each event type implements a getData() method. The default event types are:
-     * 
      
-     * 
    • event : Ext.Direct.Event
      • 
-     * 
    • exception : Ext.Direct.ExceptionEvent
      • 
-     * 
    • rpc : Ext.Direct.RemotingEvent
      • 
-     * 
    
-     * @property eventTypes
-     * @type Object
-     */
-
-    /**
-     * Four types of possible exceptions which can occur:
-     * 
      
-     * 
    • Ext.Direct.exceptions.TRANSPORT : 'xhr'
      • 
-     * 
    • Ext.Direct.exceptions.PARSE : 'parse'
      • 
-     * 
    • Ext.Direct.exceptions.LOGIN : 'login'
      • 
-     * 
    • Ext.Direct.exceptions.SERVER : 'exception'
      • 
-     * 
    
-     * @property exceptions
-     * @type Object
-     */
-    exceptions: {
-        TRANSPORT: 'xhr',
-        PARSE: 'parse',
-        LOGIN: 'login',
-        SERVER: 'exception'
-    },
-    
-    // private
-    constructor: function(){
-        this.addEvents(
-            /**
-             * @event event
-             * Fires after an event.
-             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
-             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
-             */
-            'event',
-            /**
-             * @event exception
-             * Fires after an event exception.
-             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
-             */
-            'exception'
-        );
-        this.transactions = {};
-        this.providers = {};
-    },
-
-    /**
-     * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
-     * If the provider is not already connected, it will auto-connect.
-     * 
    
-var pollProv = new Ext.direct.PollingProvider({
-    url: 'php/poll2.php'
-}); 
-
-Ext.Direct.addProvider(
-    {
-        "type":"remoting",       // create a {@link Ext.direct.RemotingProvider} 
-        "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
-        "actions":{              // each property within the actions object represents a Class 
-            "TestAction":[       // array of methods within each server side Class   
-            {
-                "name":"doEcho", // name of method
-                "len":1
-            },{
-                "name":"multiply",
-                "len":1
-            },{
-                "name":"doForm",
-                "formHandler":true, // handle form on server with Ext.Direct.Transaction 
-                "len":1
-            }]
-        },
-        "namespace":"myApplication",// namespace to create the Remoting Provider in
-    },{
-        type: 'polling', // create a {@link Ext.direct.PollingProvider} 
-        url:  'php/poll.php'
-    },
-    pollProv // reference to previously created instance
-);
-     * 
    
-     * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
-     * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
-     * Provider description instructs Ext.Direct how to create client-side stub methods.
-     */
-    addProvider : function(provider){        
-        var a = arguments;
-        if(a.length > 1){
-            for(var i = 0, len = a.length; i < len; i++){
-                this.addProvider(a[i]);
-            }
-            return;
-        }
-        
-        // if provider has not already been instantiated
-        if(!provider.events){
-            provider = new Ext.Direct.PROVIDERS[provider.type](provider);
-        }
-        provider.id = provider.id || Ext.id();
-        this.providers[provider.id] = provider;
-
-        provider.on('data', this.onProviderData, this);
-        provider.on('exception', this.onProviderException, this);
-
-
-        if(!provider.isConnected()){
-            provider.connect();
-        }
-
-        return provider;
-    },
-
-    /**
-     * Retrieve a {@link Ext.direct.Provider provider} by the
-     * {@link Ext.direct.Provider#id id} specified when the provider is
-     * {@link #addProvider added}.
-     * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider} 
-     */
-    getProvider : function(id){
-        return this.providers[id];
-    },
-
-    removeProvider : function(id){
-        var provider = id.id ? id : this.providers[id.id];
-        provider.un('data', this.onProviderData, this);
-        provider.un('exception', this.onProviderException, this);
-        delete this.providers[provider.id];
-        return provider;
-    },
-
-    addTransaction: function(t){
-        this.transactions[t.tid] = t;
-        return t;
-    },
-
-    removeTransaction: function(t){
-        delete this.transactions[t.tid || t];
-        return t;
-    },
-
-    getTransaction: function(tid){
-        return this.transactions[tid.tid || tid];
-    },
-
-    onProviderData : function(provider, e){
-        if(Ext.isArray(e)){
-            for(var i = 0, len = e.length; i < len; i++){
-                this.onProviderData(provider, e[i]);
-            }
-            return;
-        }
-        if(e.name && e.name != 'event' && e.name != 'exception'){
-            this.fireEvent(e.name, e);
-        }else if(e.type == 'exception'){
-            this.fireEvent('exception', e);
-        }
-        this.fireEvent('event', e, provider);
-    },
-
-    createEvent : function(response, extraProps){
-        return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
-    }
-});
-// overwrite impl. with static instance
-Ext.Direct = new Ext.Direct();
-
-Ext.Direct.TID = 1;
-Ext.Direct.PROVIDERS = {};/**
- * @class Ext.Direct.Transaction
- * @extends Object
- * 
    Supporting Class for Ext.Direct (not intended to be used directly).
    
- * @constructor
- * @param {Object} config
- */
-Ext.Direct.Transaction = function(config){
-    Ext.apply(this, config);
-    this.tid = ++Ext.Direct.TID;
-    this.retryCount = 0;
-};
-Ext.Direct.Transaction.prototype = {
-    send: function(){
-        this.provider.queueTransaction(this);
-    },
-
-    retry: function(){
-        this.retryCount++;
-        this.send();
-    },
-
-    getProvider: function(){
-        return this.provider;
-    }
-};Ext.Direct.Event = function(config){
-    Ext.apply(this, config);
-}
-Ext.Direct.Event.prototype = {
-    status: true,
-    getData: function(){
-        return this.data;
-    }
-};
-
-Ext.Direct.RemotingEvent = Ext.extend(Ext.Direct.Event, {
-    type: 'rpc',
-    getTransaction: function(){
-        return this.transaction || Ext.Direct.getTransaction(this.tid);
-    }
-});
-
-Ext.Direct.ExceptionEvent = Ext.extend(Ext.Direct.RemotingEvent, {
-    status: false,
-    type: 'exception'
-});
-
-Ext.Direct.eventTypes = {
-    'rpc':  Ext.Direct.RemotingEvent,
-    'event':  Ext.Direct.Event,
-    'exception':  Ext.Direct.ExceptionEvent
-};
-
-/**
- * @class Ext.direct.Provider
- * @extends Ext.util.Observable
- * 
    Ext.direct.Provider is an abstract class meant to be extended.
    
- * 
- * 
    For example ExtJs implements the following subclasses:
    
- * 
    
-Provider
-|
-+---{@link Ext.direct.JsonProvider JsonProvider} 
-    |
-    +---{@link Ext.direct.PollingProvider PollingProvider}   
-    |
-    +---{@link Ext.direct.RemotingProvider RemotingProvider}   
- * 
    
- * @abstract
- */
-Ext.direct.Provider = Ext.extend(Ext.util.Observable, {    
-    /**
-     * @cfg {String} id
-     * The unique id of the provider (defaults to an {@link Ext#id auto-assigned id}).
-     * You should assign an id if you need to be able to access the provider later and you do
-     * not have an object reference available, for example:
-     * 
    
-Ext.Direct.addProvider(
-    {
-        type: 'polling',
-        url:  'php/poll.php',
-        id:   'poll-provider'
-    }
-);
-     
-var p = {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#getProvider getProvider}('poll-provider');
-p.disconnect();
-     * 
    
-     */
-        
-    /**
-     * @cfg {Number} priority
-     * Priority of the request. Lower is higher priority, 0 means "duplex" (always on).
-     * All Providers default to 1 except for PollingProvider which defaults to 3.
-     */    
-    priority: 1,
-
-    /**
-     * @cfg {String} type
-     * Required, undefined by default.  The type of provider specified
-     * to {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#addProvider addProvider} to create a
-     * new Provider. Acceptable values by default are:
      
-     * 
    • polling : {@link Ext.direct.PollingProvider PollingProvider}
      • 
-     * 
    • remoting : {@link Ext.direct.RemotingProvider RemotingProvider}
      • 
-     * 
    
-     */    
- 
-    // private
-    constructor : function(config){
-        Ext.apply(this, config);
-        this.addEvents(
-            /**
-             * @event connect
-             * Fires when the Provider connects to the server-side
-             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
-             */            
-            'connect',
-            /**
-             * @event disconnect
-             * Fires when the Provider disconnects from the server-side
-             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
-             */            
-            'disconnect',
-            /**
-             * @event data
-             * Fires when the Provider receives data from the server-side
-             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
-             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
-             */            
-            'data',
-            /**
-             * @event exception
-             * Fires when the Provider receives an exception from the server-side
-             */                        
-            'exception'
-        );
-        Ext.direct.Provider.superclass.constructor.call(this, config);
-    },
-
-    /**
-     * Returns whether or not the server-side is currently connected.
-     * Abstract method for subclasses to implement.
-     */
-    isConnected: function(){
-        return false;
-    },
-
-    /**
-     * Abstract methods for subclasses to implement.
-     */
-    connect: Ext.emptyFn,
-    
-    /**
-     * Abstract methods for subclasses to implement.
-     */
-    disconnect: Ext.emptyFn
-});
-/**
- * @class Ext.direct.JsonProvider
- * @extends Ext.direct.Provider
- */
-Ext.direct.JsonProvider = Ext.extend(Ext.direct.Provider, {
-    parseResponse: function(xhr){
-        if(!Ext.isEmpty(xhr.responseText)){
-            if(typeof xhr.responseText == 'object'){
-                return xhr.responseText;
-            }
-            return Ext.decode(xhr.responseText);
-        }
-        return null;
-    },
-
-    getEvents: function(xhr){
-        var data = null;
-        try{
-            data = this.parseResponse(xhr);
-        }catch(e){
-            var event = new Ext.Direct.ExceptionEvent({
-                data: e,
-                xhr: xhr,
-                code: Ext.Direct.exceptions.PARSE,
-                message: 'Error parsing json response: \n\n ' + data
-            })
-            return [event];
-        }
-        var events = [];
-        if(Ext.isArray(data)){
-            for(var i = 0, len = data.length; i < len; i++){
-                events.push(Ext.Direct.createEvent(data[i]));
-            }
-        }else{
-            events.push(Ext.Direct.createEvent(data));
-        }
-        return events;
-    }
-});/**
- * @class Ext.direct.PollingProvider
- * @extends Ext.direct.JsonProvider
- *
- * 
    Provides for repetitive polling of the server at distinct {@link #interval intervals}.
- * The initial request for data originates from the client, and then is responded to by the
- * server.
    
- * 
- * 
    All configurations for the PollingProvider should be generated by the server-side
- * API portion of the Ext.Direct stack.
    
- *
- * 
    An instance of PollingProvider may be created directly via the new keyword or by simply
- * specifying type = 'polling'.  For example:
    
- * 
    
-var pollA = new Ext.direct.PollingProvider({
-    type:'polling',
-    url: 'php/pollA.php',
-});
-Ext.Direct.addProvider(pollA);
-pollA.disconnect();
-
-Ext.Direct.addProvider(
-    {
-        type:'polling',
-        url: 'php/pollB.php',
-        id: 'pollB-provider'
-    }
-);
-var pollB = Ext.Direct.getProvider('pollB-provider');
- * 
    
- */
-Ext.direct.PollingProvider = Ext.extend(Ext.direct.JsonProvider, {
-    /**
-     * @cfg {Number} priority
-     * Priority of the request (defaults to 3). See {@link Ext.direct.Provider#priority}.
-     */
-    // override default priority
-    priority: 3,
-    
-    /**
-     * @cfg {Number} interval
-     * How often to poll the server-side in milliseconds (defaults to 3000 - every
-     * 3 seconds).
-     */
-    interval: 3000,
-
-    /**
-     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
-     * on every polling request
-     */
-    
-    /**
-     * @cfg {String/Function} url
-     * The url which the PollingProvider should contact with each request. This can also be
-     * an imported Ext.Direct method which will accept the baseParams as its only argument.
-     */
-
-    // private
-    constructor : function(config){
-        Ext.direct.PollingProvider.superclass.constructor.call(this, config);
-        this.addEvents(
-            /**
-             * @event beforepoll
-             * Fired immediately before a poll takes place, an event handler can return false
-             * in order to cancel the poll.
-             * @param {Ext.direct.PollingProvider}
-             */
-            'beforepoll',            
-            /**
-             * @event poll
-             * This event has not yet been implemented.
-             * @param {Ext.direct.PollingProvider}
-             */
-            'poll'
-        );
-    },
-
-    // inherited
-    isConnected: function(){
-        return !!this.pollTask;
-    },
-
-    /**
-     * Connect to the server-side and begin the polling process. To handle each
-     * response subscribe to the data event.
-     */
-    connect: function(){
-        if(this.url && !this.pollTask){
-            this.pollTask = Ext.TaskMgr.start({
-                run: function(){
-                    if(this.fireEvent('beforepoll', this) !== false){
-                        if(typeof this.url == 'function'){
-                            this.url(this.baseParams);
-                        }else{
-                            Ext.Ajax.request({
-                                url: this.url,
-                                callback: this.onData,
-                                scope: this,
-                                params: this.baseParams
-                            });
-                        }
-                    }
-                },
-                interval: this.interval,
-                scope: this
-            });
-            this.fireEvent('connect', this);
-        }else if(!this.url){
-            throw 'Error initializing PollingProvider, no url configured.';
-        }
-    },
-
-    /**
-     * Disconnect from the server-side and stop the polling process. The disconnect
-     * event will be fired on a successful disconnect.
-     */
-    disconnect: function(){
-        if(this.pollTask){
-            Ext.TaskMgr.stop(this.pollTask);
-            delete this.pollTask;
-            this.fireEvent('disconnect', this);
-        }
-    },
-
-    // private
-    onData: function(opt, success, xhr){
-        if(success){
-            var events = this.getEvents(xhr);
-            for(var i = 0, len = events.length; i < len; i++){
-                var e = events[i];
-                this.fireEvent('data', this, e);
-            }
-        }else{
-            var e = new Ext.Direct.ExceptionEvent({
-                data: e,
-                code: Ext.Direct.exceptions.TRANSPORT,
-                message: 'Unable to connect to the server.',
-                xhr: xhr
-            });
-            this.fireEvent('data', this, e);
-        }
-    }
-});
-
-Ext.Direct.PROVIDERS['polling'] = Ext.direct.PollingProvider;/**
- * @class Ext.direct.RemotingProvider
- * @extends Ext.direct.JsonProvider
- * 
- * 
    The {@link Ext.direct.RemotingProvider RemotingProvider} exposes access to
- * server side methods on the client (a remote procedure call (RPC) type of
- * connection where the client can initiate a procedure on the server).
    
- * 
- * 
    This allows for code to be organized in a fashion that is maintainable,
- * while providing a clear path between client and server, something that is
- * not always apparent when using URLs.
    
- * 
- * 
    To accomplish this the server-side needs to describe what classes and methods
- * are available on the client-side. This configuration will typically be
- * outputted by the server-side Ext.Direct stack when the API description is built.
    
- */
-Ext.direct.RemotingProvider = Ext.extend(Ext.direct.JsonProvider, {       
-    /**
-     * @cfg {Object} actions
-     * Object literal defining the server side actions and methods. For example, if
-     * the Provider is configured with:
-     * 
    
-"actions":{ // each property within the 'actions' object represents a server side Class 
-    "TestAction":[ // array of methods within each server side Class to be   
-    {              // stubbed out on client
-        "name":"doEcho", 
-        "len":1            
-    },{
-        "name":"multiply",// name of method
-        "len":2           // The number of parameters that will be used to create an
-                          // array of data to send to the server side function.
-                          // Ensure the server sends back a Number, not a String. 
-    },{
-        "name":"doForm",
-        "formHandler":true, // direct the client to use specialized form handling method 
-        "len":1
-    }]
-}
-     * 
    
-     * 
    Note that a Store is not required, a server method can be called at any time.
-     * In the following example a client side handler is used to call the
-     * server side method "multiply" in the server-side "TestAction" Class:
    
-     * 
    
-TestAction.multiply(
-    2, 4, // pass two arguments to server, so specify len=2
-    // callback function after the server is called
-    // result: the result returned by the server
-    //      e: Ext.Direct.RemotingEvent object
-    function(result, e){
-        var t = e.getTransaction();
-        var action = t.action; // server side Class called
-        var method = t.method; // server side method called
-        if(e.status){
-            var answer = Ext.encode(result); // 8
-    
-        }else{
-            var msg = e.message; // failure message
-        }
-    }
-);
-     * 
    
-     * In the example above, the server side "multiply" function will be passed two
-     * arguments (2 and 4).  The "multiply" method should return the value 8 which will be
-     * available as the result in the example above. 
-     */
-    
-    /**
-     * @cfg {String/Object} namespace
-     * Namespace for the Remoting Provider (defaults to the browser global scope of window).
-     * Explicitly specify the namespace Object, or specify a String to have a
-     * {@link Ext#namespace namespace created} implicitly.
-     */
-    
-    /**
-     * @cfg {String} url
-     * Required. The url to connect to the {@link Ext.Direct} server-side router. 
-     */
-    
-    /**
-     * @cfg {String} enableUrlEncode
-     * Specify which param will hold the arguments for the method.
-     * Defaults to 'data'.
-     */
-    
-    /**
-     * @cfg {Number/Boolean} enableBuffer
-     * 
    true or false to enable or disable combining of method
-     * calls. If a number is specified this is the amount of time in milliseconds
-     * to wait before sending a batched request (defaults to 10).
    
-     * 
    Calls which are received within the specified timeframe will be
-     * concatenated together and sent in a single request, optimizing the
-     * application by reducing the amount of round trips that have to be made
-     * to the server.
    
-     */
-    enableBuffer: 10,
-    
-    /**
-     * @cfg {Number} maxRetries
-     * Number of times to re-attempt delivery on failure of a call. Defaults to 1.
-     */
-    maxRetries: 1,
-    
-    /**
-     * @cfg {Number} timeout
-     * The timeout to use for each request. Defaults to undefined.
-     */
-    timeout: undefined,
-
-    constructor : function(config){
-        Ext.direct.RemotingProvider.superclass.constructor.call(this, config);
-        this.addEvents(
-            /**
-             * @event beforecall
-             * Fires immediately before the client-side sends off the RPC call.
-             * By returning false from an event handler you can prevent the call from
-             * executing.
-             * @param {Ext.direct.RemotingProvider} provider
-             * @param {Ext.Direct.Transaction} transaction
-             */            
-            'beforecall',            
-            /**
-             * @event call
-             * Fires immediately after the request to the server-side is sent. This does
-             * NOT fire after the response has come back from the call.
-             * @param {Ext.direct.RemotingProvider} provider
-             * @param {Ext.Direct.Transaction} transaction
-             */            
-            'call'
-        );
-        this.namespace = (Ext.isString(this.namespace)) ? Ext.ns(this.namespace) : this.namespace || window;
-        this.transactions = {};
-        this.callBuffer = [];
-    },
-
-    // private
-    initAPI : function(){
-        var o = this.actions;
-        for(var c in o){
-            var cls = this.namespace[c] || (this.namespace[c] = {}),
-                ms = o[c];
-            for(var i = 0, len = ms.length; i < len; i++){
-                var m = ms[i];
-                cls[m.name] = this.createMethod(c, m);
-            }
-        }
-    },
-
-    // inherited
-    isConnected: function(){
-        return !!this.connected;
-    },
-
-    connect: function(){
-        if(this.url){
-            this.initAPI();
-            this.connected = true;
-            this.fireEvent('connect', this);
-        }else if(!this.url){
-            throw 'Error initializing RemotingProvider, no url configured.';
-        }
-    },
-
-    disconnect: function(){
-        if(this.connected){
-            this.connected = false;
-            this.fireEvent('disconnect', this);
-        }
-    },
-
-    onData: function(opt, success, xhr){
-        if(success){
-            var events = this.getEvents(xhr);
-            for(var i = 0, len = events.length; i < len; i++){
-                var e = events[i],
-                    t = this.getTransaction(e);
-                this.fireEvent('data', this, e);
-                if(t){
-                    this.doCallback(t, e, true);
-                    Ext.Direct.removeTransaction(t);
-                }
-            }
-        }else{
-            var ts = [].concat(opt.ts);
-            for(var i = 0, len = ts.length; i < len; i++){
-                var t = this.getTransaction(ts[i]);
-                if(t && t.retryCount < this.maxRetries){
-                    t.retry();
-                }else{
-                    var e = new Ext.Direct.ExceptionEvent({
-                        data: e,
-                        transaction: t,
-                        code: Ext.Direct.exceptions.TRANSPORT,
-                        message: 'Unable to connect to the server.',
-                        xhr: xhr
-                    });
-                    this.fireEvent('data', this, e);
-                    if(t){
-                        this.doCallback(t, e, false);
-                        Ext.Direct.removeTransaction(t);
-                    }
-                }
-            }
-        }
-    },
-
-    getCallData: function(t){
-        return {
-            action: t.action,
-            method: t.method,
-            data: t.data,
-            type: 'rpc',
-            tid: t.tid
-        };
-    },
-
-    doSend : function(data){
-        var o = {
-            url: this.url,
-            callback: this.onData,
-            scope: this,
-            ts: data,
-            timeout: this.timeout
-        }, callData;
-
-        if(Ext.isArray(data)){
-            callData = [];
-            for(var i = 0, len = data.length; i < len; i++){
-                callData.push(this.getCallData(data[i]));
-            }
-        }else{
-            callData = this.getCallData(data);
-        }
-
-        if(this.enableUrlEncode){
-            var params = {};
-            params[Ext.isString(this.enableUrlEncode) ? this.enableUrlEncode : 'data'] = Ext.encode(callData);
-            o.params = params;
-        }else{
-            o.jsonData = callData;
-        }
-        Ext.Ajax.request(o);
-    },
-
-    combineAndSend : function(){
-        var len = this.callBuffer.length;
-        if(len > 0){
-            this.doSend(len == 1 ? this.callBuffer[0] : this.callBuffer);
-            this.callBuffer = [];
-        }
-    },
-
-    queueTransaction: function(t){
-        if(t.form){
-            this.processForm(t);
-            return;
-        }
-        this.callBuffer.push(t);
-        if(this.enableBuffer){
-            if(!this.callTask){
-                this.callTask = new Ext.util.DelayedTask(this.combineAndSend, this);
-            }
-            this.callTask.delay(Ext.isNumber(this.enableBuffer) ? this.enableBuffer : 10);
-        }else{
-            this.combineAndSend();
-        }
-    },
-
-    doCall : function(c, m, args){
-        var data = null, hs = args[m.len], scope = args[m.len+1];
-
-        if(m.len !== 0){
-            data = args.slice(0, m.len);
-        }
-
-        var t = new Ext.Direct.Transaction({
-            provider: this,
-            args: args,
-            action: c,
-            method: m.name,
-            data: data,
-            cb: scope && Ext.isFunction(hs) ? hs.createDelegate(scope) : hs
-        });
-
-        if(this.fireEvent('beforecall', this, t) !== false){
-            Ext.Direct.addTransaction(t);
-            this.queueTransaction(t);
-            this.fireEvent('call', this, t);
-        }
-    },
-
-    doForm : function(c, m, form, callback, scope){
-        var t = new Ext.Direct.Transaction({
-            provider: this,
-            action: c,
-            method: m.name,
-            args:[form, callback, scope],
-            cb: scope && Ext.isFunction(callback) ? callback.createDelegate(scope) : callback,
-            isForm: true
-        });
-
-        if(this.fireEvent('beforecall', this, t) !== false){
-            Ext.Direct.addTransaction(t);
-            var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data',
-                params = {
-                    extTID: t.tid,
-                    extAction: c,
-                    extMethod: m.name,
-                    extType: 'rpc',
-                    extUpload: String(isUpload)
-                };
-            
-            // change made from typeof callback check to callback.params
-            // to support addl param passing in DirectSubmit EAC 6/2
-            Ext.apply(t, {
-                form: Ext.getDom(form),
-                isUpload: isUpload,
-                params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params
-            });
-            this.fireEvent('call', this, t);
-            this.processForm(t);
-        }
-    },
-    
-    processForm: function(t){
-        Ext.Ajax.request({
-            url: this.url,
-            params: t.params,
-            callback: this.onData,
-            scope: this,
-            form: t.form,
-            isUpload: t.isUpload,
-            ts: t
-        });
-    },
-
-    createMethod : function(c, m){
-        var f;
-        if(!m.formHandler){
-            f = function(){
-                this.doCall(c, m, Array.prototype.slice.call(arguments, 0));
-            }.createDelegate(this);
-        }else{
-            f = function(form, callback, scope){
-                this.doForm(c, m, form, callback, scope);
-            }.createDelegate(this);
-        }
-        f.directCfg = {
-            action: c,
-            method: m
-        };
-        return f;
-    },
-
-    getTransaction: function(opt){
-        return opt && opt.tid ? Ext.Direct.getTransaction(opt.tid) : null;
-    },
-
-    doCallback: function(t, e){
-        var fn = e.status ? 'success' : 'failure';
-        if(t && t.cb){
-            var hs = t.cb,
-                result = Ext.isDefined(e.result) ? e.result : e.data;
-            if(Ext.isFunction(hs)){
-                hs(result, e);
-            } else{
-                Ext.callback(hs[fn], hs.scope, [result, e]);
-                Ext.callback(hs.callback, hs.scope, [result, e]);
-            }
-        }
-    }
-});
-Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @class Ext.Resizable
- * @extends Ext.util.Observable
- * 
    Applies drag handles to an element to make it resizable. The drag handles are inserted into the element 
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
- * the textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and
- * the element will be wrapped for you automatically.
    
- * 
    Here is the list of valid resize handles:
    
- * 
    -Value   Description
-------  -------------------
- 'n'     north
- 's'     south
- 'e'     east
- 'w'     west
- 'nw'    northwest
- 'sw'    southwest
- 'se'    southeast
- 'ne'    northeast
- 'all'   all
-
    
- * 
    Here's an example showing the creation of a typical Resizable:
    
- * 
    
-var resizer = new Ext.Resizable('element-id', {
-    handles: 'all',
-    minWidth: 200,
-    minHeight: 100,
-    maxWidth: 500,
-    maxHeight: 400,
-    pinned: true
-});
-resizer.on('resize', myHandler);
-
    
- * 
    To hide a particular handle, set its display to none in CSS, or through script:
    
- * resizer.east.setDisplayed(false);
    
- * @constructor
- * Create a new resizable component
- * @param {Mixed} el The id or element to resize
- * @param {Object} config configuration options
-  */
-Ext.Resizable = Ext.extend(Ext.util.Observable, {
-    
-    constructor: function(el, config){
-        this.el = Ext.get(el);
-        if(config && config.wrap){
-            config.resizeChild = this.el;
-            this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
-            this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
-            this.el.setStyle('overflow', 'hidden');
-            this.el.setPositioning(config.resizeChild.getPositioning());
-            config.resizeChild.clearPositioning();
-            if(!config.width || !config.height){
-                var csize = config.resizeChild.getSize();
-                this.el.setSize(csize.width, csize.height);
-            }
-            if(config.pinned && !config.adjustments){
-                config.adjustments = 'auto';
-            }
-        }
-    
-        /**
-         * The proxy Element that is resized in place of the real Element during the resize operation.
-         * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
-         * Read only.
-         * @type Ext.Element.
-         * @property proxy
-         */
-        this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
-        this.proxy.unselectable();
-        this.proxy.enableDisplayMode('block');
-    
-        Ext.apply(this, config);
-        
-        if(this.pinned){
-            this.disableTrackOver = true;
-            this.el.addClass('x-resizable-pinned');
-        }
-        // if the element isn't positioned, make it relative
-        var position = this.el.getStyle('position');
-        if(position != 'absolute' && position != 'fixed'){
-            this.el.setStyle('position', 'relative');
-        }
-        if(!this.handles){ // no handles passed, must be legacy style
-            this.handles = 's,e,se';
-            if(this.multiDirectional){
-                this.handles += ',n,w';
-            }
-        }
-        if(this.handles == 'all'){
-            this.handles = 'n s e w ne nw se sw';
-        }
-        var hs = this.handles.split(/\s*?[,;]\s*?| /);
-        var ps = Ext.Resizable.positions;
-        for(var i = 0, len = hs.length; i < len; i++){
-            if(hs[i] && ps[hs[i]]){
-                var pos = ps[hs[i]];
-                this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
-            }
-        }
-        // legacy
-        this.corner = this.southeast;
-        
-        if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
-            this.updateBox = true;
-        }   
-       
-        this.activeHandle = null;
-        
-        if(this.resizeChild){
-            if(typeof this.resizeChild == 'boolean'){
-                this.resizeChild = Ext.get(this.el.dom.firstChild, true);
-            }else{
-                this.resizeChild = Ext.get(this.resizeChild, true);
-            }
-        }
-        
-        if(this.adjustments == 'auto'){
-            var rc = this.resizeChild;
-            var hw = this.west, he = this.east, hn = this.north, hs = this.south;
-            if(rc && (hw || hn)){
-                rc.position('relative');
-                rc.setLeft(hw ? hw.el.getWidth() : 0);
-                rc.setTop(hn ? hn.el.getHeight() : 0);
-            }
-            this.adjustments = [
-                (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
-                (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 
-            ];
-        }
-        
-        if(this.draggable){
-            this.dd = this.dynamic ? 
-                this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
-            this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
-            if(this.constrainTo){
-                this.dd.constrainTo(this.constrainTo);
-            }
-        }
-        
-        this.addEvents(
-            /**
-             * @event beforeresize
-             * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
-             * @param {Ext.Resizable} this
-             * @param {Ext.EventObject} e The mousedown event
-             */
-            'beforeresize',
-            /**
-             * @event resize
-             * Fired after a resize.
-             * @param {Ext.Resizable} this
-             * @param {Number} width The new width
-             * @param {Number} height The new height
-             * @param {Ext.EventObject} e The mouseup event
-             */
-            'resize'
-        );
-        
-        if(this.width !== null && this.height !== null){
-            this.resizeTo(this.width, this.height);
-        }else{
-            this.updateChildSize();
-        }
-        if(Ext.isIE){
-            this.el.dom.style.zoom = 1;
-        }
-        Ext.Resizable.superclass.constructor.call(this);    
-    },
-
-    /**
-     * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be added to the
-     * resize operation's new size (defaults to [0, 0])
-     */
-    adjustments : [0, 0],
-    /**
-     * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
-     */
-    animate : false,
-    /**
-     * @cfg {Mixed} constrainTo Constrain the resize to a particular element
-     */
-    /**
-     * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
-     */
-    disableTrackOver : false,
-    /**
-     * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
-     */
-    draggable: false,
-    /**
-     * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
-     */
-    duration : 0.35,
-    /**
-     * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
-     */
-    dynamic : false,
-    /**
-     * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
-     */
-    easing : 'easeOutStrong',
-    /**
-     * @cfg {Boolean} enabled False to disable resizing (defaults to true)
-     */
-    enabled : true,
-    /**
-     * @property enabled Writable. False if resizing is disabled.
-     * @type Boolean 
-     */
-    /**
-     * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
-     * Specify either 'all' or any of 'n s e w ne nw se sw'.
-     */
-    handles : false,
-    /**
-     * @cfg {Boolean} multiDirectional Deprecated.  Deprecated style of adding multi-direction resize handles.
-     */
-    multiDirectional : false,
-    /**
-     * @cfg {Number} height The height of the element in pixels (defaults to null)
-     */
-    height : null,
-    /**
-     * @cfg {Number} width The width of the element in pixels (defaults to null)
-     */
-    width : null,
-    /**
-     * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
-     * (only applies if {@link #dynamic}==true). Defaults to 0.
-     */
-    heightIncrement : 0,
-    /**
-     * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
-     * (only applies if {@link #dynamic}==true). Defaults to 0.
-     */
-    widthIncrement : 0,
-    /**
-     * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
-     */
-    minHeight : 5,
-    /**
-     * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
-     */
-    minWidth : 5,
-    /**
-     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
-     */
-    maxHeight : 10000,
-    /**
-     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
-     */
-    maxWidth : 10000,
-    /**
-     * @cfg {Number} minX The minimum x for the element (defaults to 0)
-     */
-    minX: 0,
-    /**
-     * @cfg {Number} minY The minimum x for the element (defaults to 0)
-     */
-    minY: 0,
-    /**
-     * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
-     * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
-     */
-    pinned : false,
-    /**
-     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
-     * and width during resize (defaults to false)
-     */
-    preserveRatio : false,
-    /**
-     * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) 
-     */ 
-    resizeChild : false,
-    /**
-     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
-     */
-    transparent: false,
-    /**
-     * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
-     */
-    /**
-     * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
-     * in favor of the handles config option (defaults to false)
-     */
-    /**
-     * @cfg {String} handleCls A css class to add to each handle. Defaults to ''.
-     */
-
-    
-    /**
-     * Perform a manual resize and fires the 'resize' event.
-     * @param {Number} width
-     * @param {Number} height
-     */
-    resizeTo : function(width, height){
-        this.el.setSize(width, height);
-        this.updateChildSize();
-        this.fireEvent('resize', this, width, height, null);
-    },
-
-    // private
-    startSizing : function(e, handle){
-        this.fireEvent('beforeresize', this, e);
-        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
-
-            if(!this.overlay){
-                this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
-                this.overlay.unselectable();
-                this.overlay.enableDisplayMode('block');
-                this.overlay.on({
-                    scope: this,
-                    mousemove: this.onMouseMove,
-                    mouseup: this.onMouseUp
-                });
-            }
-            this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
-
-            this.resizing = true;
-            this.startBox = this.el.getBox();
-            this.startPoint = e.getXY();
-            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
-                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];
-
-            this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
-            this.overlay.show();
-
-            if(this.constrainTo) {
-                var ct = Ext.get(this.constrainTo);
-                this.resizeRegion = ct.getRegion().adjust(
-                    ct.getFrameWidth('t'),
-                    ct.getFrameWidth('l'),
-                    -ct.getFrameWidth('b'),
-                    -ct.getFrameWidth('r')
-                );
-            }
-
-            this.proxy.setStyle('visibility', 'hidden'); // workaround display none
-            this.proxy.show();
-            this.proxy.setBox(this.startBox);
-            if(!this.dynamic){
-                this.proxy.setStyle('visibility', 'visible');
-            }
-        }
-    },
-
-    // private
-    onMouseDown : function(handle, e){
-        if(this.enabled){
-            e.stopEvent();
-            this.activeHandle = handle;
-            this.startSizing(e, handle);
-        }          
-    },
-
-    // private
-    onMouseUp : function(e){
-        this.activeHandle = null;
-        var size = this.resizeElement();
-        this.resizing = false;
-        this.handleOut();
-        this.overlay.hide();
-        this.proxy.hide();
-        this.fireEvent('resize', this, size.width, size.height, e);
-    },
-
-    // private
-    updateChildSize : function(){
-        if(this.resizeChild){
-            var el = this.el;
-            var child = this.resizeChild;
-            var adj = this.adjustments;
-            if(el.dom.offsetWidth){
-                var b = el.getSize(true);
-                child.setSize(b.width+adj[0], b.height+adj[1]);
-            }
-            // Second call here for IE
-            // The first call enables instant resizing and
-            // the second call corrects scroll bars if they
-            // exist
-            if(Ext.isIE){
-                setTimeout(function(){
-                    if(el.dom.offsetWidth){
-                        var b = el.getSize(true);
-                        child.setSize(b.width+adj[0], b.height+adj[1]);
-                    }
-                }, 10);
-            }
-        }
-    },
-
-    // private
-    snap : function(value, inc, min){
-        if(!inc || !value){
-            return value;
-        }
-        var newValue = value;
-        var m = value % inc;
-        if(m > 0){
-            if(m > (inc/2)){
-                newValue = value + (inc-m);
-            }else{
-                newValue = value - m;
-            }
-        }
-        return Math.max(min, newValue);
-    },
-
-    /**
-     * 
    Performs resizing of the associated Element. This method is called internally by this
-     * class, and should not be called by user code.
    
-     * 
    If a Resizable is being used to resize an Element which encapsulates a more complex UI
-     * component such as a Panel, this method may be overridden by specifying an implementation
-     * as a config option to provide appropriate behaviour at the end of the resize operation on
-     * mouseup, for example resizing the Panel, and relaying the Panel's content.
    
-     * 
    The new area to be resized to is available by examining the state of the {@link #proxy}
-     * Element. Example:
-
    
-new Ext.Panel({
-    title: 'Resize me',
-    x: 100,
-    y: 100,
-    renderTo: Ext.getBody(),
-    floating: true,
-    frame: true,
-    width: 400,
-    height: 200,
-    listeners: {
-        render: function(p) {
-            new Ext.Resizable(p.getEl(), {
-                handles: 'all',
-                pinned: true,
-                transparent: true,
-                resizeElement: function() {
-                    var box = this.proxy.getBox();
-                    p.updateBox(box);
-                    if (p.layout) {
-                        p.doLayout();
-                    }
-                    return box;
-                }
-           });
-       }
-    }
-}).show();
-
    
-     */
-    resizeElement : function(){
-        var box = this.proxy.getBox();
-        if(this.updateBox){
-            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
-        }else{
-            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
-        }
-        this.updateChildSize();
-        if(!this.dynamic){
-            this.proxy.hide();
-        }
-        if(this.draggable && this.constrainTo){
-            this.dd.resetConstraints();
-            this.dd.constrainTo(this.constrainTo);
-        }
-        return box;
-    },
-
-    // private
-    constrain : function(v, diff, m, mx){
-        if(v - diff < m){
-            diff = v - m;    
-        }else if(v - diff > mx){
-            diff = v - mx; 
-        }
-        return diff;                
-    },
-
-    // private
-    onMouseMove : function(e){
-        if(this.enabled && this.activeHandle){
-            try{// try catch so if something goes wrong the user doesn't get hung
-
-            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
-                return;
-            }
-
-            //var curXY = this.startPoint;
-            var curSize = this.curSize || this.startBox,
-                x = this.startBox.x, y = this.startBox.y,
-                ox = x, 
-                oy = y,
-                w = curSize.width, 
-                h = curSize.height,
-                ow = w, 
-                oh = h,
-                mw = this.minWidth, 
-                mh = this.minHeight,
-                mxw = this.maxWidth, 
-                mxh = this.maxHeight,
-                wi = this.widthIncrement,
-                hi = this.heightIncrement,
-                eventXY = e.getXY(),
-                diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
-                diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
-                pos = this.activeHandle.position,
-                tw,
-                th;
-            
-            switch(pos){
-                case 'east':
-                    w += diffX; 
-                    w = Math.min(Math.max(mw, w), mxw);
-                    break;
-                case 'south':
-                    h += diffY;
-                    h = Math.min(Math.max(mh, h), mxh);
-                    break;
-                case 'southeast':
-                    w += diffX; 
-                    h += diffY;
-                    w = Math.min(Math.max(mw, w), mxw);
-                    h = Math.min(Math.max(mh, h), mxh);
-                    break;
-                case 'north':
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    break;
-                case 'west':
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    x += diffX;
-                    w -= diffX;
-                    break;
-                case 'northeast':
-                    w += diffX; 
-                    w = Math.min(Math.max(mw, w), mxw);
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    break;
-                case 'northwest':
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    x += diffX;
-                    w -= diffX;
-                    break;
-               case 'southwest':
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    h += diffY;
-                    h = Math.min(Math.max(mh, h), mxh);
-                    x += diffX;
-                    w -= diffX;
-                    break;
-            }
-            
-            var sw = this.snap(w, wi, mw);
-            var sh = this.snap(h, hi, mh);
-            if(sw != w || sh != h){
-                switch(pos){
-                    case 'northeast':
-                        y -= sh - h;
-                    break;
-                    case 'north':
-                        y -= sh - h;
-                        break;
-                    case 'southwest':
-                        x -= sw - w;
-                    break;
-                    case 'west':
-                        x -= sw - w;
-                        break;
-                    case 'northwest':
-                        x -= sw - w;
-                        y -= sh - h;
-                    break;
-                }
-                w = sw;
-                h = sh;
-            }
-            
-            if(this.preserveRatio){
-                switch(pos){
-                    case 'southeast':
-                    case 'east':
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        w = ow * (h/oh);
-                       break;
-                    case 'south':
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                        break;
-                    case 'northeast':
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                    break;
-                    case 'north':
-                        tw = w;
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                        x += (tw - w) / 2;
-                        break;
-                    case 'southwest':
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        tw = w;
-                        w = ow * (h/oh);
-                        x += tw - w;
-                        break;
-                    case 'west':
-                        th = h;
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        y += (th - h) / 2;
-                        tw = w;
-                        w = ow * (h/oh);
-                        x += tw - w;
-                       break;
-                    case 'northwest':
-                        tw = w;
-                        th = h;
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        w = ow * (h/oh);
-                        y += th - h;
-                        x += tw - w;
-                        break;
-                        
-                }
-            }
-            this.proxy.setBounds(x, y, w, h);
-            if(this.dynamic){
-                this.resizeElement();
-            }
-            }catch(ex){}
-        }
-    },
-
-    // private
-    handleOver : function(){
-        if(this.enabled){
-            this.el.addClass('x-resizable-over');
-        }
-    },
-
-    // private
-    handleOut : function(){
-        if(!this.resizing){
-            this.el.removeClass('x-resizable-over');
-        }
-    },
-    
-    /**
-     * Returns the element this component is bound to.
-     * @return {Ext.Element}
-     */
-    getEl : function(){
-        return this.el;
-    },
-    
-    /**
-     * Returns the resizeChild element (or null).
-     * @return {Ext.Element}
-     */
-    getResizeChild : function(){
-        return this.resizeChild;
-    },
-    
-    /**
-     * Destroys this resizable. If the element was wrapped and 
-     * removeEl is not true then the element remains.
-     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
-     */
-    destroy : function(removeEl){
-        Ext.destroy(this.dd, this.overlay, this.proxy);
-        this.overlay = null;
-        this.proxy = null;
-        
-        var ps = Ext.Resizable.positions;
-        for(var k in ps){
-            if(typeof ps[k] != 'function' && this[ps[k]]){
-                this[ps[k]].destroy();
-            }
-        }
-        if(removeEl){
-            this.el.update('');
-            Ext.destroy(this.el);
-            this.el = null;
-        }
-        this.purgeListeners();
-    },
-
-    syncHandleHeight : function(){
-        var h = this.el.getHeight(true);
-        if(this.west){
-            this.west.el.setHeight(h);
-        }
-        if(this.east){
-            this.east.el.setHeight(h);
-        }
-    }
-});
-
-// private
-// hash to map config positions to true positions
-Ext.Resizable.positions = {
-    n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
-};
-
-Ext.Resizable.Handle = Ext.extend(Object, {
-    constructor : function(rz, pos, disableTrackOver, transparent, cls){
-       if(!this.tpl){
-            // only initialize the template if resizable is used
-            var tpl = Ext.DomHelper.createTemplate(
-                {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
-            );
-            tpl.compile();
-            Ext.Resizable.Handle.prototype.tpl = tpl;
-        }
-        this.position = pos;
-        this.rz = rz;
-        this.el = this.tpl.append(rz.el.dom, [this.position], true);
-        this.el.unselectable();
-        if(transparent){
-            this.el.setOpacity(0);
-        }
-        if(!Ext.isEmpty(cls)){
-            this.el.addClass(cls);    
-        }
-        this.el.on('mousedown', this.onMouseDown, this);
-        if(!disableTrackOver){
-            this.el.on({
-                scope: this,
-                mouseover: this.onMouseOver,
-                mouseout: this.onMouseOut
-            });
-        }        
-    },
-    
-    // private
-    afterResize : function(rz){
-        // do nothing    
-    },
-    // private
-    onMouseDown : function(e){
-        this.rz.onMouseDown(this, e);
-    },
-    // private
-    onMouseOver : function(e){
-        this.rz.handleOver(this, e);
-    },
-    // private
-    onMouseOut : function(e){
-        this.rz.handleOut(this, e);
-    },
-    // private
-    destroy : function(){
-        Ext.destroy(this.el);
-        this.el = null;
-    }
-});
+/**
+ * @class Ext.Direct
+ * @extends Ext.util.Observable
+ * 
    Overview
    
+ * 
+ * 
    Ext.Direct aims to streamline communication between the client and server
+ * by providing a single interface that reduces the amount of common code
+ * typically required to validate data and handle returned data packets
+ * (reading data, error conditions, etc).
    
+ *  
+ * 
    The Ext.direct namespace includes several classes for a closer integration
+ * with the server-side. The Ext.data namespace also includes classes for working
+ * with Ext.data.Stores which are backed by data from an Ext.Direct method.
    
+ * 
+ * 
    Specification
    
+ * 
+ * 
    For additional information consult the 
+ * Ext.Direct Specification.
    
+ *   
+ * 
    Providers
    
+ * 
+ * 
    Ext.Direct uses a provider architecture, where one or more providers are
+ * used to transport data to and from the server. There are several providers
+ * that exist in the core at the moment:
      
+ * 
+ * 
    • {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations
      • 
+ * 
    • {@link Ext.direct.PollingProvider PollingProvider} for repeated requests
      • 
+ * 
    • {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
+ * on the client.
      • 
+ * 
    
+ * 
+ * 
    A provider does not need to be invoked directly, providers are added via
+ * {@link Ext.Direct}.{@link Ext.Direct#add add}.
    
+ * 
+ * 
    Router
    
+ * 
+ * 
    Ext.Direct utilizes a "router" on the server to direct requests from the client
+ * to the appropriate server-side method. Because the Ext.Direct API is completely
+ * platform-agnostic, you could completely swap out a Java based server solution
+ * and replace it with one that uses C# without changing the client side JavaScript
+ * at all.
    
+ * 
+ * 
    Server side events
    
+ * 
+ * 
    Custom events from the server may be handled by the client by adding
+ * listeners, for example:
    
+ * 
    
+{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
+
+// add a handler for a 'message' event sent by the server 
+Ext.Direct.on('message', function(e){
+    out.append(String.format('<p><i>{0}</i></p>', e.data));
+            out.el.scrollTo('t', 100000, true);
+});
+ * 
    
+ * @singleton
+ */
+Ext.Direct = Ext.extend(Ext.util.Observable, {
+    /**
+     * Each event type implements a getData() method. The default event types are:
+     * 
      
+     * 
    • event : Ext.Direct.Event
      • 
+     * 
    • exception : Ext.Direct.ExceptionEvent
      • 
+     * 
    • rpc : Ext.Direct.RemotingEvent
      • 
+     * 
    
+     * @property eventTypes
+     * @type Object
+     */
+
+    /**
+     * Four types of possible exceptions which can occur:
+     * 
      
+     * 
    • Ext.Direct.exceptions.TRANSPORT : 'xhr'
      • 
+     * 
    • Ext.Direct.exceptions.PARSE : 'parse'
      • 
+     * 
    • Ext.Direct.exceptions.LOGIN : 'login'
      • 
+     * 
    • Ext.Direct.exceptions.SERVER : 'exception'
      • 
+     * 
    
+     * @property exceptions
+     * @type Object
+     */
+    exceptions: {
+        TRANSPORT: 'xhr',
+        PARSE: 'parse',
+        LOGIN: 'login',
+        SERVER: 'exception'
+    },
+    
+    // private
+    constructor: function(){
+        this.addEvents(
+            /**
+             * @event event
+             * Fires after an event.
+             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
+             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
+             */
+            'event',
+            /**
+             * @event exception
+             * Fires after an event exception.
+             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
+             */
+            'exception'
+        );
+        this.transactions = {};
+        this.providers = {};
+    },
+
+    /**
+     * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
+     * If the provider is not already connected, it will auto-connect.
+     * 
    
+var pollProv = new Ext.direct.PollingProvider({
+    url: 'php/poll2.php'
+}); 
+
+Ext.Direct.addProvider(
+    {
+        "type":"remoting",       // create a {@link Ext.direct.RemotingProvider} 
+        "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
+        "actions":{              // each property within the actions object represents a Class 
+            "TestAction":[       // array of methods within each server side Class   
+            {
+                "name":"doEcho", // name of method
+                "len":1
+            },{
+                "name":"multiply",
+                "len":1
+            },{
+                "name":"doForm",
+                "formHandler":true, // handle form on server with Ext.Direct.Transaction 
+                "len":1
+            }]
+        },
+        "namespace":"myApplication",// namespace to create the Remoting Provider in
+    },{
+        type: 'polling', // create a {@link Ext.direct.PollingProvider} 
+        url:  'php/poll.php'
+    },
+    pollProv // reference to previously created instance
+);
+     * 
    
+     * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
+     * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
+     * Provider description instructs Ext.Direct how to create client-side stub methods.
+     */
+    addProvider : function(provider){        
+        var a = arguments;
+        if(a.length > 1){
+            for(var i = 0, len = a.length; i < len; i++){
+                this.addProvider(a[i]);
+            }
+            return;
+        }
+        
+        // if provider has not already been instantiated
+        if(!provider.events){
+            provider = new Ext.Direct.PROVIDERS[provider.type](provider);
+        }
+        provider.id = provider.id || Ext.id();
+        this.providers[provider.id] = provider;
+
+        provider.on('data', this.onProviderData, this);
+        provider.on('exception', this.onProviderException, this);
+
+
+        if(!provider.isConnected()){
+            provider.connect();
+        }
+
+        return provider;
+    },
+
+    /**
+     * Retrieve a {@link Ext.direct.Provider provider} by the
+     * {@link Ext.direct.Provider#id id} specified when the provider is
+     * {@link #addProvider added}.
+     * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider} 
+     */
+    getProvider : function(id){
+        return this.providers[id];
+    },
+
+    removeProvider : function(id){
+        var provider = id.id ? id : this.providers[id.id];
+        provider.un('data', this.onProviderData, this);
+        provider.un('exception', this.onProviderException, this);
+        delete this.providers[provider.id];
+        return provider;
+    },
+
+    addTransaction: function(t){
+        this.transactions[t.tid] = t;
+        return t;
+    },
+
+    removeTransaction: function(t){
+        delete this.transactions[t.tid || t];
+        return t;
+    },
+
+    getTransaction: function(tid){
+        return this.transactions[tid.tid || tid];
+    },
+
+    onProviderData : function(provider, e){
+        if(Ext.isArray(e)){
+            for(var i = 0, len = e.length; i < len; i++){
+                this.onProviderData(provider, e[i]);
+            }
+            return;
+        }
+        if(e.name && e.name != 'event' && e.name != 'exception'){
+            this.fireEvent(e.name, e);
+        }else if(e.type == 'exception'){
+            this.fireEvent('exception', e);
+        }
+        this.fireEvent('event', e, provider);
+    },
+
+    createEvent : function(response, extraProps){
+        return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
+    }
+});
+// overwrite impl. with static instance
+Ext.Direct = new Ext.Direct();
+
+Ext.Direct.TID = 1;
+Ext.Direct.PROVIDERS = {};/**
+ * @class Ext.Direct.Transaction
+ * @extends Object
+ * 
    Supporting Class for Ext.Direct (not intended to be used directly).
    
+ * @constructor
+ * @param {Object} config
+ */
+Ext.Direct.Transaction = function(config){
+    Ext.apply(this, config);
+    this.tid = ++Ext.Direct.TID;
+    this.retryCount = 0;
+};
+Ext.Direct.Transaction.prototype = {
+    send: function(){
+        this.provider.queueTransaction(this);
+    },
+
+    retry: function(){
+        this.retryCount++;
+        this.send();
+    },
+
+    getProvider: function(){
+        return this.provider;
+    }
+};Ext.Direct.Event = function(config){
+    Ext.apply(this, config);
+}
+Ext.Direct.Event.prototype = {
+    status: true,
+    getData: function(){
+        return this.data;
+    }
+};
+
+Ext.Direct.RemotingEvent = Ext.extend(Ext.Direct.Event, {
+    type: 'rpc',
+    getTransaction: function(){
+        return this.transaction || Ext.Direct.getTransaction(this.tid);
+    }
+});
+
+Ext.Direct.ExceptionEvent = Ext.extend(Ext.Direct.RemotingEvent, {
+    status: false,
+    type: 'exception'
+});
+
+Ext.Direct.eventTypes = {
+    'rpc':  Ext.Direct.RemotingEvent,
+    'event':  Ext.Direct.Event,
+    'exception':  Ext.Direct.ExceptionEvent
+};
+
+/**
+ * @class Ext.direct.Provider
+ * @extends Ext.util.Observable
+ * 
    Ext.direct.Provider is an abstract class meant to be extended.
    
+ * 
+ * 
    For example ExtJs implements the following subclasses:
    
+ * 
    
+Provider
+|
++---{@link Ext.direct.JsonProvider JsonProvider} 
+    |
+    +---{@link Ext.direct.PollingProvider PollingProvider}   
+    |
+    +---{@link Ext.direct.RemotingProvider RemotingProvider}   
+ * 
    
+ * @abstract
+ */
+Ext.direct.Provider = Ext.extend(Ext.util.Observable, {    
+    /**
+     * @cfg {String} id
+     * The unique id of the provider (defaults to an {@link Ext#id auto-assigned id}).
+     * You should assign an id if you need to be able to access the provider later and you do
+     * not have an object reference available, for example:
+     * 
    
+Ext.Direct.addProvider(
+    {
+        type: 'polling',
+        url:  'php/poll.php',
+        id:   'poll-provider'
+    }
+);
+     
+var p = {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#getProvider getProvider}('poll-provider');
+p.disconnect();
+     * 
    
+     */
+        
+    /**
+     * @cfg {Number} priority
+     * Priority of the request. Lower is higher priority, 0 means "duplex" (always on).
+     * All Providers default to 1 except for PollingProvider which defaults to 3.
+     */    
+    priority: 1,
+
+    /**
+     * @cfg {String} type
+     * Required, undefined by default.  The type of provider specified
+     * to {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#addProvider addProvider} to create a
+     * new Provider. Acceptable values by default are:
      
+     * 
    • polling : {@link Ext.direct.PollingProvider PollingProvider}
      • 
+     * 
    • remoting : {@link Ext.direct.RemotingProvider RemotingProvider}
      • 
+     * 
    
+     */    
+ 
+    // private
+    constructor : function(config){
+        Ext.apply(this, config);
+        this.addEvents(
+            /**
+             * @event connect
+             * Fires when the Provider connects to the server-side
+             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
+             */            
+            'connect',
+            /**
+             * @event disconnect
+             * Fires when the Provider disconnects from the server-side
+             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
+             */            
+            'disconnect',
+            /**
+             * @event data
+             * Fires when the Provider receives data from the server-side
+             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
+             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
+             */            
+            'data',
+            /**
+             * @event exception
+             * Fires when the Provider receives an exception from the server-side
+             */                        
+            'exception'
+        );
+        Ext.direct.Provider.superclass.constructor.call(this, config);
+    },
+
+    /**
+     * Returns whether or not the server-side is currently connected.
+     * Abstract method for subclasses to implement.
+     */
+    isConnected: function(){
+        return false;
+    },
+
+    /**
+     * Abstract methods for subclasses to implement.
+     */
+    connect: Ext.emptyFn,
+    
+    /**
+     * Abstract methods for subclasses to implement.
+     */
+    disconnect: Ext.emptyFn
+});
+/**
+ * @class Ext.direct.JsonProvider
+ * @extends Ext.direct.Provider
+ */
+Ext.direct.JsonProvider = Ext.extend(Ext.direct.Provider, {
+    parseResponse: function(xhr){
+        if(!Ext.isEmpty(xhr.responseText)){
+            if(typeof xhr.responseText == 'object'){
+                return xhr.responseText;
+            }
+            return Ext.decode(xhr.responseText);
+        }
+        return null;
+    },
+
+    getEvents: function(xhr){
+        var data = null;
+        try{
+            data = this.parseResponse(xhr);
+        }catch(e){
+            var event = new Ext.Direct.ExceptionEvent({
+                data: e,
+                xhr: xhr,
+                code: Ext.Direct.exceptions.PARSE,
+                message: 'Error parsing json response: \n\n ' + data
+            })
+            return [event];
+        }
+        var events = [];
+        if(Ext.isArray(data)){
+            for(var i = 0, len = data.length; i < len; i++){
+                events.push(Ext.Direct.createEvent(data[i]));
+            }
+        }else{
+            events.push(Ext.Direct.createEvent(data));
+        }
+        return events;
+    }
+});/**
+ * @class Ext.direct.PollingProvider
+ * @extends Ext.direct.JsonProvider
+ *
+ * 
    Provides for repetitive polling of the server at distinct {@link #interval intervals}.
+ * The initial request for data originates from the client, and then is responded to by the
+ * server.
    
+ * 
+ * 
    All configurations for the PollingProvider should be generated by the server-side
+ * API portion of the Ext.Direct stack.
    
+ *
+ * 
    An instance of PollingProvider may be created directly via the new keyword or by simply
+ * specifying type = 'polling'.  For example:
    
+ * 
    
+var pollA = new Ext.direct.PollingProvider({
+    type:'polling',
+    url: 'php/pollA.php',
+});
+Ext.Direct.addProvider(pollA);
+pollA.disconnect();
+
+Ext.Direct.addProvider(
+    {
+        type:'polling',
+        url: 'php/pollB.php',
+        id: 'pollB-provider'
+    }
+);
+var pollB = Ext.Direct.getProvider('pollB-provider');
+ * 
    
+ */
+Ext.direct.PollingProvider = Ext.extend(Ext.direct.JsonProvider, {
+    /**
+     * @cfg {Number} priority
+     * Priority of the request (defaults to 3). See {@link Ext.direct.Provider#priority}.
+     */
+    // override default priority
+    priority: 3,
+    
+    /**
+     * @cfg {Number} interval
+     * How often to poll the server-side in milliseconds (defaults to 3000 - every
+     * 3 seconds).
+     */
+    interval: 3000,
+
+    /**
+     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
+     * on every polling request
+     */
+    
+    /**
+     * @cfg {String/Function} url
+     * The url which the PollingProvider should contact with each request. This can also be
+     * an imported Ext.Direct method which will accept the baseParams as its only argument.
+     */
+
+    // private
+    constructor : function(config){
+        Ext.direct.PollingProvider.superclass.constructor.call(this, config);
+        this.addEvents(
+            /**
+             * @event beforepoll
+             * Fired immediately before a poll takes place, an event handler can return false
+             * in order to cancel the poll.
+             * @param {Ext.direct.PollingProvider}
+             */
+            'beforepoll',            
+            /**
+             * @event poll
+             * This event has not yet been implemented.
+             * @param {Ext.direct.PollingProvider}
+             */
+            'poll'
+        );
+    },
+
+    // inherited
+    isConnected: function(){
+        return !!this.pollTask;
+    },
+
+    /**
+     * Connect to the server-side and begin the polling process. To handle each
+     * response subscribe to the data event.
+     */
+    connect: function(){
+        if(this.url && !this.pollTask){
+            this.pollTask = Ext.TaskMgr.start({
+                run: function(){
+                    if(this.fireEvent('beforepoll', this) !== false){
+                        if(typeof this.url == 'function'){
+                            this.url(this.baseParams);
+                        }else{
+                            Ext.Ajax.request({
+                                url: this.url,
+                                callback: this.onData,
+                                scope: this,
+                                params: this.baseParams
+                            });
+                        }
+                    }
+                },
+                interval: this.interval,
+                scope: this
+            });
+            this.fireEvent('connect', this);
+        }else if(!this.url){
+            throw 'Error initializing PollingProvider, no url configured.';
+        }
+    },
+
+    /**
+     * Disconnect from the server-side and stop the polling process. The disconnect
+     * event will be fired on a successful disconnect.
+     */
+    disconnect: function(){
+        if(this.pollTask){
+            Ext.TaskMgr.stop(this.pollTask);
+            delete this.pollTask;
+            this.fireEvent('disconnect', this);
+        }
+    },
+
+    // private
+    onData: function(opt, success, xhr){
+        if(success){
+            var events = this.getEvents(xhr);
+            for(var i = 0, len = events.length; i < len; i++){
+                var e = events[i];
+                this.fireEvent('data', this, e);
+            }
+        }else{
+            var e = new Ext.Direct.ExceptionEvent({
+                data: e,
+                code: Ext.Direct.exceptions.TRANSPORT,
+                message: 'Unable to connect to the server.',
+                xhr: xhr
+            });
+            this.fireEvent('data', this, e);
+        }
+    }
+});
+
+Ext.Direct.PROVIDERS['polling'] = Ext.direct.PollingProvider;/**
+ * @class Ext.direct.RemotingProvider
+ * @extends Ext.direct.JsonProvider
+ * 
+ * 
    The {@link Ext.direct.RemotingProvider RemotingProvider} exposes access to
+ * server side methods on the client (a remote procedure call (RPC) type of
+ * connection where the client can initiate a procedure on the server).
    
+ * 
+ * 
    This allows for code to be organized in a fashion that is maintainable,
+ * while providing a clear path between client and server, something that is
+ * not always apparent when using URLs.
    
+ * 
+ * 
    To accomplish this the server-side needs to describe what classes and methods
+ * are available on the client-side. This configuration will typically be
+ * outputted by the server-side Ext.Direct stack when the API description is built.
    
+ */
+Ext.direct.RemotingProvider = Ext.extend(Ext.direct.JsonProvider, {       
+    /**
+     * @cfg {Object} actions
+     * Object literal defining the server side actions and methods. For example, if
+     * the Provider is configured with:
+     * 
    
+"actions":{ // each property within the 'actions' object represents a server side Class 
+    "TestAction":[ // array of methods within each server side Class to be   
+    {              // stubbed out on client
+        "name":"doEcho", 
+        "len":1            
+    },{
+        "name":"multiply",// name of method
+        "len":2           // The number of parameters that will be used to create an
+                          // array of data to send to the server side function.
+                          // Ensure the server sends back a Number, not a String. 
+    },{
+        "name":"doForm",
+        "formHandler":true, // direct the client to use specialized form handling method 
+        "len":1
+    }]
+}
+     * 
    
+     * 
    Note that a Store is not required, a server method can be called at any time.
+     * In the following example a client side handler is used to call the
+     * server side method "multiply" in the server-side "TestAction" Class:
    
+     * 
    
+TestAction.multiply(
+    2, 4, // pass two arguments to server, so specify len=2
+    // callback function after the server is called
+    // result: the result returned by the server
+    //      e: Ext.Direct.RemotingEvent object
+    function(result, e){
+        var t = e.getTransaction();
+        var action = t.action; // server side Class called
+        var method = t.method; // server side method called
+        if(e.status){
+            var answer = Ext.encode(result); // 8
+    
+        }else{
+            var msg = e.message; // failure message
+        }
+    }
+);
+     * 
    
+     * In the example above, the server side "multiply" function will be passed two
+     * arguments (2 and 4).  The "multiply" method should return the value 8 which will be
+     * available as the result in the example above. 
+     */
+    
+    /**
+     * @cfg {String/Object} namespace
+     * Namespace for the Remoting Provider (defaults to the browser global scope of window).
+     * Explicitly specify the namespace Object, or specify a String to have a
+     * {@link Ext#namespace namespace created} implicitly.
+     */
+    
+    /**
+     * @cfg {String} url
+     * Required. The url to connect to the {@link Ext.Direct} server-side router. 
+     */
+    
+    /**
+     * @cfg {String} enableUrlEncode
+     * Specify which param will hold the arguments for the method.
+     * Defaults to 'data'.
+     */
+    
+    /**
+     * @cfg {Number/Boolean} enableBuffer
+     * 
    true or false to enable or disable combining of method
+     * calls. If a number is specified this is the amount of time in milliseconds
+     * to wait before sending a batched request (defaults to 10).
    
+     * 
    Calls which are received within the specified timeframe will be
+     * concatenated together and sent in a single request, optimizing the
+     * application by reducing the amount of round trips that have to be made
+     * to the server.
    
+     */
+    enableBuffer: 10,
+    
+    /**
+     * @cfg {Number} maxRetries
+     * Number of times to re-attempt delivery on failure of a call. Defaults to 1.
+     */
+    maxRetries: 1,
+    
+    /**
+     * @cfg {Number} timeout
+     * The timeout to use for each request. Defaults to undefined.
+     */
+    timeout: undefined,
+
+    constructor : function(config){
+        Ext.direct.RemotingProvider.superclass.constructor.call(this, config);
+        this.addEvents(
+            /**
+             * @event beforecall
+             * Fires immediately before the client-side sends off the RPC call.
+             * By returning false from an event handler you can prevent the call from
+             * executing.
+             * @param {Ext.direct.RemotingProvider} provider
+             * @param {Ext.Direct.Transaction} transaction
+             */            
+            'beforecall',            
+            /**
+             * @event call
+             * Fires immediately after the request to the server-side is sent. This does
+             * NOT fire after the response has come back from the call.
+             * @param {Ext.direct.RemotingProvider} provider
+             * @param {Ext.Direct.Transaction} transaction
+             */            
+            'call'
+        );
+        this.namespace = (Ext.isString(this.namespace)) ? Ext.ns(this.namespace) : this.namespace || window;
+        this.transactions = {};
+        this.callBuffer = [];
+    },
+
+    // private
+    initAPI : function(){
+        var o = this.actions;
+        for(var c in o){
+            var cls = this.namespace[c] || (this.namespace[c] = {}),
+                ms = o[c];
+            for(var i = 0, len = ms.length; i < len; i++){
+                var m = ms[i];
+                cls[m.name] = this.createMethod(c, m);
+            }
+        }
+    },
+
+    // inherited
+    isConnected: function(){
+        return !!this.connected;
+    },
+
+    connect: function(){
+        if(this.url){
+            this.initAPI();
+            this.connected = true;
+            this.fireEvent('connect', this);
+        }else if(!this.url){
+            throw 'Error initializing RemotingProvider, no url configured.';
+        }
+    },
+
+    disconnect: function(){
+        if(this.connected){
+            this.connected = false;
+            this.fireEvent('disconnect', this);
+        }
+    },
+
+    onData: function(opt, success, xhr){
+        if(success){
+            var events = this.getEvents(xhr);
+            for(var i = 0, len = events.length; i < len; i++){
+                var e = events[i],
+                    t = this.getTransaction(e);
+                this.fireEvent('data', this, e);
+                if(t){
+                    this.doCallback(t, e, true);
+                    Ext.Direct.removeTransaction(t);
+                }
+            }
+        }else{
+            var ts = [].concat(opt.ts);
+            for(var i = 0, len = ts.length; i < len; i++){
+                var t = this.getTransaction(ts[i]);
+                if(t && t.retryCount < this.maxRetries){
+                    t.retry();
+                }else{
+                    var e = new Ext.Direct.ExceptionEvent({
+                        data: e,
+                        transaction: t,
+                        code: Ext.Direct.exceptions.TRANSPORT,
+                        message: 'Unable to connect to the server.',
+                        xhr: xhr
+                    });
+                    this.fireEvent('data', this, e);
+                    if(t){
+                        this.doCallback(t, e, false);
+                        Ext.Direct.removeTransaction(t);
+                    }
+                }
+            }
+        }
+    },
+
+    getCallData: function(t){
+        return {
+            action: t.action,
+            method: t.method,
+            data: t.data,
+            type: 'rpc',
+            tid: t.tid
+        };
+    },
+
+    doSend : function(data){
+        var o = {
+            url: this.url,
+            callback: this.onData,
+            scope: this,
+            ts: data,
+            timeout: this.timeout
+        }, callData;
+
+        if(Ext.isArray(data)){
+            callData = [];
+            for(var i = 0, len = data.length; i < len; i++){
+                callData.push(this.getCallData(data[i]));
+            }
+        }else{
+            callData = this.getCallData(data);
+        }
+
+        if(this.enableUrlEncode){
+            var params = {};
+            params[Ext.isString(this.enableUrlEncode) ? this.enableUrlEncode : 'data'] = Ext.encode(callData);
+            o.params = params;
+        }else{
+            o.jsonData = callData;
+        }
+        Ext.Ajax.request(o);
+    },
+
+    combineAndSend : function(){
+        var len = this.callBuffer.length;
+        if(len > 0){
+            this.doSend(len == 1 ? this.callBuffer[0] : this.callBuffer);
+            this.callBuffer = [];
+        }
+    },
+
+    queueTransaction: function(t){
+        if(t.form){
+            this.processForm(t);
+            return;
+        }
+        this.callBuffer.push(t);
+        if(this.enableBuffer){
+            if(!this.callTask){
+                this.callTask = new Ext.util.DelayedTask(this.combineAndSend, this);
+            }
+            this.callTask.delay(Ext.isNumber(this.enableBuffer) ? this.enableBuffer : 10);
+        }else{
+            this.combineAndSend();
+        }
+    },
+
+    doCall : function(c, m, args){
+        var data = null, hs = args[m.len], scope = args[m.len+1];
+
+        if(m.len !== 0){
+            data = args.slice(0, m.len);
+        }
+
+        var t = new Ext.Direct.Transaction({
+            provider: this,
+            args: args,
+            action: c,
+            method: m.name,
+            data: data,
+            cb: scope && Ext.isFunction(hs) ? hs.createDelegate(scope) : hs
+        });
+
+        if(this.fireEvent('beforecall', this, t) !== false){
+            Ext.Direct.addTransaction(t);
+            this.queueTransaction(t);
+            this.fireEvent('call', this, t);
+        }
+    },
+
+    doForm : function(c, m, form, callback, scope){
+        var t = new Ext.Direct.Transaction({
+            provider: this,
+            action: c,
+            method: m.name,
+            args:[form, callback, scope],
+            cb: scope && Ext.isFunction(callback) ? callback.createDelegate(scope) : callback,
+            isForm: true
+        });
+
+        if(this.fireEvent('beforecall', this, t) !== false){
+            Ext.Direct.addTransaction(t);
+            var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data',
+                params = {
+                    extTID: t.tid,
+                    extAction: c,
+                    extMethod: m.name,
+                    extType: 'rpc',
+                    extUpload: String(isUpload)
+                };
+            
+            // change made from typeof callback check to callback.params
+            // to support addl param passing in DirectSubmit EAC 6/2
+            Ext.apply(t, {
+                form: Ext.getDom(form),
+                isUpload: isUpload,
+                params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params
+            });
+            this.fireEvent('call', this, t);
+            this.processForm(t);
+        }
+    },
+    
+    processForm: function(t){
+        Ext.Ajax.request({
+            url: this.url,
+            params: t.params,
+            callback: this.onData,
+            scope: this,
+            form: t.form,
+            isUpload: t.isUpload,
+            ts: t
+        });
+    },
+
+    createMethod : function(c, m){
+        var f;
+        if(!m.formHandler){
+            f = function(){
+                this.doCall(c, m, Array.prototype.slice.call(arguments, 0));
+            }.createDelegate(this);
+        }else{
+            f = function(form, callback, scope){
+                this.doForm(c, m, form, callback, scope);
+            }.createDelegate(this);
+        }
+        f.directCfg = {
+            action: c,
+            method: m
+        };
+        return f;
+    },
+
+    getTransaction: function(opt){
+        return opt && opt.tid ? Ext.Direct.getTransaction(opt.tid) : null;
+    },
+
+    doCallback: function(t, e){
+        var fn = e.status ? 'success' : 'failure';
+        if(t && t.cb){
+            var hs = t.cb,
+                result = Ext.isDefined(e.result) ? e.result : e.data;
+            if(Ext.isFunction(hs)){
+                hs(result, e);
+            } else{
+                Ext.callback(hs[fn], hs.scope, [result, e]);
+                Ext.callback(hs.callback, hs.scope, [result, e]);
+            }
+        }
+    }
+});
+Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;/*!
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Resizable
+ * @extends Ext.util.Observable
+ * 
    Applies drag handles to an element to make it resizable. The drag handles are inserted into the element 
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
+ * the textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and
+ * the element will be wrapped for you automatically.
    
+ * 
    Here is the list of valid resize handles:
    
+ * 
    +Value   Description
+------  -------------------
+ 'n'     north
+ 's'     south
+ 'e'     east
+ 'w'     west
+ 'nw'    northwest
+ 'sw'    southwest
+ 'se'    southeast
+ 'ne'    northeast
+ 'all'   all
+
    
+ * 
    Here's an example showing the creation of a typical Resizable:
    
+ * 
    
+var resizer = new Ext.Resizable('element-id', {
+    handles: 'all',
+    minWidth: 200,
+    minHeight: 100,
+    maxWidth: 500,
+    maxHeight: 400,
+    pinned: true
+});
+resizer.on('resize', myHandler);
+
    
+ * 
    To hide a particular handle, set its display to none in CSS, or through script:
    
+ * resizer.east.setDisplayed(false);
    
+ * @constructor
+ * Create a new resizable component
+ * @param {Mixed} el The id or element to resize
+ * @param {Object} config configuration options
+  */
+Ext.Resizable = Ext.extend(Ext.util.Observable, {
+    
+    constructor: function(el, config){
+        this.el = Ext.get(el);
+        if(config && config.wrap){
+            config.resizeChild = this.el;
+            this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
+            this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
+            this.el.setStyle('overflow', 'hidden');
+            this.el.setPositioning(config.resizeChild.getPositioning());
+            config.resizeChild.clearPositioning();
+            if(!config.width || !config.height){
+                var csize = config.resizeChild.getSize();
+                this.el.setSize(csize.width, csize.height);
+            }
+            if(config.pinned && !config.adjustments){
+                config.adjustments = 'auto';
+            }
+        }
+    
+        /**
+         * The proxy Element that is resized in place of the real Element during the resize operation.
+         * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
+         * Read only.
+         * @type Ext.Element.
+         * @property proxy
+         */
+        this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
+        this.proxy.unselectable();
+        this.proxy.enableDisplayMode('block');
+    
+        Ext.apply(this, config);
+        
+        if(this.pinned){
+            this.disableTrackOver = true;
+            this.el.addClass('x-resizable-pinned');
+        }
+        // if the element isn't positioned, make it relative
+        var position = this.el.getStyle('position');
+        if(position != 'absolute' && position != 'fixed'){
+            this.el.setStyle('position', 'relative');
+        }
+        if(!this.handles){ // no handles passed, must be legacy style
+            this.handles = 's,e,se';
+            if(this.multiDirectional){
+                this.handles += ',n,w';
+            }
+        }
+        if(this.handles == 'all'){
+            this.handles = 'n s e w ne nw se sw';
+        }
+        var hs = this.handles.split(/\s*?[,;]\s*?| /);
+        var ps = Ext.Resizable.positions;
+        for(var i = 0, len = hs.length; i < len; i++){
+            if(hs[i] && ps[hs[i]]){
+                var pos = ps[hs[i]];
+                this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
+            }
+        }
+        // legacy
+        this.corner = this.southeast;
+        
+        if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
+            this.updateBox = true;
+        }   
+       
+        this.activeHandle = null;
+        
+        if(this.resizeChild){
+            if(typeof this.resizeChild == 'boolean'){
+                this.resizeChild = Ext.get(this.el.dom.firstChild, true);
+            }else{
+                this.resizeChild = Ext.get(this.resizeChild, true);
+            }
+        }
+        
+        if(this.adjustments == 'auto'){
+            var rc = this.resizeChild;
+            var hw = this.west, he = this.east, hn = this.north, hs = this.south;
+            if(rc && (hw || hn)){
+                rc.position('relative');
+                rc.setLeft(hw ? hw.el.getWidth() : 0);
+                rc.setTop(hn ? hn.el.getHeight() : 0);
+            }
+            this.adjustments = [
+                (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
+                (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 
+            ];
+        }
+        
+        if(this.draggable){
+            this.dd = this.dynamic ? 
+                this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
+            this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
+            if(this.constrainTo){
+                this.dd.constrainTo(this.constrainTo);
+            }
+        }
+        
+        this.addEvents(
+            /**
+             * @event beforeresize
+             * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
+             * @param {Ext.Resizable} this
+             * @param {Ext.EventObject} e The mousedown event
+             */
+            'beforeresize',
+            /**
+             * @event resize
+             * Fired after a resize.
+             * @param {Ext.Resizable} this
+             * @param {Number} width The new width
+             * @param {Number} height The new height
+             * @param {Ext.EventObject} e The mouseup event
+             */
+            'resize'
+        );
+        
+        if(this.width !== null && this.height !== null){
+            this.resizeTo(this.width, this.height);
+        }else{
+            this.updateChildSize();
+        }
+        if(Ext.isIE){
+            this.el.dom.style.zoom = 1;
+        }
+        Ext.Resizable.superclass.constructor.call(this);    
+    },
+
+    /**
+     * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be added to the
+     * resize operation's new size (defaults to [0, 0])
+     */
+    adjustments : [0, 0],
+    /**
+     * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
+     */
+    animate : false,
+    /**
+     * @cfg {Mixed} constrainTo Constrain the resize to a particular element
+     */
+    /**
+     * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
+     */
+    disableTrackOver : false,
+    /**
+     * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
+     */
+    draggable: false,
+    /**
+     * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
+     */
+    duration : 0.35,
+    /**
+     * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
+     */
+    dynamic : false,
+    /**
+     * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
+     */
+    easing : 'easeOutStrong',
+    /**
+     * @cfg {Boolean} enabled False to disable resizing (defaults to true)
+     */
+    enabled : true,
+    /**
+     * @property enabled Writable. False if resizing is disabled.
+     * @type Boolean 
+     */
+    /**
+     * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
+     * Specify either 'all' or any of 'n s e w ne nw se sw'.
+     */
+    handles : false,
+    /**
+     * @cfg {Boolean} multiDirectional Deprecated.  Deprecated style of adding multi-direction resize handles.
+     */
+    multiDirectional : false,
+    /**
+     * @cfg {Number} height The height of the element in pixels (defaults to null)
+     */
+    height : null,
+    /**
+     * @cfg {Number} width The width of the element in pixels (defaults to null)
+     */
+    width : null,
+    /**
+     * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
+     * (only applies if {@link #dynamic}==true). Defaults to 0.
+     */
+    heightIncrement : 0,
+    /**
+     * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
+     * (only applies if {@link #dynamic}==true). Defaults to 0.
+     */
+    widthIncrement : 0,
+    /**
+     * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+     */
+    minHeight : 5,
+    /**
+     * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+     */
+    minWidth : 5,
+    /**
+     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+     */
+    maxHeight : 10000,
+    /**
+     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+     */
+    maxWidth : 10000,
+    /**
+     * @cfg {Number} minX The minimum x for the element (defaults to 0)
+     */
+    minX: 0,
+    /**
+     * @cfg {Number} minY The minimum x for the element (defaults to 0)
+     */
+    minY: 0,
+    /**
+     * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+     * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+     */
+    pinned : false,
+    /**
+     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
+     * and width during resize (defaults to false)
+     */
+    preserveRatio : false,
+    /**
+     * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) 
+     */ 
+    resizeChild : false,
+    /**
+     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+     */
+    transparent: false,
+    /**
+     * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
+     */
+    /**
+     * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+     * in favor of the handles config option (defaults to false)
+     */
+    /**
+     * @cfg {String} handleCls A css class to add to each handle. Defaults to ''.
+     */
+
+    
+    /**
+     * Perform a manual resize and fires the 'resize' event.
+     * @param {Number} width
+     * @param {Number} height
+     */
+    resizeTo : function(width, height){
+        this.el.setSize(width, height);
+        this.updateChildSize();
+        this.fireEvent('resize', this, width, height, null);
+    },
+
+    // private
+    startSizing : function(e, handle){
+        this.fireEvent('beforeresize', this, e);
+        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+
+            if(!this.overlay){
+                this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
+                this.overlay.unselectable();
+                this.overlay.enableDisplayMode('block');
+                this.overlay.on({
+                    scope: this,
+                    mousemove: this.onMouseMove,
+                    mouseup: this.onMouseUp
+                });
+            }
+            this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
+
+            this.resizing = true;
+            this.startBox = this.el.getBox();
+            this.startPoint = e.getXY();
+            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+            this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+            this.overlay.show();
+
+            if(this.constrainTo) {
+                var ct = Ext.get(this.constrainTo);
+                this.resizeRegion = ct.getRegion().adjust(
+                    ct.getFrameWidth('t'),
+                    ct.getFrameWidth('l'),
+                    -ct.getFrameWidth('b'),
+                    -ct.getFrameWidth('r')
+                );
+            }
+
+            this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+            this.proxy.show();
+            this.proxy.setBox(this.startBox);
+            if(!this.dynamic){
+                this.proxy.setStyle('visibility', 'visible');
+            }
+        }
+    },
+
+    // private
+    onMouseDown : function(handle, e){
+        if(this.enabled){
+            e.stopEvent();
+            this.activeHandle = handle;
+            this.startSizing(e, handle);
+        }          
+    },
+
+    // private
+    onMouseUp : function(e){
+        this.activeHandle = null;
+        var size = this.resizeElement();
+        this.resizing = false;
+        this.handleOut();
+        this.overlay.hide();
+        this.proxy.hide();
+        this.fireEvent('resize', this, size.width, size.height, e);
+    },
+
+    // private
+    updateChildSize : function(){
+        if(this.resizeChild){
+            var el = this.el;
+            var child = this.resizeChild;
+            var adj = this.adjustments;
+            if(el.dom.offsetWidth){
+                var b = el.getSize(true);
+                child.setSize(b.width+adj[0], b.height+adj[1]);
+            }
+            // Second call here for IE
+            // The first call enables instant resizing and
+            // the second call corrects scroll bars if they
+            // exist
+            if(Ext.isIE){
+                setTimeout(function(){
+                    if(el.dom.offsetWidth){
+                        var b = el.getSize(true);
+                        child.setSize(b.width+adj[0], b.height+adj[1]);
+                    }
+                }, 10);
+            }
+        }
+    },
+
+    // private
+    snap : function(value, inc, min){
+        if(!inc || !value){
+            return value;
+        }
+        var newValue = value;
+        var m = value % inc;
+        if(m > 0){
+            if(m > (inc/2)){
+                newValue = value + (inc-m);
+            }else{
+                newValue = value - m;
+            }
+        }
+        return Math.max(min, newValue);
+    },
+
+    /**
+     * 
    Performs resizing of the associated Element. This method is called internally by this
+     * class, and should not be called by user code.
    
+     * 
    If a Resizable is being used to resize an Element which encapsulates a more complex UI
+     * component such as a Panel, this method may be overridden by specifying an implementation
+     * as a config option to provide appropriate behaviour at the end of the resize operation on
+     * mouseup, for example resizing the Panel, and relaying the Panel's content.
    
+     * 
    The new area to be resized to is available by examining the state of the {@link #proxy}
+     * Element. Example:
+
    
+new Ext.Panel({
+    title: 'Resize me',
+    x: 100,
+    y: 100,
+    renderTo: Ext.getBody(),
+    floating: true,
+    frame: true,
+    width: 400,
+    height: 200,
+    listeners: {
+        render: function(p) {
+            new Ext.Resizable(p.getEl(), {
+                handles: 'all',
+                pinned: true,
+                transparent: true,
+                resizeElement: function() {
+                    var box = this.proxy.getBox();
+                    p.updateBox(box);
+                    if (p.layout) {
+                        p.doLayout();
+                    }
+                    return box;
+                }
+           });
+       }
+    }
+}).show();
+
    
+     */
+    resizeElement : function(){
+        var box = this.proxy.getBox();
+        if(this.updateBox){
+            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+        }else{
+            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
+        }
+        this.updateChildSize();
+        if(!this.dynamic){
+            this.proxy.hide();
+        }
+        if(this.draggable && this.constrainTo){
+            this.dd.resetConstraints();
+            this.dd.constrainTo(this.constrainTo);
+        }
+        return box;
+    },
+
+    // private
+    constrain : function(v, diff, m, mx){
+        if(v - diff < m){
+            diff = v - m;    
+        }else if(v - diff > mx){
+            diff = v - mx; 
+        }
+        return diff;                
+    },
+
+    // private
+    onMouseMove : function(e){
+        if(this.enabled && this.activeHandle){
+            try{// try catch so if something goes wrong the user doesn't get hung
+
+            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+                return;
+            }
+
+            //var curXY = this.startPoint;
+            var curSize = this.curSize || this.startBox,
+                x = this.startBox.x, y = this.startBox.y,
+                ox = x, 
+                oy = y,
+                w = curSize.width, 
+                h = curSize.height,
+                ow = w, 
+                oh = h,
+                mw = this.minWidth, 
+                mh = this.minHeight,
+                mxw = this.maxWidth, 
+                mxh = this.maxHeight,
+                wi = this.widthIncrement,
+                hi = this.heightIncrement,
+                eventXY = e.getXY(),
+                diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
+                diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
+                pos = this.activeHandle.position,
+                tw,
+                th;
+            
+            switch(pos){
+                case 'east':
+                    w += diffX; 
+                    w = Math.min(Math.max(mw, w), mxw);
+                    break;
+                case 'south':
+                    h += diffY;
+                    h = Math.min(Math.max(mh, h), mxh);
+                    break;
+                case 'southeast':
+                    w += diffX; 
+                    h += diffY;
+                    w = Math.min(Math.max(mw, w), mxw);
+                    h = Math.min(Math.max(mh, h), mxh);
+                    break;
+                case 'north':
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    break;
+                case 'west':
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    x += diffX;
+                    w -= diffX;
+                    break;
+                case 'northeast':
+                    w += diffX; 
+                    w = Math.min(Math.max(mw, w), mxw);
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    break;
+                case 'northwest':
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    x += diffX;
+                    w -= diffX;
+                    break;
+               case 'southwest':
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    h += diffY;
+                    h = Math.min(Math.max(mh, h), mxh);
+                    x += diffX;
+                    w -= diffX;
+                    break;
+            }
+            
+            var sw = this.snap(w, wi, mw);
+            var sh = this.snap(h, hi, mh);
+            if(sw != w || sh != h){
+                switch(pos){
+                    case 'northeast':
+                        y -= sh - h;
+                    break;
+                    case 'north':
+                        y -= sh - h;
+                        break;
+                    case 'southwest':
+                        x -= sw - w;
+                    break;
+                    case 'west':
+                        x -= sw - w;
+                        break;
+                    case 'northwest':
+                        x -= sw - w;
+                        y -= sh - h;
+                    break;
+                }
+                w = sw;
+                h = sh;
+            }
+            
+            if(this.preserveRatio){
+                switch(pos){
+                    case 'southeast':
+                    case 'east':
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        w = ow * (h/oh);
+                       break;
+                    case 'south':
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                        break;
+                    case 'northeast':
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                    break;
+                    case 'north':
+                        tw = w;
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                        x += (tw - w) / 2;
+                        break;
+                    case 'southwest':
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        tw = w;
+                        w = ow * (h/oh);
+                        x += tw - w;
+                        break;
+                    case 'west':
+                        th = h;
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        y += (th - h) / 2;
+                        tw = w;
+                        w = ow * (h/oh);
+                        x += tw - w;
+                       break;
+                    case 'northwest':
+                        tw = w;
+                        th = h;
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        w = ow * (h/oh);
+                        y += th - h;
+                        x += tw - w;
+                        break;
+                        
+                }
+            }
+            this.proxy.setBounds(x, y, w, h);
+            if(this.dynamic){
+                this.resizeElement();
+            }
+            }catch(ex){}
+        }
+    },
+
+    // private
+    handleOver : function(){
+        if(this.enabled){
+            this.el.addClass('x-resizable-over');
+        }
+    },
+
+    // private
+    handleOut : function(){
+        if(!this.resizing){
+            this.el.removeClass('x-resizable-over');
+        }
+    },
+    
+    /**
+     * Returns the element this component is bound to.
+     * @return {Ext.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+    
+    /**
+     * Returns the resizeChild element (or null).
+     * @return {Ext.Element}
+     */
+    getResizeChild : function(){
+        return this.resizeChild;
+    },
+    
+    /**
+     * Destroys this resizable. If the element was wrapped and 
+     * removeEl is not true then the element remains.
+     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+     */
+    destroy : function(removeEl){
+        Ext.destroy(this.dd, this.overlay, this.proxy);
+        this.overlay = null;
+        this.proxy = null;
+        
+        var ps = Ext.Resizable.positions;
+        for(var k in ps){
+            if(typeof ps[k] != 'function' && this[ps[k]]){
+                this[ps[k]].destroy();
+            }
+        }
+        if(removeEl){
+            this.el.update('');
+            Ext.destroy(this.el);
+            this.el = null;
+        }
+        this.purgeListeners();
+    },
+
+    syncHandleHeight : function(){
+        var h = this.el.getHeight(true);
+        if(this.west){
+            this.west.el.setHeight(h);
+        }
+        if(this.east){
+            this.east.el.setHeight(h);
+        }
+    }
+});
+
+// private
+// hash to map config positions to true positions
+Ext.Resizable.positions = {
+    n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
+};
+
+Ext.Resizable.Handle = Ext.extend(Object, {
+    constructor : function(rz, pos, disableTrackOver, transparent, cls){
+       if(!this.tpl){
+            // only initialize the template if resizable is used
+            var tpl = Ext.DomHelper.createTemplate(
+                {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
+            );
+            tpl.compile();
+            Ext.Resizable.Handle.prototype.tpl = tpl;
+        }
+        this.position = pos;
+        this.rz = rz;
+        this.el = this.tpl.append(rz.el.dom, [this.position], true);
+        this.el.unselectable();
+        if(transparent){
+            this.el.setOpacity(0);
+        }
+        if(!Ext.isEmpty(cls)){
+            this.el.addClass(cls);    
+        }
+        this.el.on('mousedown', this.onMouseDown, this);
+        if(!disableTrackOver){
+            this.el.on({
+                scope: this,
+                mouseover: this.onMouseOver,
+                mouseout: this.onMouseOut
+            });
+        }        
+    },
+    
+    // private
+    afterResize : function(rz){
+        // do nothing    
+    },
+    // private
+    onMouseDown : function(e){
+        this.rz.onMouseDown(this, e);
+    },
+    // private
+    onMouseOver : function(e){
+        this.rz.handleOver(this, e);
+    },
+    // private
+    onMouseOut : function(e){
+        this.rz.handleOut(this, e);
+    },
+    // private
+    destroy : function(){
+        Ext.destroy(this.el);
+        this.el = null;
+    }
+});
 /**
  * @class Ext.Window
  * @extends Ext.Panel
@@ -40260,793 +40260,793 @@ MyDesktop.getDesktop().getManager().register(msgWin);
  * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed.
  * @singleton
  */
-Ext.WindowMgr = new Ext.WindowGroup();/**
- * @class Ext.MessageBox
- * 
    Utility class for generating different styles of message boxes.  The alias Ext.Msg can also be used.
    
- * 
    Note that the MessageBox is asynchronous.  Unlike a regular JavaScript alert (which will halt
- * browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
- * that should only run after some user feedback from the MessageBox, you must use a callback function
- * (see the function parameter for {@link #show} for more details).
    
- * 
    Example usage:
    
- *
    
-// Basic alert:
-Ext.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data and process the result using a callback:
-Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
-    if (btn == 'ok'){
-        // process text value and close...
-    }
-});
-
-// Show a dialog using config options:
-Ext.Msg.show({
-   title:'Save Changes?',
-   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
-   buttons: Ext.Msg.YESNOCANCEL,
-   fn: processResult,
-   animEl: 'elId',
-   icon: Ext.MessageBox.QUESTION
-});
-
    
- * @singleton
- */
-Ext.MessageBox = function(){
-    var dlg, opt, mask, waitTimer,
-        bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl,
-        buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '',
-        buttonNames = ['ok', 'yes', 'no', 'cancel'];
-
-    // private
-    var handleButton = function(button){
-        buttons[button].blur();
-        if(dlg.isVisible()){
-            dlg.hide();
-            handleHide();
-            Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1);
-        }
-    };
-
-    // private
-    var handleHide = function(){
-        if(opt && opt.cls){
-            dlg.el.removeClass(opt.cls);
-        }
-        progressBar.reset();        
-    };
-
-    // private
-    var handleEsc = function(d, k, e){
-        if(opt && opt.closable !== false){
-            dlg.hide();
-            handleHide();
-        }
-        if(e){
-            e.stopEvent();
-        }
-    };
-
-    // private
-    var updateButtons = function(b){
-        var width = 0,
-            cfg;
-        if(!b){
-            Ext.each(buttonNames, function(name){
-                buttons[name].hide();
-            });
-            return width;
-        }
-        dlg.footer.dom.style.display = '';
-        Ext.iterate(buttons, function(name, btn){
-            cfg = b[name];
-            if(cfg){
-                btn.show();
-                btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
-                width += btn.getEl().getWidth() + 15;
-            }else{
-                btn.hide();
-            }
-        });
-        return width;
-    };
-
-    return {
-        /**
-         * Returns a reference to the underlying {@link Ext.Window} element
-         * @return {Ext.Window} The window
-         */
-        getDialog : function(titleText){
-           if(!dlg){
-                var btns = [];
-                
-                buttons = {};
-                Ext.each(buttonNames, function(name){
-                    btns.push(buttons[name] = new Ext.Button({
-                        text: this.buttonText[name],
-                        handler: handleButton.createCallback(name),
-                        hideMode: 'offsets'
-                    }));
-                }, this);
-                dlg = new Ext.Window({
-                    autoCreate : true,
-                    title:titleText,
-                    resizable:false,
-                    constrain:true,
-                    constrainHeader:true,
-                    minimizable : false,
-                    maximizable : false,
-                    stateful: false,
-                    modal: true,
-                    shim:true,
-                    buttonAlign:"center",
-                    width:400,
-                    height:100,
-                    minHeight: 80,
-                    plain:true,
-                    footer:true,
-                    closable:true,
-                    close : function(){
-                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
-                            handleButton("no");
-                        }else{
-                            handleButton("cancel");
-                        }
-                    },
-                    fbar: new Ext.Toolbar({
-                        items: btns,
-                        enableOverflow: false
-                    })
-                });
-                dlg.render(document.body);
-                dlg.getEl().addClass('x-window-dlg');
-                mask = dlg.mask;
-                bodyEl = dlg.body.createChild({
-                    html:'

    '
-                });
-                iconEl = Ext.get(bodyEl.dom.firstChild);
-                var contentEl = bodyEl.dom.childNodes[1];
-                msgEl = Ext.get(contentEl.firstChild);
-                textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
-                textboxEl.enableDisplayMode();
-                textboxEl.addKeyListener([10,13], function(){
-                    if(dlg.isVisible() && opt && opt.buttons){
-                        if(opt.buttons.ok){
-                            handleButton("ok");
-                        }else if(opt.buttons.yes){
-                            handleButton("yes");
-                        }
-                    }
-                });
-                textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
-                textareaEl.enableDisplayMode();
-                progressBar = new Ext.ProgressBar({
-                    renderTo:bodyEl
-                });
-               bodyEl.createChild({cls:'x-clear'});
-            }
-            return dlg;
-        },
-
-        /**
-         * Updates the message box body text
-         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
-         * the XHTML-compliant non-breaking space character '&#160;')
-         * @return {Ext.MessageBox} this
-         */
-        updateText : function(text){
-            if(!dlg.isVisible() && !opt.width){
-                dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows
-            }
-            msgEl.update(text || ' ');
-
-            var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0,
-                mw = msgEl.getWidth() + msgEl.getMargins('lr'),
-                fw = dlg.getFrameWidth('lr'),
-                bw = dlg.body.getFrameWidth('lr'),
-                w;
-                
-            if (Ext.isIE && iw > 0){
-                //3 pixels get subtracted in the icon CSS for an IE margin issue,
-                //so we have to add it back here for the overall width to be consistent
-                iw += 3;
-            }
-            w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth),
-                    Math.max(opt.minWidth || this.minWidth, bwidth || 0));
-
-            if(opt.prompt === true){
-                activeTextEl.setWidth(w-iw-fw-bw);
-            }
-            if(opt.progress === true || opt.wait === true){
-                progressBar.setSize(w-iw-fw-bw);
-            }
-            if(Ext.isIE && w == bwidth){
-                w += 4; //Add offset when the content width is smaller than the buttons.    
-            }
-            dlg.setSize(w, 'auto').center();
-            return this;
-        },
-
-        /**
-         * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
-         * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait},
-         * or by calling {@link Ext.MessageBox#show} with progress: true.
-         * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
-         * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
-         * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
-         * so that any existing body text will not get overwritten by default unless a new value is passed in)
-         * @return {Ext.MessageBox} this
-         */
-        updateProgress : function(value, progressText, msg){
-            progressBar.updateProgress(value, progressText);
-            if(msg){
-                this.updateText(msg);
-            }
-            return this;
-        },
-
-        /**
-         * Returns true if the message box is currently displayed
-         * @return {Boolean} True if the message box is visible, else false
-         */
-        isVisible : function(){
-            return dlg && dlg.isVisible();
-        },
-
-        /**
-         * Hides the message box if it is displayed
-         * @return {Ext.MessageBox} this
-         */
-        hide : function(){
-            var proxy = dlg ? dlg.activeGhost : null;
-            if(this.isVisible() || proxy){
-                dlg.hide();
-                handleHide();
-                if (proxy){
-                    // unghost is a private function, but i saw no better solution
-                    // to fix the locking problem when dragging while it closes
-                    dlg.unghost(false, false);
-                } 
-            }
-            return this;
-        },
-
-        /**
-         * Displays a new message box, or reinitializes an existing message box, based on the config options
-         * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
-         * although those calls are basic shortcuts and do not support all of the config options allowed here.
-         * @param {Object} config The following config options are supported: 
      
-         * 
    • animEl : String/Element
      An id or Element from which the message box should animate as it
-         * opens and closes (defaults to undefined)
      • 
-         * 
    • buttons : Object/Boolean
      A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
-         * cancel:'Bar'}), or false to not show any buttons (defaults to false)
      • 
-         * 
    • closable : Boolean
      False to hide the top-right close button (defaults to true). Note that
-         * progress and wait dialogs will ignore this property and always hide the close button as they can only
-         * be closed programmatically.
      • 
-         * 
    • cls : String
      A custom CSS class to apply to the message box's container element
      • 
-         * 
    • defaultTextHeight : Number
      The default height in pixels of the message box's multiline textarea
-         * if displayed (defaults to 75)
      • 
-         * 
    • fn : Function
      A callback function which is called when the dialog is dismissed either
-         * by clicking on the configured buttons, or on the dialog close button, or by pressing
-         * the return button to enter input.
-         * 
      Progress and wait dialogs will ignore this option since they do not respond to user
-         * actions and can only be closed programmatically, so any required function should be called
-         * by the same code after it closes the dialog. Parameters passed:
        
-         * 
      • buttonId : String
        The ID of the button pressed, one of:
          
-         * 
        • ok
          • 
-         * 
        • yes
          • 
-         * 
        • no
          • 
-         * 
        • cancel
          • 
-         * 
        • 
-         * 
      • text : String
        Value of the input field if either prompt
-         * or multiline is true
        • 
-         * 
      • opt : Object
        The config object passed to show.
        • 
-         * 
      • 
-         * 
    • scope : Object
      The scope of the callback function
      • 
-         * 
    • icon : String
      A CSS class that provides a background image to be used as the body icon for the
-         * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')
      • 
-         * 
    • iconCls : String
      The standard {@link Ext.Window#iconCls} to
-         * add an optional header icon (defaults to '')
      • 
-         * 
    • maxWidth : Number
      The maximum width in pixels of the message box (defaults to 600)
      • 
-         * 
    • minWidth : Number
      The minimum width in pixels of the message box (defaults to 100)
      • 
-         * 
    • modal : Boolean
      False to allow user interaction with the page while the message box is
-         * displayed (defaults to true)
      • 
-         * 
    • msg : String
      A string that will replace the existing message box body text (defaults to the
-         * XHTML-compliant non-breaking space character '&#160;')
      • 
-         * 
    • multiline : Boolean
      
-         * True to prompt the user to enter multi-line text (defaults to false)
      • 
-         * 
    • progress : Boolean
      True to display a progress bar (defaults to false)
      • 
-         * 
    • progressText : String
      The text to display inside the progress bar if progress = true (defaults to '')
      • 
-         * 
    • prompt : Boolean
      True to prompt the user to enter single-line text (defaults to false)
      • 
-         * 
    • proxyDrag : Boolean
      True to display a lightweight proxy while dragging (defaults to false)
      • 
-         * 
    • title : String
      The title text
      • 
-         * 
    • value : String
      The string value to set into the active textbox element if displayed
      • 
-         * 
    • wait : Boolean
      True to display a progress bar (defaults to false)
      • 
-         * 
    • waitConfig : Object
      A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)
      • 
-         * 
    • width : Number
      The width of the dialog in pixels
      • 
-         * 
    
-         * Example usage:
-         * 
    
-Ext.Msg.show({
-   title: 'Address',
-   msg: 'Please enter your address:',
-   width: 300,
-   buttons: Ext.MessageBox.OKCANCEL,
-   multiline: true,
-   fn: saveAddress,
-   animEl: 'addAddressBtn',
-   icon: Ext.MessageBox.INFO
-});
-
    
-         * @return {Ext.MessageBox} this
-         */
-        show : function(options){
-            if(this.isVisible()){
-                this.hide();
-            }
-            opt = options;
-            var d = this.getDialog(opt.title || " ");
-
-            d.setTitle(opt.title || " ");
-            var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
-            d.tools.close.setDisplayed(allowClose);
-            activeTextEl = textboxEl;
-            opt.prompt = opt.prompt || (opt.multiline ? true : false);
-            if(opt.prompt){
-                if(opt.multiline){
-                    textboxEl.hide();
-                    textareaEl.show();
-                    textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
-                    activeTextEl = textareaEl;
-                }else{
-                    textboxEl.show();
-                    textareaEl.hide();
-                }
-            }else{
-                textboxEl.hide();
-                textareaEl.hide();
-            }
-            activeTextEl.dom.value = opt.value || "";
-            if(opt.prompt){
-                d.focusEl = activeTextEl;
-            }else{
-                var bs = opt.buttons;
-                var db = null;
-                if(bs && bs.ok){
-                    db = buttons["ok"];
-                }else if(bs && bs.yes){
-                    db = buttons["yes"];
-                }
-                if (db){
-                    d.focusEl = db;
-                }
-            }
-            if(opt.iconCls){
-              d.setIconClass(opt.iconCls);
-            }
-            this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
-            bwidth = updateButtons(opt.buttons);
-            progressBar.setVisible(opt.progress === true || opt.wait === true);
-            this.updateProgress(0, opt.progressText);
-            this.updateText(opt.msg);
-            if(opt.cls){
-                d.el.addClass(opt.cls);
-            }
-            d.proxyDrag = opt.proxyDrag === true;
-            d.modal = opt.modal !== false;
-            d.mask = opt.modal !== false ? mask : false;
-            if(!d.isVisible()){
-                // force it to the end of the z-index stack so it gets a cursor in FF
-                document.body.appendChild(dlg.el.dom);
-                d.setAnimateTarget(opt.animEl);
-                //workaround for window internally enabling keymap in afterShow
-                d.on('show', function(){
-                    if(allowClose === true){
-                        d.keyMap.enable();
-                    }else{
-                        d.keyMap.disable();
-                    }
-                }, this, {single:true});
-                d.show(opt.animEl);
-            }
-            if(opt.wait === true){
-                progressBar.wait(opt.waitConfig);
-            }
-            return this;
-        },
-
-        /**
-         * Adds the specified icon to the dialog.  By default, the class 'ext-mb-icon' is applied for default
-         * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
-         * to clear any existing icon. This method must be called before the MessageBox is shown.
-         * The following built-in icon classes are supported, but you can also pass in a custom class name:
-         * 
    -Ext.MessageBox.INFO
-Ext.MessageBox.WARNING
-Ext.MessageBox.QUESTION
-Ext.MessageBox.ERROR
-         *
    
-         * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
-         * @return {Ext.MessageBox} this
-         */
-        setIcon : function(icon){
-            if(!dlg){
-                bufferIcon = icon;
-                return;
-            }
-            bufferIcon = undefined;
-            if(icon && icon != ''){
-                iconEl.removeClass('x-hidden');
-                iconEl.replaceClass(iconCls, icon);
-                bodyEl.addClass('x-dlg-icon');
-                iconCls = icon;
-            }else{
-                iconEl.replaceClass(iconCls, 'x-hidden');
-                bodyEl.removeClass('x-dlg-icon');
-                iconCls = '';
-            }
-            return this;
-        },
-
-        /**
-         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
-         * the user.  You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress}
-         * and closing the message box when the process is complete.
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
-         * @return {Ext.MessageBox} this
-         */
-        progress : function(title, msg, progressText){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: false,
-                progress:true,
-                closable:false,
-                minWidth: this.minProgressWidth,
-                progressText: progressText
-            });
-            return this;
-        },
-
-        /**
-         * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
-         * interaction while waiting for a long-running process to complete that does not have defined intervals.
-         * You are responsible for closing the message box when the process is complete.
-         * @param {String} msg The message box body text
-         * @param {String} title (optional) The title bar text
-         * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
-         * @return {Ext.MessageBox} this
-         */
-        wait : function(msg, title, config){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: false,
-                closable:false,
-                wait:true,
-                modal:true,
-                minWidth: this.minProgressWidth,
-                waitConfig: config
-            });
-            return this;
-        },
-
-        /**
-         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
-         * If a callback function is passed it will be called after the user clicks the button, and the
-         * id of the button that was clicked will be passed as the only parameter to the callback
-         * (could also be the top-right close button).
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
-         * @return {Ext.MessageBox} this
-         */
-        alert : function(title, msg, fn, scope){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.OK,
-                fn: fn,
-                scope : scope,
-                minWidth: this.minWidth
-            });
-            return this;
-        },
-
-        /**
-         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
-         * If a callback function is passed it will be called after the user clicks either button,
-         * and the id of the button that was clicked will be passed as the only parameter to the callback
-         * (could also be the top-right close button).
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
-         * @return {Ext.MessageBox} this
-         */
-        confirm : function(title, msg, fn, scope){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.YESNO,
-                fn: fn,
-                scope : scope,
-                icon: this.QUESTION,
-                minWidth: this.minWidth
-            });
-            return this;
-        },
-
-        /**
-         * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
-         * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user
-         * clicks either button, and the id of the button that was clicked (could also be the top-right
-         * close button) and the text that was entered will be passed as the two parameters to the callback.
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
-         * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
-         * property, or the height in pixels to create the textbox (defaults to false / single-line)
-         * @param {String} value (optional) Default value of the text input element (defaults to '')
-         * @return {Ext.MessageBox} this
-         */
-        prompt : function(title, msg, fn, scope, multiline, value){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.OKCANCEL,
-                fn: fn,
-                minWidth: this.minPromptWidth,
-                scope : scope,
-                prompt:true,
-                multiline: multiline,
-                value: value
-            });
-            return this;
-        },
-
-        /**
-         * Button config that displays a single OK button
-         * @type Object
-         */
-        OK : {ok:true},
-        /**
-         * Button config that displays a single Cancel button
-         * @type Object
-         */
-        CANCEL : {cancel:true},
-        /**
-         * Button config that displays OK and Cancel buttons
-         * @type Object
-         */
-        OKCANCEL : {ok:true, cancel:true},
-        /**
-         * Button config that displays Yes and No buttons
-         * @type Object
-         */
-        YESNO : {yes:true, no:true},
-        /**
-         * Button config that displays Yes, No and Cancel buttons
-         * @type Object
-         */
-        YESNOCANCEL : {yes:true, no:true, cancel:true},
-        /**
-         * The CSS class that provides the INFO icon image
-         * @type String
-         */
-        INFO : 'ext-mb-info',
-        /**
-         * The CSS class that provides the WARNING icon image
-         * @type String
-         */
-        WARNING : 'ext-mb-warning',
-        /**
-         * The CSS class that provides the QUESTION icon image
-         * @type String
-         */
-        QUESTION : 'ext-mb-question',
-        /**
-         * The CSS class that provides the ERROR icon image
-         * @type String
-         */
-        ERROR : 'ext-mb-error',
-
-        /**
-         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
-         * @type Number
-         */
-        defaultTextHeight : 75,
-        /**
-         * The maximum width in pixels of the message box (defaults to 600)
-         * @type Number
-         */
-        maxWidth : 600,
-        /**
-         * The minimum width in pixels of the message box (defaults to 100)
-         * @type Number
-         */
-        minWidth : 100,
-        /**
-         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
-         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
-         * @type Number
-         */
-        minProgressWidth : 250,
-        /**
-         * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
-         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
-         * @type Number
-         */
-        minPromptWidth: 250,
-        /**
-         * An object containing the default button text strings that can be overriden for localized language support.
-         * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
-         * resource file for handling language support across the framework.
-         * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
-         * @type Object
-         */
-        buttonText : {
-            ok : "OK",
-            cancel : "Cancel",
-            yes : "Yes",
-            no : "No"
-        }
-    };
-}();
-
-/**
- * Shorthand for {@link Ext.MessageBox}
- */
-Ext.Msg = Ext.MessageBox;/**
- * @class Ext.dd.PanelProxy
- * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally
- * for the Panel's drag drop implementation, and should never need to be created directly.
- * @constructor
- * @param panel The {@link Ext.Panel} to proxy for
- * @param config Configuration options
- */
-Ext.dd.PanelProxy = function(panel, config){
-    this.panel = panel;
-    this.id = this.panel.id +'-ddproxy';
-    Ext.apply(this, config);
-};
-
-Ext.dd.PanelProxy.prototype = {
-    /**
-     * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel,
-     * false to drag with no proxy (defaults to true).
-     */
-    insertProxy : true,
-
-    // private overrides
-    setStatus : Ext.emptyFn,
-    reset : Ext.emptyFn,
-    update : Ext.emptyFn,
-    stop : Ext.emptyFn,
-    sync: Ext.emptyFn,
-
-    /**
-     * Gets the proxy's element
-     * @return {Element} The proxy's element
-     */
-    getEl : function(){
-        return this.ghost;
-    },
-
-    /**
-     * Gets the proxy's ghost element
-     * @return {Element} The proxy's ghost element
-     */
-    getGhost : function(){
-        return this.ghost;
-    },
-
-    /**
-     * Gets the proxy's element
-     * @return {Element} The proxy's element
-     */
-    getProxy : function(){
-        return this.proxy;
-    },
-
-    /**
-     * Hides the proxy
-     */
-    hide : function(){
-        if(this.ghost){
-            if(this.proxy){
-                this.proxy.remove();
-                delete this.proxy;
-            }
-            this.panel.el.dom.style.display = '';
-            this.ghost.remove();
-            delete this.ghost;
-        }
-    },
-
-    /**
-     * Shows the proxy
-     */
-    show : function(){
-        if(!this.ghost){
-            this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody());
-            this.ghost.setXY(this.panel.el.getXY())
-            if(this.insertProxy){
-                this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'});
-                this.proxy.setSize(this.panel.getSize());
-            }
-            this.panel.el.dom.style.display = 'none';
-        }
-    },
-
-    // private
-    repair : function(xy, callback, scope){
-        this.hide();
-        if(typeof callback == "function"){
-            callback.call(scope || this);
-        }
-    },
-
-    /**
-     * Moves the proxy to a different position in the DOM.  This is typically called while dragging the Panel
-     * to keep the proxy sync'd to the Panel's location.
-     * @param {HTMLElement} parentNode The proxy's parent DOM node
-     * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults
-     * to the parent's last child if not specified)
-     */
-    moveProxy : function(parentNode, before){
-        if(this.proxy){
-            parentNode.insertBefore(this.proxy.dom, before);
-        }
-    }
-};
-
-// private - DD implementation for Panels
-Ext.Panel.DD = function(panel, cfg){
-    this.panel = panel;
-    this.dragData = {panel: panel};
-    this.proxy = new Ext.dd.PanelProxy(panel, cfg);
-    Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg);
-    var h = panel.header;
-    if(h){
-        this.setHandleElId(h.id);
-    }
-    (h ? h : this.panel.body).setStyle('cursor', 'move');
-    this.scroll = false;
-};
-
-Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, {
-    showFrame: Ext.emptyFn,
-    startDrag: Ext.emptyFn,
-    b4StartDrag: function(x, y) {
-        this.proxy.show();
-    },
-    b4MouseDown: function(e) {
-        var x = e.getPageX();
-        var y = e.getPageY();
-        this.autoOffset(x, y);
-    },
-    onInitDrag : function(x, y){
-        this.onStartDrag(x, y);
-        return true;
-    },
-    createFrame : Ext.emptyFn,
-    getDragEl : function(e){
-        return this.proxy.ghost.dom;
-    },
-    endDrag : function(e){
-        this.proxy.hide();
-        this.panel.saveState();
-    },
-
-    autoOffset : function(x, y) {
-        x -= this.startPageX;
-        y -= this.startPageY;
-        this.setDelta(x, y);
-    }
+Ext.WindowMgr = new Ext.WindowGroup();/**
+ * @class Ext.MessageBox
+ * 
    Utility class for generating different styles of message boxes.  The alias Ext.Msg can also be used.
    
+ * 
    Note that the MessageBox is asynchronous.  Unlike a regular JavaScript alert (which will halt
+ * browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
+ * that should only run after some user feedback from the MessageBox, you must use a callback function
+ * (see the function parameter for {@link #show} for more details).
    
+ * 
    Example usage:
    
+ *
    
+// Basic alert:
+Ext.Msg.alert('Status', 'Changes saved successfully.');
+
+// Prompt for user data and process the result using a callback:
+Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+    if (btn == 'ok'){
+        // process text value and close...
+    }
+});
+
+// Show a dialog using config options:
+Ext.Msg.show({
+   title:'Save Changes?',
+   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
+   buttons: Ext.Msg.YESNOCANCEL,
+   fn: processResult,
+   animEl: 'elId',
+   icon: Ext.MessageBox.QUESTION
+});
+
    
+ * @singleton
+ */
+Ext.MessageBox = function(){
+    var dlg, opt, mask, waitTimer,
+        bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl,
+        buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '',
+        buttonNames = ['ok', 'yes', 'no', 'cancel'];
+
+    // private
+    var handleButton = function(button){
+        buttons[button].blur();
+        if(dlg.isVisible()){
+            dlg.hide();
+            handleHide();
+            Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1);
+        }
+    };
+
+    // private
+    var handleHide = function(){
+        if(opt && opt.cls){
+            dlg.el.removeClass(opt.cls);
+        }
+        progressBar.reset();        
+    };
+
+    // private
+    var handleEsc = function(d, k, e){
+        if(opt && opt.closable !== false){
+            dlg.hide();
+            handleHide();
+        }
+        if(e){
+            e.stopEvent();
+        }
+    };
+
+    // private
+    var updateButtons = function(b){
+        var width = 0,
+            cfg;
+        if(!b){
+            Ext.each(buttonNames, function(name){
+                buttons[name].hide();
+            });
+            return width;
+        }
+        dlg.footer.dom.style.display = '';
+        Ext.iterate(buttons, function(name, btn){
+            cfg = b[name];
+            if(cfg){
+                btn.show();
+                btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
+                width += btn.getEl().getWidth() + 15;
+            }else{
+                btn.hide();
+            }
+        });
+        return width;
+    };
+
+    return {
+        /**
+         * Returns a reference to the underlying {@link Ext.Window} element
+         * @return {Ext.Window} The window
+         */
+        getDialog : function(titleText){
+           if(!dlg){
+                var btns = [];
+                
+                buttons = {};
+                Ext.each(buttonNames, function(name){
+                    btns.push(buttons[name] = new Ext.Button({
+                        text: this.buttonText[name],
+                        handler: handleButton.createCallback(name),
+                        hideMode: 'offsets'
+                    }));
+                }, this);
+                dlg = new Ext.Window({
+                    autoCreate : true,
+                    title:titleText,
+                    resizable:false,
+                    constrain:true,
+                    constrainHeader:true,
+                    minimizable : false,
+                    maximizable : false,
+                    stateful: false,
+                    modal: true,
+                    shim:true,
+                    buttonAlign:"center",
+                    width:400,
+                    height:100,
+                    minHeight: 80,
+                    plain:true,
+                    footer:true,
+                    closable:true,
+                    close : function(){
+                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
+                            handleButton("no");
+                        }else{
+                            handleButton("cancel");
+                        }
+                    },
+                    fbar: new Ext.Toolbar({
+                        items: btns,
+                        enableOverflow: false
+                    })
+                });
+                dlg.render(document.body);
+                dlg.getEl().addClass('x-window-dlg');
+                mask = dlg.mask;
+                bodyEl = dlg.body.createChild({
+                    html:'

    '
+                });
+                iconEl = Ext.get(bodyEl.dom.firstChild);
+                var contentEl = bodyEl.dom.childNodes[1];
+                msgEl = Ext.get(contentEl.firstChild);
+                textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
+                textboxEl.enableDisplayMode();
+                textboxEl.addKeyListener([10,13], function(){
+                    if(dlg.isVisible() && opt && opt.buttons){
+                        if(opt.buttons.ok){
+                            handleButton("ok");
+                        }else if(opt.buttons.yes){
+                            handleButton("yes");
+                        }
+                    }
+                });
+                textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
+                textareaEl.enableDisplayMode();
+                progressBar = new Ext.ProgressBar({
+                    renderTo:bodyEl
+                });
+               bodyEl.createChild({cls:'x-clear'});
+            }
+            return dlg;
+        },
+
+        /**
+         * Updates the message box body text
+         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
+         * the XHTML-compliant non-breaking space character '&#160;')
+         * @return {Ext.MessageBox} this
+         */
+        updateText : function(text){
+            if(!dlg.isVisible() && !opt.width){
+                dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows
+            }
+            msgEl.update(text || ' ');
+
+            var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0,
+                mw = msgEl.getWidth() + msgEl.getMargins('lr'),
+                fw = dlg.getFrameWidth('lr'),
+                bw = dlg.body.getFrameWidth('lr'),
+                w;
+                
+            if (Ext.isIE && iw > 0){
+                //3 pixels get subtracted in the icon CSS for an IE margin issue,
+                //so we have to add it back here for the overall width to be consistent
+                iw += 3;
+            }
+            w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth),
+                    Math.max(opt.minWidth || this.minWidth, bwidth || 0));
+
+            if(opt.prompt === true){
+                activeTextEl.setWidth(w-iw-fw-bw);
+            }
+            if(opt.progress === true || opt.wait === true){
+                progressBar.setSize(w-iw-fw-bw);
+            }
+            if(Ext.isIE && w == bwidth){
+                w += 4; //Add offset when the content width is smaller than the buttons.    
+            }
+            dlg.setSize(w, 'auto').center();
+            return this;
+        },
+
+        /**
+         * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
+         * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait},
+         * or by calling {@link Ext.MessageBox#show} with progress: true.
+         * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
+         * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
+         * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
+         * so that any existing body text will not get overwritten by default unless a new value is passed in)
+         * @return {Ext.MessageBox} this
+         */
+        updateProgress : function(value, progressText, msg){
+            progressBar.updateProgress(value, progressText);
+            if(msg){
+                this.updateText(msg);
+            }
+            return this;
+        },
+
+        /**
+         * Returns true if the message box is currently displayed
+         * @return {Boolean} True if the message box is visible, else false
+         */
+        isVisible : function(){
+            return dlg && dlg.isVisible();
+        },
+
+        /**
+         * Hides the message box if it is displayed
+         * @return {Ext.MessageBox} this
+         */
+        hide : function(){
+            var proxy = dlg ? dlg.activeGhost : null;
+            if(this.isVisible() || proxy){
+                dlg.hide();
+                handleHide();
+                if (proxy){
+                    // unghost is a private function, but i saw no better solution
+                    // to fix the locking problem when dragging while it closes
+                    dlg.unghost(false, false);
+                } 
+            }
+            return this;
+        },
+
+        /**
+         * Displays a new message box, or reinitializes an existing message box, based on the config options
+         * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
+         * although those calls are basic shortcuts and do not support all of the config options allowed here.
+         * @param {Object} config The following config options are supported: 
      
+         * 
    • animEl : String/Element
      An id or Element from which the message box should animate as it
+         * opens and closes (defaults to undefined)
      • 
+         * 
    • buttons : Object/Boolean
      A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
+         * cancel:'Bar'}), or false to not show any buttons (defaults to false)
      • 
+         * 
    • closable : Boolean
      False to hide the top-right close button (defaults to true). Note that
+         * progress and wait dialogs will ignore this property and always hide the close button as they can only
+         * be closed programmatically.
      • 
+         * 
    • cls : String
      A custom CSS class to apply to the message box's container element
      • 
+         * 
    • defaultTextHeight : Number
      The default height in pixels of the message box's multiline textarea
+         * if displayed (defaults to 75)
      • 
+         * 
    • fn : Function
      A callback function which is called when the dialog is dismissed either
+         * by clicking on the configured buttons, or on the dialog close button, or by pressing
+         * the return button to enter input.
+         * 
      Progress and wait dialogs will ignore this option since they do not respond to user
+         * actions and can only be closed programmatically, so any required function should be called
+         * by the same code after it closes the dialog. Parameters passed:
        
+         * 
      • buttonId : String
        The ID of the button pressed, one of:
          
+         * 
        • ok
          • 
+         * 
        • yes
          • 
+         * 
        • no
          • 
+         * 
        • cancel
          • 
+         * 
        • 
+         * 
      • text : String
        Value of the input field if either prompt
+         * or multiline is true
        • 
+         * 
      • opt : Object
        The config object passed to show.
        • 
+         * 
      • 
+         * 
    • scope : Object
      The scope of the callback function
      • 
+         * 
    • icon : String
      A CSS class that provides a background image to be used as the body icon for the
+         * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')
      • 
+         * 
    • iconCls : String
      The standard {@link Ext.Window#iconCls} to
+         * add an optional header icon (defaults to '')
      • 
+         * 
    • maxWidth : Number
      The maximum width in pixels of the message box (defaults to 600)
      • 
+         * 
    • minWidth : Number
      The minimum width in pixels of the message box (defaults to 100)
      • 
+         * 
    • modal : Boolean
      False to allow user interaction with the page while the message box is
+         * displayed (defaults to true)
      • 
+         * 
    • msg : String
      A string that will replace the existing message box body text (defaults to the
+         * XHTML-compliant non-breaking space character '&#160;')
      • 
+         * 
    • multiline : Boolean
      
+         * True to prompt the user to enter multi-line text (defaults to false)
      • 
+         * 
    • progress : Boolean
      True to display a progress bar (defaults to false)
      • 
+         * 
    • progressText : String
      The text to display inside the progress bar if progress = true (defaults to '')
      • 
+         * 
    • prompt : Boolean
      True to prompt the user to enter single-line text (defaults to false)
      • 
+         * 
    • proxyDrag : Boolean
      True to display a lightweight proxy while dragging (defaults to false)
      • 
+         * 
    • title : String
      The title text
      • 
+         * 
    • value : String
      The string value to set into the active textbox element if displayed
      • 
+         * 
    • wait : Boolean
      True to display a progress bar (defaults to false)
      • 
+         * 
    • waitConfig : Object
      A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)
      • 
+         * 
    • width : Number
      The width of the dialog in pixels
      • 
+         * 
    
+         * Example usage:
+         * 
    
+Ext.Msg.show({
+   title: 'Address',
+   msg: 'Please enter your address:',
+   width: 300,
+   buttons: Ext.MessageBox.OKCANCEL,
+   multiline: true,
+   fn: saveAddress,
+   animEl: 'addAddressBtn',
+   icon: Ext.MessageBox.INFO
+});
+
    
+         * @return {Ext.MessageBox} this
+         */
+        show : function(options){
+            if(this.isVisible()){
+                this.hide();
+            }
+            opt = options;
+            var d = this.getDialog(opt.title || " ");
+
+            d.setTitle(opt.title || " ");
+            var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
+            d.tools.close.setDisplayed(allowClose);
+            activeTextEl = textboxEl;
+            opt.prompt = opt.prompt || (opt.multiline ? true : false);
+            if(opt.prompt){
+                if(opt.multiline){
+                    textboxEl.hide();
+                    textareaEl.show();
+                    textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
+                    activeTextEl = textareaEl;
+                }else{
+                    textboxEl.show();
+                    textareaEl.hide();
+                }
+            }else{
+                textboxEl.hide();
+                textareaEl.hide();
+            }
+            activeTextEl.dom.value = opt.value || "";
+            if(opt.prompt){
+                d.focusEl = activeTextEl;
+            }else{
+                var bs = opt.buttons;
+                var db = null;
+                if(bs && bs.ok){
+                    db = buttons["ok"];
+                }else if(bs && bs.yes){
+                    db = buttons["yes"];
+                }
+                if (db){
+                    d.focusEl = db;
+                }
+            }
+            if(opt.iconCls){
+              d.setIconClass(opt.iconCls);
+            }
+            this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
+            bwidth = updateButtons(opt.buttons);
+            progressBar.setVisible(opt.progress === true || opt.wait === true);
+            this.updateProgress(0, opt.progressText);
+            this.updateText(opt.msg);
+            if(opt.cls){
+                d.el.addClass(opt.cls);
+            }
+            d.proxyDrag = opt.proxyDrag === true;
+            d.modal = opt.modal !== false;
+            d.mask = opt.modal !== false ? mask : false;
+            if(!d.isVisible()){
+                // force it to the end of the z-index stack so it gets a cursor in FF
+                document.body.appendChild(dlg.el.dom);
+                d.setAnimateTarget(opt.animEl);
+                //workaround for window internally enabling keymap in afterShow
+                d.on('show', function(){
+                    if(allowClose === true){
+                        d.keyMap.enable();
+                    }else{
+                        d.keyMap.disable();
+                    }
+                }, this, {single:true});
+                d.show(opt.animEl);
+            }
+            if(opt.wait === true){
+                progressBar.wait(opt.waitConfig);
+            }
+            return this;
+        },
+
+        /**
+         * Adds the specified icon to the dialog.  By default, the class 'ext-mb-icon' is applied for default
+         * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
+         * to clear any existing icon. This method must be called before the MessageBox is shown.
+         * The following built-in icon classes are supported, but you can also pass in a custom class name:
+         * 
    +Ext.MessageBox.INFO
+Ext.MessageBox.WARNING
+Ext.MessageBox.QUESTION
+Ext.MessageBox.ERROR
+         *
    
+         * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
+         * @return {Ext.MessageBox} this
+         */
+        setIcon : function(icon){
+            if(!dlg){
+                bufferIcon = icon;
+                return;
+            }
+            bufferIcon = undefined;
+            if(icon && icon != ''){
+                iconEl.removeClass('x-hidden');
+                iconEl.replaceClass(iconCls, icon);
+                bodyEl.addClass('x-dlg-icon');
+                iconCls = icon;
+            }else{
+                iconEl.replaceClass(iconCls, 'x-hidden');
+                bodyEl.removeClass('x-dlg-icon');
+                iconCls = '';
+            }
+            return this;
+        },
+
+        /**
+         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
+         * the user.  You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress}
+         * and closing the message box when the process is complete.
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
+         * @return {Ext.MessageBox} this
+         */
+        progress : function(title, msg, progressText){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: false,
+                progress:true,
+                closable:false,
+                minWidth: this.minProgressWidth,
+                progressText: progressText
+            });
+            return this;
+        },
+
+        /**
+         * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
+         * interaction while waiting for a long-running process to complete that does not have defined intervals.
+         * You are responsible for closing the message box when the process is complete.
+         * @param {String} msg The message box body text
+         * @param {String} title (optional) The title bar text
+         * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
+         * @return {Ext.MessageBox} this
+         */
+        wait : function(msg, title, config){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: false,
+                closable:false,
+                wait:true,
+                modal:true,
+                minWidth: this.minProgressWidth,
+                waitConfig: config
+            });
+            return this;
+        },
+
+        /**
+         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
+         * If a callback function is passed it will be called after the user clicks the button, and the
+         * id of the button that was clicked will be passed as the only parameter to the callback
+         * (could also be the top-right close button).
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
+         * @return {Ext.MessageBox} this
+         */
+        alert : function(title, msg, fn, scope){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.OK,
+                fn: fn,
+                scope : scope,
+                minWidth: this.minWidth
+            });
+            return this;
+        },
+
+        /**
+         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
+         * If a callback function is passed it will be called after the user clicks either button,
+         * and the id of the button that was clicked will be passed as the only parameter to the callback
+         * (could also be the top-right close button).
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
+         * @return {Ext.MessageBox} this
+         */
+        confirm : function(title, msg, fn, scope){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.YESNO,
+                fn: fn,
+                scope : scope,
+                icon: this.QUESTION,
+                minWidth: this.minWidth
+            });
+            return this;
+        },
+
+        /**
+         * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
+         * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user
+         * clicks either button, and the id of the button that was clicked (could also be the top-right
+         * close button) and the text that was entered will be passed as the two parameters to the callback.
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
+         * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
+         * property, or the height in pixels to create the textbox (defaults to false / single-line)
+         * @param {String} value (optional) Default value of the text input element (defaults to '')
+         * @return {Ext.MessageBox} this
+         */
+        prompt : function(title, msg, fn, scope, multiline, value){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.OKCANCEL,
+                fn: fn,
+                minWidth: this.minPromptWidth,
+                scope : scope,
+                prompt:true,
+                multiline: multiline,
+                value: value
+            });
+            return this;
+        },
+
+        /**
+         * Button config that displays a single OK button
+         * @type Object
+         */
+        OK : {ok:true},
+        /**
+         * Button config that displays a single Cancel button
+         * @type Object
+         */
+        CANCEL : {cancel:true},
+        /**
+         * Button config that displays OK and Cancel buttons
+         * @type Object
+         */
+        OKCANCEL : {ok:true, cancel:true},
+        /**
+         * Button config that displays Yes and No buttons
+         * @type Object
+         */
+        YESNO : {yes:true, no:true},
+        /**
+         * Button config that displays Yes, No and Cancel buttons
+         * @type Object
+         */
+        YESNOCANCEL : {yes:true, no:true, cancel:true},
+        /**
+         * The CSS class that provides the INFO icon image
+         * @type String
+         */
+        INFO : 'ext-mb-info',
+        /**
+         * The CSS class that provides the WARNING icon image
+         * @type String
+         */
+        WARNING : 'ext-mb-warning',
+        /**
+         * The CSS class that provides the QUESTION icon image
+         * @type String
+         */
+        QUESTION : 'ext-mb-question',
+        /**
+         * The CSS class that provides the ERROR icon image
+         * @type String
+         */
+        ERROR : 'ext-mb-error',
+
+        /**
+         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+         * @type Number
+         */
+        defaultTextHeight : 75,
+        /**
+         * The maximum width in pixels of the message box (defaults to 600)
+         * @type Number
+         */
+        maxWidth : 600,
+        /**
+         * The minimum width in pixels of the message box (defaults to 100)
+         * @type Number
+         */
+        minWidth : 100,
+        /**
+         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
+         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
+         * @type Number
+         */
+        minProgressWidth : 250,
+        /**
+         * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
+         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
+         * @type Number
+         */
+        minPromptWidth: 250,
+        /**
+         * An object containing the default button text strings that can be overriden for localized language support.
+         * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
+         * resource file for handling language support across the framework.
+         * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
+         * @type Object
+         */
+        buttonText : {
+            ok : "OK",
+            cancel : "Cancel",
+            yes : "Yes",
+            no : "No"
+        }
+    };
+}();
+
+/**
+ * Shorthand for {@link Ext.MessageBox}
+ */
+Ext.Msg = Ext.MessageBox;/**
+ * @class Ext.dd.PanelProxy
+ * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally
+ * for the Panel's drag drop implementation, and should never need to be created directly.
+ * @constructor
+ * @param panel The {@link Ext.Panel} to proxy for
+ * @param config Configuration options
+ */
+Ext.dd.PanelProxy = function(panel, config){
+    this.panel = panel;
+    this.id = this.panel.id +'-ddproxy';
+    Ext.apply(this, config);
+};
+
+Ext.dd.PanelProxy.prototype = {
+    /**
+     * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel,
+     * false to drag with no proxy (defaults to true).
+     */
+    insertProxy : true,
+
+    // private overrides
+    setStatus : Ext.emptyFn,
+    reset : Ext.emptyFn,
+    update : Ext.emptyFn,
+    stop : Ext.emptyFn,
+    sync: Ext.emptyFn,
+
+    /**
+     * Gets the proxy's element
+     * @return {Element} The proxy's element
+     */
+    getEl : function(){
+        return this.ghost;
+    },
+
+    /**
+     * Gets the proxy's ghost element
+     * @return {Element} The proxy's ghost element
+     */
+    getGhost : function(){
+        return this.ghost;
+    },
+
+    /**
+     * Gets the proxy's element
+     * @return {Element} The proxy's element
+     */
+    getProxy : function(){
+        return this.proxy;
+    },
+
+    /**
+     * Hides the proxy
+     */
+    hide : function(){
+        if(this.ghost){
+            if(this.proxy){
+                this.proxy.remove();
+                delete this.proxy;
+            }
+            this.panel.el.dom.style.display = '';
+            this.ghost.remove();
+            delete this.ghost;
+        }
+    },
+
+    /**
+     * Shows the proxy
+     */
+    show : function(){
+        if(!this.ghost){
+            this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody());
+            this.ghost.setXY(this.panel.el.getXY())
+            if(this.insertProxy){
+                this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'});
+                this.proxy.setSize(this.panel.getSize());
+            }
+            this.panel.el.dom.style.display = 'none';
+        }
+    },
+
+    // private
+    repair : function(xy, callback, scope){
+        this.hide();
+        if(typeof callback == "function"){
+            callback.call(scope || this);
+        }
+    },
+
+    /**
+     * Moves the proxy to a different position in the DOM.  This is typically called while dragging the Panel
+     * to keep the proxy sync'd to the Panel's location.
+     * @param {HTMLElement} parentNode The proxy's parent DOM node
+     * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults
+     * to the parent's last child if not specified)
+     */
+    moveProxy : function(parentNode, before){
+        if(this.proxy){
+            parentNode.insertBefore(this.proxy.dom, before);
+        }
+    }
+};
+
+// private - DD implementation for Panels
+Ext.Panel.DD = function(panel, cfg){
+    this.panel = panel;
+    this.dragData = {panel: panel};
+    this.proxy = new Ext.dd.PanelProxy(panel, cfg);
+    Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg);
+    var h = panel.header;
+    if(h){
+        this.setHandleElId(h.id);
+    }
+    (h ? h : this.panel.body).setStyle('cursor', 'move');
+    this.scroll = false;
+};
+
+Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, {
+    showFrame: Ext.emptyFn,
+    startDrag: Ext.emptyFn,
+    b4StartDrag: function(x, y) {
+        this.proxy.show();
+    },
+    b4MouseDown: function(e) {
+        var x = e.getPageX();
+        var y = e.getPageY();
+        this.autoOffset(x, y);
+    },
+    onInitDrag : function(x, y){
+        this.onStartDrag(x, y);
+        return true;
+    },
+    createFrame : Ext.emptyFn,
+    getDragEl : function(e){
+        return this.proxy.ghost.dom;
+    },
+    endDrag : function(e){
+        this.proxy.hide();
+        this.panel.saveState();
+    },
+
+    autoOffset : function(x, y) {
+        x -= this.startPageX;
+        y -= this.startPageY;
+        this.setDelta(x, y);
+    }
 });/**
  * @class Ext.state.Provider
  * Abstract base class for state provider implementations. This class provides methods
@@ -41170,152 +41170,152 @@ Ext.extend(Ext.state.Provider, Ext.util.Observable, {
         return escape(enc);
     }
 });
-/**
- * @class Ext.state.Manager
- * This is the global state manager. By default all components that are "state aware" check this class
- * for state information if you don't pass them a custom state provider. In order for this class
- * to be useful, it must be initialized with a provider when your application initializes. Example usage:
- 
    
-// in your initialization function
-init : function(){
-   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
-   var win = new Window(...);
-   win.restoreState();
-}
- 
    
- * @singleton
- */
-Ext.state.Manager = function(){
-    var provider = new Ext.state.Provider();
-
-    return {
-        /**
-         * Configures the default state provider for your application
-         * @param {Provider} stateProvider The state provider to set
-         */
-        setProvider : function(stateProvider){
-            provider = stateProvider;
-        },
-
-        /**
-         * Returns the current value for a key
-         * @param {String} name The key name
-         * @param {Mixed} defaultValue The default value to return if the key lookup does not match
-         * @return {Mixed} The state data
-         */
-        get : function(key, defaultValue){
-            return provider.get(key, defaultValue);
-        },
-
-        /**
-         * Sets the value for a key
-         * @param {String} name The key name
-         * @param {Mixed} value The state data
-         */
-         set : function(key, value){
-            provider.set(key, value);
-        },
-
-        /**
-         * Clears a value from the state
-         * @param {String} name The key name
-         */
-        clear : function(key){
-            provider.clear(key);
-        },
-
-        /**
-         * Gets the currently configured state provider
-         * @return {Provider} The state provider
-         */
-        getProvider : function(){
-            return provider;
-        }
-    };
-}();
-/**
- * @class Ext.state.CookieProvider
- * @extends Ext.state.Provider
- * The default Provider implementation which saves state via cookies.
- * 
    Usage:
- 
    
-   var cp = new Ext.state.CookieProvider({
-       path: "/cgi-bin/",
-       expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
-       domain: "extjs.com"
-   });
-   Ext.state.Manager.setProvider(cp);
- 
    
- * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
- * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
- * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
- * your page is on, but you can specify a sub-domain, or simply the domain itself like 'extjs.com' to include
- * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
- * domain the page is running on including the 'www' like 'www.extjs.com')
- * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
- * @constructor
- * Create a new CookieProvider
- * @param {Object} config The configuration object
- */
-Ext.state.CookieProvider = function(config){
-    Ext.state.CookieProvider.superclass.constructor.call(this);
-    this.path = "/";
-    this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
-    this.domain = null;
-    this.secure = false;
-    Ext.apply(this, config);
-    this.state = this.readCookies();
-};
-
-Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, {
-    // private
-    set : function(name, value){
-        if(typeof value == "undefined" || value === null){
-            this.clear(name);
-            return;
-        }
-        this.setCookie(name, value);
-        Ext.state.CookieProvider.superclass.set.call(this, name, value);
-    },
-
-    // private
-    clear : function(name){
-        this.clearCookie(name);
-        Ext.state.CookieProvider.superclass.clear.call(this, name);
-    },
-
-    // private
-    readCookies : function(){
-        var cookies = {};
-        var c = document.cookie + ";";
-        var re = /\s?(.*?)=(.*?);/g;
-    	var matches;
-    	while((matches = re.exec(c)) != null){
-            var name = matches[1];
-            var value = matches[2];
-            if(name && name.substring(0,3) == "ys-"){
-                cookies[name.substr(3)] = this.decodeValue(value);
-            }
-        }
-        return cookies;
-    },
-
-    // private
-    setCookie : function(name, value){
-        document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
-           ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
-           ((this.path == null) ? "" : ("; path=" + this.path)) +
-           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
-           ((this.secure == true) ? "; secure" : "");
-    },
-
-    // private
-    clearCookie : function(name){
-        document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
-           ((this.path == null) ? "" : ("; path=" + this.path)) +
-           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
-           ((this.secure == true) ? "; secure" : "");
-    }
+/**
+ * @class Ext.state.Manager
+ * This is the global state manager. By default all components that are "state aware" check this class
+ * for state information if you don't pass them a custom state provider. In order for this class
+ * to be useful, it must be initialized with a provider when your application initializes. Example usage:
+ 
    
+// in your initialization function
+init : function(){
+   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+   var win = new Window(...);
+   win.restoreState();
+}
+ 
    
+ * @singleton
+ */
+Ext.state.Manager = function(){
+    var provider = new Ext.state.Provider();
+
+    return {
+        /**
+         * Configures the default state provider for your application
+         * @param {Provider} stateProvider The state provider to set
+         */
+        setProvider : function(stateProvider){
+            provider = stateProvider;
+        },
+
+        /**
+         * Returns the current value for a key
+         * @param {String} name The key name
+         * @param {Mixed} defaultValue The default value to return if the key lookup does not match
+         * @return {Mixed} The state data
+         */
+        get : function(key, defaultValue){
+            return provider.get(key, defaultValue);
+        },
+
+        /**
+         * Sets the value for a key
+         * @param {String} name The key name
+         * @param {Mixed} value The state data
+         */
+         set : function(key, value){
+            provider.set(key, value);
+        },
+
+        /**
+         * Clears a value from the state
+         * @param {String} name The key name
+         */
+        clear : function(key){
+            provider.clear(key);
+        },
+
+        /**
+         * Gets the currently configured state provider
+         * @return {Provider} The state provider
+         */
+        getProvider : function(){
+            return provider;
+        }
+    };
+}();
+/**
+ * @class Ext.state.CookieProvider
+ * @extends Ext.state.Provider
+ * The default Provider implementation which saves state via cookies.
+ * 
    Usage:
+ 
    
+   var cp = new Ext.state.CookieProvider({
+       path: "/cgi-bin/",
+       expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
+       domain: "extjs.com"
+   });
+   Ext.state.Manager.setProvider(cp);
+ 
    
+ * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
+ * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
+ * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
+ * your page is on, but you can specify a sub-domain, or simply the domain itself like 'extjs.com' to include
+ * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
+ * domain the page is running on including the 'www' like 'www.extjs.com')
+ * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
+ * @constructor
+ * Create a new CookieProvider
+ * @param {Object} config The configuration object
+ */
+Ext.state.CookieProvider = function(config){
+    Ext.state.CookieProvider.superclass.constructor.call(this);
+    this.path = "/";
+    this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
+    this.domain = null;
+    this.secure = false;
+    Ext.apply(this, config);
+    this.state = this.readCookies();
+};
+
+Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, {
+    // private
+    set : function(name, value){
+        if(typeof value == "undefined" || value === null){
+            this.clear(name);
+            return;
+        }
+        this.setCookie(name, value);
+        Ext.state.CookieProvider.superclass.set.call(this, name, value);
+    },
+
+    // private
+    clear : function(name){
+        this.clearCookie(name);
+        Ext.state.CookieProvider.superclass.clear.call(this, name);
+    },
+
+    // private
+    readCookies : function(){
+        var cookies = {};
+        var c = document.cookie + ";";
+        var re = /\s?(.*?)=(.*?);/g;
+    	var matches;
+    	while((matches = re.exec(c)) != null){
+            var name = matches[1];
+            var value = matches[2];
+            if(name && name.substring(0,3) == "ys-"){
+                cookies[name.substr(3)] = this.decodeValue(value);
+            }
+        }
+        return cookies;
+    },
+
+    // private
+    setCookie : function(name, value){
+        document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
+           ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
+           ((this.path == null) ? "" : ("; path=" + this.path)) +
+           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
+           ((this.secure == true) ? "; secure" : "");
+    },
+
+    // private
+    clearCookie : function(name){
+        document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
+           ((this.path == null) ? "" : ("; path=" + this.path)) +
+           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
+           ((this.secure == true) ? "; secure" : "");
+    }
 });/**
  * @class Ext.DataView
  * @extends Ext.BoxComponent
@@ -42067,376 +42067,376 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, {
 Ext.DataView.prototype.setStore = Ext.DataView.prototype.bindStore;
 
 Ext.reg('dataview', Ext.DataView);
-/**
- * @class Ext.list.ListView
- * @extends Ext.DataView
- * 
    Ext.list.ListView is a fast and light-weight implentation of a
- * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:
    
- * 
      
- * 
    • resizable columns
      • 
- * 
    • selectable
      • 
- * 
    • column widths are initially proportioned by percentage based on the container
- * width and number of columns
      • 
- * 
    • uses templates to render the data in any required format
      • 
- * 
    • no horizontal scrolling
      • 
- * 
    • no editing
      • 
- * 
    
- * 
    Example usage:
    
- * 
    
-// consume JSON of this form:
-{
-   "images":[
-      {
-         "name":"dance_fever.jpg",
-         "size":2067,
-         "lastmod":1236974993000,
-         "url":"images\/thumbs\/dance_fever.jpg"
-      },
-      {
-         "name":"zack_sink.jpg",
-         "size":2303,
-         "lastmod":1236974993000,
-         "url":"images\/thumbs\/zack_sink.jpg"
-      }
-   ]
-} 
-var store = new Ext.data.JsonStore({
-    url: 'get-images.php',
-    root: 'images',
-    fields: [
-        'name', 'url',
-        {name:'size', type: 'float'},
-        {name:'lastmod', type:'date', dateFormat:'timestamp'}
-    ]
-});
-store.load();
-
-var listView = new Ext.list.ListView({
-    store: store,
-    multiSelect: true,
-    emptyText: 'No images to display',
-    reserveScrollOffset: true,
-    columns: [{
-        header: 'File',
-        width: .5,
-        dataIndex: 'name'
-    },{
-        header: 'Last Modified',
-        width: .35, 
-        dataIndex: 'lastmod',
-        tpl: '{lastmod:date("m-d h:i a")}'
-    },{
-        header: 'Size',
-        dataIndex: 'size',
-        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
-        align: 'right'
-    }]
-});
-
-// put it in a Panel so it looks pretty
-var panel = new Ext.Panel({
-    id:'images-view',
-    width:425,
-    height:250,
-    collapsible:true,
-    layout:'fit',
-    title:'Simple ListView (0 items selected)',
-    items: listView
-});
-panel.render(document.body);
-
-// little bit of feedback
-listView.on('selectionchange', function(view, nodes){
-    var l = nodes.length;
-    var s = l != 1 ? 's' : '';
-    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
-});
- * 
    
- * @constructor
- * @param {Object} config
- * @xtype listview
- */
-Ext.list.ListView = Ext.extend(Ext.DataView, {
-    /**
-     * Set this property to true to disable the header click handler disabling sort
-     * (defaults to false).
-     * @type Boolean
-     * @property disableHeaders
-     */
-    /**
-     * @cfg {Boolean} hideHeaders
-     * true to hide the {@link #internalTpl header row} (defaults to false so
-     * the {@link #internalTpl header row} will be shown).
-     */
-    /**
-     * @cfg {String} itemSelector
-     * Defaults to 'dl' to work with the preconfigured {@link Ext.DataView#tpl tpl}.
-     * This setting specifies the CSS selector (e.g. div.some-class or span:first-child)
-     * that will be used to determine what nodes the ListView will be working with.   
-     */
-    itemSelector: 'dl',
-    /**
-     * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
-     * 'x-list-selected'). An example overriding the default styling:
-    
    
-    .x-list-selected {background-color: yellow;}
-    
    
-     * @type String
-     */
-    selectedClass:'x-list-selected',
-    /**
-     * @cfg {String} overClass The CSS class applied when over a row (defaults to
-     * 'x-list-over'). An example overriding the default styling:
-    
    
-    .x-list-over {background-color: orange;}
-    
    
-     * @type String
-     */
-    overClass:'x-list-over',
-    /**
-     * @cfg {Boolean} reserveScrollOffset
-     * By default will defer accounting for the configured {@link #scrollOffset}
-     * for 10 milliseconds.  Specify true to account for the configured
-     * {@link #scrollOffset} immediately.
-     */
-    /**
-     * @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to
-     * undefined). If an explicit value isn't specified, this will be automatically
-     * calculated.
-     */
-    scrollOffset : undefined,
-    /**
-     * @cfg {Boolean/Object} columnResize
-     * Specify true or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}
-     * to enable the columns to be resizable (defaults to true).
-     */
-    columnResize: true,
-    /**
-     * @cfg {Array} columns An array of column configuration objects, for example:
-     * 
    
-{
-    align: 'right',
-    dataIndex: 'size',
-    header: 'Size',
-    tpl: '{size:fileSize}',
-    width: .35
-}
-     * 
     
-     * Acceptable properties for each column configuration object are:
-     * 
      
-     * 
    • align : String
      Set the CSS text-align property
-     * of the column. Defaults to 'left'.
      • 
-     * 
    • dataIndex : String
      See {@link Ext.grid.Column}.
-     * {@link Ext.grid.Column#dataIndex dataIndex} for details.
      • 
-     * 
    • header : String
      See {@link Ext.grid.Column}.
-     * {@link Ext.grid.Column#header header} for details.
      • 
-     * 
    • tpl : String
      Specify a string to pass as the
-     * configuration string for {@link Ext.XTemplate}.  By default an {@link Ext.XTemplate}
-     * will be implicitly created using the dataIndex.
      • 
-     * 
    • width : Number
      Percentage of the container width
-     * this column should be allocated.  Columns that have no width specified will be
-     * allocated with an equal percentage to fill 100% of the container width.  To easily take
-     * advantage of the full container width, leave the width of at least one column undefined.
-     * Note that if you do not want to take up the full width of the container, the width of
-     * every column needs to be explicitly defined.
      • 
-     * 
    
-     */
-    /**
-     * @cfg {Boolean/Object} columnSort
-     * Specify true or specify a configuration object for {@link Ext.list.ListView.Sorter}
-     * to enable the columns to be sortable (defaults to true).
-     */
-    columnSort: true,
-    /**
-     * @cfg {String/Array} internalTpl
-     * The template to be used for the header row.  See {@link #tpl} for more details.
-     */
-
-    /*
-     * IE has issues when setting percentage based widths to 100%. Default to 99.
-     */
-    maxWidth: Ext.isIE ? 99 : 100,
-    
-    initComponent : function(){
-        if(this.columnResize){
-            this.colResizer = new Ext.list.ColumnResizer(this.colResizer);
-            this.colResizer.init(this);
-        }
-        if(this.columnSort){
-            this.colSorter = new Ext.list.Sorter(this.columnSort);
-            this.colSorter.init(this);
-        }
-        if(!this.internalTpl){
-            this.internalTpl = new Ext.XTemplate(
-                '
    ',
-                    '',
-                    '
    ',
-                        '{header}',
-                    '
    ',
-                    '    ',
-                    '
    ',
-                '
    ',
-                '
    ',
-                '
    '
-            );
-        }
-        if(!this.tpl){
-            this.tpl = new Ext.XTemplate(
-                '',
-                    '
    ',
-                        '',
-                        '
    ',
-                        ' class="{cls}">',
-                            '{[values.tpl.apply(parent)]}',
-                        '
    ',
-                        '    ',
-                        '
    ',
-                    '
    ',
-                '    '
-            );
-        };
-        
-        var cs = this.columns, 
-            allocatedWidth = 0, 
-            colsWithWidth = 0, 
-            len = cs.length, 
-            columns = [];
-            
-        for(var i = 0; i < len; i++){
-            var c = cs[i];
-            if(!c.isColumn) {
-                c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';
-                c = Ext.create(c);
-            }
-            if(c.width) {
-                allocatedWidth += c.width*100;
-                colsWithWidth++;
-            }
-            columns.push(c);
-        }
-        
-        cs = this.columns = columns;
-        
-        // auto calculate missing column widths
-        if(colsWithWidth < len){
-            var remaining = len - colsWithWidth;
-            if(allocatedWidth < this.maxWidth){
-                var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;
-                for(var j = 0; j < len; j++){
-                    var c = cs[j];
-                    if(!c.width){
-                        c.width = perCol;
-                    }
-                }
-            }
-        }
-        Ext.list.ListView.superclass.initComponent.call(this);
-    },
-
-    onRender : function(){
-        this.autoEl = {
-            cls: 'x-list-wrap'  
-        };
-        Ext.list.ListView.superclass.onRender.apply(this, arguments);
-
-        this.internalTpl.overwrite(this.el, {columns: this.columns});
-        
-        this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild);
-        this.innerHd = Ext.get(this.el.dom.firstChild.firstChild);
-
-        if(this.hideHeaders){
-            this.el.dom.firstChild.style.display = 'none';
-        }
-    },
-
-    getTemplateTarget : function(){
-        return this.innerBody;
-    },
-
-    /**
-     * 
    Function which can be overridden which returns the data object passed to this
-     * view's {@link #tpl template} to render the whole ListView. The returned object 
-     * shall contain the following properties:
    
-     * 
      
-     * 
    • columns : String
      See {@link #columns}
      • 
-     * 
    • rows : String
      See
-     * {@link Ext.DataView}.{@link Ext.DataView#collectData collectData}
      • 
-     * 
    
-     * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
-     * @param {Number} startIndex the index number of the Record being prepared for rendering.
-     * @return {Object} A data object containing properties to be processed by a repeating
-     * XTemplate as described above.
-     */
-    collectData : function(){
-        var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);
-        return {
-            columns: this.columns,
-            rows: rs
-        }
-    },
-
-    verifyInternalSize : function(){
-        if(this.lastSize){
-            this.onResize(this.lastSize.width, this.lastSize.height);
-        }
-    },
-
-    // private
-    onResize : function(w, h){
-        var bd = this.innerBody.dom;
-        var hd = this.innerHd.dom
-        if(!bd){
-            return;
-        }
-        var bdp = bd.parentNode;
-        if(Ext.isNumber(w)){
-            var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
-            if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
-                bd.style.width = sw + 'px';
-                hd.style.width = sw + 'px';
-            }else{
-                bd.style.width = w + 'px';
-                hd.style.width = w + 'px';
-                setTimeout(function(){
-                    if((bdp.offsetWidth - bdp.clientWidth) > 10){
-                        bd.style.width = sw + 'px';
-                        hd.style.width = sw + 'px';
-                    }
-                }, 10);
-            }
-        }
-        if(Ext.isNumber(h)){
-            bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
-        }
-    },
-
-    updateIndexes : function(){
-        Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);
-        this.verifyInternalSize();
-    },
-
-    findHeaderIndex : function(hd){
-        hd = hd.dom || hd;
-        var pn = hd.parentNode, cs = pn.parentNode.childNodes;
-        for(var i = 0, c; c = cs[i]; i++){
-            if(c == pn){
-                return i;
-            }
-        }
-        return -1;
-    },
-
-    setHdWidths : function(){
-        var els = this.innerHd.dom.getElementsByTagName('div');
-        for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
-            els[i].style.width = (cs[i].width*100) + '%';
-        }
-    }
-});
-
-Ext.reg('listview', Ext.list.ListView);
-
-// Backwards compatibility alias
+/**
+ * @class Ext.list.ListView
+ * @extends Ext.DataView
+ * 
    Ext.list.ListView is a fast and light-weight implentation of a
+ * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:
    
+ * 
      
+ * 
    • resizable columns
      • 
+ * 
    • selectable
      • 
+ * 
    • column widths are initially proportioned by percentage based on the container
+ * width and number of columns
      • 
+ * 
    • uses templates to render the data in any required format
      • 
+ * 
    • no horizontal scrolling
      • 
+ * 
    • no editing
      • 
+ * 
    
+ * 
    Example usage:
    
+ * 
    
+// consume JSON of this form:
+{
+   "images":[
+      {
+         "name":"dance_fever.jpg",
+         "size":2067,
+         "lastmod":1236974993000,
+         "url":"images\/thumbs\/dance_fever.jpg"
+      },
+      {
+         "name":"zack_sink.jpg",
+         "size":2303,
+         "lastmod":1236974993000,
+         "url":"images\/thumbs\/zack_sink.jpg"
+      }
+   ]
+} 
+var store = new Ext.data.JsonStore({
+    url: 'get-images.php',
+    root: 'images',
+    fields: [
+        'name', 'url',
+        {name:'size', type: 'float'},
+        {name:'lastmod', type:'date', dateFormat:'timestamp'}
+    ]
+});
+store.load();
+
+var listView = new Ext.list.ListView({
+    store: store,
+    multiSelect: true,
+    emptyText: 'No images to display',
+    reserveScrollOffset: true,
+    columns: [{
+        header: 'File',
+        width: .5,
+        dataIndex: 'name'
+    },{
+        header: 'Last Modified',
+        width: .35, 
+        dataIndex: 'lastmod',
+        tpl: '{lastmod:date("m-d h:i a")}'
+    },{
+        header: 'Size',
+        dataIndex: 'size',
+        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
+        align: 'right'
+    }]
+});
+
+// put it in a Panel so it looks pretty
+var panel = new Ext.Panel({
+    id:'images-view',
+    width:425,
+    height:250,
+    collapsible:true,
+    layout:'fit',
+    title:'Simple ListView (0 items selected)',
+    items: listView
+});
+panel.render(document.body);
+
+// little bit of feedback
+listView.on('selectionchange', function(view, nodes){
+    var l = nodes.length;
+    var s = l != 1 ? 's' : '';
+    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
+});
+ * 
    
+ * @constructor
+ * @param {Object} config
+ * @xtype listview
+ */
+Ext.list.ListView = Ext.extend(Ext.DataView, {
+    /**
+     * Set this property to true to disable the header click handler disabling sort
+     * (defaults to false).
+     * @type Boolean
+     * @property disableHeaders
+     */
+    /**
+     * @cfg {Boolean} hideHeaders
+     * true to hide the {@link #internalTpl header row} (defaults to false so
+     * the {@link #internalTpl header row} will be shown).
+     */
+    /**
+     * @cfg {String} itemSelector
+     * Defaults to 'dl' to work with the preconfigured {@link Ext.DataView#tpl tpl}.
+     * This setting specifies the CSS selector (e.g. div.some-class or span:first-child)
+     * that will be used to determine what nodes the ListView will be working with.   
+     */
+    itemSelector: 'dl',
+    /**
+     * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
+     * 'x-list-selected'). An example overriding the default styling:
+    
    
+    .x-list-selected {background-color: yellow;}
+    
    
+     * @type String
+     */
+    selectedClass:'x-list-selected',
+    /**
+     * @cfg {String} overClass The CSS class applied when over a row (defaults to
+     * 'x-list-over'). An example overriding the default styling:
+    
    
+    .x-list-over {background-color: orange;}
+    
    
+     * @type String
+     */
+    overClass:'x-list-over',
+    /**
+     * @cfg {Boolean} reserveScrollOffset
+     * By default will defer accounting for the configured {@link #scrollOffset}
+     * for 10 milliseconds.  Specify true to account for the configured
+     * {@link #scrollOffset} immediately.
+     */
+    /**
+     * @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to
+     * undefined). If an explicit value isn't specified, this will be automatically
+     * calculated.
+     */
+    scrollOffset : undefined,
+    /**
+     * @cfg {Boolean/Object} columnResize
+     * Specify true or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}
+     * to enable the columns to be resizable (defaults to true).
+     */
+    columnResize: true,
+    /**
+     * @cfg {Array} columns An array of column configuration objects, for example:
+     * 
    
+{
+    align: 'right',
+    dataIndex: 'size',
+    header: 'Size',
+    tpl: '{size:fileSize}',
+    width: .35
+}
+     * 
     
+     * Acceptable properties for each column configuration object are:
+     * 
      
+     * 
    • align : String
      Set the CSS text-align property
+     * of the column. Defaults to 'left'.
      • 
+     * 
    • dataIndex : String
      See {@link Ext.grid.Column}.
+     * {@link Ext.grid.Column#dataIndex dataIndex} for details.
      • 
+     * 
    • header : String
      See {@link Ext.grid.Column}.
+     * {@link Ext.grid.Column#header header} for details.
      • 
+     * 
    • tpl : String
      Specify a string to pass as the
+     * configuration string for {@link Ext.XTemplate}.  By default an {@link Ext.XTemplate}
+     * will be implicitly created using the dataIndex.
      • 
+     * 
    • width : Number
      Percentage of the container width
+     * this column should be allocated.  Columns that have no width specified will be
+     * allocated with an equal percentage to fill 100% of the container width.  To easily take
+     * advantage of the full container width, leave the width of at least one column undefined.
+     * Note that if you do not want to take up the full width of the container, the width of
+     * every column needs to be explicitly defined.
      • 
+     * 
    
+     */
+    /**
+     * @cfg {Boolean/Object} columnSort
+     * Specify true or specify a configuration object for {@link Ext.list.ListView.Sorter}
+     * to enable the columns to be sortable (defaults to true).
+     */
+    columnSort: true,
+    /**
+     * @cfg {String/Array} internalTpl
+     * The template to be used for the header row.  See {@link #tpl} for more details.
+     */
+
+    /*
+     * IE has issues when setting percentage based widths to 100%. Default to 99.
+     */
+    maxWidth: Ext.isIE ? 99 : 100,
+    
+    initComponent : function(){
+        if(this.columnResize){
+            this.colResizer = new Ext.list.ColumnResizer(this.colResizer);
+            this.colResizer.init(this);
+        }
+        if(this.columnSort){
+            this.colSorter = new Ext.list.Sorter(this.columnSort);
+            this.colSorter.init(this);
+        }
+        if(!this.internalTpl){
+            this.internalTpl = new Ext.XTemplate(
+                '
    ',
+                    '',
+                    '
    ',
+                        '{header}',
+                    '
    ',
+                    '    ',
+                    '
    ',
+                '
    ',
+                '
    ',
+                '
    '
+            );
+        }
+        if(!this.tpl){
+            this.tpl = new Ext.XTemplate(
+                '',
+                    '
    ',
+                        '',
+                        '
    ',
+                        ' class="{cls}">',
+                            '{[values.tpl.apply(parent)]}',
+                        '
    ',
+                        '    ',
+                        '
    ',
+                    '
    ',
+                '    '
+            );
+        };
+        
+        var cs = this.columns, 
+            allocatedWidth = 0, 
+            colsWithWidth = 0, 
+            len = cs.length, 
+            columns = [];
+            
+        for(var i = 0; i < len; i++){
+            var c = cs[i];
+            if(!c.isColumn) {
+                c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';
+                c = Ext.create(c);
+            }
+            if(c.width) {
+                allocatedWidth += c.width*100;
+                colsWithWidth++;
+            }
+            columns.push(c);
+        }
+        
+        cs = this.columns = columns;
+        
+        // auto calculate missing column widths
+        if(colsWithWidth < len){
+            var remaining = len - colsWithWidth;
+            if(allocatedWidth < this.maxWidth){
+                var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;
+                for(var j = 0; j < len; j++){
+                    var c = cs[j];
+                    if(!c.width){
+                        c.width = perCol;
+                    }
+                }
+            }
+        }
+        Ext.list.ListView.superclass.initComponent.call(this);
+    },
+
+    onRender : function(){
+        this.autoEl = {
+            cls: 'x-list-wrap'  
+        };
+        Ext.list.ListView.superclass.onRender.apply(this, arguments);
+
+        this.internalTpl.overwrite(this.el, {columns: this.columns});
+        
+        this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild);
+        this.innerHd = Ext.get(this.el.dom.firstChild.firstChild);
+
+        if(this.hideHeaders){
+            this.el.dom.firstChild.style.display = 'none';
+        }
+    },
+
+    getTemplateTarget : function(){
+        return this.innerBody;
+    },
+
+    /**
+     * 
    Function which can be overridden which returns the data object passed to this
+     * view's {@link #tpl template} to render the whole ListView. The returned object 
+     * shall contain the following properties:
    
+     * 
      
+     * 
    • columns : String
      See {@link #columns}
      • 
+     * 
    • rows : String
      See
+     * {@link Ext.DataView}.{@link Ext.DataView#collectData collectData}
      • 
+     * 
    
+     * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
+     * @param {Number} startIndex the index number of the Record being prepared for rendering.
+     * @return {Object} A data object containing properties to be processed by a repeating
+     * XTemplate as described above.
+     */
+    collectData : function(){
+        var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);
+        return {
+            columns: this.columns,
+            rows: rs
+        }
+    },
+
+    verifyInternalSize : function(){
+        if(this.lastSize){
+            this.onResize(this.lastSize.width, this.lastSize.height);
+        }
+    },
+
+    // private
+    onResize : function(w, h){
+        var bd = this.innerBody.dom;
+        var hd = this.innerHd.dom
+        if(!bd){
+            return;
+        }
+        var bdp = bd.parentNode;
+        if(Ext.isNumber(w)){
+            var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
+            if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
+                bd.style.width = sw + 'px';
+                hd.style.width = sw + 'px';
+            }else{
+                bd.style.width = w + 'px';
+                hd.style.width = w + 'px';
+                setTimeout(function(){
+                    if((bdp.offsetWidth - bdp.clientWidth) > 10){
+                        bd.style.width = sw + 'px';
+                        hd.style.width = sw + 'px';
+                    }
+                }, 10);
+            }
+        }
+        if(Ext.isNumber(h)){
+            bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
+        }
+    },
+
+    updateIndexes : function(){
+        Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);
+        this.verifyInternalSize();
+    },
+
+    findHeaderIndex : function(hd){
+        hd = hd.dom || hd;
+        var pn = hd.parentNode, cs = pn.parentNode.childNodes;
+        for(var i = 0, c; c = cs[i]; i++){
+            if(c == pn){
+                return i;
+            }
+        }
+        return -1;
+    },
+
+    setHdWidths : function(){
+        var els = this.innerHd.dom.getElementsByTagName('div');
+        for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
+            els[i].style.width = (cs[i].width*100) + '%';
+        }
+    }
+});
+
+Ext.reg('listview', Ext.list.ListView);
+
+// Backwards compatibility alias
 Ext.ListView = Ext.list.ListView;/**
  * @class Ext.list.Column
  * 
    This class encapsulates column configuration data to be used in the initialization of a
@@ -42588,194 +42588,194 @@ Ext.list.BooleanColumn = Ext.extend(Ext.list.Column, {
     }
 });
 
-Ext.reg('lvbooleancolumn', Ext.list.BooleanColumn);/**
- * @class Ext.list.ColumnResizer
- * @extends Ext.util.Observable
- * 
    Supporting Class for Ext.list.ListView
    
- * @constructor
- * @param {Object} config
- */
-Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
-    /**
-     * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to .05)
-     */
-    minPct: .05,
-
-    constructor: function(config){
-        Ext.apply(this, config);
-        Ext.list.ColumnResizer.superclass.constructor.call(this);
-    },
-    init : function(listView){
-        this.view = listView;
-        listView.on('render', this.initEvents, this);
-    },
-
-    initEvents : function(view){
-        view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
-        this.tracker = new Ext.dd.DragTracker({
-            onBeforeStart: this.onBeforeStart.createDelegate(this),
-            onStart: this.onStart.createDelegate(this),
-            onDrag: this.onDrag.createDelegate(this),
-            onEnd: this.onEnd.createDelegate(this),
-            tolerance: 3,
-            autoStart: 300
-        });
-        this.tracker.initEl(view.innerHd);
-        view.on('beforedestroy', this.tracker.destroy, this.tracker);
-    },
-
-    handleHdMove : function(e, t){
-        var hw = 5,
-            x = e.getPageX(),
-            hd = e.getTarget('em', 3, true);
-        if(hd){
-            var r = hd.getRegion(),
-                ss = hd.dom.style,
-                pn = hd.dom.parentNode;
-
-            if(x - r.left <= hw && pn != pn.parentNode.firstChild){
-                this.activeHd = Ext.get(pn.previousSibling.firstChild);
-                ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
-            } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
-                this.activeHd = hd;
-                ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
-            } else{
-                delete this.activeHd;
-                ss.cursor = '';
-            }
-        }
-    },
-
-    onBeforeStart : function(e){
-        this.dragHd = this.activeHd;
-        return !!this.dragHd;
-    },
-
-    onStart: function(e){
-        this.view.disableHeaders = true;
-        this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
-        this.proxy.setHeight(this.view.el.getHeight());
-
-        var x = this.tracker.getXY()[0],
-            w = this.view.innerHd.getWidth();
-
-        this.hdX = this.dragHd.getX();
-        this.hdIndex = this.view.findHeaderIndex(this.dragHd);
-
-        this.proxy.setX(this.hdX);
-        this.proxy.setWidth(x-this.hdX);
-
-        this.minWidth = w*this.minPct;
-        this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
-    },
-
-    onDrag: function(e){
-        var cursorX = this.tracker.getXY()[0];
-        this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
-    },
-
-    onEnd: function(e){
-        /* calculate desired width by measuring proxy and then remove it */
-        var nw = this.proxy.getWidth();
-        this.proxy.remove();
-
-        var index = this.hdIndex,
-            vw = this.view,
-            cs = vw.columns,
-            len = cs.length,
-            w = this.view.innerHd.getWidth(),
-            minPct = this.minPct * 100,
-            pct = Math.ceil((nw * vw.maxWidth) / w),
-            diff = (cs[index].width * 100) - pct,
-            each = Math.floor(diff / (len-1-index)),
-            mod = diff - (each * (len-1-index));
-
-        for(var i = index+1; i < len; i++){
-            var cw = (cs[i].width * 100) + each,
-                ncw = Math.max(minPct, cw);
-            if(cw != ncw){
-                mod += cw - ncw;
-            }
-            cs[i].width = ncw / 100;
-        }
-        cs[index].width = pct / 100;
-        cs[index+1].width += (mod / 100);
-        delete this.dragHd;
-        vw.setHdWidths();
-        vw.refresh();
-        setTimeout(function(){
-            vw.disableHeaders = false;
-        }, 100);
-    }
-});
-
-// Backwards compatibility alias
-Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;/**
- * @class Ext.list.Sorter
- * @extends Ext.util.Observable
- * 
    Supporting Class for Ext.list.ListView
    
- * @constructor
- * @param {Object} config
- */
-Ext.list.Sorter = Ext.extend(Ext.util.Observable, {
-    /**
-     * @cfg {Array} sortClasses
-     * The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"])
-     */
-    sortClasses : ["sort-asc", "sort-desc"],
-
-    constructor: function(config){
-        Ext.apply(this, config);
-        Ext.list.Sorter.superclass.constructor.call(this);
-    },
-
-    init : function(listView){
-        this.view = listView;
-        listView.on('render', this.initEvents, this);
-    },
-
-    initEvents : function(view){
-        view.mon(view.innerHd, 'click', this.onHdClick, this);
-        view.innerHd.setStyle('cursor', 'pointer');
-        view.mon(view.store, 'datachanged', this.updateSortState, this);
-        this.updateSortState.defer(10, this, [view.store]);
-    },
-
-    updateSortState : function(store){
-        var state = store.getSortState();
-        if(!state){
-            return;
-        }
-        this.sortState = state;
-        var cs = this.view.columns, sortColumn = -1;
-        for(var i = 0, len = cs.length; i < len; i++){
-            if(cs[i].dataIndex == state.field){
-                sortColumn = i;
-                break;
-            }
-        }
-        if(sortColumn != -1){
-            var sortDir = state.direction;
-            this.updateSortIcon(sortColumn, sortDir);
-        }
-    },
-
-    updateSortIcon : function(col, dir){
-        var sc = this.sortClasses;
-        var hds = this.view.innerHd.select('em').removeClass(sc);
-        hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
-    },
-
-    onHdClick : function(e){
-        var hd = e.getTarget('em', 3);
-        if(hd && !this.view.disableHeaders){
-            var index = this.view.findHeaderIndex(hd);
-            this.view.store.sort(this.view.columns[index].dataIndex);
-        }
-    }
-});
-
-// Backwards compatibility alias
+Ext.reg('lvbooleancolumn', Ext.list.BooleanColumn);/**
+ * @class Ext.list.ColumnResizer
+ * @extends Ext.util.Observable
+ * 
    Supporting Class for Ext.list.ListView
    
+ * @constructor
+ * @param {Object} config
+ */
+Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
+    /**
+     * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to .05)
+     */
+    minPct: .05,
+
+    constructor: function(config){
+        Ext.apply(this, config);
+        Ext.list.ColumnResizer.superclass.constructor.call(this);
+    },
+    init : function(listView){
+        this.view = listView;
+        listView.on('render', this.initEvents, this);
+    },
+
+    initEvents : function(view){
+        view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
+        this.tracker = new Ext.dd.DragTracker({
+            onBeforeStart: this.onBeforeStart.createDelegate(this),
+            onStart: this.onStart.createDelegate(this),
+            onDrag: this.onDrag.createDelegate(this),
+            onEnd: this.onEnd.createDelegate(this),
+            tolerance: 3,
+            autoStart: 300
+        });
+        this.tracker.initEl(view.innerHd);
+        view.on('beforedestroy', this.tracker.destroy, this.tracker);
+    },
+
+    handleHdMove : function(e, t){
+        var hw = 5,
+            x = e.getPageX(),
+            hd = e.getTarget('em', 3, true);
+        if(hd){
+            var r = hd.getRegion(),
+                ss = hd.dom.style,
+                pn = hd.dom.parentNode;
+
+            if(x - r.left <= hw && pn != pn.parentNode.firstChild){
+                this.activeHd = Ext.get(pn.previousSibling.firstChild);
+                ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
+            } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
+                this.activeHd = hd;
+                ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
+            } else{
+                delete this.activeHd;
+                ss.cursor = '';
+            }
+        }
+    },
+
+    onBeforeStart : function(e){
+        this.dragHd = this.activeHd;
+        return !!this.dragHd;
+    },
+
+    onStart: function(e){
+        this.view.disableHeaders = true;
+        this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
+        this.proxy.setHeight(this.view.el.getHeight());
+
+        var x = this.tracker.getXY()[0],
+            w = this.view.innerHd.getWidth();
+
+        this.hdX = this.dragHd.getX();
+        this.hdIndex = this.view.findHeaderIndex(this.dragHd);
+
+        this.proxy.setX(this.hdX);
+        this.proxy.setWidth(x-this.hdX);
+
+        this.minWidth = w*this.minPct;
+        this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
+    },
+
+    onDrag: function(e){
+        var cursorX = this.tracker.getXY()[0];
+        this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
+    },
+
+    onEnd: function(e){
+        /* calculate desired width by measuring proxy and then remove it */
+        var nw = this.proxy.getWidth();
+        this.proxy.remove();
+
+        var index = this.hdIndex,
+            vw = this.view,
+            cs = vw.columns,
+            len = cs.length,
+            w = this.view.innerHd.getWidth(),
+            minPct = this.minPct * 100,
+            pct = Math.ceil((nw * vw.maxWidth) / w),
+            diff = (cs[index].width * 100) - pct,
+            each = Math.floor(diff / (len-1-index)),
+            mod = diff - (each * (len-1-index));
+
+        for(var i = index+1; i < len; i++){
+            var cw = (cs[i].width * 100) + each,
+                ncw = Math.max(minPct, cw);
+            if(cw != ncw){
+                mod += cw - ncw;
+            }
+            cs[i].width = ncw / 100;
+        }
+        cs[index].width = pct / 100;
+        cs[index+1].width += (mod / 100);
+        delete this.dragHd;
+        vw.setHdWidths();
+        vw.refresh();
+        setTimeout(function(){
+            vw.disableHeaders = false;
+        }, 100);
+    }
+});
+
+// Backwards compatibility alias
+Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;/**
+ * @class Ext.list.Sorter
+ * @extends Ext.util.Observable
+ * 
    Supporting Class for Ext.list.ListView
    
+ * @constructor
+ * @param {Object} config
+ */
+Ext.list.Sorter = Ext.extend(Ext.util.Observable, {
+    /**
+     * @cfg {Array} sortClasses
+     * The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"])
+     */
+    sortClasses : ["sort-asc", "sort-desc"],
+
+    constructor: function(config){
+        Ext.apply(this, config);
+        Ext.list.Sorter.superclass.constructor.call(this);
+    },
+
+    init : function(listView){
+        this.view = listView;
+        listView.on('render', this.initEvents, this);
+    },
+
+    initEvents : function(view){
+        view.mon(view.innerHd, 'click', this.onHdClick, this);
+        view.innerHd.setStyle('cursor', 'pointer');
+        view.mon(view.store, 'datachanged', this.updateSortState, this);
+        this.updateSortState.defer(10, this, [view.store]);
+    },
+
+    updateSortState : function(store){
+        var state = store.getSortState();
+        if(!state){
+            return;
+        }
+        this.sortState = state;
+        var cs = this.view.columns, sortColumn = -1;
+        for(var i = 0, len = cs.length; i < len; i++){
+            if(cs[i].dataIndex == state.field){
+                sortColumn = i;
+                break;
+            }
+        }
+        if(sortColumn != -1){
+            var sortDir = state.direction;
+            this.updateSortIcon(sortColumn, sortDir);
+        }
+    },
+
+    updateSortIcon : function(col, dir){
+        var sc = this.sortClasses;
+        var hds = this.view.innerHd.select('em').removeClass(sc);
+        hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
+    },
+
+    onHdClick : function(e){
+        var hd = e.getTarget('em', 3);
+        if(hd && !this.view.disableHeaders){
+            var index = this.view.findHeaderIndex(hd);
+            this.view.store.sort(this.view.columns[index].dataIndex);
+        }
+    }
+});
+
+// Backwards compatibility alias
 Ext.ListView.Sorter = Ext.list.Sorter;/**
  * @class Ext.TabPanel
  * 
    A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
@@ -43901,1130 +43901,1130 @@ Ext.TabPanel.AccessStack = function(){
         }
     };
 };
-/**
- * @class Ext.Button
- * @extends Ext.BoxComponent
- * Simple Button class
- * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
- * The handler is passed the following parameters:
      
- * 
    • b : Button
      This Button.
      • 
- * 
    • e : EventObject
      The click event.
      • 
- * 
    
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
- * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}.
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- * @xtype button
- */
-Ext.Button = Ext.extend(Ext.BoxComponent, {
-    /**
-     * Read-only. True if this button is hidden
-     * @type Boolean
-     */
-    hidden : false,
-    /**
-     * Read-only. True if this button is disabled
-     * @type Boolean
-     */
-    disabled : false,
-    /**
-     * Read-only. True if this button is pressed (only if enableToggle = true)
-     * @type Boolean
-     */
-    pressed : false,
-
-    /**
-     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
-     */
-
-    /**
-     * @cfg {Boolean} allowDepress
-     * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
-     */
-
-    /**
-     * @cfg {Boolean} enableToggle
-     * True to enable pressed/not pressed toggling (defaults to false)
-     */
-    enableToggle : false,
-    /**
-     * @cfg {Function} toggleHandler
-     * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:
      
-     * 
    • button : Ext.Button
      this Button object
      • 
-     * 
    • state : Boolean
      The next state of the Button, true means pressed.
      • 
-     * 
    
-     */
-    /**
-     * @cfg {Mixed} menu
-     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
-     */
-    /**
-     * @cfg {String} menuAlign
-     * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
-     */
-    menuAlign : 'tl-bl?',
-
-    /**
-     * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the
-     * text to be used if this item is shown in the overflow menu. See also
-     * {@link Ext.Toolbar.Item}.{@link Ext.Toolbar.Item#overflowText overflowText}.
-     */
-    /**
-     * @cfg {String} iconCls
-     * A css class which sets a background image to be used as the icon for this button
-     */
-    /**
-     * @cfg {String} type
-     * submit, reset or button - defaults to 'button'
-     */
-    type : 'button',
-
-    // private
-    menuClassTarget : 'tr:nth(2)',
-
-    /**
-     * @cfg {String} clickEvent
-     * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
-     * Defaults to 'click'.
-     */
-    clickEvent : 'click',
-
-    /**
-     * @cfg {Boolean} handleMouseEvents
-     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
-     */
-    handleMouseEvents : true,
-
-    /**
-     * @cfg {String} tooltipType
-     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
-     */
-    tooltipType : 'qtip',
-
-    /**
-     * @cfg {String} buttonSelector
-     * 
    (Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the
-     * DOM structure created.
    
-     * 
    When a custom {@link #template} is used, you  must ensure that this selector results in the selection of
-     * a focussable element.
    
-     * 
    Defaults to 'button:first-child'.
    
-     */
-    buttonSelector : 'button:first-child',
-
-    /**
-     * @cfg {String} scale
-     * 
    (Optional) The size of the Button. Three values are allowed:
    
-     * 
      
-     * 
    • 'small'
      Results in the button element being 16px high.
      • 
-     * 
    • 'medium'
      Results in the button element being 24px high.
      • 
-     * 
    • 'large'
      Results in the button element being 32px high.
      • 
-     * 
    
-     * 
    Defaults to 'small'.
    
-     */
-    scale : 'small',
-
-    /**
-     * @cfg {Object} scope The scope (this reference) in which the
-     * {@link #handler} and {@link #toggleHandler} is
-     * executed. Defaults to this Button.
-     */
-
-    /**
-     * @cfg {String} iconAlign
-     * 
    (Optional) The side of the Button box to render the icon. Four values are allowed:
    
-     * 
      
-     * 
    • 'top'
      • 
-     * 
    • 'right'
      • 
-     * 
    • 'bottom'
      • 
-     * 
    • 'left'
      • 
-     * 
    
-     * 
    Defaults to 'left'.
    
-     */
-    iconAlign : 'left',
-
-    /**
-     * @cfg {String} arrowAlign
-     * 
    (Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
-     * Two values are allowed:
    
-     * 
      
-     * 
    • 'right'
      • 
-     * 
    • 'bottom'
      • 
-     * 
    
-     * 
    Defaults to 'right'.
    
-     */
-    arrowAlign : 'right',
-
-    /**
-     * @cfg {Ext.Template} template (Optional)
-     * 
    A {@link Ext.Template Template} used to create the Button's DOM structure.
    
-     * Instances, or subclasses which need a different DOM structure may provide a different
-     * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
-     * @type Ext.Template
-     * @property template
-     */
-    /**
-     * @cfg {String} cls
-     * A CSS class string to apply to the button's main element.
-     */
-    /**
-     * @property menu
-     * @type Menu
-     * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
-     */
-
-    initComponent : function(){
-        Ext.Button.superclass.initComponent.call(this);
-
-        this.addEvents(
-            /**
-             * @event click
-             * Fires when this button is clicked
-             * @param {Button} this
-             * @param {EventObject} e The click event
-             */
-            'click',
-            /**
-             * @event toggle
-             * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
-             * @param {Button} this
-             * @param {Boolean} pressed
-             */
-            'toggle',
-            /**
-             * @event mouseover
-             * Fires when the mouse hovers over the button
-             * @param {Button} this
-             * @param {Event} e The event object
-             */
-            'mouseover',
-            /**
-             * @event mouseout
-             * Fires when the mouse exits the button
-             * @param {Button} this
-             * @param {Event} e The event object
-             */
-            'mouseout',
-            /**
-             * @event menushow
-             * If this button has a menu, this event fires when it is shown
-             * @param {Button} this
-             * @param {Menu} menu
-             */
-            'menushow',
-            /**
-             * @event menuhide
-             * If this button has a menu, this event fires when it is hidden
-             * @param {Button} this
-             * @param {Menu} menu
-             */
-            'menuhide',
-            /**
-             * @event menutriggerover
-             * If this button has a menu, this event fires when the mouse enters the menu triggering element
-             * @param {Button} this
-             * @param {Menu} menu
-             * @param {EventObject} e
-             */
-            'menutriggerover',
-            /**
-             * @event menutriggerout
-             * If this button has a menu, this event fires when the mouse leaves the menu triggering element
-             * @param {Button} this
-             * @param {Menu} menu
-             * @param {EventObject} e
-             */
-            'menutriggerout'
-        );
-        if(this.menu){
-            this.menu = Ext.menu.MenuMgr.get(this.menu);
-        }
-        if(Ext.isString(this.toggleGroup)){
-            this.enableToggle = true;
-        }
-    },
-
-/**
-  * 
    This method returns an Array which provides substitution parameters for the {@link #template Template} used
-  * to create this Button's DOM structure.
    
-  * 
    Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
-  * own implementation of this method.
    
-  * 
    The default implementation which provides data for the default {@link #template} returns an Array containing the
-  * following items:
      
-  * 
    • The <button>'s {@link #type}
      • 
-  * 
    • A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
      • 
-  * 
    • A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
      • 
-  * 
    • The {@link #cls} CSS class name applied to the button's wrapping <table> element.
      • 
-  * 
    • The Component id which is applied to the button's wrapping <table> element.
      • 
-  * 
    
-  * @return {Array} Substitution data for a Template.
- */
-    getTemplateArgs : function(){
-        return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
-    },
-
-    // private
-    setButtonClass : function(){
-        if(this.useSetClass){
-            if(!Ext.isEmpty(this.oldCls)){
-                this.el.removeClass([this.oldCls, 'x-btn-pressed']);
-            }
-            this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
-            this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);
-        }
-    },
-
-    // protected
-    getMenuClass : function(){
-        return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';
-    },
-
-    // private
-    onRender : function(ct, position){
-        if(!this.template){
-            if(!Ext.Button.buttonTemplate){
-                // hideous table template
-                Ext.Button.buttonTemplate = new Ext.Template(
-                    '',
-                    '',
-                    '',
-                    '',
-                    '
      
      
      
    ');
-                Ext.Button.buttonTemplate.compile();
-            }
-            this.template = Ext.Button.buttonTemplate;
-        }
-
-        var btn, targs = this.getTemplateArgs();
-
-        if(position){
-            btn = this.template.insertBefore(position, targs, true);
-        }else{
-            btn = this.template.append(ct, targs, true);
-        }
-        /**
-         * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
-         * this references a <button> element. Read only.
-         * @type Ext.Element
-         * @property btnEl
-         */
-        this.btnEl = btn.child(this.buttonSelector);
-        this.mon(this.btnEl, {
-            scope: this,
-            focus: this.onFocus,
-            blur: this.onBlur
-        });
-
-        this.initButtonEl(btn, this.btnEl);
-
-        Ext.ButtonToggleMgr.register(this);
-    },
-
-    // private
-    initButtonEl : function(btn, btnEl){
-        this.el = btn;
-        this.setIcon(this.icon);
-        this.setText(this.text);
-        this.setIconClass(this.iconCls);
-        if(Ext.isDefined(this.tabIndex)){
-            btnEl.dom.tabIndex = this.tabIndex;
-        }
-        if(this.tooltip){
-            this.setTooltip(this.tooltip, true);
-        }
-
-        if(this.handleMouseEvents){
-            this.mon(btn, {
-                scope: this,
-                mouseover: this.onMouseOver,
-                mousedown: this.onMouseDown
-            });
-
-            // new functionality for monitoring on the document level
-            //this.mon(btn, 'mouseout', this.onMouseOut, this);
-        }
-
-        if(this.menu){
-            this.mon(this.menu, {
-                scope: this,
-                show: this.onMenuShow,
-                hide: this.onMenuHide
-            });
-        }
-
-        if(this.repeat){
-            var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
-            this.mon(repeater, 'click', this.onClick, this);
-        }
-        this.mon(btn, this.clickEvent, this.onClick, this);
-    },
-
-    // private
-    afterRender : function(){
-        Ext.Button.superclass.afterRender.call(this);
-        this.useSetClass = true;
-        this.setButtonClass();
-        this.doc = Ext.getDoc();
-        this.doAutoWidth();
-    },
-
-    /**
-     * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes
-     * the value of the {@link iconCls} config internally.
-     * @param {String} cls The CSS class providing the icon image
-     * @return {Ext.Button} this
-     */
-    setIconClass : function(cls){
-        this.iconCls = cls;
-        if(this.el){
-            this.btnEl.dom.className = '';
-            this.btnEl.addClass(['x-btn-text', cls || '']);
-            this.setButtonClass();
-        }
-        return this;
-    },
-
-    /**
-     * Sets the tooltip for this Button.
-     * @param {String/Object} tooltip. This may be:
      
-     * 
    • String : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
      • 
-     * 
    • Object : A configuration object for {@link Ext.QuickTips#register}.
      • 
-     * 
    
-     * @return {Ext.Button} this
-     */
-    setTooltip : function(tooltip, /* private */ initial){
-        if(this.rendered){
-            if(!initial){
-                this.clearTip();
-            }
-            if(Ext.isObject(tooltip)){
-                Ext.QuickTips.register(Ext.apply({
-                      target: this.btnEl.id
-                }, tooltip));
-                this.tooltip = tooltip;
-            }else{
-                this.btnEl.dom[this.tooltipType] = tooltip;
-            }
-        }else{
-            this.tooltip = tooltip;
-        }
-        return this;
-    },
-
-    // private
-    clearTip : function(){
-        if(Ext.isObject(this.tooltip)){
-            Ext.QuickTips.unregister(this.btnEl);
-        }
-    },
-
-    // private
-    beforeDestroy : function(){
-        if(this.rendered){
-            this.clearTip();
-        }
-        if(this.menu && this.destroyMenu !== false) {
-            Ext.destroy(this.menu);
-        }
-        Ext.destroy(this.repeater);
-    },
-
-    // private
-    onDestroy : function(){
-        if(this.rendered){
-            this.doc.un('mouseover', this.monitorMouseOver, this);
-            this.doc.un('mouseup', this.onMouseUp, this);
-            delete this.doc;
-            delete this.btnEl;
-            Ext.ButtonToggleMgr.unregister(this);
-        }
-        Ext.Button.superclass.onDestroy.call(this);
-    },
-
-    // private
-    doAutoWidth : function(){
-        if(this.el && this.text && this.width === undefined){
-            this.el.setWidth('auto');
-            if(Ext.isIE7 && Ext.isStrict){
-                var ib = this.btnEl;
-                if(ib && ib.getWidth() > 20){
-                    ib.clip();
-                    ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
-                }
-            }
-            if(this.minWidth){
-                if(this.el.getWidth() < this.minWidth){
-                    this.el.setWidth(this.minWidth);
-                }
-            }
-        }
-    },
-
-    /**
-     * Assigns this Button's click handler
-     * @param {Function} handler The function to call when the button is clicked
-     * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
-     * Defaults to this Button.
-     * @return {Ext.Button} this
-     */
-    setHandler : function(handler, scope){
-        this.handler = handler;
-        this.scope = scope;
-        return this;
-    },
-
-    /**
-     * Sets this Button's text
-     * @param {String} text The button text
-     * @return {Ext.Button} this
-     */
-    setText : function(text){
-        this.text = text;
-        if(this.el){
-            this.btnEl.update(text || ' ');
-            this.setButtonClass();
-        }
-        this.doAutoWidth();
-        return this;
-    },
-
-    /**
-     * Sets the background image (inline style) of the button.  This method also changes
-     * the value of the {@link icon} config internally.
-     * @param {String} icon The path to an image to display in the button
-     * @return {Ext.Button} this
-     */
-    setIcon : function(icon){
-        this.icon = icon;
-        if(this.el){
-            this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
-            this.setButtonClass();
-        }
-        return this;
-    },
-
-    /**
-     * Gets the text for this Button
-     * @return {String} The button text
-     */
-    getText : function(){
-        return this.text;
-    },
-
-    /**
-     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
-     * @param {Boolean} state (optional) Force a particular state
-     * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
-     * @return {Ext.Button} this
-     */
-    toggle : function(state, suppressEvent){
-        state = state === undefined ? !this.pressed : !!state;
-        if(state != this.pressed){
-            if(this.rendered){
-                this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
-            }
-            this.pressed = state;
-            if(!suppressEvent){
-                this.fireEvent('toggle', this, state);
-                if(this.toggleHandler){
-                    this.toggleHandler.call(this.scope || this, this, state);
-                }
-            }
-        }
-        return this;
-    },
-
-    /**
-     * Focus the button
-     */
-    focus : function(){
-        this.btnEl.focus();
-    },
-
-    // private
-    onDisable : function(){
-        this.onDisableChange(true);
-    },
-
-    // private
-    onEnable : function(){
-        this.onDisableChange(false);
-    },
-
-    onDisableChange : function(disabled){
-        if(this.el){
-            if(!Ext.isIE6 || !this.text){
-                this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);
-            }
-            this.el.dom.disabled = disabled;
-        }
-        this.disabled = disabled;
-    },
-
-    /**
-     * Show this button's menu (if it has one)
-     */
-    showMenu : function(){
-        if(this.rendered && this.menu){
-            if(this.tooltip){
-                Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
-            }
-            if(this.menu.isVisible()){
-                this.menu.hide();
-            }
-            this.menu.ownerCt = this;
-            this.menu.show(this.el, this.menuAlign);
-        }
-        return this;
-    },
-
-    /**
-     * Hide this button's menu (if it has one)
-     */
-    hideMenu : function(){
-        if(this.hasVisibleMenu()){
-            this.menu.hide();
-        }
-        return this;
-    },
-
-    /**
-     * Returns true if the button has a menu and it is visible
-     * @return {Boolean}
-     */
-    hasVisibleMenu : function(){
-        return this.menu && this.menu.ownerCt == this && this.menu.isVisible();
-    },
-
-    // private
-    onClick : function(e){
-        if(e){
-            e.preventDefault();
-        }
-        if(e.button !== 0){
-            return;
-        }
-        if(!this.disabled){
-            if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
-                this.toggle();
-            }
-            if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
-                this.showMenu();
-            }
-            this.fireEvent('click', this, e);
-            if(this.handler){
-                //this.el.removeClass('x-btn-over');
-                this.handler.call(this.scope || this, this, e);
-            }
-        }
-    },
-
-    // private
-    isMenuTriggerOver : function(e, internal){
-        return this.menu && !internal;
-    },
-
-    // private
-    isMenuTriggerOut : function(e, internal){
-        return this.menu && !internal;
-    },
-
-    // private
-    onMouseOver : function(e){
-        if(!this.disabled){
-            var internal = e.within(this.el,  true);
-            if(!internal){
-                this.el.addClass('x-btn-over');
-                if(!this.monitoringMouseOver){
-                    this.doc.on('mouseover', this.monitorMouseOver, this);
-                    this.monitoringMouseOver = true;
-                }
-                this.fireEvent('mouseover', this, e);
-            }
-            if(this.isMenuTriggerOver(e, internal)){
-                this.fireEvent('menutriggerover', this, this.menu, e);
-            }
-        }
-    },
-
-    // private
-    monitorMouseOver : function(e){
-        if(e.target != this.el.dom && !e.within(this.el)){
-            if(this.monitoringMouseOver){
-                this.doc.un('mouseover', this.monitorMouseOver, this);
-                this.monitoringMouseOver = false;
-            }
-            this.onMouseOut(e);
-        }
-    },
-
-    // private
-    onMouseOut : function(e){
-        var internal = e.within(this.el) && e.target != this.el.dom;
-        this.el.removeClass('x-btn-over');
-        this.fireEvent('mouseout', this, e);
-        if(this.isMenuTriggerOut(e, internal)){
-            this.fireEvent('menutriggerout', this, this.menu, e);
-        }
-    },
-
-    focus : function() {
-        this.btnEl.focus();
-    },
-
-    blur : function() {
-        this.btnEl.blur();
-    },
-
-    // private
-    onFocus : function(e){
-        if(!this.disabled){
-            this.el.addClass('x-btn-focus');
-        }
-    },
-    // private
-    onBlur : function(e){
-        this.el.removeClass('x-btn-focus');
-    },
-
-    // private
-    getClickEl : function(e, isUp){
-       return this.el;
-    },
-
-    // private
-    onMouseDown : function(e){
-        if(!this.disabled && e.button === 0){
-            this.getClickEl(e).addClass('x-btn-click');
-            this.doc.on('mouseup', this.onMouseUp, this);
-        }
-    },
-    // private
-    onMouseUp : function(e){
-        if(e.button === 0){
-            this.getClickEl(e, true).removeClass('x-btn-click');
-            this.doc.un('mouseup', this.onMouseUp, this);
-        }
-    },
-    // private
-    onMenuShow : function(e){
-        if(this.menu.ownerCt == this){
-            this.menu.ownerCt = this;
-            this.ignoreNextClick = 0;
-            this.el.addClass('x-btn-menu-active');
-            this.fireEvent('menushow', this, this.menu);
-        }
-    },
-    // private
-    onMenuHide : function(e){
-        if(this.menu.ownerCt == this){
-            this.el.removeClass('x-btn-menu-active');
-            this.ignoreNextClick = this.restoreClick.defer(250, this);
-            this.fireEvent('menuhide', this, this.menu);
-            delete this.menu.ownerCt;
-        }
-    },
-
-    // private
-    restoreClick : function(){
-        this.ignoreNextClick = 0;
-    }
-
-    /**
-     * @cfg {String} autoEl @hide
-     */
-    /**
-     * @cfg {String/Object} html @hide
-     */
-    /**
-     * @cfg {String} contentEl  @hide
-     */
-    /**
-     * @cfg {Mixed} data  @hide
-     */
-    /**
-     * @cfg {Mixed} tpl  @hide
-     */
-    /**
-     * @cfg {String} tplWriteMode  @hide
-     */
-});
-Ext.reg('button', Ext.Button);
-
-// Private utility class used by Button
-Ext.ButtonToggleMgr = function(){
-   var groups = {};
-
-   function toggleGroup(btn, state){
-       if(state){
-           var g = groups[btn.toggleGroup];
-           for(var i = 0, l = g.length; i < l; i++){
-               if(g[i] != btn){
-                   g[i].toggle(false);
-               }
-           }
-       }
-   }
-
-   return {
-       register : function(btn){
-           if(!btn.toggleGroup){
-               return;
-           }
-           var g = groups[btn.toggleGroup];
-           if(!g){
-               g = groups[btn.toggleGroup] = [];
-           }
-           g.push(btn);
-           btn.on('toggle', toggleGroup);
-       },
-
-       unregister : function(btn){
-           if(!btn.toggleGroup){
-               return;
-           }
-           var g = groups[btn.toggleGroup];
-           if(g){
-               g.remove(btn);
-               btn.un('toggle', toggleGroup);
-           }
-       },
-
-       /**
-        * Gets the pressed button in the passed group or null
-        * @param {String} group
-        * @return Button
-        */
-       getPressed : function(group){
-           var g = groups[group];
-           if(g){
-               for(var i = 0, len = g.length; i < len; i++){
-                   if(g[i].pressed === true){
-                       return g[i];
-                   }
-               }
-           }
-           return null;
-       }
-   };
-}();
-/**
- * @class Ext.SplitButton
- * @extends Ext.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
- * 
    
-// display a dropdown menu:
-new Ext.SplitButton({
-	renderTo: 'button-ct', // the container id
-   	text: 'Options',
-   	handler: optionsHandler, // handle a click on the button itself
-   	menu: new Ext.menu.Menu({
-        items: [
-        	// these items will render as dropdown menu items when the arrow is clicked:
-	        {text: 'Item 1', handler: item1Handler},
-	        {text: 'Item 2', handler: item2Handler}
-        ]
-   	})
-});
-
-// Instead of showing a menu, you provide any type of custom
-// functionality you want when the dropdown arrow is clicked:
-new Ext.SplitButton({
-	renderTo: 'button-ct',
-   	text: 'Options',
-   	handler: optionsHandler,
-   	arrowHandler: myCustomHandler
-});
-
    
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {Object} config The config object
- * @xtype splitbutton
- */
-Ext.SplitButton = Ext.extend(Ext.Button, {
-	// private
-    arrowSelector : 'em',
-    split: true,
-
-    // private
-    initComponent : function(){
-        Ext.SplitButton.superclass.initComponent.call(this);
-        /**
-         * @event arrowclick
-         * Fires when this button's arrow is clicked
-         * @param {MenuButton} this
-         * @param {EventObject} e The click event
-         */
-        this.addEvents("arrowclick");
-    },
-
-    // private
-    onRender : function(){
-        Ext.SplitButton.superclass.onRender.apply(this, arguments);
-        if(this.arrowTooltip){
-            this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
-        }
-    },
-
-    /**
-     * Sets this button's arrow click handler.
-     * @param {Function} handler The function to call when the arrow is clicked
-     * @param {Object} scope (optional) Scope for the function passed above
-     */
-    setArrowHandler : function(handler, scope){
-        this.arrowHandler = handler;
-        this.scope = scope;
-    },
-
-    getMenuClass : function(){
-        return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
-    },
-
-    isClickOnArrow : function(e){
-	if (this.arrowAlign != 'bottom') {
-	    var visBtn = this.el.child('em.x-btn-split');
-	    var right = visBtn.getRegion().right - visBtn.getPadding('r');
-	    return e.getPageX() > right;
-	} else {
-	    return e.getPageY() > this.btnEl.getRegion().bottom;
-	}
-    },
-
-    // private
-    onClick : function(e, t){
-        e.preventDefault();
-        if(!this.disabled){
-            if(this.isClickOnArrow(e)){
-                if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
-                    this.showMenu();
-                }
-                this.fireEvent("arrowclick", this, e);
-                if(this.arrowHandler){
-                    this.arrowHandler.call(this.scope || this, this, e);
-                }
-            }else{
-                if(this.enableToggle){
-                    this.toggle();
-                }
-                this.fireEvent("click", this, e);
-                if(this.handler){
-                    this.handler.call(this.scope || this, this, e);
-                }
-            }
-        }
-    },
-
-    // private
-    isMenuTriggerOver : function(e){
-        return this.menu && e.target.tagName == this.arrowSelector;
-    },
-
-    // private
-    isMenuTriggerOut : function(e, internal){
-        return this.menu && e.target.tagName != this.arrowSelector;
-    }
-});
-
-Ext.reg('splitbutton', Ext.SplitButton);/**
- * @class Ext.CycleButton
- * @extends Ext.SplitButton
- * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
- * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
- * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
- * button displays the dropdown menu just like a normal SplitButton.  Example usage:
- * 
    
-var btn = new Ext.CycleButton({
-    showText: true,
-    prependText: 'View as ',
-    items: [{
-        text:'text only',
-        iconCls:'view-text',
-        checked:true
-    },{
-        text:'HTML',
-        iconCls:'view-html'
-    }],
-    changeHandler:function(btn, item){
-        Ext.Msg.alert('Change View', item.text);
-    }
-});
-
    
- * @constructor
- * Create a new split button
- * @param {Object} config The config object
- * @xtype cycle
- */
-Ext.CycleButton = Ext.extend(Ext.SplitButton, {
-    /**
-     * @cfg {Array} items An array of {@link Ext.menu.CheckItem} config objects to be used when creating the
-     * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
-     */
-    /**
-     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
-     */
-    /**
-     * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
-     * button's text (only applies when showText = true, defaults to '')
-     */
-    /**
-     * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
-     * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
-     * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
-     * following argument list: (SplitButton this, Ext.menu.CheckItem item)
-     */
-    /**
-     * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
-     * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the 
-     * default behavior of changing the button's icon to match the selected item's icon on change.
-     */
-    /**
-     * @property menu
-     * @type Menu
-     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
-     */
-
-    // private
-    getItemText : function(item){
-        if(item && this.showText === true){
-            var text = '';
-            if(this.prependText){
-                text += this.prependText;
-            }
-            text += item.text;
-            return text;
-        }
-        return undefined;
-    },
-
-    /**
-     * Sets the button's active menu item.
-     * @param {Ext.menu.CheckItem} item The item to activate
-     * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
-     */
-    setActiveItem : function(item, suppressEvent){
-        if(!Ext.isObject(item)){
-            item = this.menu.getComponent(item);
-        }
-        if(item){
-            if(!this.rendered){
-                this.text = this.getItemText(item);
-                this.iconCls = item.iconCls;
-            }else{
-                var t = this.getItemText(item);
-                if(t){
-                    this.setText(t);
-                }
-                this.setIconClass(item.iconCls);
-            }
-            this.activeItem = item;
-            if(!item.checked){
-                item.setChecked(true, false);
-            }
-            if(this.forceIcon){
-                this.setIconClass(this.forceIcon);
-            }
-            if(!suppressEvent){
-                this.fireEvent('change', this, item);
-            }
-        }
-    },
-
-    /**
-     * Gets the currently active menu item.
-     * @return {Ext.menu.CheckItem} The active item
-     */
-    getActiveItem : function(){
-        return this.activeItem;
-    },
-
-    // private
-    initComponent : function(){
-        this.addEvents(
-            /**
-             * @event change
-             * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
-             * is set on this CycleButton, it will be called instead on active item change and this change event will
-             * not be fired.
-             * @param {Ext.CycleButton} this
-             * @param {Ext.menu.CheckItem} item The menu item that was selected
-             */
-            "change"
-        );
-
-        if(this.changeHandler){
-            this.on('change', this.changeHandler, this.scope||this);
-            delete this.changeHandler;
-        }
-
-        this.itemCount = this.items.length;
-
-        this.menu = {cls:'x-cycle-menu', items:[]};
-        var checked = 0;
-        Ext.each(this.items, function(item, i){
-            Ext.apply(item, {
-                group: item.group || this.id,
-                itemIndex: i,
-                checkHandler: this.checkHandler,
-                scope: this,
-                checked: item.checked || false
-            });
-            this.menu.items.push(item);
-            if(item.checked){
-                checked = i;
-            }
-        }, this);
-        Ext.CycleButton.superclass.initComponent.call(this);
-        this.on('click', this.toggleSelected, this);
-        this.setActiveItem(checked, true);
-    },
-
-    // private
-    checkHandler : function(item, pressed){
-        if(pressed){
-            this.setActiveItem(item);
-        }
-    },
-
-    /**
-     * This is normally called internally on button click, but can be called externally to advance the button's
-     * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
-     * the active item will be set to the first item in the menu.
-     */
-    toggleSelected : function(){
-        var m = this.menu;
-        m.render();
-        // layout if we haven't before so the items are active
-        if(!m.hasLayout){
-            m.doLayout();
-        }
-        
-        var nextIdx, checkItem;
-        for (var i = 1; i < this.itemCount; i++) {
-            nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
-            // check the potential item
-            checkItem = m.items.itemAt(nextIdx);
-            // if its not disabled then check it.
-            if (!checkItem.disabled) {
-                checkItem.setChecked(true);
-                break;
-            }
-        }
-    }
-});
+/**
+ * @class Ext.Button
+ * @extends Ext.BoxComponent
+ * Simple Button class
+ * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
+ * The handler is passed the following parameters:
      
+ * 
    • b : Button
      This Button.
      • 
+ * 
    • e : EventObject
      The click event.
      • 
+ * 
    
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
+ * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}.
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+ * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ * @xtype button
+ */
+Ext.Button = Ext.extend(Ext.BoxComponent, {
+    /**
+     * Read-only. True if this button is hidden
+     * @type Boolean
+     */
+    hidden : false,
+    /**
+     * Read-only. True if this button is disabled
+     * @type Boolean
+     */
+    disabled : false,
+    /**
+     * Read-only. True if this button is pressed (only if enableToggle = true)
+     * @type Boolean
+     */
+    pressed : false,
+
+    /**
+     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+     */
+
+    /**
+     * @cfg {Boolean} allowDepress
+     * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
+     */
+
+    /**
+     * @cfg {Boolean} enableToggle
+     * True to enable pressed/not pressed toggling (defaults to false)
+     */
+    enableToggle : false,
+    /**
+     * @cfg {Function} toggleHandler
+     * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:
      
+     * 
    • button : Ext.Button
      this Button object
      • 
+     * 
    • state : Boolean
      The next state of the Button, true means pressed.
      • 
+     * 
    
+     */
+    /**
+     * @cfg {Mixed} menu
+     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+     */
+    /**
+     * @cfg {String} menuAlign
+     * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
+     */
+    menuAlign : 'tl-bl?',
+
+    /**
+     * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the
+     * text to be used if this item is shown in the overflow menu. See also
+     * {@link Ext.Toolbar.Item}.{@link Ext.Toolbar.Item#overflowText overflowText}.
+     */
+    /**
+     * @cfg {String} iconCls
+     * A css class which sets a background image to be used as the icon for this button
+     */
+    /**
+     * @cfg {String} type
+     * submit, reset or button - defaults to 'button'
+     */
+    type : 'button',
+
+    // private
+    menuClassTarget : 'tr:nth(2)',
+
+    /**
+     * @cfg {String} clickEvent
+     * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
+     * Defaults to 'click'.
+     */
+    clickEvent : 'click',
+
+    /**
+     * @cfg {Boolean} handleMouseEvents
+     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+     */
+    handleMouseEvents : true,
+
+    /**
+     * @cfg {String} tooltipType
+     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
+     */
+    tooltipType : 'qtip',
+
+    /**
+     * @cfg {String} buttonSelector
+     * 
    (Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the
+     * DOM structure created.
    
+     * 
    When a custom {@link #template} is used, you  must ensure that this selector results in the selection of
+     * a focussable element.
    
+     * 
    Defaults to 'button:first-child'.
    
+     */
+    buttonSelector : 'button:first-child',
+
+    /**
+     * @cfg {String} scale
+     * 
    (Optional) The size of the Button. Three values are allowed:
    
+     * 
      
+     * 
    • 'small'
      Results in the button element being 16px high.
      • 
+     * 
    • 'medium'
      Results in the button element being 24px high.
      • 
+     * 
    • 'large'
      Results in the button element being 32px high.
      • 
+     * 
    
+     * 
    Defaults to 'small'.
    
+     */
+    scale : 'small',
+
+    /**
+     * @cfg {Object} scope The scope (this reference) in which the
+     * {@link #handler} and {@link #toggleHandler} is
+     * executed. Defaults to this Button.
+     */
+
+    /**
+     * @cfg {String} iconAlign
+     * 
    (Optional) The side of the Button box to render the icon. Four values are allowed:
    
+     * 
      
+     * 
    • 'top'
      • 
+     * 
    • 'right'
      • 
+     * 
    • 'bottom'
      • 
+     * 
    • 'left'
      • 
+     * 
    
+     * 
    Defaults to 'left'.
    
+     */
+    iconAlign : 'left',
+
+    /**
+     * @cfg {String} arrowAlign
+     * 
    (Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
+     * Two values are allowed:
    
+     * 
      
+     * 
    • 'right'
      • 
+     * 
    • 'bottom'
      • 
+     * 
    
+     * 
    Defaults to 'right'.
    
+     */
+    arrowAlign : 'right',
+
+    /**
+     * @cfg {Ext.Template} template (Optional)
+     * 
    A {@link Ext.Template Template} used to create the Button's DOM structure.
    
+     * Instances, or subclasses which need a different DOM structure may provide a different
+     * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
+     * @type Ext.Template
+     * @property template
+     */
+    /**
+     * @cfg {String} cls
+     * A CSS class string to apply to the button's main element.
+     */
+    /**
+     * @property menu
+     * @type Menu
+     * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
+     */
+
+    initComponent : function(){
+        Ext.Button.superclass.initComponent.call(this);
+
+        this.addEvents(
+            /**
+             * @event click
+             * Fires when this button is clicked
+             * @param {Button} this
+             * @param {EventObject} e The click event
+             */
+            'click',
+            /**
+             * @event toggle
+             * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
+             * @param {Button} this
+             * @param {Boolean} pressed
+             */
+            'toggle',
+            /**
+             * @event mouseover
+             * Fires when the mouse hovers over the button
+             * @param {Button} this
+             * @param {Event} e The event object
+             */
+            'mouseover',
+            /**
+             * @event mouseout
+             * Fires when the mouse exits the button
+             * @param {Button} this
+             * @param {Event} e The event object
+             */
+            'mouseout',
+            /**
+             * @event menushow
+             * If this button has a menu, this event fires when it is shown
+             * @param {Button} this
+             * @param {Menu} menu
+             */
+            'menushow',
+            /**
+             * @event menuhide
+             * If this button has a menu, this event fires when it is hidden
+             * @param {Button} this
+             * @param {Menu} menu
+             */
+            'menuhide',
+            /**
+             * @event menutriggerover
+             * If this button has a menu, this event fires when the mouse enters the menu triggering element
+             * @param {Button} this
+             * @param {Menu} menu
+             * @param {EventObject} e
+             */
+            'menutriggerover',
+            /**
+             * @event menutriggerout
+             * If this button has a menu, this event fires when the mouse leaves the menu triggering element
+             * @param {Button} this
+             * @param {Menu} menu
+             * @param {EventObject} e
+             */
+            'menutriggerout'
+        );
+        if(this.menu){
+            this.menu = Ext.menu.MenuMgr.get(this.menu);
+        }
+        if(Ext.isString(this.toggleGroup)){
+            this.enableToggle = true;
+        }
+    },
+
+/**
+  * 
    This method returns an Array which provides substitution parameters for the {@link #template Template} used
+  * to create this Button's DOM structure.
    
+  * 
    Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
+  * own implementation of this method.
    
+  * 
    The default implementation which provides data for the default {@link #template} returns an Array containing the
+  * following items:
      
+  * 
    • The <button>'s {@link #type}
      • 
+  * 
    • A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
      • 
+  * 
    • A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
      • 
+  * 
    • The {@link #cls} CSS class name applied to the button's wrapping <table> element.
      • 
+  * 
    • The Component id which is applied to the button's wrapping <table> element.
      • 
+  * 
    
+  * @return {Array} Substitution data for a Template.
+ */
+    getTemplateArgs : function(){
+        return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
+    },
+
+    // private
+    setButtonClass : function(){
+        if(this.useSetClass){
+            if(!Ext.isEmpty(this.oldCls)){
+                this.el.removeClass([this.oldCls, 'x-btn-pressed']);
+            }
+            this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
+            this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);
+        }
+    },
+
+    // protected
+    getMenuClass : function(){
+        return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';
+    },
+
+    // private
+    onRender : function(ct, position){
+        if(!this.template){
+            if(!Ext.Button.buttonTemplate){
+                // hideous table template
+                Ext.Button.buttonTemplate = new Ext.Template(
+                    '',
+                    '',
+                    '',
+                    '',
+                    '
      
      
      
    ');
+                Ext.Button.buttonTemplate.compile();
+            }
+            this.template = Ext.Button.buttonTemplate;
+        }
+
+        var btn, targs = this.getTemplateArgs();
+
+        if(position){
+            btn = this.template.insertBefore(position, targs, true);
+        }else{
+            btn = this.template.append(ct, targs, true);
+        }
+        /**
+         * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
+         * this references a <button> element. Read only.
+         * @type Ext.Element
+         * @property btnEl
+         */
+        this.btnEl = btn.child(this.buttonSelector);
+        this.mon(this.btnEl, {
+            scope: this,
+            focus: this.onFocus,
+            blur: this.onBlur
+        });
+
+        this.initButtonEl(btn, this.btnEl);
+
+        Ext.ButtonToggleMgr.register(this);
+    },
+
+    // private
+    initButtonEl : function(btn, btnEl){
+        this.el = btn;
+        this.setIcon(this.icon);
+        this.setText(this.text);
+        this.setIconClass(this.iconCls);
+        if(Ext.isDefined(this.tabIndex)){
+            btnEl.dom.tabIndex = this.tabIndex;
+        }
+        if(this.tooltip){
+            this.setTooltip(this.tooltip, true);
+        }
+
+        if(this.handleMouseEvents){
+            this.mon(btn, {
+                scope: this,
+                mouseover: this.onMouseOver,
+                mousedown: this.onMouseDown
+            });
+
+            // new functionality for monitoring on the document level
+            //this.mon(btn, 'mouseout', this.onMouseOut, this);
+        }
+
+        if(this.menu){
+            this.mon(this.menu, {
+                scope: this,
+                show: this.onMenuShow,
+                hide: this.onMenuHide
+            });
+        }
+
+        if(this.repeat){
+            var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
+            this.mon(repeater, 'click', this.onClick, this);
+        }
+        this.mon(btn, this.clickEvent, this.onClick, this);
+    },
+
+    // private
+    afterRender : function(){
+        Ext.Button.superclass.afterRender.call(this);
+        this.useSetClass = true;
+        this.setButtonClass();
+        this.doc = Ext.getDoc();
+        this.doAutoWidth();
+    },
+
+    /**
+     * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes
+     * the value of the {@link iconCls} config internally.
+     * @param {String} cls The CSS class providing the icon image
+     * @return {Ext.Button} this
+     */
+    setIconClass : function(cls){
+        this.iconCls = cls;
+        if(this.el){
+            this.btnEl.dom.className = '';
+            this.btnEl.addClass(['x-btn-text', cls || '']);
+            this.setButtonClass();
+        }
+        return this;
+    },
+
+    /**
+     * Sets the tooltip for this Button.
+     * @param {String/Object} tooltip. This may be:
      
+     * 
    • String : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
      • 
+     * 
    • Object : A configuration object for {@link Ext.QuickTips#register}.
      • 
+     * 
    
+     * @return {Ext.Button} this
+     */
+    setTooltip : function(tooltip, /* private */ initial){
+        if(this.rendered){
+            if(!initial){
+                this.clearTip();
+            }
+            if(Ext.isObject(tooltip)){
+                Ext.QuickTips.register(Ext.apply({
+                      target: this.btnEl.id
+                }, tooltip));
+                this.tooltip = tooltip;
+            }else{
+                this.btnEl.dom[this.tooltipType] = tooltip;
+            }
+        }else{
+            this.tooltip = tooltip;
+        }
+        return this;
+    },
+
+    // private
+    clearTip : function(){
+        if(Ext.isObject(this.tooltip)){
+            Ext.QuickTips.unregister(this.btnEl);
+        }
+    },
+
+    // private
+    beforeDestroy : function(){
+        if(this.rendered){
+            this.clearTip();
+        }
+        if(this.menu && this.destroyMenu !== false) {
+            Ext.destroy(this.menu);
+        }
+        Ext.destroy(this.repeater);
+    },
+
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            this.doc.un('mouseover', this.monitorMouseOver, this);
+            this.doc.un('mouseup', this.onMouseUp, this);
+            delete this.doc;
+            delete this.btnEl;
+            Ext.ButtonToggleMgr.unregister(this);
+        }
+        Ext.Button.superclass.onDestroy.call(this);
+    },
+
+    // private
+    doAutoWidth : function(){
+        if(this.el && this.text && this.width === undefined){
+            this.el.setWidth('auto');
+            if(Ext.isIE7 && Ext.isStrict){
+                var ib = this.btnEl;
+                if(ib && ib.getWidth() > 20){
+                    ib.clip();
+                    ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
+                }
+            }
+            if(this.minWidth){
+                if(this.el.getWidth() < this.minWidth){
+                    this.el.setWidth(this.minWidth);
+                }
+            }
+        }
+    },
+
+    /**
+     * Assigns this Button's click handler
+     * @param {Function} handler The function to call when the button is clicked
+     * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
+     * Defaults to this Button.
+     * @return {Ext.Button} this
+     */
+    setHandler : function(handler, scope){
+        this.handler = handler;
+        this.scope = scope;
+        return this;
+    },
+
+    /**
+     * Sets this Button's text
+     * @param {String} text The button text
+     * @return {Ext.Button} this
+     */
+    setText : function(text){
+        this.text = text;
+        if(this.el){
+            this.btnEl.update(text || ' ');
+            this.setButtonClass();
+        }
+        this.doAutoWidth();
+        return this;
+    },
+
+    /**
+     * Sets the background image (inline style) of the button.  This method also changes
+     * the value of the {@link icon} config internally.
+     * @param {String} icon The path to an image to display in the button
+     * @return {Ext.Button} this
+     */
+    setIcon : function(icon){
+        this.icon = icon;
+        if(this.el){
+            this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
+            this.setButtonClass();
+        }
+        return this;
+    },
+
+    /**
+     * Gets the text for this Button
+     * @return {String} The button text
+     */
+    getText : function(){
+        return this.text;
+    },
+
+    /**
+     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+     * @param {Boolean} state (optional) Force a particular state
+     * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
+     * @return {Ext.Button} this
+     */
+    toggle : function(state, suppressEvent){
+        state = state === undefined ? !this.pressed : !!state;
+        if(state != this.pressed){
+            if(this.rendered){
+                this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+            }
+            this.pressed = state;
+            if(!suppressEvent){
+                this.fireEvent('toggle', this, state);
+                if(this.toggleHandler){
+                    this.toggleHandler.call(this.scope || this, this, state);
+                }
+            }
+        }
+        return this;
+    },
+
+    /**
+     * Focus the button
+     */
+    focus : function(){
+        this.btnEl.focus();
+    },
+
+    // private
+    onDisable : function(){
+        this.onDisableChange(true);
+    },
+
+    // private
+    onEnable : function(){
+        this.onDisableChange(false);
+    },
+
+    onDisableChange : function(disabled){
+        if(this.el){
+            if(!Ext.isIE6 || !this.text){
+                this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);
+            }
+            this.el.dom.disabled = disabled;
+        }
+        this.disabled = disabled;
+    },
+
+    /**
+     * Show this button's menu (if it has one)
+     */
+    showMenu : function(){
+        if(this.rendered && this.menu){
+            if(this.tooltip){
+                Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
+            }
+            if(this.menu.isVisible()){
+                this.menu.hide();
+            }
+            this.menu.ownerCt = this;
+            this.menu.show(this.el, this.menuAlign);
+        }
+        return this;
+    },
+
+    /**
+     * Hide this button's menu (if it has one)
+     */
+    hideMenu : function(){
+        if(this.hasVisibleMenu()){
+            this.menu.hide();
+        }
+        return this;
+    },
+
+    /**
+     * Returns true if the button has a menu and it is visible
+     * @return {Boolean}
+     */
+    hasVisibleMenu : function(){
+        return this.menu && this.menu.ownerCt == this && this.menu.isVisible();
+    },
+
+    // private
+    onClick : function(e){
+        if(e){
+            e.preventDefault();
+        }
+        if(e.button !== 0){
+            return;
+        }
+        if(!this.disabled){
+            if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
+                this.toggle();
+            }
+            if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
+                this.showMenu();
+            }
+            this.fireEvent('click', this, e);
+            if(this.handler){
+                //this.el.removeClass('x-btn-over');
+                this.handler.call(this.scope || this, this, e);
+            }
+        }
+    },
+
+    // private
+    isMenuTriggerOver : function(e, internal){
+        return this.menu && !internal;
+    },
+
+    // private
+    isMenuTriggerOut : function(e, internal){
+        return this.menu && !internal;
+    },
+
+    // private
+    onMouseOver : function(e){
+        if(!this.disabled){
+            var internal = e.within(this.el,  true);
+            if(!internal){
+                this.el.addClass('x-btn-over');
+                if(!this.monitoringMouseOver){
+                    this.doc.on('mouseover', this.monitorMouseOver, this);
+                    this.monitoringMouseOver = true;
+                }
+                this.fireEvent('mouseover', this, e);
+            }
+            if(this.isMenuTriggerOver(e, internal)){
+                this.fireEvent('menutriggerover', this, this.menu, e);
+            }
+        }
+    },
+
+    // private
+    monitorMouseOver : function(e){
+        if(e.target != this.el.dom && !e.within(this.el)){
+            if(this.monitoringMouseOver){
+                this.doc.un('mouseover', this.monitorMouseOver, this);
+                this.monitoringMouseOver = false;
+            }
+            this.onMouseOut(e);
+        }
+    },
+
+    // private
+    onMouseOut : function(e){
+        var internal = e.within(this.el) && e.target != this.el.dom;
+        this.el.removeClass('x-btn-over');
+        this.fireEvent('mouseout', this, e);
+        if(this.isMenuTriggerOut(e, internal)){
+            this.fireEvent('menutriggerout', this, this.menu, e);
+        }
+    },
+
+    focus : function() {
+        this.btnEl.focus();
+    },
+
+    blur : function() {
+        this.btnEl.blur();
+    },
+
+    // private
+    onFocus : function(e){
+        if(!this.disabled){
+            this.el.addClass('x-btn-focus');
+        }
+    },
+    // private
+    onBlur : function(e){
+        this.el.removeClass('x-btn-focus');
+    },
+
+    // private
+    getClickEl : function(e, isUp){
+       return this.el;
+    },
+
+    // private
+    onMouseDown : function(e){
+        if(!this.disabled && e.button === 0){
+            this.getClickEl(e).addClass('x-btn-click');
+            this.doc.on('mouseup', this.onMouseUp, this);
+        }
+    },
+    // private
+    onMouseUp : function(e){
+        if(e.button === 0){
+            this.getClickEl(e, true).removeClass('x-btn-click');
+            this.doc.un('mouseup', this.onMouseUp, this);
+        }
+    },
+    // private
+    onMenuShow : function(e){
+        if(this.menu.ownerCt == this){
+            this.menu.ownerCt = this;
+            this.ignoreNextClick = 0;
+            this.el.addClass('x-btn-menu-active');
+            this.fireEvent('menushow', this, this.menu);
+        }
+    },
+    // private
+    onMenuHide : function(e){
+        if(this.menu.ownerCt == this){
+            this.el.removeClass('x-btn-menu-active');
+            this.ignoreNextClick = this.restoreClick.defer(250, this);
+            this.fireEvent('menuhide', this, this.menu);
+            delete this.menu.ownerCt;
+        }
+    },
+
+    // private
+    restoreClick : function(){
+        this.ignoreNextClick = 0;
+    }
+
+    /**
+     * @cfg {String} autoEl @hide
+     */
+    /**
+     * @cfg {String/Object} html @hide
+     */
+    /**
+     * @cfg {String} contentEl  @hide
+     */
+    /**
+     * @cfg {Mixed} data  @hide
+     */
+    /**
+     * @cfg {Mixed} tpl  @hide
+     */
+    /**
+     * @cfg {String} tplWriteMode  @hide
+     */
+});
+Ext.reg('button', Ext.Button);
+
+// Private utility class used by Button
+Ext.ButtonToggleMgr = function(){
+   var groups = {};
+
+   function toggleGroup(btn, state){
+       if(state){
+           var g = groups[btn.toggleGroup];
+           for(var i = 0, l = g.length; i < l; i++){
+               if(g[i] != btn){
+                   g[i].toggle(false);
+               }
+           }
+       }
+   }
+
+   return {
+       register : function(btn){
+           if(!btn.toggleGroup){
+               return;
+           }
+           var g = groups[btn.toggleGroup];
+           if(!g){
+               g = groups[btn.toggleGroup] = [];
+           }
+           g.push(btn);
+           btn.on('toggle', toggleGroup);
+       },
+
+       unregister : function(btn){
+           if(!btn.toggleGroup){
+               return;
+           }
+           var g = groups[btn.toggleGroup];
+           if(g){
+               g.remove(btn);
+               btn.un('toggle', toggleGroup);
+           }
+       },
+
+       /**
+        * Gets the pressed button in the passed group or null
+        * @param {String} group
+        * @return Button
+        */
+       getPressed : function(group){
+           var g = groups[group];
+           if(g){
+               for(var i = 0, len = g.length; i < len; i++){
+                   if(g[i].pressed === true){
+                       return g[i];
+                   }
+               }
+           }
+           return null;
+       }
+   };
+}();
+/**
+ * @class Ext.SplitButton
+ * @extends Ext.Button
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
+ * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
+ * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
+ * 
    
+// display a dropdown menu:
+new Ext.SplitButton({
+	renderTo: 'button-ct', // the container id
+   	text: 'Options',
+   	handler: optionsHandler, // handle a click on the button itself
+   	menu: new Ext.menu.Menu({
+        items: [
+        	// these items will render as dropdown menu items when the arrow is clicked:
+	        {text: 'Item 1', handler: item1Handler},
+	        {text: 'Item 2', handler: item2Handler}
+        ]
+   	})
+});
+
+// Instead of showing a menu, you provide any type of custom
+// functionality you want when the dropdown arrow is clicked:
+new Ext.SplitButton({
+	renderTo: 'button-ct',
+   	text: 'Options',
+   	handler: optionsHandler,
+   	arrowHandler: myCustomHandler
+});
+
    
+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
+ * @cfg {String} arrowTooltip The title attribute of the arrow
+ * @constructor
+ * Create a new menu button
+ * @param {Object} config The config object
+ * @xtype splitbutton
+ */
+Ext.SplitButton = Ext.extend(Ext.Button, {
+	// private
+    arrowSelector : 'em',
+    split: true,
+
+    // private
+    initComponent : function(){
+        Ext.SplitButton.superclass.initComponent.call(this);
+        /**
+         * @event arrowclick
+         * Fires when this button's arrow is clicked
+         * @param {MenuButton} this
+         * @param {EventObject} e The click event
+         */
+        this.addEvents("arrowclick");
+    },
+
+    // private
+    onRender : function(){
+        Ext.SplitButton.superclass.onRender.apply(this, arguments);
+        if(this.arrowTooltip){
+            this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
+        }
+    },
+
+    /**
+     * Sets this button's arrow click handler.
+     * @param {Function} handler The function to call when the arrow is clicked
+     * @param {Object} scope (optional) Scope for the function passed above
+     */
+    setArrowHandler : function(handler, scope){
+        this.arrowHandler = handler;
+        this.scope = scope;
+    },
+
+    getMenuClass : function(){
+        return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
+    },
+
+    isClickOnArrow : function(e){
+	if (this.arrowAlign != 'bottom') {
+	    var visBtn = this.el.child('em.x-btn-split');
+	    var right = visBtn.getRegion().right - visBtn.getPadding('r');
+	    return e.getPageX() > right;
+	} else {
+	    return e.getPageY() > this.btnEl.getRegion().bottom;
+	}
+    },
+
+    // private
+    onClick : function(e, t){
+        e.preventDefault();
+        if(!this.disabled){
+            if(this.isClickOnArrow(e)){
+                if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
+                    this.showMenu();
+                }
+                this.fireEvent("arrowclick", this, e);
+                if(this.arrowHandler){
+                    this.arrowHandler.call(this.scope || this, this, e);
+                }
+            }else{
+                if(this.enableToggle){
+                    this.toggle();
+                }
+                this.fireEvent("click", this, e);
+                if(this.handler){
+                    this.handler.call(this.scope || this, this, e);
+                }
+            }
+        }
+    },
+
+    // private
+    isMenuTriggerOver : function(e){
+        return this.menu && e.target.tagName == this.arrowSelector;
+    },
+
+    // private
+    isMenuTriggerOut : function(e, internal){
+        return this.menu && e.target.tagName != this.arrowSelector;
+    }
+});
+
+Ext.reg('splitbutton', Ext.SplitButton);/**
+ * @class Ext.CycleButton
+ * @extends Ext.SplitButton
+ * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
+ * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
+ * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
+ * button displays the dropdown menu just like a normal SplitButton.  Example usage:
+ * 
    
+var btn = new Ext.CycleButton({
+    showText: true,
+    prependText: 'View as ',
+    items: [{
+        text:'text only',
+        iconCls:'view-text',
+        checked:true
+    },{
+        text:'HTML',
+        iconCls:'view-html'
+    }],
+    changeHandler:function(btn, item){
+        Ext.Msg.alert('Change View', item.text);
+    }
+});
+
    
+ * @constructor
+ * Create a new split button
+ * @param {Object} config The config object
+ * @xtype cycle
+ */
+Ext.CycleButton = Ext.extend(Ext.SplitButton, {
+    /**
+     * @cfg {Array} items An array of {@link Ext.menu.CheckItem} config objects to be used when creating the
+     * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
+     */
+    /**
+     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
+     */
+    /**
+     * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
+     * button's text (only applies when showText = true, defaults to '')
+     */
+    /**
+     * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
+     * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
+     * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
+     * following argument list: (SplitButton this, Ext.menu.CheckItem item)
+     */
+    /**
+     * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
+     * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the 
+     * default behavior of changing the button's icon to match the selected item's icon on change.
+     */
+    /**
+     * @property menu
+     * @type Menu
+     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
+     */
+
+    // private
+    getItemText : function(item){
+        if(item && this.showText === true){
+            var text = '';
+            if(this.prependText){
+                text += this.prependText;
+            }
+            text += item.text;
+            return text;
+        }
+        return undefined;
+    },
+
+    /**
+     * Sets the button's active menu item.
+     * @param {Ext.menu.CheckItem} item The item to activate
+     * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
+     */
+    setActiveItem : function(item, suppressEvent){
+        if(!Ext.isObject(item)){
+            item = this.menu.getComponent(item);
+        }
+        if(item){
+            if(!this.rendered){
+                this.text = this.getItemText(item);
+                this.iconCls = item.iconCls;
+            }else{
+                var t = this.getItemText(item);
+                if(t){
+                    this.setText(t);
+                }
+                this.setIconClass(item.iconCls);
+            }
+            this.activeItem = item;
+            if(!item.checked){
+                item.setChecked(true, false);
+            }
+            if(this.forceIcon){
+                this.setIconClass(this.forceIcon);
+            }
+            if(!suppressEvent){
+                this.fireEvent('change', this, item);
+            }
+        }
+    },
+
+    /**
+     * Gets the currently active menu item.
+     * @return {Ext.menu.CheckItem} The active item
+     */
+    getActiveItem : function(){
+        return this.activeItem;
+    },
+
+    // private
+    initComponent : function(){
+        this.addEvents(
+            /**
+             * @event change
+             * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
+             * is set on this CycleButton, it will be called instead on active item change and this change event will
+             * not be fired.
+             * @param {Ext.CycleButton} this
+             * @param {Ext.menu.CheckItem} item The menu item that was selected
+             */
+            "change"
+        );
+
+        if(this.changeHandler){
+            this.on('change', this.changeHandler, this.scope||this);
+            delete this.changeHandler;
+        }
+
+        this.itemCount = this.items.length;
+
+        this.menu = {cls:'x-cycle-menu', items:[]};
+        var checked = 0;
+        Ext.each(this.items, function(item, i){
+            Ext.apply(item, {
+                group: item.group || this.id,
+                itemIndex: i,
+                checkHandler: this.checkHandler,
+                scope: this,
+                checked: item.checked || false
+            });
+            this.menu.items.push(item);
+            if(item.checked){
+                checked = i;
+            }
+        }, this);
+        Ext.CycleButton.superclass.initComponent.call(this);
+        this.on('click', this.toggleSelected, this);
+        this.setActiveItem(checked, true);
+    },
+
+    // private
+    checkHandler : function(item, pressed){
+        if(pressed){
+            this.setActiveItem(item);
+        }
+    },
+
+    /**
+     * This is normally called internally on button click, but can be called externally to advance the button's
+     * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
+     * the active item will be set to the first item in the menu.
+     */
+    toggleSelected : function(){
+        var m = this.menu;
+        m.render();
+        // layout if we haven't before so the items are active
+        if(!m.hasLayout){
+            m.doLayout();
+        }
+        
+        var nextIdx, checkItem;
+        for (var i = 1; i < this.itemCount; i++) {
+            nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
+            // check the potential item
+            checkItem = m.items.itemAt(nextIdx);
+            // if its not disabled then check it.
+            if (!checkItem.disabled) {
+                checkItem.setChecked(true);
+                break;
+            }
+        }
+    }
+});
 Ext.reg('cycle', Ext.CycleButton);/**
  * @class Ext.Toolbar
  * @extends Ext.Container
@@ -45601,106 +45601,106 @@ Ext.reg('tbbutton', T.Button);
 Ext.reg('tbsplit', T.SplitButton);
 
 })();
-/**
- * @class Ext.ButtonGroup
- * @extends Ext.Panel
- * Container for a group of buttons. Example usage:
- * 
    
-var p = new Ext.Panel({
-    title: 'Panel with Button Group',
-    width: 300,
-    height:200,
-    renderTo: document.body,
-    html: 'whatever',
-    tbar: [{
-        xtype: 'buttongroup',
-        {@link #columns}: 3,
-        title: 'Clipboard',
-        items: [{
-            text: 'Paste',
-            scale: 'large',
-            rowspan: 3, iconCls: 'add',
-            iconAlign: 'top',
-            cls: 'x-btn-as-arrow'
-        },{
-            xtype:'splitbutton',
-            text: 'Menu Button',
-            scale: 'large',
-            rowspan: 3,
-            iconCls: 'add',
-            iconAlign: 'top',
-            arrowAlign:'bottom',
-            menu: [{text: 'Menu Item 1'}]
-        },{
-            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
-        },{
-            text: 'Copy', iconCls: 'add16'
-        },{
-            text: 'Format', iconCls: 'add16'
-        }]
-    }]
-});
- * 
    
- * @constructor
- * Create a new ButtonGroup.
- * @param {Object} config The config object
- * @xtype buttongroup
- */
-Ext.ButtonGroup = Ext.extend(Ext.Panel, {
-    /**
-     * @cfg {Number} columns The columns configuration property passed to the
-     * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
-     */
-    /**
-     * @cfg {String} baseCls  Defaults to 'x-btn-group'.  See {@link Ext.Panel#baseCls}.
-     */
-    baseCls: 'x-btn-group',
-    /**
-     * @cfg {String} layout  Defaults to 'table'.  See {@link Ext.Container#layout}.
-     */
-    layout:'table',
-    defaultType: 'button',
-    /**
-     * @cfg {Boolean} frame  Defaults to true.  See {@link Ext.Panel#frame}.
-     */
-    frame: true,
-    internalDefaults: {removeMode: 'container', hideParent: true},
-
-    initComponent : function(){
-        this.layoutConfig = this.layoutConfig || {};
-        Ext.applyIf(this.layoutConfig, {
-            columns : this.columns
-        });
-        if(!this.title){
-            this.addClass('x-btn-group-notitle');
-        }
-        this.on('afterlayout', this.onAfterLayout, this);
-        Ext.ButtonGroup.superclass.initComponent.call(this);
-    },
-
-    applyDefaults : function(c){
-        c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
-        var d = this.internalDefaults;
-        if(c.events){
-            Ext.applyIf(c.initialConfig, d);
-            Ext.apply(c, d);
-        }else{
-            Ext.applyIf(c, d);
-        }
-        return c;
-    },
-
-    onAfterLayout : function(){
-        var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
-        this.body.setWidth(bodyWidth);
-        this.el.setWidth(bodyWidth + this.getFrameWidth());
-    }
-    /**
-     * @cfg {Array} tools  @hide
-     */
-});
-
-Ext.reg('buttongroup', Ext.ButtonGroup);
+/**
+ * @class Ext.ButtonGroup
+ * @extends Ext.Panel
+ * Container for a group of buttons. Example usage:
+ * 
    
+var p = new Ext.Panel({
+    title: 'Panel with Button Group',
+    width: 300,
+    height:200,
+    renderTo: document.body,
+    html: 'whatever',
+    tbar: [{
+        xtype: 'buttongroup',
+        {@link #columns}: 3,
+        title: 'Clipboard',
+        items: [{
+            text: 'Paste',
+            scale: 'large',
+            rowspan: 3, iconCls: 'add',
+            iconAlign: 'top',
+            cls: 'x-btn-as-arrow'
+        },{
+            xtype:'splitbutton',
+            text: 'Menu Button',
+            scale: 'large',
+            rowspan: 3,
+            iconCls: 'add',
+            iconAlign: 'top',
+            arrowAlign:'bottom',
+            menu: [{text: 'Menu Item 1'}]
+        },{
+            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
+        },{
+            text: 'Copy', iconCls: 'add16'
+        },{
+            text: 'Format', iconCls: 'add16'
+        }]
+    }]
+});
+ * 
    
+ * @constructor
+ * Create a new ButtonGroup.
+ * @param {Object} config The config object
+ * @xtype buttongroup
+ */
+Ext.ButtonGroup = Ext.extend(Ext.Panel, {
+    /**
+     * @cfg {Number} columns The columns configuration property passed to the
+     * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
+     */
+    /**
+     * @cfg {String} baseCls  Defaults to 'x-btn-group'.  See {@link Ext.Panel#baseCls}.
+     */
+    baseCls: 'x-btn-group',
+    /**
+     * @cfg {String} layout  Defaults to 'table'.  See {@link Ext.Container#layout}.
+     */
+    layout:'table',
+    defaultType: 'button',
+    /**
+     * @cfg {Boolean} frame  Defaults to true.  See {@link Ext.Panel#frame}.
+     */
+    frame: true,
+    internalDefaults: {removeMode: 'container', hideParent: true},
+
+    initComponent : function(){
+        this.layoutConfig = this.layoutConfig || {};
+        Ext.applyIf(this.layoutConfig, {
+            columns : this.columns
+        });
+        if(!this.title){
+            this.addClass('x-btn-group-notitle');
+        }
+        this.on('afterlayout', this.onAfterLayout, this);
+        Ext.ButtonGroup.superclass.initComponent.call(this);
+    },
+
+    applyDefaults : function(c){
+        c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
+        var d = this.internalDefaults;
+        if(c.events){
+            Ext.applyIf(c.initialConfig, d);
+            Ext.apply(c, d);
+        }else{
+            Ext.applyIf(c, d);
+        }
+        return c;
+    },
+
+    onAfterLayout : function(){
+        var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
+        this.body.setWidth(bodyWidth);
+        this.el.setWidth(bodyWidth + this.getFrameWidth());
+    }
+    /**
+     * @cfg {Array} tools  @hide
+     */
+});
+
+Ext.reg('buttongroup', Ext.ButtonGroup);
 /**
  * @class Ext.PagingToolbar
  * @extends Ext.Toolbar
@@ -46231,3521 +46231,3521 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
 });
 
 })();
-Ext.reg('paging', Ext.PagingToolbar);/**
- * @class Ext.History
- * @extends Ext.util.Observable
- * History management component that allows you to register arbitrary tokens that signify application
- * history state on navigation actions.  You can then handle the history {@link #change} event in order
- * to reset your application UI to the appropriate state when the user navigates forward or backward through
- * the browser history stack.
- * @singleton
- */
-Ext.History = (function () {
-    var iframe, hiddenField;
-    var ready = false;
-    var currentToken;
-
-    function getHash() {
-        var href = top.location.href, i = href.indexOf("#");
-        return i >= 0 ? href.substr(i + 1) : null;
-    }
-
-    function doSave() {
-        hiddenField.value = currentToken;
-    }
-
-    function handleStateChange(token) {
-        currentToken = token;
-        Ext.History.fireEvent('change', token);
-    }
-
-    function updateIFrame (token) {
-        var html = ['
    ',Ext.util.Format.htmlEncode(token),'
    '].join('');
-        try {
-            var doc = iframe.contentWindow.document;
-            doc.open();
-            doc.write(html);
-            doc.close();
-            return true;
-        } catch (e) {
-            return false;
-        }
-    }
-
-    function checkIFrame() {
-        if (!iframe.contentWindow || !iframe.contentWindow.document) {
-            setTimeout(checkIFrame, 10);
-            return;
-        }
-
-        var doc = iframe.contentWindow.document;
-        var elem = doc.getElementById("state");
-        var token = elem ? elem.innerText : null;
-
-        var hash = getHash();
-
-        setInterval(function () {
-
-            doc = iframe.contentWindow.document;
-            elem = doc.getElementById("state");
-
-            var newtoken = elem ? elem.innerText : null;
-
-            var newHash = getHash();
-
-            if (newtoken !== token) {
-                token = newtoken;
-                handleStateChange(token);
-                top.location.hash = token;
-                hash = token;
-                doSave();
-            } else if (newHash !== hash) {
-                hash = newHash;
-                updateIFrame(newHash);
-            }
-
-        }, 50);
-
-        ready = true;
-
-        Ext.History.fireEvent('ready', Ext.History);
-    }
-
-    function startUp() {
-        currentToken = hiddenField.value ? hiddenField.value : getHash();
-
-        if (Ext.isIE) {
-            checkIFrame();
-        } else {
-            var hash = getHash();
-            setInterval(function () {
-                var newHash = getHash();
-                if (newHash !== hash) {
-                    hash = newHash;
-                    handleStateChange(hash);
-                    doSave();
-                }
-            }, 50);
-            ready = true;
-            Ext.History.fireEvent('ready', Ext.History);
-        }
-    }
-
-    return {
-        /**
-         * The id of the hidden field required for storing the current history token.
-         * @type String
-         * @property
-         */
-        fieldId: 'x-history-field',
-        /**
-         * The id of the iframe required by IE to manage the history stack.
-         * @type String
-         * @property
-         */
-        iframeId: 'x-history-frame',
-
-        events:{},
-
-        /**
-         * Initialize the global History instance.
-         * @param {Boolean} onReady (optional) A callback function that will be called once the history
-         * component is fully initialized.
-         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser window.
-         */
-        init: function (onReady, scope) {
-            if(ready) {
-                Ext.callback(onReady, scope, [this]);
-                return;
-            }
-            if(!Ext.isReady){
-                Ext.onReady(function(){
-                    Ext.History.init(onReady, scope);
-                });
-                return;
-            }
-            hiddenField = Ext.getDom(Ext.History.fieldId);
-            if (Ext.isIE) {
-                iframe = Ext.getDom(Ext.History.iframeId);
-            }
-            this.addEvents(
-                /**
-                 * @event ready
-                 * Fires when the Ext.History singleton has been initialized and is ready for use.
-                 * @param {Ext.History} The Ext.History singleton.
-                 */
-                'ready',
-                /**
-                 * @event change
-                 * Fires when navigation back or forwards within the local page's history occurs.
-                 * @param {String} token An identifier associated with the page state at that point in its history.
-                 */
-                'change'
-            );
-            if(onReady){
-                this.on('ready', onReady, scope, {single:true});
-            }
-            startUp();
-        },
-
-        /**
-         * Add a new token to the history stack. This can be any arbitrary value, although it would
-         * commonly be the concatenation of a component id and another id marking the specifc history
-         * state of that component.  Example usage:
-         * 
    
-// Handle tab changes on a TabPanel
-tabPanel.on('tabchange', function(tabPanel, tab){
-    Ext.History.add(tabPanel.id + ':' + tab.id);
-});
-
    
-         * @param {String} token The value that defines a particular application-specific history state
-         * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
-         * it will not save a new history step. Set to false if the same state can be saved more than once
-         * at the same history stack location (defaults to true).
-         */
-        add: function (token, preventDup) {
-            if(preventDup !== false){
-                if(this.getToken() == token){
-                    return true;
-                }
-            }
-            if (Ext.isIE) {
-                return updateIFrame(token);
-            } else {
-                top.location.hash = token;
-                return true;
-            }
-        },
-
-        /**
-         * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
-         */
-        back: function(){
-            history.go(-1);
-        },
-
-        /**
-         * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
-         */
-        forward: function(){
-            history.go(1);
-        },
-
-        /**
-         * Retrieves the currently-active history token.
-         * @return {String} The token
-         */
-        getToken: function() {
-            return ready ? currentToken : getHash();
-        }
-    };
-})();
-Ext.apply(Ext.History, new Ext.util.Observable());/**
- * @class Ext.Tip
- * @extends Ext.Panel
- * @xtype tip
- * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
- * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
- * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
- * @constructor
- * Create a new Tip
- * @param {Object} config The configuration options
- */
-Ext.Tip = Ext.extend(Ext.Panel, {
-    /**
-     * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
-     */
-    /**
-     * @cfg {Number} width
-     * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
-     * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
-     */
-    /**
-     * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
-     */
-    minWidth : 40,
-    /**
-     * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
-     */
-    maxWidth : 300,
-    /**
-     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
-     * for bottom-right shadow (defaults to "sides").
-     */
-    shadow : "sides",
-    /**
-     * @cfg {String} defaultAlign Experimental. The default {@link Ext.Element#alignTo} anchor position value
-     * for this tip relative to its element of origin (defaults to "tl-bl?").
-     */
-    defaultAlign : "tl-bl?",
-    autoRender: true,
-    quickShowInterval : 250,
-
-    // private panel overrides
-    frame:true,
-    hidden:true,
-    baseCls: 'x-tip',
-    floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
-    autoHeight:true,
-
-    closeAction: 'hide',
-
-    // private
-    initComponent : function(){
-        Ext.Tip.superclass.initComponent.call(this);
-        if(this.closable && !this.title){
-            this.elements += ',header';
-        }
-    },
-
-    // private
-    afterRender : function(){
-        Ext.Tip.superclass.afterRender.call(this);
-        if(this.closable){
-            this.addTool({
-                id: 'close',
-                handler: this[this.closeAction],
-                scope: this
-            });
-        }
-    },
-
-    /**
-     * Shows this tip at the specified XY position.  Example usage:
-     * 
    
-// Show the tip at x:50 and y:100
-tip.showAt([50,100]);
-
    
-     * @param {Array} xy An array containing the x and y coordinates
-     */
-    showAt : function(xy){
-        Ext.Tip.superclass.show.call(this);
-        if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
-            this.doAutoWidth();
-        }
-        if(this.constrainPosition){
-            xy = this.el.adjustForConstraints(xy);
-        }
-        this.setPagePosition(xy[0], xy[1]);
-    },
-
-    // protected
-    doAutoWidth : function(adjust){
-        adjust = adjust || 0;
-        var bw = this.body.getTextWidth();
-        if(this.title){
-            bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
-        }
-        bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + adjust;
-        this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
-        
-        // IE7 repaint bug on initial show
-        if(Ext.isIE7 && !this.repainted){
-            this.el.repaint();
-            this.repainted = true;
-        }
-    },
-
-    /**
-     * Experimental. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
-     * anchor position value.  Example usage:
-     * 
    
-// Show the tip at the default position ('tl-br?')
-tip.showBy('my-el');
-
-// Show the tip's top-left corner anchored to the element's top-right corner
-tip.showBy('my-el', 'tl-tr');
-
    
-     * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
-     * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
-     * {@link #defaultAlign} if specified).
-     */
-    showBy : function(el, pos){
-        if(!this.rendered){
-            this.render(Ext.getBody());
-        }
-        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
-    },
-
-    initDraggable : function(){
-        this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
-        this.header.addClass('x-tip-draggable');
-    }
-});
-
-Ext.reg('tip', Ext.Tip);
-
-// private - custom Tip DD implementation
-Ext.Tip.DD = function(tip, config){
-    Ext.apply(this, config);
-    this.tip = tip;
-    Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
-    this.setHandleElId(tip.header.id);
-    this.scroll = false;
-};
-
-Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
-    moveOnly:true,
-    scroll:false,
-    headerOffsets:[100, 25],
-    startDrag : function(){
-        this.tip.el.disableShadow();
-    },
-    endDrag : function(e){
-        this.tip.el.enableShadow(true);
-    }
-});/**
- * @class Ext.ToolTip
- * @extends Ext.Tip
- * A standard tooltip implementation for providing additional information when hovering over a target element.
- * @xtype tooltip
- * @constructor
- * Create a new Tooltip
- * @param {Object} config The configuration options
- */
-Ext.ToolTip = Ext.extend(Ext.Tip, {
-    /**
-     * When a Tooltip is configured with the {@link #delegate}
-     * option to cause selected child elements of the {@link #target}
-     * Element to each trigger a seperate show event, this property is set to
-     * the DOM element which triggered the show.
-     * @type DOMElement
-     * @property triggerElement
-     */
-    /**
-     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
-     * for mouseover events to trigger showing this ToolTip.
-     */
-    /**
-     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
-     * mouse exits the target element or after the {@link #dismissDelay}
-     * has expired if set (defaults to true).  If {@link closable} = true
-     * a close tool button will be rendered into the tooltip header.
-     */
-    /**
-     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
-     * after the mouse enters the target element (defaults to 500)
-     */
-    showDelay : 500,
-    /**
-     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
-     * target element but before the tooltip actually hides (defaults to 200).
-     * Set to 0 for the tooltip to hide immediately.
-     */
-    hideDelay : 200,
-    /**
-     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
-     * automatically hides (defaults to 5000). To disable automatic hiding, set
-     * dismissDelay = 0.
-     */
-    dismissDelay : 5000,
-    /**
-     * @cfg {Array} mouseOffset An XY offset from the mouse position where the
-     * tooltip should be shown (defaults to [15,18]).
-     */
-    /**
-     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
-     * moves over the target element (defaults to false).
-     */
-    trackMouse : false,
-    /**
-     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
-     * element, false to anchor it relative to the mouse coordinates (defaults
-     * to true).  When anchorToTarget is true, use
-     * {@link #defaultAlign} to control tooltip alignment to the
-     * target element.  When anchorToTarget is false, use
-     * {@link #anchorPosition} instead to control alignment.
-     */
-    anchorToTarget : true,
-    /**
-     * @cfg {Number} anchorOffset A numeric pixel value used to offset the
-     * default position of the anchor arrow (defaults to 0).  When the anchor
-     * position is on the top or bottom of the tooltip, anchorOffset
-     * will be used as a horizontal offset.  Likewise, when the anchor position
-     * is on the left or right side, anchorOffset will be used as
-     * a vertical offset.
-     */
-    anchorOffset : 0,
-    /**
-     * @cfg {String} delegate 
    Optional. A {@link Ext.DomQuery DomQuery}
-     * selector which allows selection of individual elements within the
-     * {@link #target} element to trigger showing and hiding the
-     * ToolTip as the mouse moves within the target.
    
-     * 
    When specified, the child element of the target which caused a show
-     * event is placed into the {@link #triggerElement} property
-     * before the ToolTip is shown.
    
-     * 
    This may be useful when a Component has regular, repeating elements
-     * in it, each of which need a Tooltip which contains information specific
-     * to that element. For example:
    
-var myGrid = new Ext.grid.gridPanel(gridConfig);
-myGrid.on('render', function(grid) {
-    var store = grid.getStore();  // Capture the Store.
-    var view = grid.getView();    // Capture the GridView.
-    myGrid.tip = new Ext.ToolTip({
-        target: view.mainBody,    // The overall target element.
-        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
-        trackMouse: true,         // Moving within the row should not hide the tip.
-        renderTo: document.body,  // Render immediately so that tip.body can be
-                                  //  referenced prior to the first show.
-        listeners: {              // Change content dynamically depending on which element
-                                  //  triggered the show.
-            beforeshow: function updateTipBody(tip) {
-                var rowIndex = view.findRowIndex(tip.triggerElement);
-                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
-            }
-        }
-    });
-});
-     *
    
-     */
-
-    // private
-    targetCounter : 0,
-
-    constrainPosition : false,
-
-    // private
-    initComponent : function(){
-        Ext.ToolTip.superclass.initComponent.call(this);
-        this.lastActive = new Date();
-        this.initTarget(this.target);
-        this.origAnchor = this.anchor;
-    },
-
-    // private
-    onRender : function(ct, position){
-        Ext.ToolTip.superclass.onRender.call(this, ct, position);
-        this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
-        this.anchorEl = this.el.createChild({
-            cls: 'x-tip-anchor ' + this.anchorCls
-        });
-    },
-
-    // private
-    afterRender : function(){
-        Ext.ToolTip.superclass.afterRender.call(this);
-        this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);
-    },
-
-    /**
-     * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
-     * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
-     */
-    initTarget : function(target){
-        var t;
-        if((t = Ext.get(target))){
-            if(this.target){
-                var tg = Ext.get(this.target);
-                this.mun(tg, 'mouseover', this.onTargetOver, this);
-                this.mun(tg, 'mouseout', this.onTargetOut, this);
-                this.mun(tg, 'mousemove', this.onMouseMove, this);
-            }
-            this.mon(t, {
-                mouseover: this.onTargetOver,
-                mouseout: this.onTargetOut,
-                mousemove: this.onMouseMove,
-                scope: this
-            });
-            this.target = t;
-        }
-        if(this.anchor){
-            this.anchorTarget = this.target;
-        }
-    },
-
-    // private
-    onMouseMove : function(e){
-        var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
-        if (t) {
-            this.targetXY = e.getXY();
-            if (t === this.triggerElement) {
-                if(!this.hidden && this.trackMouse){
-                    this.setPagePosition(this.getTargetXY());
-                }
-            } else {
-                this.hide();
-                this.lastActive = new Date(0);
-                this.onTargetOver(e);
-            }
-        } else if (!this.closable && this.isVisible()) {
-            this.hide();
-        }
-    },
-
-    // private
-    getTargetXY : function(){
-        if(this.delegate){
-            this.anchorTarget = this.triggerElement;
-        }
-        if(this.anchor){
-            this.targetCounter++;
-            var offsets = this.getOffsets(),
-                xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,
-                dw = Ext.lib.Dom.getViewWidth() - 5,
-                dh = Ext.lib.Dom.getViewHeight() - 5,
-                de = document.documentElement,
-                bd = document.body,
-                scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
-                scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
-                axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
-                sz = this.getSize();
-                
-            this.anchorEl.removeClass(this.anchorCls);
-
-            if(this.targetCounter < 2){
-                if(axy[0] < scrollX){
-                    if(this.anchorToTarget){
-                        this.defaultAlign = 'l-r';
-                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
-                    }
-                    this.anchor = 'left';
-                    return this.getTargetXY();
-                }
-                if(axy[0]+sz.width > dw){
-                    if(this.anchorToTarget){
-                        this.defaultAlign = 'r-l';
-                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
-                    }
-                    this.anchor = 'right';
-                    return this.getTargetXY();
-                }
-                if(axy[1] < scrollY){
-                    if(this.anchorToTarget){
-                        this.defaultAlign = 't-b';
-                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
-                    }
-                    this.anchor = 'top';
-                    return this.getTargetXY();
-                }
-                if(axy[1]+sz.height > dh){
-                    if(this.anchorToTarget){
-                        this.defaultAlign = 'b-t';
-                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
-                    }
-                    this.anchor = 'bottom';
-                    return this.getTargetXY();
-                }
-            }
-
-            this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();
-            this.anchorEl.addClass(this.anchorCls);
-            this.targetCounter = 0;
-            return axy;
-        }else{
-            var mouseOffset = this.getMouseOffset();
-            return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];
-        }
-    },
-
-    getMouseOffset : function(){
-        var offset = this.anchor ? [0,0] : [15,18];
-        if(this.mouseOffset){
-            offset[0] += this.mouseOffset[0];
-            offset[1] += this.mouseOffset[1];
-        }
-        return offset;
-    },
-
-    // private
-    getAnchorPosition : function(){
-        if(this.anchor){
-            this.tipAnchor = this.anchor.charAt(0);
-        }else{
-            var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
-            if(!m){
-               throw 'AnchorTip.defaultAlign is invalid';
-            }
-            this.tipAnchor = m[1].charAt(0);
-        }
-
-        switch(this.tipAnchor){
-            case 't': return 'top';
-            case 'b': return 'bottom';
-            case 'r': return 'right';
-        }
-        return 'left';
-    },
-
-    // private
-    getAnchorAlign : function(){
-        switch(this.anchor){
-            case 'top'  : return 'tl-bl';
-            case 'left' : return 'tl-tr';
-            case 'right': return 'tr-tl';
-            default     : return 'bl-tl';
-        }
-    },
-
-    // private
-    getOffsets : function(){
-        var offsets, 
-            ap = this.getAnchorPosition().charAt(0);
-        if(this.anchorToTarget && !this.trackMouse){
-            switch(ap){
-                case 't':
-                    offsets = [0, 9];
-                    break;
-                case 'b':
-                    offsets = [0, -13];
-                    break;
-                case 'r':
-                    offsets = [-13, 0];
-                    break;
-                default:
-                    offsets = [9, 0];
-                    break;
-            }
-        }else{
-            switch(ap){
-                case 't':
-                    offsets = [-15-this.anchorOffset, 30];
-                    break;
-                case 'b':
-                    offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];
-                    break;
-                case 'r':
-                    offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];
-                    break;
-                default:
-                    offsets = [25, -13-this.anchorOffset];
-                    break;
-            }
-        }
-        var mouseOffset = this.getMouseOffset();
-        offsets[0] += mouseOffset[0];
-        offsets[1] += mouseOffset[1];
-
-        return offsets;
-    },
-
-    // private
-    onTargetOver : function(e){
-        if(this.disabled || e.within(this.target.dom, true)){
-            return;
-        }
-        var t = e.getTarget(this.delegate);
-        if (t) {
-            this.triggerElement = t;
-            this.clearTimer('hide');
-            this.targetXY = e.getXY();
-            this.delayShow();
-        }
-    },
-
-    // private
-    delayShow : function(){
-        if(this.hidden && !this.showTimer){
-            if(this.lastActive.getElapsed() < this.quickShowInterval){
-                this.show();
-            }else{
-                this.showTimer = this.show.defer(this.showDelay, this);
-            }
-        }else if(!this.hidden && this.autoHide !== false){
-            this.show();
-        }
-    },
-
-    // private
-    onTargetOut : function(e){
-        if(this.disabled || e.within(this.target.dom, true)){
-            return;
-        }
-        this.clearTimer('show');
-        if(this.autoHide !== false){
-            this.delayHide();
-        }
-    },
-
-    // private
-    delayHide : function(){
-        if(!this.hidden && !this.hideTimer){
-            this.hideTimer = this.hide.defer(this.hideDelay, this);
-        }
-    },
-
-    /**
-     * Hides this tooltip if visible.
-     */
-    hide: function(){
-        this.clearTimer('dismiss');
-        this.lastActive = new Date();
-        if(this.anchorEl){
-            this.anchorEl.hide();
-        }
-        Ext.ToolTip.superclass.hide.call(this);
-        delete this.triggerElement;
-    },
-
-    /**
-     * Shows this tooltip at the current event target XY position.
-     */
-    show : function(){
-        if(this.anchor){
-            // pre-show it off screen so that the el will have dimensions
-            // for positioning calcs when getting xy next
-            this.showAt([-1000,-1000]);
-            this.origConstrainPosition = this.constrainPosition;
-            this.constrainPosition = false;
-            this.anchor = this.origAnchor;
-        }
-        this.showAt(this.getTargetXY());
-
-        if(this.anchor){
-            this.syncAnchor();
-            this.anchorEl.show();
-            this.constrainPosition = this.origConstrainPosition;
-        }else{
-            this.anchorEl.hide();
-        }
-    },
-
-    // inherit docs
-    showAt : function(xy){
-        this.lastActive = new Date();
-        this.clearTimers();
-        Ext.ToolTip.superclass.showAt.call(this, xy);
-        if(this.dismissDelay && this.autoHide !== false){
-            this.dismissTimer = this.hide.defer(this.dismissDelay, this);
-        }
-        if(this.anchor && !this.anchorEl.isVisible()){
-            this.syncAnchor();
-            this.anchorEl.show();
-        }
-    },
-
-    // private
-    syncAnchor : function(){
-        var anchorPos, targetPos, offset;
-        switch(this.tipAnchor.charAt(0)){
-            case 't':
-                anchorPos = 'b';
-                targetPos = 'tl';
-                offset = [20+this.anchorOffset, 2];
-                break;
-            case 'r':
-                anchorPos = 'l';
-                targetPos = 'tr';
-                offset = [-2, 11+this.anchorOffset];
-                break;
-            case 'b':
-                anchorPos = 't';
-                targetPos = 'bl';
-                offset = [20+this.anchorOffset, -2];
-                break;
-            default:
-                anchorPos = 'r';
-                targetPos = 'tl';
-                offset = [2, 11+this.anchorOffset];
-                break;
-        }
-        this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);
-    },
-
-    // private
-    setPagePosition : function(x, y){
-        Ext.ToolTip.superclass.setPagePosition.call(this, x, y);
-        if(this.anchor){
-            this.syncAnchor();
-        }
-    },
-
-    // private
-    clearTimer : function(name){
-        name = name + 'Timer';
-        clearTimeout(this[name]);
-        delete this[name];
-    },
-
-    // private
-    clearTimers : function(){
-        this.clearTimer('show');
-        this.clearTimer('dismiss');
-        this.clearTimer('hide');
-    },
-
-    // private
-    onShow : function(){
-        Ext.ToolTip.superclass.onShow.call(this);
-        Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
-    },
-
-    // private
-    onHide : function(){
-        Ext.ToolTip.superclass.onHide.call(this);
-        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
-    },
-
-    // private
-    onDocMouseDown : function(e){
-        if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){
-            this.disable();
-            this.enable.defer(100, this);
-        }
-    },
-
-    // private
-    onDisable : function(){
-        this.clearTimers();
-        this.hide();
-    },
-
-    // private
-    adjustPosition : function(x, y){
-        if(this.contstrainPosition){
-            var ay = this.targetXY[1], h = this.getSize().height;
-            if(y <= ay && (y+h) >= ay){
-                y = ay-h-5;
-            }
-        }
-        return {x : x, y: y};
-    },
-    
-    beforeDestroy : function(){
-        this.clearTimers();
-        Ext.destroy(this.anchorEl);
-        delete this.anchorEl;
-        delete this.target;
-        delete this.anchorTarget;
-        delete this.triggerElement;
-        Ext.ToolTip.superclass.beforeDestroy.call(this);    
-    },
-
-    // private
-    onDestroy : function(){
-        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
-        Ext.ToolTip.superclass.onDestroy.call(this);
-    }
-});
-
-Ext.reg('tooltip', Ext.ToolTip);/**
- * @class Ext.QuickTip
- * @extends Ext.ToolTip
- * @xtype quicktip
- * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
- * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.
- * @constructor
- * Create a new Tip
- * @param {Object} config The configuration options
- */
-Ext.QuickTip = Ext.extend(Ext.ToolTip, {
-    /**
-     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
-     */
-    /**
-     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
-     */
-    interceptTitles : false,
-
-    // private
-    tagConfig : {
-        namespace : "ext",
-        attribute : "qtip",
-        width : "qwidth",
-        target : "target",
-        title : "qtitle",
-        hide : "hide",
-        cls : "qclass",
-        align : "qalign",
-        anchor : "anchor"
-    },
-
-    // private
-    initComponent : function(){
-        this.target = this.target || Ext.getDoc();
-        this.targets = this.targets || {};
-        Ext.QuickTip.superclass.initComponent.call(this);
-    },
-
-    /**
-     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
-     * supported (for example usage, see the {@link Ext.QuickTips} class header):
-     * 
      
-     * 
    • autoHide
      • 
-     * 
    • cls
      • 
-     * 
    • dismissDelay (overrides the singleton value)
      • 
-     * 
    • target (required)
      • 
-     * 
    • text (required)
      • 
-     * 
    • title
      • 
-     * 
    • width
    
-     * @param {Object} config The config object
-     */
-    register : function(config){
-        var cs = Ext.isArray(config) ? config : arguments;
-        for(var i = 0, len = cs.length; i < len; i++){
-            var c = cs[i];
-            var target = c.target;
-            if(target){
-                if(Ext.isArray(target)){
-                    for(var j = 0, jlen = target.length; j < jlen; j++){
-                        this.targets[Ext.id(target[j])] = c;
-                    }
-                } else{
-                    this.targets[Ext.id(target)] = c;
-                }
-            }
-        }
-    },
-
-    /**
-     * Removes this quick tip from its element and destroys it.
-     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
-     */
-    unregister : function(el){
-        delete this.targets[Ext.id(el)];
-    },
-    
-    /**
-     * Hides a visible tip or cancels an impending show for a particular element.
-     * @param {String/HTMLElement/Element} el The element that is the target of the tip.
-     */
-    cancelShow: function(el){
-        var at = this.activeTarget;
-        el = Ext.get(el).dom;
-        if(this.isVisible()){
-            if(at && at.el == el){
-                this.hide();
-            }
-        }else if(at && at.el == el){
-            this.clearTimer('show');
-        }
-    },
-    
-    getTipCfg: function(e) {
-        var t = e.getTarget(), 
-            ttp, 
-            cfg;
-        if(this.interceptTitles && t.title && Ext.isString(t.title)){
-            ttp = t.title;
-            t.qtip = ttp;
-            t.removeAttribute("title");
-            e.preventDefault();
-        }else{
-            cfg = this.tagConfig;
-            ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
-        }
-        return ttp;
-    },
-
-    // private
-    onTargetOver : function(e){
-        if(this.disabled){
-            return;
-        }
-        this.targetXY = e.getXY();
-        var t = e.getTarget();
-        if(!t || t.nodeType !== 1 || t == document || t == document.body){
-            return;
-        }
-        if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
-            this.clearTimer('hide');
-            this.show();
-            return;
-        }
-        if(t && this.targets[t.id]){
-            this.activeTarget = this.targets[t.id];
-            this.activeTarget.el = t;
-            this.anchor = this.activeTarget.anchor;
-            if(this.anchor){
-                this.anchorTarget = t;
-            }
-            this.delayShow();
-            return;
-        }
-        var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
-        if(ttp = this.getTipCfg(e)){
-            var autoHide = et.getAttribute(cfg.hide, ns);
-            this.activeTarget = {
-                el: t,
-                text: ttp,
-                width: et.getAttribute(cfg.width, ns),
-                autoHide: autoHide != "user" && autoHide !== 'false',
-                title: et.getAttribute(cfg.title, ns),
-                cls: et.getAttribute(cfg.cls, ns),
-                align: et.getAttribute(cfg.align, ns)
-                
-            };
-            this.anchor = et.getAttribute(cfg.anchor, ns);
-            if(this.anchor){
-                this.anchorTarget = t;
-            }
-            this.delayShow();
-        }
-    },
-
-    // private
-    onTargetOut : function(e){
-
-        // If moving within the current target, and it does not have a new tip, ignore the mouseout
-        if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
-            return;
-        }
-
-        this.clearTimer('show');
-        if(this.autoHide !== false){
-            this.delayHide();
-        }
-    },
-
-    // inherit docs
-    showAt : function(xy){
-        var t = this.activeTarget;
-        if(t){
-            if(!this.rendered){
-                this.render(Ext.getBody());
-                this.activeTarget = t;
-            }
-            if(t.width){
-                this.setWidth(t.width);
-                this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
-                this.measureWidth = false;
-            } else{
-                this.measureWidth = true;
-            }
-            this.setTitle(t.title || '');
-            this.body.update(t.text);
-            this.autoHide = t.autoHide;
-            this.dismissDelay = t.dismissDelay || this.dismissDelay;
-            if(this.lastCls){
-                this.el.removeClass(this.lastCls);
-                delete this.lastCls;
-            }
-            if(t.cls){
-                this.el.addClass(t.cls);
-                this.lastCls = t.cls;
-            }
-            if(this.anchor){
-                this.constrainPosition = false;
-            }else if(t.align){ // TODO: this doesn't seem to work consistently
-                xy = this.el.getAlignToXY(t.el, t.align);
-                this.constrainPosition = false;
-            }else{
-                this.constrainPosition = true;
-            }
-        }
-        Ext.QuickTip.superclass.showAt.call(this, xy);
-    },
-
-    // inherit docs
-    hide: function(){
-        delete this.activeTarget;
-        Ext.QuickTip.superclass.hide.call(this);
-    }
-});
-Ext.reg('quicktip', Ext.QuickTip);/**
- * @class Ext.QuickTips
- * 
    Provides attractive and customizable tooltips for any element. The QuickTips
- * singleton is used to configure and manage tooltips globally for multiple elements
- * in a generic manner.  To create individual tooltips with maximum customizability,
- * you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.
    
- * 
    Quicktips can be configured via tag attributes directly in markup, or by
- * registering quick tips programmatically via the {@link #register} method.
    
- * 
    The singleton's instance of {@link Ext.QuickTip} is available via
- * {@link #getQuickTip}, and supports all the methods, and all the all the
- * configuration properties of Ext.QuickTip. These settings will apply to all
- * tooltips shown by the singleton.
    
- * 
    Below is the summary of the configuration properties which can be used.
- * For detailed descriptions see {@link #getQuickTip}
    
- * 
    QuickTips singleton configs (all are optional)
    
- * 
    • dismissDelay
      • 
- * 
    • hideDelay
      • 
- * 
    • maxWidth
      • 
- * 
    • minWidth
      • 
- * 
    • showDelay
      • 
- * 
    • trackMouse
    
- * 
    Target element configs (optional unless otherwise noted)
    
- * 
    • autoHide
      • 
- * 
    • cls
      • 
- * 
    • dismissDelay (overrides singleton value)
      • 
- * 
    • target (required)
      • 
- * 
    • text (required)
      • 
- * 
    • title
      • 
- * 
    • width
    
- * 
    Here is an example showing how some of these config options could be used:
    
- * 
    
-// Init the singleton.  Any tag-based quick tips will start working.
-Ext.QuickTips.init();
-
-// Apply a set of config properties to the singleton
-Ext.apply(Ext.QuickTips.getQuickTip(), {
-    maxWidth: 200,
-    minWidth: 100,
-    showDelay: 50,
-    trackMouse: true
-});
-
-// Manually register a quick tip for a specific element
-Ext.QuickTips.register({
-    target: 'my-div',
-    title: 'My Tooltip',
-    text: 'This tooltip was added in code',
-    width: 100,
-    dismissDelay: 20
-});
-
    
- * 
    To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
- * the ext: namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
- * of supported attributes (optional unless otherwise noted):
    
- * 
    • hide: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the
- * same as autoHide = true.
      • 
- * 
    • qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
      • 
- * 
    • qtip (required): The quick tip text (equivalent to the 'text' target element config).
      • 
- * 
    • qtitle: The quick tip title (equivalent to the 'title' target element config).
      • 
- * 
    • qwidth: The quick tip width (equivalent to the 'width' target element config).
    
- * 
    Here is an example of configuring an HTML element to display a tooltip from markup:
    
- * 
    
-// Add a quick tip to an HTML button
-<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
-     ext:qtip="This is a quick tip from markup!"></input>
-
    
- * @singleton
- */
-Ext.QuickTips = function(){
-    var tip, locks = [];
-    return {
-        /**
-         * Initialize the global QuickTips instance and prepare any quick tips.
-         * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true) 
-         */
-        init : function(autoRender){
-            if(!tip){
-                if(!Ext.isReady){
-                    Ext.onReady(function(){
-                        Ext.QuickTips.init(autoRender);
-                    });
-                    return;
-                }
-                tip = new Ext.QuickTip({elements:'header,body'});
-                if(autoRender !== false){
-                    tip.render(Ext.getBody());
-                }
-            }
-        },
-
-        /**
-         * Enable quick tips globally.
-         */
-        enable : function(){
-            if(tip){
-                locks.pop();
-                if(locks.length < 1){
-                    tip.enable();
-                }
-            }
-        },
-
-        /**
-         * Disable quick tips globally.
-         */
-        disable : function(){
-            if(tip){
-                tip.disable();
-            }
-            locks.push(1);
-        },
-
-        /**
-         * Returns true if quick tips are enabled, else false.
-         * @return {Boolean}
-         */
-        isEnabled : function(){
-            return tip !== undefined && !tip.disabled;
-        },
-
-        /**
-         * Gets the global QuickTips instance.
-         */
-        getQuickTip : function(){
-            return tip;
-        },
-
-        /**
-         * Configures a new quick tip instance and assigns it to a target element.  See
-         * {@link Ext.QuickTip#register} for details.
-         * @param {Object} config The config object
-         */
-        register : function(){
-            tip.register.apply(tip, arguments);
-        },
-
-        /**
-         * Removes any registered quick tip from the target element and destroys it.
-         * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
-         */
-        unregister : function(){
-            tip.unregister.apply(tip, arguments);
-        },
-
-        /**
-         * Alias of {@link #register}.
-         * @param {Object} config The config object
-         */
-        tips :function(){
-            tip.register.apply(tip, arguments);
-        }
-    }
-}();/**
- * @class Ext.tree.TreePanel
- * @extends Ext.Panel
- * 
    The TreePanel provides tree-structured UI representation of tree-structured data.
    
- * 
    {@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
- * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.
    
- * 
    A TreePanel must have a {@link #root} node before it is rendered. This may either be
- * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
- * 
    An example of tree rendered to an existing div:
    
-var tree = new Ext.tree.TreePanel({
-    renderTo: 'tree-div',
-    useArrows: true,
-    autoScroll: true,
-    animate: true,
-    enableDD: true,
-    containerScroll: true,
-    border: false,
-    // auto create TreeLoader
-    dataUrl: 'get-nodes.php',
-
-    root: {
-        nodeType: 'async',
-        text: 'Ext JS',
-        draggable: false,
-        id: 'source'
-    }
-});
-
-tree.getRootNode().expand();
- * 
    
- * 
    The example above would work with a data packet similar to this:
    
-[{
-    "text": "adapter",
-    "id": "source\/adapter",
-    "cls": "folder"
-}, {
-    "text": "dd",
-    "id": "source\/dd",
-    "cls": "folder"
-}, {
-    "text": "debug.js",
-    "id": "source\/debug.js",
-    "leaf": true,
-    "cls": "file"
-}]
- * 
    
- * 
    An example of tree within a Viewport:
    
-new Ext.Viewport({
-    layout: 'border',
-    items: [{
-        region: 'west',
-        collapsible: true,
-        title: 'Navigation',
-        xtype: 'treepanel',
-        width: 200,
-        autoScroll: true,
-        split: true,
-        loader: new Ext.tree.TreeLoader(),
-        root: new Ext.tree.AsyncTreeNode({
-            expanded: true,
-            children: [{
-                text: 'Menu Option 1',
-                leaf: true
-            }, {
-                text: 'Menu Option 2',
-                leaf: true
-            }, {
-                text: 'Menu Option 3',
-                leaf: true
-            }]
-        }),
-        rootVisible: false,
-        listeners: {
-            click: function(n) {
-                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
-            }
-        }
-    }, {
-        region: 'center',
-        xtype: 'tabpanel',
-        // remaining code not shown ...
-    }]
-});
-
    
- *
- * @cfg {Ext.tree.TreeNode} root The root node for the tree.
- * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
- * @cfg {Boolean} lines false to disable tree lines (defaults to true)
- * @cfg {Boolean} enableDD true to enable drag and drop
- * @cfg {Boolean} enableDrag true to enable just drag
- * @cfg {Boolean} enableDrop true to enable just drop
- * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
- * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
- * @cfg {String} ddGroup The DD group this TreePanel belongs to
- * @cfg {Boolean} ddAppendOnly true if the tree should only allow append drops (use for trees which are sorted)
- * @cfg {Boolean} ddScroll true to enable body scrolling
- * @cfg {Boolean} containerScroll true to register this container with ScrollManager
- * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
- * @cfg {String} hlColor The color of the node highlight (defaults to 'C3DAF9')
- * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
- * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
- * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
- * @cfg {Boolean} trackMouseOver false to disable mouse over highlighting
- * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
- * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false)
- * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
- *
- * @constructor
- * @param {Object} config
- * @xtype treepanel
- */
-Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
-    rootVisible : true,
-    animate : Ext.enableFx,
-    lines : true,
-    enableDD : false,
-    hlDrop : Ext.enableFx,
-    pathSeparator : '/',
-
-    /**
-     * @cfg {Array} bubbleEvents
-     * 
    An array of events that, when fired, should be bubbled to any parent container.
-     * See {@link Ext.util.Observable#enableBubble}.
-     * Defaults to [].
-     */
-    bubbleEvents : [],
-
-    initComponent : function(){
-        Ext.tree.TreePanel.superclass.initComponent.call(this);
-
-        if(!this.eventModel){
-            this.eventModel = new Ext.tree.TreeEventModel(this);
-        }
-
-        // initialize the loader
-        var l = this.loader;
-        if(!l){
-            l = new Ext.tree.TreeLoader({
-                dataUrl: this.dataUrl,
-                requestMethod: this.requestMethod
-            });
-        }else if(Ext.isObject(l) && !l.load){
-            l = new Ext.tree.TreeLoader(l);
-        }
-        this.loader = l;
-
-        this.nodeHash = {};
-
-        /**
-        * The root node of this tree.
-        * @type Ext.tree.TreeNode
-        * @property root
-        */
-        if(this.root){
-            var r = this.root;
-            delete this.root;
-            this.setRootNode(r);
-        }
-
-
-        this.addEvents(
-
-            /**
-            * @event append
-            * Fires when a new child node is appended to a node in this tree.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The newly appended node
-            * @param {Number} index The index of the newly appended node
-            */
-           'append',
-           /**
-            * @event remove
-            * Fires when a child node is removed from a node in this tree.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The child node removed
-            */
-           'remove',
-           /**
-            * @event movenode
-            * Fires when a node is moved to a new location in the tree
-            * @param {Tree} tree The owner tree
-            * @param {Node} node The node moved
-            * @param {Node} oldParent The old parent of this node
-            * @param {Node} newParent The new parent of this node
-            * @param {Number} index The index it was moved to
-            */
-           'movenode',
-           /**
-            * @event insert
-            * Fires when a new child node is inserted in a node in this tree.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The child node inserted
-            * @param {Node} refNode The child node the node was inserted before
-            */
-           'insert',
-           /**
-            * @event beforeappend
-            * Fires before a new child is appended to a node in this tree, return false to cancel the append.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The child node to be appended
-            */
-           'beforeappend',
-           /**
-            * @event beforeremove
-            * Fires before a child is removed from a node in this tree, return false to cancel the remove.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The child node to be removed
-            */
-           'beforeremove',
-           /**
-            * @event beforemovenode
-            * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
-            * @param {Tree} tree The owner tree
-            * @param {Node} node The node being moved
-            * @param {Node} oldParent The parent of the node
-            * @param {Node} newParent The new parent the node is moving to
-            * @param {Number} index The index it is being moved to
-            */
-           'beforemovenode',
-           /**
-            * @event beforeinsert
-            * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
-            * @param {Tree} tree The owner tree
-            * @param {Node} parent The parent node
-            * @param {Node} node The child node to be inserted
-            * @param {Node} refNode The child node the node is being inserted before
-            */
-            'beforeinsert',
-
-            /**
-            * @event beforeload
-            * Fires before a node is loaded, return false to cancel
-            * @param {Node} node The node being loaded
-            */
-            'beforeload',
-            /**
-            * @event load
-            * Fires when a node is loaded
-            * @param {Node} node The node that was loaded
-            */
-            'load',
-            /**
-            * @event textchange
-            * Fires when the text for a node is changed
-            * @param {Node} node The node
-            * @param {String} text The new text
-            * @param {String} oldText The old text
-            */
-            'textchange',
-            /**
-            * @event beforeexpandnode
-            * Fires before a node is expanded, return false to cancel.
-            * @param {Node} node The node
-            * @param {Boolean} deep
-            * @param {Boolean} anim
-            */
-            'beforeexpandnode',
-            /**
-            * @event beforecollapsenode
-            * Fires before a node is collapsed, return false to cancel.
-            * @param {Node} node The node
-            * @param {Boolean} deep
-            * @param {Boolean} anim
-            */
-            'beforecollapsenode',
-            /**
-            * @event expandnode
-            * Fires when a node is expanded
-            * @param {Node} node The node
-            */
-            'expandnode',
-            /**
-            * @event disabledchange
-            * Fires when the disabled status of a node changes
-            * @param {Node} node The node
-            * @param {Boolean} disabled
-            */
-            'disabledchange',
-            /**
-            * @event collapsenode
-            * Fires when a node is collapsed
-            * @param {Node} node The node
-            */
-            'collapsenode',
-            /**
-            * @event beforeclick
-            * Fires before click processing on a node. Return false to cancel the default action.
-            * @param {Node} node The node
-            * @param {Ext.EventObject} e The event object
-            */
-            'beforeclick',
-            /**
-            * @event click
-            * Fires when a node is clicked
-            * @param {Node} node The node
-            * @param {Ext.EventObject} e The event object
-            */
-            'click',
-            /**
-            * @event containerclick
-            * Fires when the tree container is clicked
-            * @param {Tree} this
-            * @param {Ext.EventObject} e The event object
-            */
-            'containerclick',
-            /**
-            * @event checkchange
-            * Fires when a node with a checkbox's checked property changes
-            * @param {Node} this This node
-            * @param {Boolean} checked
-            */
-            'checkchange',
-            /**
-            * @event beforedblclick
-            * Fires before double click processing on a node. Return false to cancel the default action.
-            * @param {Node} node The node
-            * @param {Ext.EventObject} e The event object
-            */
-            'beforedblclick',
-            /**
-            * @event dblclick
-            * Fires when a node is double clicked
-            * @param {Node} node The node
-            * @param {Ext.EventObject} e The event object
-            */
-            'dblclick',
-            /**
-            * @event containerdblclick
-            * Fires when the tree container is double clicked
-            * @param {Tree} this
-            * @param {Ext.EventObject} e The event object
-            */
-            'containerdblclick',
-            /**
-            * @event contextmenu
-            * Fires when a node is right clicked. To display a context menu in response to this
-            * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add
-            * a handler for this event:
    
-new Ext.tree.TreePanel({
-    title: 'My TreePanel',
-    root: new Ext.tree.AsyncTreeNode({
-        text: 'The Root',
-        children: [
-            { text: 'Child node 1', leaf: true },
-            { text: 'Child node 2', leaf: true }
-        ]
-    }),
-    contextMenu: new Ext.menu.Menu({
-        items: [{
-            id: 'delete-node',
-            text: 'Delete Node'
-        }],
-        listeners: {
-            itemclick: function(item) {
-                switch (item.id) {
-                    case 'delete-node':
-                        var n = item.parentMenu.contextNode;
-                        if (n.parentNode) {
-                            n.remove();
-                        }
-                        break;
-                }
-            }
-        }
-    }),
-    listeners: {
-        contextmenu: function(node, e) {
-//          Register the context node with the menu so that a Menu Item's handler function can access
-//          it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
-            node.select();
-            var c = node.getOwnerTree().contextMenu;
-            c.contextNode = node;
-            c.showAt(e.getXY());
-        }
-    }
-});
-
    
-            * @param {Node} node The node
-            * @param {Ext.EventObject} e The event object
-            */
-            'contextmenu',
-            /**
-            * @event containercontextmenu
-            * Fires when the tree container is right clicked
-            * @param {Tree} this
-            * @param {Ext.EventObject} e The event object
-            */
-            'containercontextmenu',
-            /**
-            * @event beforechildrenrendered
-            * Fires right before the child nodes for a node are rendered
-            * @param {Node} node The node
-            */
-            'beforechildrenrendered',
-           /**
-             * @event startdrag
-             * Fires when a node starts being dragged
-             * @param {Ext.tree.TreePanel} this
-             * @param {Ext.tree.TreeNode} node
-             * @param {event} e The raw browser event
-             */
-            'startdrag',
-            /**
-             * @event enddrag
-             * Fires when a drag operation is complete
-             * @param {Ext.tree.TreePanel} this
-             * @param {Ext.tree.TreeNode} node
-             * @param {event} e The raw browser event
-             */
-            'enddrag',
-            /**
-             * @event dragdrop
-             * Fires when a dragged node is dropped on a valid DD target
-             * @param {Ext.tree.TreePanel} this
-             * @param {Ext.tree.TreeNode} node
-             * @param {DD} dd The dd it was dropped on
-             * @param {event} e The raw browser event
-             */
-            'dragdrop',
-            /**
-             * @event beforenodedrop
-             * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
-             * passed to handlers has the following properties:
    
-             * 
      
-             * 
    • tree - The TreePanel
      • 
-             * 
    • target - The node being targeted for the drop
      • 
-             * 
    • data - The drag data from the drag source
      • 
-             * 
    • point - The point of the drop - append, above or below
      • 
-             * 
    • source - The drag source
      • 
-             * 
    • rawEvent - Raw mouse event
      • 
-             * 
    • dropNode - Drop node(s) provided by the source OR you can supply node(s)
-             * to be inserted by setting them on this object.
      • 
-             * 
    • cancel - Set this to true to cancel the drop.
      • 
-             * 
    • dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true
-             * will prevent the animated 'repair' from appearing.
      • 
-             * 
    
-             * @param {Object} dropEvent
-             */
-            'beforenodedrop',
-            /**
-             * @event nodedrop
-             * Fires after a DD object is dropped on a node in this tree. The dropEvent
-             * passed to handlers has the following properties:
    
-             * 
      
-             * 
    • tree - The TreePanel
      • 
-             * 
    • target - The node being targeted for the drop
      • 
-             * 
    • data - The drag data from the drag source
      • 
-             * 
    • point - The point of the drop - append, above or below
      • 
-             * 
    • source - The drag source
      • 
-             * 
    • rawEvent - Raw mouse event
      • 
-             * 
    • dropNode - Dropped node(s).
      • 
-             * 
    
-             * @param {Object} dropEvent
-             */
-            'nodedrop',
-             /**
-             * @event nodedragover
-             * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
-             * passed to handlers has the following properties:
    
-             * 
      
-             * 
    • tree - The TreePanel
      • 
-             * 
    • target - The node being targeted for the drop
      • 
-             * 
    • data - The drag data from the drag source
      • 
-             * 
    • point - The point of the drop - append, above or below
      • 
-             * 
    • source - The drag source
      • 
-             * 
    • rawEvent - Raw mouse event
      • 
-             * 
    • dropNode - Drop node(s) provided by the source.
      • 
-             * 
    • cancel - Set this to true to signal drop not allowed.
      • 
-             * 
    
-             * @param {Object} dragOverEvent
-             */
-            'nodedragover'
-        );
-        if(this.singleExpand){
-            this.on('beforeexpandnode', this.restrictExpand, this);
-        }
-    },
-
-    // private
-    proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){
-        if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){
-            ename = ename+'node';
-        }
-        // args inline for performance while bubbling events
-        return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
-    },
-
-
-    /**
-     * Returns this root node for this tree
-     * @return {Node}
-     */
-    getRootNode : function(){
-        return this.root;
-    },
-
-    /**
-     * Sets the root node for this tree. If the TreePanel has already rendered a root node, the
-     * previous root node (and all of its descendants) are destroyed before the new root node is rendered.
-     * @param {Node} node
-     * @return {Node}
-     */
-    setRootNode : function(node){
-        Ext.destroy(this.root);
-        if(!node.render){ // attributes passed
-            node = this.loader.createNode(node);
-        }
-        this.root = node;
-        node.ownerTree = this;
-        node.isRoot = true;
-        this.registerNode(node);
-        if(!this.rootVisible){
-            var uiP = node.attributes.uiProvider;
-            node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);
-        }
-        if(this.innerCt){
-            this.clearInnerCt();
-            this.renderRoot();
-        }
-        return node;
-    },
-    
-    clearInnerCt : function(){
-        this.innerCt.update('');    
-    },
-    
-    // private
-    renderRoot : function(){
-        this.root.render();
-        if(!this.rootVisible){
-            this.root.renderChildren();
-        }
-    },
-
-    /**
-     * Gets a node in this tree by its id
-     * @param {String} id
-     * @return {Node}
-     */
-    getNodeById : function(id){
-        return this.nodeHash[id];
-    },
-
-    // private
-    registerNode : function(node){
-        this.nodeHash[node.id] = node;
-    },
-
-    // private
-    unregisterNode : function(node){
-        delete this.nodeHash[node.id];
-    },
-
-    // private
-    toString : function(){
-        return '[Tree'+(this.id?' '+this.id:'')+']';
-    },
-
-    // private
-    restrictExpand : function(node){
-        var p = node.parentNode;
-        if(p){
-            if(p.expandedChild && p.expandedChild.parentNode == p){
-                p.expandedChild.collapse();
-            }
-            p.expandedChild = node;
-        }
-    },
-
-    /**
-     * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')
-     * @param {String} attribute (optional) Defaults to null (return the actual nodes)
-     * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
-     * @return {Array}
-     */
-    getChecked : function(a, startNode){
-        startNode = startNode || this.root;
-        var r = [];
-        var f = function(){
-            if(this.attributes.checked){
-                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
-            }
-        };
-        startNode.cascade(f);
-        return r;
-    },
-
-    /**
-     * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.
-     * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.
-     */
-    getLoader : function(){
-        return this.loader;
-    },
-
-    /**
-     * Expand all nodes
-     */
-    expandAll : function(){
-        this.root.expand(true);
-    },
-
-    /**
-     * Collapse all nodes
-     */
-    collapseAll : function(){
-        this.root.collapse(true);
-    },
-
-    /**
-     * Returns the selection model used by this TreePanel.
-     * @return {TreeSelectionModel} The selection model used by this TreePanel
-     */
-    getSelectionModel : function(){
-        if(!this.selModel){
-            this.selModel = new Ext.tree.DefaultSelectionModel();
-        }
-        return this.selModel;
-    },
-
-    /**
-     * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
-     * @param {String} path
-     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
-     * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
-     * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
-     */
-    expandPath : function(path, attr, callback){
-        attr = attr || 'id';
-        var keys = path.split(this.pathSeparator);
-        var curNode = this.root;
-        if(curNode.attributes[attr] != keys[1]){ // invalid root
-            if(callback){
-                callback(false, null);
-            }
-            return;
-        }
-        var index = 1;
-        var f = function(){
-            if(++index == keys.length){
-                if(callback){
-                    callback(true, curNode);
-                }
-                return;
-            }
-            var c = curNode.findChild(attr, keys[index]);
-            if(!c){
-                if(callback){
-                    callback(false, curNode);
-                }
-                return;
-            }
-            curNode = c;
-            c.expand(false, false, f);
-        };
-        curNode.expand(false, false, f);
-    },
-
-    /**
-     * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
-     * @param {String} path
-     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
-     * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
-     * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
-     */
-    selectPath : function(path, attr, callback){
-        attr = attr || 'id';
-        var keys = path.split(this.pathSeparator),
-            v = keys.pop();
-        if(keys.length > 1){
-            var f = function(success, node){
-                if(success && node){
-                    var n = node.findChild(attr, v);
-                    if(n){
-                        n.select();
-                        if(callback){
-                            callback(true, n);
-                        }
-                    }else if(callback){
-                        callback(false, n);
-                    }
-                }else{
-                    if(callback){
-                        callback(false, n);
-                    }
-                }
-            };
-            this.expandPath(keys.join(this.pathSeparator), attr, f);
-        }else{
-            this.root.select();
-            if(callback){
-                callback(true, this.root);
-            }
-        }
-    },
-
-    /**
-     * Returns the underlying Element for this tree
-     * @return {Ext.Element} The Element
-     */
-    getTreeEl : function(){
-        return this.body;
-    },
-
-    // private
-    onRender : function(ct, position){
-        Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
-        this.el.addClass('x-tree');
-        this.innerCt = this.body.createChild({tag:'ul',
-               cls:'x-tree-root-ct ' +
-               (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
-    },
-
-    // private
-    initEvents : function(){
-        Ext.tree.TreePanel.superclass.initEvents.call(this);
-
-        if(this.containerScroll){
-            Ext.dd.ScrollManager.register(this.body);
-        }
-        if((this.enableDD || this.enableDrop) && !this.dropZone){
-           /**
-            * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})
-            * @property dropZone
-            * @type Ext.tree.TreeDropZone
-            */
-             this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
-               ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true
-           });
-        }
-        if((this.enableDD || this.enableDrag) && !this.dragZone){
-           /**
-            * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})
-            * @property dragZone
-            * @type Ext.tree.TreeDragZone
-            */
-            this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
-               ddGroup: this.ddGroup || 'TreeDD',
-               scroll: this.ddScroll
-           });
-        }
-        this.getSelectionModel().init(this);
-    },
-
-    // private
-    afterRender : function(){
-        Ext.tree.TreePanel.superclass.afterRender.call(this);
-        this.renderRoot();
-    },
-
-    beforeDestroy : function(){
-        if(this.rendered){
-            Ext.dd.ScrollManager.unregister(this.body);
-            Ext.destroy(this.dropZone, this.dragZone);
-        }
-        Ext.destroy(this.root, this.loader);
-        this.nodeHash = this.root = this.loader = null;
-        Ext.tree.TreePanel.superclass.beforeDestroy.call(this);
-    }
-
-    /**
-     * @cfg {String/Number} activeItem
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} autoDestroy
-     * @hide
-     */
-    /**
-     * @cfg {Object/String/Function} autoLoad
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} autoWidth
-     * @hide
-     */
-    /**
-     * @cfg {Boolean/Number} bufferResize
-     * @hide
-     */
-    /**
-     * @cfg {String} defaultType
-     * @hide
-     */
-    /**
-     * @cfg {Object} defaults
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} hideBorders
-     * @hide
-     */
-    /**
-     * @cfg {Mixed} items
-     * @hide
-     */
-    /**
-     * @cfg {String} layout
-     * @hide
-     */
-    /**
-     * @cfg {Object} layoutConfig
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} monitorResize
-     * @hide
-     */
-    /**
-     * @property items
-     * @hide
-     */
-    /**
-     * @method cascade
-     * @hide
-     */
-    /**
-     * @method doLayout
-     * @hide
-     */
-    /**
-     * @method find
-     * @hide
-     */
-    /**
-     * @method findBy
-     * @hide
-     */
-    /**
-     * @method findById
-     * @hide
-     */
-    /**
-     * @method findByType
-     * @hide
-     */
-    /**
-     * @method getComponent
-     * @hide
-     */
-    /**
-     * @method getLayout
-     * @hide
-     */
-    /**
-     * @method getUpdater
-     * @hide
-     */
-    /**
-     * @method insert
-     * @hide
-     */
-    /**
-     * @method load
-     * @hide
-     */
-    /**
-     * @method remove
-     * @hide
-     */
-    /**
-     * @event add
-     * @hide
-     */
-    /**
-     * @method removeAll
-     * @hide
-     */
-    /**
-     * @event afterLayout
-     * @hide
-     */
-    /**
-     * @event beforeadd
-     * @hide
-     */
-    /**
-     * @event beforeremove
-     * @hide
-     */
-    /**
-     * @event remove
-     * @hide
-     */
-
-
-
-    /**
-     * @cfg {String} allowDomMove  @hide
-     */
-    /**
-     * @cfg {String} autoEl @hide
-     */
-    /**
-     * @cfg {String} applyTo  @hide
-     */
-    /**
-     * @cfg {String} contentEl  @hide
-     */
-    /**
-     * @cfg {Mixed} data  @hide
-     */
-    /**
-     * @cfg {Mixed} tpl  @hide
-     */
-    /**
-     * @cfg {String} tplWriteMode  @hide
-     */
-    /**
-     * @cfg {String} disabledClass  @hide
-     */
-    /**
-     * @cfg {String} elements  @hide
-     */
-    /**
-     * @cfg {String} html  @hide
-     */
-    /**
-     * @cfg {Boolean} preventBodyReset
-     * @hide
-     */
-    /**
-     * @property disabled
-     * @hide
-     */
-    /**
-     * @method applyToMarkup
-     * @hide
-     */
-    /**
-     * @method enable
-     * @hide
-     */
-    /**
-     * @method disable
-     * @hide
-     */
-    /**
-     * @method setDisabled
-     * @hide
-     */
-});
-
-Ext.tree.TreePanel.nodeTypes = {};
-
-Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){
-    this.tree = tree;
-    this.tree.on('render', this.initEvents, this);
-}
-
-Ext.tree.TreeEventModel.prototype = {
-    initEvents : function(){
-        var t = this.tree;
-
-        if(t.trackMouseOver !== false){
-            t.mon(t.innerCt, {
-                scope: this,
-                mouseover: this.delegateOver,
-                mouseout: this.delegateOut
-            });
-        }
-        t.mon(t.getTreeEl(), {
-            scope: this,
-            click: this.delegateClick,
-            dblclick: this.delegateDblClick,
-            contextmenu: this.delegateContextMenu
-        });
-    },
-
-    getNode : function(e){
-        var t;
-        if(t = e.getTarget('.x-tree-node-el', 10)){
-            var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');
-            if(id){
-                return this.tree.getNodeById(id);
-            }
-        }
-        return null;
-    },
-
-    getNodeTarget : function(e){
-        var t = e.getTarget('.x-tree-node-icon', 1);
-        if(!t){
-            t = e.getTarget('.x-tree-node-el', 6);
-        }
-        return t;
-    },
-
-    delegateOut : function(e, t){
-        if(!this.beforeEvent(e)){
-            return;
-        }
-        if(e.getTarget('.x-tree-ec-icon', 1)){
-            var n = this.getNode(e);
-            this.onIconOut(e, n);
-            if(n == this.lastEcOver){
-                delete this.lastEcOver;
-            }
-        }
-        if((t = this.getNodeTarget(e)) && !e.within(t, true)){
-            this.onNodeOut(e, this.getNode(e));
-        }
-    },
-
-    delegateOver : function(e, t){
-        if(!this.beforeEvent(e)){
-            return;
-        }
-        if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF
-            Ext.getBody().on('mouseover', this.trackExit, this);
-            this.trackingDoc = true;
-        }
-        if(this.lastEcOver){ // prevent hung highlight
-            this.onIconOut(e, this.lastEcOver);
-            delete this.lastEcOver;
-        }
-        if(e.getTarget('.x-tree-ec-icon', 1)){
-            this.lastEcOver = this.getNode(e);
-            this.onIconOver(e, this.lastEcOver);
-        }
-        if(t = this.getNodeTarget(e)){
-            this.onNodeOver(e, this.getNode(e));
-        }
-    },
-
-    trackExit : function(e){
-        if(this.lastOverNode){
-            if(this.lastOverNode.ui && !e.within(this.lastOverNode.ui.getEl())){
-                this.onNodeOut(e, this.lastOverNode);
-            }
-            delete this.lastOverNode;
-            Ext.getBody().un('mouseover', this.trackExit, this);
-            this.trackingDoc = false;
-        }
-
-    },
-
-    delegateClick : function(e, t){
-        if(this.beforeEvent(e)){
-            if(e.getTarget('input[type=checkbox]', 1)){
-                this.onCheckboxClick(e, this.getNode(e));
-            }else if(e.getTarget('.x-tree-ec-icon', 1)){
-                this.onIconClick(e, this.getNode(e));
-            }else if(this.getNodeTarget(e)){
-                this.onNodeClick(e, this.getNode(e));
-            }else{
-                this.onContainerEvent(e, 'click');
-            }
-        }
-    },
-
-    delegateDblClick : function(e, t){
-        if(this.beforeEvent(e)){
-            if(this.getNodeTarget(e)){
-                this.onNodeDblClick(e, this.getNode(e));
-            }else{
-                this.onContainerEvent(e, 'dblclick');
-            }
-        }
-    },
-
-    delegateContextMenu : function(e, t){
-        if(this.beforeEvent(e)){
-            if(this.getNodeTarget(e)){
-                this.onNodeContextMenu(e, this.getNode(e));
-            }else{
-                this.onContainerEvent(e, 'contextmenu');
-            }
-        }
-    },
-
-    onContainerEvent: function(e, type){
-        this.tree.fireEvent('container' + type, this.tree, e);
-    },
-
-    onNodeClick : function(e, node){
-        node.ui.onClick(e);
-    },
-
-    onNodeOver : function(e, node){
-        this.lastOverNode = node;
-        node.ui.onOver(e);
-    },
-
-    onNodeOut : function(e, node){
-        node.ui.onOut(e);
-    },
-
-    onIconOver : function(e, node){
-        node.ui.addClass('x-tree-ec-over');
-    },
-
-    onIconOut : function(e, node){
-        node.ui.removeClass('x-tree-ec-over');
-    },
-
-    onIconClick : function(e, node){
-        node.ui.ecClick(e);
-    },
-
-    onCheckboxClick : function(e, node){
-        node.ui.onCheckChange(e);
-    },
-
-    onNodeDblClick : function(e, node){
-        node.ui.onDblClick(e);
-    },
-
-    onNodeContextMenu : function(e, node){
-        node.ui.onContextMenu(e);
-    },
-
-    beforeEvent : function(e){
-        var node = this.getNode(e);
-        if(this.disabled || !node || !node.ui){
-            e.stopEvent();
-            return false;
-        }
-        return true;
-    },
-
-    disable: function(){
-        this.disabled = true;
-    },
-
-    enable: function(){
-        this.disabled = false;
-    }
-};/**
- * @class Ext.tree.DefaultSelectionModel
- * @extends Ext.util.Observable
- * The default single selection for a TreePanel.
- */
-Ext.tree.DefaultSelectionModel = function(config){
-   this.selNode = null;
-   
-   this.addEvents(
-       /**
-        * @event selectionchange
-        * Fires when the selected node changes
-        * @param {DefaultSelectionModel} this
-        * @param {TreeNode} node the new selection
-        */
-       'selectionchange',
-
-       /**
-        * @event beforeselect
-        * Fires before the selected node changes, return false to cancel the change
-        * @param {DefaultSelectionModel} this
-        * @param {TreeNode} node the new selection
-        * @param {TreeNode} node the old selection
-        */
-       'beforeselect'
-   );
-
-    Ext.apply(this, config);
-    Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {
-    init : function(tree){
-        this.tree = tree;
-        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
-        tree.on('click', this.onNodeClick, this);
-    },
-    
-    onNodeClick : function(node, e){
-        this.select(node);
-    },
-    
-    /**
-     * Select a node.
-     * @param {TreeNode} node The node to select
-     * @return {TreeNode} The selected node
-     */
-    select : function(node, /* private*/ selectNextNode){
-        // If node is hidden, select the next node in whatever direction was being moved in.
-        if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
-            return selectNextNode.call(this, node);
-        }
-        var last = this.selNode;
-        if(node == last){
-            node.ui.onSelectedChange(true);
-        }else if(this.fireEvent('beforeselect', this, node, last) !== false){
-            if(last && last.ui){
-                last.ui.onSelectedChange(false);
-            }
-            this.selNode = node;
-            node.ui.onSelectedChange(true);
-            this.fireEvent('selectionchange', this, node, last);
-        }
-        return node;
-    },
-    
-    /**
-     * Deselect a node.
-     * @param {TreeNode} node The node to unselect
-     * @param {Boolean} silent True to stop the selectionchange event from firing.
-     */
-    unselect : function(node, silent){
-        if(this.selNode == node){
-            this.clearSelections(silent);
-        }    
-    },
-    
-    /**
-     * Clear all selections
-     * @param {Boolean} silent True to stop the selectionchange event from firing.
-     */
-    clearSelections : function(silent){
-        var n = this.selNode;
-        if(n){
-            n.ui.onSelectedChange(false);
-            this.selNode = null;
-            if(silent !== true){
-                this.fireEvent('selectionchange', this, null);
-            }
-        }
-        return n;
-    },
-    
-    /**
-     * Get the selected node
-     * @return {TreeNode} The selected node
-     */
-    getSelectedNode : function(){
-        return this.selNode;    
-    },
-    
-    /**
-     * Returns true if the node is selected
-     * @param {TreeNode} node The node to check
-     * @return {Boolean}
-     */
-    isSelected : function(node){
-        return this.selNode == node;  
-    },
-
-    /**
-     * Selects the node above the selected node in the tree, intelligently walking the nodes
-     * @return TreeNode The new selection
-     */
-    selectPrevious : function(/* private */ s){
-        if(!(s = s || this.selNode || this.lastSelNode)){
-            return null;
-        }
-        // Here we pass in the current function to select to indicate the direction we're moving
-        var ps = s.previousSibling;
-        if(ps){
-            if(!ps.isExpanded() || ps.childNodes.length < 1){
-                return this.select(ps, this.selectPrevious);
-            } else{
-                var lc = ps.lastChild;
-                while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){
-                    lc = lc.lastChild;
-                }
-                return this.select(lc, this.selectPrevious);
-            }
-        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
-            return this.select(s.parentNode, this.selectPrevious);
-        }
-        return null;
-    },
-
-    /**
-     * Selects the node above the selected node in the tree, intelligently walking the nodes
-     * @return TreeNode The new selection
-     */
-    selectNext : function(/* private */ s){
-        if(!(s = s || this.selNode || this.lastSelNode)){
-            return null;
-        }
-        // Here we pass in the current function to select to indicate the direction we're moving
-        if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){
-             return this.select(s.firstChild, this.selectNext);
-         }else if(s.nextSibling){
-             return this.select(s.nextSibling, this.selectNext);
-         }else if(s.parentNode){
-            var newS = null;
-            s.parentNode.bubble(function(){
-                if(this.nextSibling){
-                    newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
-                    return false;
-                }
-            });
-            return newS;
-         }
-        return null;
-    },
-
-    onKeyDown : function(e){
-        var s = this.selNode || this.lastSelNode;
-        // undesirable, but required
-        var sm = this;
-        if(!s){
-            return;
-        }
-        var k = e.getKey();
-        switch(k){
-             case e.DOWN:
-                 e.stopEvent();
-                 this.selectNext();
-             break;
-             case e.UP:
-                 e.stopEvent();
-                 this.selectPrevious();
-             break;
-             case e.RIGHT:
-                 e.preventDefault();
-                 if(s.hasChildNodes()){
-                     if(!s.isExpanded()){
-                         s.expand();
-                     }else if(s.firstChild){
-                         this.select(s.firstChild, e);
-                     }
-                 }
-             break;
-             case e.LEFT:
-                 e.preventDefault();
-                 if(s.hasChildNodes() && s.isExpanded()){
-                     s.collapse();
-                 }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
-                     this.select(s.parentNode, e);
-                 }
-             break;
-        };
-    }
-});
-
-/**
- * @class Ext.tree.MultiSelectionModel
- * @extends Ext.util.Observable
- * Multi selection for a TreePanel.
- */
-Ext.tree.MultiSelectionModel = function(config){
-   this.selNodes = [];
-   this.selMap = {};
-   this.addEvents(
-       /**
-        * @event selectionchange
-        * Fires when the selected nodes change
-        * @param {MultiSelectionModel} this
-        * @param {Array} nodes Array of the selected nodes
-        */
-       'selectionchange'
-   );
-    Ext.apply(this, config);
-    Ext.tree.MultiSelectionModel.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {
-    init : function(tree){
-        this.tree = tree;
-        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
-        tree.on('click', this.onNodeClick, this);
-    },
-    
-    onNodeClick : function(node, e){
-        if(e.ctrlKey && this.isSelected(node)){
-            this.unselect(node);
-        }else{
-            this.select(node, e, e.ctrlKey);
-        }
-    },
-    
-    /**
-     * Select a node.
-     * @param {TreeNode} node The node to select
-     * @param {EventObject} e (optional) An event associated with the selection
-     * @param {Boolean} keepExisting True to retain existing selections
-     * @return {TreeNode} The selected node
-     */
-    select : function(node, e, keepExisting){
-        if(keepExisting !== true){
-            this.clearSelections(true);
-        }
-        if(this.isSelected(node)){
-            this.lastSelNode = node;
-            return node;
-        }
-        this.selNodes.push(node);
-        this.selMap[node.id] = node;
-        this.lastSelNode = node;
-        node.ui.onSelectedChange(true);
-        this.fireEvent('selectionchange', this, this.selNodes);
-        return node;
-    },
-    
-    /**
-     * Deselect a node.
-     * @param {TreeNode} node The node to unselect
-     */
-    unselect : function(node){
-        if(this.selMap[node.id]){
-            node.ui.onSelectedChange(false);
-            var sn = this.selNodes;
-            var index = sn.indexOf(node);
-            if(index != -1){
-                this.selNodes.splice(index, 1);
-            }
-            delete this.selMap[node.id];
-            this.fireEvent('selectionchange', this, this.selNodes);
-        }
-    },
-    
-    /**
-     * Clear all selections
-     */
-    clearSelections : function(suppressEvent){
-        var sn = this.selNodes;
-        if(sn.length > 0){
-            for(var i = 0, len = sn.length; i < len; i++){
-                sn[i].ui.onSelectedChange(false);
-            }
-            this.selNodes = [];
-            this.selMap = {};
-            if(suppressEvent !== true){
-                this.fireEvent('selectionchange', this, this.selNodes);
-            }
-        }
-    },
-    
-    /**
-     * Returns true if the node is selected
-     * @param {TreeNode} node The node to check
-     * @return {Boolean}
-     */
-    isSelected : function(node){
-        return this.selMap[node.id] ? true : false;  
-    },
-    
-    /**
-     * Returns an array of the selected nodes
-     * @return {Array}
-     */
-    getSelectedNodes : function(){
-        return this.selNodes;    
-    },
-
-    onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,
-
-    selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,
-
-    selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
-});/**
- * @class Ext.data.Tree
- * @extends Ext.util.Observable
- * Represents a tree data structure and bubbles all the events for its nodes. The nodes
- * in the tree have most standard DOM functionality.
- * @constructor
- * @param {Node} root (optional) The root node
- */
-Ext.data.Tree = function(root){
-   this.nodeHash = {};
-   /**
-    * The root node for this tree
-    * @type Node
-    */
-   this.root = null;
-   if(root){
-       this.setRootNode(root);
-   }
-   this.addEvents(
-       /**
-        * @event append
-        * Fires when a new child node is appended to a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The newly appended node
-        * @param {Number} index The index of the newly appended node
-        */
-       "append",
-       /**
-        * @event remove
-        * Fires when a child node is removed from a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node removed
-        */
-       "remove",
-       /**
-        * @event move
-        * Fires when a node is moved to a new location in the tree
-        * @param {Tree} tree The owner tree
-        * @param {Node} node The node moved
-        * @param {Node} oldParent The old parent of this node
-        * @param {Node} newParent The new parent of this node
-        * @param {Number} index The index it was moved to
-        */
-       "move",
-       /**
-        * @event insert
-        * Fires when a new child node is inserted in a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node inserted
-        * @param {Node} refNode The child node the node was inserted before
-        */
-       "insert",
-       /**
-        * @event beforeappend
-        * Fires before a new child is appended to a node in this tree, return false to cancel the append.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be appended
-        */
-       "beforeappend",
-       /**
-        * @event beforeremove
-        * Fires before a child is removed from a node in this tree, return false to cancel the remove.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be removed
-        */
-       "beforeremove",
-       /**
-        * @event beforemove
-        * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
-        * @param {Tree} tree The owner tree
-        * @param {Node} node The node being moved
-        * @param {Node} oldParent The parent of the node
-        * @param {Node} newParent The new parent the node is moving to
-        * @param {Number} index The index it is being moved to
-        */
-       "beforemove",
-       /**
-        * @event beforeinsert
-        * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be inserted
-        * @param {Node} refNode The child node the node is being inserted before
-        */
-       "beforeinsert"
-   );
-
-    Ext.data.Tree.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.data.Tree, Ext.util.Observable, {
-    /**
-     * @cfg {String} pathSeparator
-     * The token used to separate paths in node ids (defaults to '/').
-     */
-    pathSeparator: "/",
-
-    // private
-    proxyNodeEvent : function(){
-        return this.fireEvent.apply(this, arguments);
-    },
-
-    /**
-     * Returns the root node for this tree.
-     * @return {Node}
-     */
-    getRootNode : function(){
-        return this.root;
-    },
-
-    /**
-     * Sets the root node for this tree.
-     * @param {Node} node
-     * @return {Node}
-     */
-    setRootNode : function(node){
-        this.root = node;
-        node.ownerTree = this;
-        node.isRoot = true;
-        this.registerNode(node);
-        return node;
-    },
-
-    /**
-     * Gets a node in this tree by its id.
-     * @param {String} id
-     * @return {Node}
-     */
-    getNodeById : function(id){
-        return this.nodeHash[id];
-    },
-
-    // private
-    registerNode : function(node){
-        this.nodeHash[node.id] = node;
-    },
-
-    // private
-    unregisterNode : function(node){
-        delete this.nodeHash[node.id];
-    },
-
-    toString : function(){
-        return "[Tree"+(this.id?" "+this.id:"")+"]";
-    }
-});
-
-/**
- * @class Ext.data.Node
- * @extends Ext.util.Observable
- * @cfg {Boolean} leaf true if this node is a leaf and does not have children
- * @cfg {String} id The id for this node. If one is not specified, one is generated.
- * @constructor
- * @param {Object} attributes The attributes/config for the node
- */
-Ext.data.Node = function(attributes){
-    /**
-     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
-     * @type {Object}
-     */
-    this.attributes = attributes || {};
-    this.leaf = this.attributes.leaf;
-    /**
-     * The node id. @type String
-     */
-    this.id = this.attributes.id;
-    if(!this.id){
-        this.id = Ext.id(null, "xnode-");
-        this.attributes.id = this.id;
-    }
-    /**
-     * All child nodes of this node. @type Array
-     */
-    this.childNodes = [];
-    if(!this.childNodes.indexOf){ // indexOf is a must
-        this.childNodes.indexOf = function(o){
-            for(var i = 0, len = this.length; i < len; i++){
-                if(this[i] == o){
-                    return i;
-                }
-            }
-            return -1;
-        };
-    }
-    /**
-     * The parent node for this node. @type Node
-     */
-    this.parentNode = null;
-    /**
-     * The first direct child node of this node, or null if this node has no child nodes. @type Node
-     */
-    this.firstChild = null;
-    /**
-     * The last direct child node of this node, or null if this node has no child nodes. @type Node
-     */
-    this.lastChild = null;
-    /**
-     * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
-     */
-    this.previousSibling = null;
-    /**
-     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
-     */
-    this.nextSibling = null;
-
-    this.addEvents({
-       /**
-        * @event append
-        * Fires when a new child node is appended
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The newly appended node
-        * @param {Number} index The index of the newly appended node
-        */
-       "append" : true,
-       /**
-        * @event remove
-        * Fires when a child node is removed
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The removed node
-        */
-       "remove" : true,
-       /**
-        * @event move
-        * Fires when this node is moved to a new location in the tree
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} oldParent The old parent of this node
-        * @param {Node} newParent The new parent of this node
-        * @param {Number} index The index it was moved to
-        */
-       "move" : true,
-       /**
-        * @event insert
-        * Fires when a new child node is inserted.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node inserted
-        * @param {Node} refNode The child node the node was inserted before
-        */
-       "insert" : true,
-       /**
-        * @event beforeappend
-        * Fires before a new child is appended, return false to cancel the append.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be appended
-        */
-       "beforeappend" : true,
-       /**
-        * @event beforeremove
-        * Fires before a child is removed, return false to cancel the remove.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be removed
-        */
-       "beforeremove" : true,
-       /**
-        * @event beforemove
-        * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} oldParent The parent of this node
-        * @param {Node} newParent The new parent this node is moving to
-        * @param {Number} index The index it is being moved to
-        */
-       "beforemove" : true,
-       /**
-        * @event beforeinsert
-        * Fires before a new child is inserted, return false to cancel the insert.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be inserted
-        * @param {Node} refNode The child node the node is being inserted before
-        */
-       "beforeinsert" : true
-   });
-    this.listeners = this.attributes.listeners;
-    Ext.data.Node.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.data.Node, Ext.util.Observable, {
-    // private
-    fireEvent : function(evtName){
-        // first do standard event for this node
-        if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){
-            return false;
-        }
-        // then bubble it up to the tree if the event wasn't cancelled
-        var ot = this.getOwnerTree();
-        if(ot){
-            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
-                return false;
-            }
-        }
-        return true;
-    },
-
-    /**
-     * Returns true if this node is a leaf
-     * @return {Boolean}
-     */
-    isLeaf : function(){
-        return this.leaf === true;
-    },
-
-    // private
-    setFirstChild : function(node){
-        this.firstChild = node;
-    },
-
-    //private
-    setLastChild : function(node){
-        this.lastChild = node;
-    },
-
-
-    /**
-     * Returns true if this node is the last child of its parent
-     * @return {Boolean}
-     */
-    isLast : function(){
-       return (!this.parentNode ? true : this.parentNode.lastChild == this);
-    },
-
-    /**
-     * Returns true if this node is the first child of its parent
-     * @return {Boolean}
-     */
-    isFirst : function(){
-       return (!this.parentNode ? true : this.parentNode.firstChild == this);
-    },
-
-    /**
-     * Returns true if this node has one or more child nodes, else false.
-     * @return {Boolean}
-     */
-    hasChildNodes : function(){
-        return !this.isLeaf() && this.childNodes.length > 0;
-    },
-    
-    /**
-     * Returns true if this node has one or more child nodes, or if the expandable
-     * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.
-     * @return {Boolean}
-     */
-    isExpandable : function(){
-        return this.attributes.expandable || this.hasChildNodes();
-    },
-
-    /**
-     * Insert node(s) as the last child node of this node.
-     * @param {Node/Array} node The node or Array of nodes to append
-     * @return {Node} The appended node if single append, or null if an array was passed
-     */
-    appendChild : function(node){
-        var multi = false;
-        if(Ext.isArray(node)){
-            multi = node;
-        }else if(arguments.length > 1){
-            multi = arguments;
-        }
-        // if passed an array or multiple args do them one by one
-        if(multi){
-            for(var i = 0, len = multi.length; i < len; i++) {
-            	this.appendChild(multi[i]);
-            }
-        }else{
-            if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
-                return false;
-            }
-            var index = this.childNodes.length;
-            var oldParent = node.parentNode;
-            // it's a move, make sure we move it cleanly
-            if(oldParent){
-                if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
-                    return false;
-                }
-                oldParent.removeChild(node);
-            }
-            index = this.childNodes.length;
-            if(index === 0){
-                this.setFirstChild(node);
-            }
-            this.childNodes.push(node);
-            node.parentNode = this;
-            var ps = this.childNodes[index-1];
-            if(ps){
-                node.previousSibling = ps;
-                ps.nextSibling = node;
-            }else{
-                node.previousSibling = null;
-            }
-            node.nextSibling = null;
-            this.setLastChild(node);
-            node.setOwnerTree(this.getOwnerTree());
-            this.fireEvent("append", this.ownerTree, this, node, index);
-            if(oldParent){
-                node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
-            }
-            return node;
-        }
-    },
-
-    /**
-     * Removes a child node from this node.
-     * @param {Node} node The node to remove
-     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
-     * @return {Node} The removed node
-     */
-    removeChild : function(node, destroy){
-        var index = this.childNodes.indexOf(node);
-        if(index == -1){
-            return false;
-        }
-        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
-            return false;
-        }
-
-        // remove it from childNodes collection
-        this.childNodes.splice(index, 1);
-
-        // update siblings
-        if(node.previousSibling){
-            node.previousSibling.nextSibling = node.nextSibling;
-        }
-        if(node.nextSibling){
-            node.nextSibling.previousSibling = node.previousSibling;
-        }
-
-        // update child refs
-        if(this.firstChild == node){
-            this.setFirstChild(node.nextSibling);
-        }
-        if(this.lastChild == node){
-            this.setLastChild(node.previousSibling);
-        }
-
-        node.clear();
-        this.fireEvent("remove", this.ownerTree, this, node);
-        if(destroy){
-            node.destroy();
-        }
-        return node;
-    },
-    
-    // private
-    clear : function(destroy){
-        // clear any references from the node
-        this.setOwnerTree(null, destroy);
-        this.parentNode = this.previousSibling = this.nextSibling = null
-        if(destroy){
-            this.firstChild = this.lastChild = null; 
-        }
-    },
-    
-    /**
-     * Destroys the node.
-     */
-    destroy : function(){
-        this.purgeListeners();
-        this.clear(true);  
-        Ext.each(this.childNodes, function(n){
-            n.destroy();
-        });
-        this.childNodes = null;
-    },
-
-    /**
-     * Inserts the first node before the second node in this nodes childNodes collection.
-     * @param {Node} node The node to insert
-     * @param {Node} refNode The node to insert before (if null the node is appended)
-     * @return {Node} The inserted node
-     */
-    insertBefore : function(node, refNode){
-        if(!refNode){ // like standard Dom, refNode can be null for append
-            return this.appendChild(node);
-        }
-        // nothing to do
-        if(node == refNode){
-            return false;
-        }
-
-        if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
-            return false;
-        }
-        var index = this.childNodes.indexOf(refNode);
-        var oldParent = node.parentNode;
-        var refIndex = index;
-
-        // when moving internally, indexes will change after remove
-        if(oldParent == this && this.childNodes.indexOf(node) < index){
-            refIndex--;
-        }
-
-        // it's a move, make sure we move it cleanly
-        if(oldParent){
-            if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
-                return false;
-            }
-            oldParent.removeChild(node);
-        }
-        if(refIndex === 0){
-            this.setFirstChild(node);
-        }
-        this.childNodes.splice(refIndex, 0, node);
-        node.parentNode = this;
-        var ps = this.childNodes[refIndex-1];
-        if(ps){
-            node.previousSibling = ps;
-            ps.nextSibling = node;
-        }else{
-            node.previousSibling = null;
-        }
-        node.nextSibling = refNode;
-        refNode.previousSibling = node;
-        node.setOwnerTree(this.getOwnerTree());
-        this.fireEvent("insert", this.ownerTree, this, node, refNode);
-        if(oldParent){
-            node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
-        }
-        return node;
-    },
-
-    /**
-     * Removes this node from its parent
-     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
-     * @return {Node} this
-     */
-    remove : function(destroy){
-        this.parentNode.removeChild(this, destroy);
-        return this;
-    },
-    
-    /**
-     * Removes all child nodes from this node.
-     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
-     * @return {Node} this
-     */
-    removeAll : function(destroy){
-        var cn = this.childNodes,
-            n;
-        while((n = cn[0])){
-            this.removeChild(n, destroy);
-        }
-        return this;
-    },
-
-    /**
-     * Returns the child node at the specified index.
-     * @param {Number} index
-     * @return {Node}
-     */
-    item : function(index){
-        return this.childNodes[index];
-    },
-
-    /**
-     * Replaces one child node in this node with another.
-     * @param {Node} newChild The replacement node
-     * @param {Node} oldChild The node to replace
-     * @return {Node} The replaced node
-     */
-    replaceChild : function(newChild, oldChild){
-        var s = oldChild ? oldChild.nextSibling : null;
-        this.removeChild(oldChild);
-        this.insertBefore(newChild, s);
-        return oldChild;
-    },
-
-    /**
-     * Returns the index of a child node
-     * @param {Node} node
-     * @return {Number} The index of the node or -1 if it was not found
-     */
-    indexOf : function(child){
-        return this.childNodes.indexOf(child);
-    },
-
-    /**
-     * Returns the tree this node is in.
-     * @return {Tree}
-     */
-    getOwnerTree : function(){
-        // if it doesn't have one, look for one
-        if(!this.ownerTree){
-            var p = this;
-            while(p){
-                if(p.ownerTree){
-                    this.ownerTree = p.ownerTree;
-                    break;
-                }
-                p = p.parentNode;
-            }
-        }
-        return this.ownerTree;
-    },
-
-    /**
-     * Returns depth of this node (the root node has a depth of 0)
-     * @return {Number}
-     */
-    getDepth : function(){
-        var depth = 0;
-        var p = this;
-        while(p.parentNode){
-            ++depth;
-            p = p.parentNode;
-        }
-        return depth;
-    },
-
-    // private
-    setOwnerTree : function(tree, destroy){
-        // if it is a move, we need to update everyone
-        if(tree != this.ownerTree){
-            if(this.ownerTree){
-                this.ownerTree.unregisterNode(this);
-            }
-            this.ownerTree = tree;
-            // If we're destroying, we don't need to recurse since it will be called on each child node
-            if(destroy !== true){
-                Ext.each(this.childNodes, function(n){
-                    n.setOwnerTree(tree);
-                });
-            }
-            if(tree){
-                tree.registerNode(this);
-            }
-        }
-    },
-    
-    /**
-     * Changes the id of this node.
-     * @param {String} id The new id for the node.
-     */
-    setId: function(id){
-        if(id !== this.id){
-            var t = this.ownerTree;
-            if(t){
-                t.unregisterNode(this);
-            }
-            this.id = this.attributes.id = id;
-            if(t){
-                t.registerNode(this);
-            }
-            this.onIdChange(id);
-        }
-    },
-    
-    // private
-    onIdChange: Ext.emptyFn,
-
-    /**
-     * Returns the path for this node. The path can be used to expand or select this node programmatically.
-     * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
-     * @return {String} The path
-     */
-    getPath : function(attr){
-        attr = attr || "id";
-        var p = this.parentNode;
-        var b = [this.attributes[attr]];
-        while(p){
-            b.unshift(p.attributes[attr]);
-            p = p.parentNode;
-        }
-        var sep = this.getOwnerTree().pathSeparator;
-        return sep + b.join(sep);
-    },
-
-    /**
-     * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the bubble is stopped.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
-     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
-     */
-    bubble : function(fn, scope, args){
-        var p = this;
-        while(p){
-            if(fn.apply(scope || p, args || [p]) === false){
-                break;
-            }
-            p = p.parentNode;
-        }
-    },
-
-    /**
-     * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the cascade is stopped on that branch.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
-     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
-     */
-    cascade : function(fn, scope, args){
-        if(fn.apply(scope || this, args || [this]) !== false){
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++) {
-            	cs[i].cascade(fn, scope, args);
-            }
-        }
-    },
-
-    /**
-     * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the iteration stops.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node in the iteration.
-     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
-     */
-    eachChild : function(fn, scope, args){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(fn.apply(scope || this, args || [cs[i]]) === false){
-        	    break;
-        	}
-        }
-    },
-
-    /**
-     * Finds the first child that has the attribute with the specified value.
-     * @param {String} attribute The attribute name
-     * @param {Mixed} value The value to search for
-     * @return {Node} The found child or null if none was found
-     */
-    findChild : function(attribute, value){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(cs[i].attributes[attribute] == value){
-        	    return cs[i];
-        	}
-        }
-        return null;
-    },
-
-    /**
-     * Finds the first child by a custom function. The child matches if the function passed returns true.
-     * @param {Function} fn A function which must return true if the passed Node is the required Node.
-     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Node being tested.
-     * @return {Node} The found child or null if none was found
-     */
-    findChildBy : function(fn, scope){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(fn.call(scope||cs[i], cs[i]) === true){
-        	    return cs[i];
-        	}
-        }
-        return null;
-    },
-
-    /**
-     * Sorts this nodes children using the supplied sort function.
-     * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
-     * @param {Object} scope (optional)The scope (this reference) in which the function is executed. Defaults to the browser window.
-     */
-    sort : function(fn, scope){
-        var cs = this.childNodes;
-        var len = cs.length;
-        if(len > 0){
-            var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
-            cs.sort(sortFn);
-            for(var i = 0; i < len; i++){
-                var n = cs[i];
-                n.previousSibling = cs[i-1];
-                n.nextSibling = cs[i+1];
-                if(i === 0){
-                    this.setFirstChild(n);
-                }
-                if(i == len-1){
-                    this.setLastChild(n);
-                }
-            }
-        }
-    },
-
-    /**
-     * Returns true if this node is an ancestor (at any point) of the passed node.
-     * @param {Node} node
-     * @return {Boolean}
-     */
-    contains : function(node){
-        return node.isAncestor(this);
-    },
-
-    /**
-     * Returns true if the passed node is an ancestor (at any point) of this node.
-     * @param {Node} node
-     * @return {Boolean}
-     */
-    isAncestor : function(node){
-        var p = this.parentNode;
-        while(p){
-            if(p == node){
-                return true;
-            }
-            p = p.parentNode;
-        }
-        return false;
-    },
-
-    toString : function(){
-        return "[Node"+(this.id?" "+this.id:"")+"]";
-    }
+Ext.reg('paging', Ext.PagingToolbar);/**
+ * @class Ext.History
+ * @extends Ext.util.Observable
+ * History management component that allows you to register arbitrary tokens that signify application
+ * history state on navigation actions.  You can then handle the history {@link #change} event in order
+ * to reset your application UI to the appropriate state when the user navigates forward or backward through
+ * the browser history stack.
+ * @singleton
+ */
+Ext.History = (function () {
+    var iframe, hiddenField;
+    var ready = false;
+    var currentToken;
+
+    function getHash() {
+        var href = top.location.href, i = href.indexOf("#");
+        return i >= 0 ? href.substr(i + 1) : null;
+    }
+
+    function doSave() {
+        hiddenField.value = currentToken;
+    }
+
+    function handleStateChange(token) {
+        currentToken = token;
+        Ext.History.fireEvent('change', token);
+    }
+
+    function updateIFrame (token) {
+        var html = ['
    ',Ext.util.Format.htmlEncode(token),'
    '].join('');
+        try {
+            var doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write(html);
+            doc.close();
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function checkIFrame() {
+        if (!iframe.contentWindow || !iframe.contentWindow.document) {
+            setTimeout(checkIFrame, 10);
+            return;
+        }
+
+        var doc = iframe.contentWindow.document;
+        var elem = doc.getElementById("state");
+        var token = elem ? elem.innerText : null;
+
+        var hash = getHash();
+
+        setInterval(function () {
+
+            doc = iframe.contentWindow.document;
+            elem = doc.getElementById("state");
+
+            var newtoken = elem ? elem.innerText : null;
+
+            var newHash = getHash();
+
+            if (newtoken !== token) {
+                token = newtoken;
+                handleStateChange(token);
+                top.location.hash = token;
+                hash = token;
+                doSave();
+            } else if (newHash !== hash) {
+                hash = newHash;
+                updateIFrame(newHash);
+            }
+
+        }, 50);
+
+        ready = true;
+
+        Ext.History.fireEvent('ready', Ext.History);
+    }
+
+    function startUp() {
+        currentToken = hiddenField.value ? hiddenField.value : getHash();
+
+        if (Ext.isIE) {
+            checkIFrame();
+        } else {
+            var hash = getHash();
+            setInterval(function () {
+                var newHash = getHash();
+                if (newHash !== hash) {
+                    hash = newHash;
+                    handleStateChange(hash);
+                    doSave();
+                }
+            }, 50);
+            ready = true;
+            Ext.History.fireEvent('ready', Ext.History);
+        }
+    }
+
+    return {
+        /**
+         * The id of the hidden field required for storing the current history token.
+         * @type String
+         * @property
+         */
+        fieldId: 'x-history-field',
+        /**
+         * The id of the iframe required by IE to manage the history stack.
+         * @type String
+         * @property
+         */
+        iframeId: 'x-history-frame',
+
+        events:{},
+
+        /**
+         * Initialize the global History instance.
+         * @param {Boolean} onReady (optional) A callback function that will be called once the history
+         * component is fully initialized.
+         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser window.
+         */
+        init: function (onReady, scope) {
+            if(ready) {
+                Ext.callback(onReady, scope, [this]);
+                return;
+            }
+            if(!Ext.isReady){
+                Ext.onReady(function(){
+                    Ext.History.init(onReady, scope);
+                });
+                return;
+            }
+            hiddenField = Ext.getDom(Ext.History.fieldId);
+            if (Ext.isIE) {
+                iframe = Ext.getDom(Ext.History.iframeId);
+            }
+            this.addEvents(
+                /**
+                 * @event ready
+                 * Fires when the Ext.History singleton has been initialized and is ready for use.
+                 * @param {Ext.History} The Ext.History singleton.
+                 */
+                'ready',
+                /**
+                 * @event change
+                 * Fires when navigation back or forwards within the local page's history occurs.
+                 * @param {String} token An identifier associated with the page state at that point in its history.
+                 */
+                'change'
+            );
+            if(onReady){
+                this.on('ready', onReady, scope, {single:true});
+            }
+            startUp();
+        },
+
+        /**
+         * Add a new token to the history stack. This can be any arbitrary value, although it would
+         * commonly be the concatenation of a component id and another id marking the specifc history
+         * state of that component.  Example usage:
+         * 
    
+// Handle tab changes on a TabPanel
+tabPanel.on('tabchange', function(tabPanel, tab){
+    Ext.History.add(tabPanel.id + ':' + tab.id);
+});
+
    
+         * @param {String} token The value that defines a particular application-specific history state
+         * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
+         * it will not save a new history step. Set to false if the same state can be saved more than once
+         * at the same history stack location (defaults to true).
+         */
+        add: function (token, preventDup) {
+            if(preventDup !== false){
+                if(this.getToken() == token){
+                    return true;
+                }
+            }
+            if (Ext.isIE) {
+                return updateIFrame(token);
+            } else {
+                top.location.hash = token;
+                return true;
+            }
+        },
+
+        /**
+         * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
+         */
+        back: function(){
+            history.go(-1);
+        },
+
+        /**
+         * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
+         */
+        forward: function(){
+            history.go(1);
+        },
+
+        /**
+         * Retrieves the currently-active history token.
+         * @return {String} The token
+         */
+        getToken: function() {
+            return ready ? currentToken : getHash();
+        }
+    };
+})();
+Ext.apply(Ext.History, new Ext.util.Observable());/**
+ * @class Ext.Tip
+ * @extends Ext.Panel
+ * @xtype tip
+ * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
+ * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
+ * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
+ * @constructor
+ * Create a new Tip
+ * @param {Object} config The configuration options
+ */
+Ext.Tip = Ext.extend(Ext.Panel, {
+    /**
+     * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
+     */
+    /**
+     * @cfg {Number} width
+     * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
+     * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
+     */
+    /**
+     * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
+     */
+    minWidth : 40,
+    /**
+     * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
+     */
+    maxWidth : 300,
+    /**
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
+     * for bottom-right shadow (defaults to "sides").
+     */
+    shadow : "sides",
+    /**
+     * @cfg {String} defaultAlign Experimental. The default {@link Ext.Element#alignTo} anchor position value
+     * for this tip relative to its element of origin (defaults to "tl-bl?").
+     */
+    defaultAlign : "tl-bl?",
+    autoRender: true,
+    quickShowInterval : 250,
+
+    // private panel overrides
+    frame:true,
+    hidden:true,
+    baseCls: 'x-tip',
+    floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
+    autoHeight:true,
+
+    closeAction: 'hide',
+
+    // private
+    initComponent : function(){
+        Ext.Tip.superclass.initComponent.call(this);
+        if(this.closable && !this.title){
+            this.elements += ',header';
+        }
+    },
+
+    // private
+    afterRender : function(){
+        Ext.Tip.superclass.afterRender.call(this);
+        if(this.closable){
+            this.addTool({
+                id: 'close',
+                handler: this[this.closeAction],
+                scope: this
+            });
+        }
+    },
+
+    /**
+     * Shows this tip at the specified XY position.  Example usage:
+     * 
    
+// Show the tip at x:50 and y:100
+tip.showAt([50,100]);
+
    
+     * @param {Array} xy An array containing the x and y coordinates
+     */
+    showAt : function(xy){
+        Ext.Tip.superclass.show.call(this);
+        if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
+            this.doAutoWidth();
+        }
+        if(this.constrainPosition){
+            xy = this.el.adjustForConstraints(xy);
+        }
+        this.setPagePosition(xy[0], xy[1]);
+    },
+
+    // protected
+    doAutoWidth : function(adjust){
+        adjust = adjust || 0;
+        var bw = this.body.getTextWidth();
+        if(this.title){
+            bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
+        }
+        bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + adjust;
+        this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
+        
+        // IE7 repaint bug on initial show
+        if(Ext.isIE7 && !this.repainted){
+            this.el.repaint();
+            this.repainted = true;
+        }
+    },
+
+    /**
+     * Experimental. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
+     * anchor position value.  Example usage:
+     * 
    
+// Show the tip at the default position ('tl-br?')
+tip.showBy('my-el');
+
+// Show the tip's top-left corner anchored to the element's top-right corner
+tip.showBy('my-el', 'tl-tr');
+
    
+     * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
+     * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
+     * {@link #defaultAlign} if specified).
+     */
+    showBy : function(el, pos){
+        if(!this.rendered){
+            this.render(Ext.getBody());
+        }
+        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
+    },
+
+    initDraggable : function(){
+        this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
+        this.header.addClass('x-tip-draggable');
+    }
+});
+
+Ext.reg('tip', Ext.Tip);
+
+// private - custom Tip DD implementation
+Ext.Tip.DD = function(tip, config){
+    Ext.apply(this, config);
+    this.tip = tip;
+    Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
+    this.setHandleElId(tip.header.id);
+    this.scroll = false;
+};
+
+Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
+    moveOnly:true,
+    scroll:false,
+    headerOffsets:[100, 25],
+    startDrag : function(){
+        this.tip.el.disableShadow();
+    },
+    endDrag : function(e){
+        this.tip.el.enableShadow(true);
+    }
+});/**
+ * @class Ext.ToolTip
+ * @extends Ext.Tip
+ * A standard tooltip implementation for providing additional information when hovering over a target element.
+ * @xtype tooltip
+ * @constructor
+ * Create a new Tooltip
+ * @param {Object} config The configuration options
+ */
+Ext.ToolTip = Ext.extend(Ext.Tip, {
+    /**
+     * When a Tooltip is configured with the {@link #delegate}
+     * option to cause selected child elements of the {@link #target}
+     * Element to each trigger a seperate show event, this property is set to
+     * the DOM element which triggered the show.
+     * @type DOMElement
+     * @property triggerElement
+     */
+    /**
+     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
+     * for mouseover events to trigger showing this ToolTip.
+     */
+    /**
+     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
+     * mouse exits the target element or after the {@link #dismissDelay}
+     * has expired if set (defaults to true).  If {@link closable} = true
+     * a close tool button will be rendered into the tooltip header.
+     */
+    /**
+     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
+     * after the mouse enters the target element (defaults to 500)
+     */
+    showDelay : 500,
+    /**
+     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
+     * target element but before the tooltip actually hides (defaults to 200).
+     * Set to 0 for the tooltip to hide immediately.
+     */
+    hideDelay : 200,
+    /**
+     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
+     * automatically hides (defaults to 5000). To disable automatic hiding, set
+     * dismissDelay = 0.
+     */
+    dismissDelay : 5000,
+    /**
+     * @cfg {Array} mouseOffset An XY offset from the mouse position where the
+     * tooltip should be shown (defaults to [15,18]).
+     */
+    /**
+     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
+     * moves over the target element (defaults to false).
+     */
+    trackMouse : false,
+    /**
+     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
+     * element, false to anchor it relative to the mouse coordinates (defaults
+     * to true).  When anchorToTarget is true, use
+     * {@link #defaultAlign} to control tooltip alignment to the
+     * target element.  When anchorToTarget is false, use
+     * {@link #anchorPosition} instead to control alignment.
+     */
+    anchorToTarget : true,
+    /**
+     * @cfg {Number} anchorOffset A numeric pixel value used to offset the
+     * default position of the anchor arrow (defaults to 0).  When the anchor
+     * position is on the top or bottom of the tooltip, anchorOffset
+     * will be used as a horizontal offset.  Likewise, when the anchor position
+     * is on the left or right side, anchorOffset will be used as
+     * a vertical offset.
+     */
+    anchorOffset : 0,
+    /**
+     * @cfg {String} delegate 
    Optional. A {@link Ext.DomQuery DomQuery}
+     * selector which allows selection of individual elements within the
+     * {@link #target} element to trigger showing and hiding the
+     * ToolTip as the mouse moves within the target.
    
+     * 
    When specified, the child element of the target which caused a show
+     * event is placed into the {@link #triggerElement} property
+     * before the ToolTip is shown.
    
+     * 
    This may be useful when a Component has regular, repeating elements
+     * in it, each of which need a Tooltip which contains information specific
+     * to that element. For example:
    
+var myGrid = new Ext.grid.gridPanel(gridConfig);
+myGrid.on('render', function(grid) {
+    var store = grid.getStore();  // Capture the Store.
+    var view = grid.getView();    // Capture the GridView.
+    myGrid.tip = new Ext.ToolTip({
+        target: view.mainBody,    // The overall target element.
+        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
+        trackMouse: true,         // Moving within the row should not hide the tip.
+        renderTo: document.body,  // Render immediately so that tip.body can be
+                                  //  referenced prior to the first show.
+        listeners: {              // Change content dynamically depending on which element
+                                  //  triggered the show.
+            beforeshow: function updateTipBody(tip) {
+                var rowIndex = view.findRowIndex(tip.triggerElement);
+                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
+            }
+        }
+    });
+});
+     *
    
+     */
+
+    // private
+    targetCounter : 0,
+
+    constrainPosition : false,
+
+    // private
+    initComponent : function(){
+        Ext.ToolTip.superclass.initComponent.call(this);
+        this.lastActive = new Date();
+        this.initTarget(this.target);
+        this.origAnchor = this.anchor;
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.ToolTip.superclass.onRender.call(this, ct, position);
+        this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
+        this.anchorEl = this.el.createChild({
+            cls: 'x-tip-anchor ' + this.anchorCls
+        });
+    },
+
+    // private
+    afterRender : function(){
+        Ext.ToolTip.superclass.afterRender.call(this);
+        this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);
+    },
+
+    /**
+     * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
+     * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
+     */
+    initTarget : function(target){
+        var t;
+        if((t = Ext.get(target))){
+            if(this.target){
+                var tg = Ext.get(this.target);
+                this.mun(tg, 'mouseover', this.onTargetOver, this);
+                this.mun(tg, 'mouseout', this.onTargetOut, this);
+                this.mun(tg, 'mousemove', this.onMouseMove, this);
+            }
+            this.mon(t, {
+                mouseover: this.onTargetOver,
+                mouseout: this.onTargetOut,
+                mousemove: this.onMouseMove,
+                scope: this
+            });
+            this.target = t;
+        }
+        if(this.anchor){
+            this.anchorTarget = this.target;
+        }
+    },
+
+    // private
+    onMouseMove : function(e){
+        var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
+        if (t) {
+            this.targetXY = e.getXY();
+            if (t === this.triggerElement) {
+                if(!this.hidden && this.trackMouse){
+                    this.setPagePosition(this.getTargetXY());
+                }
+            } else {
+                this.hide();
+                this.lastActive = new Date(0);
+                this.onTargetOver(e);
+            }
+        } else if (!this.closable && this.isVisible()) {
+            this.hide();
+        }
+    },
+
+    // private
+    getTargetXY : function(){
+        if(this.delegate){
+            this.anchorTarget = this.triggerElement;
+        }
+        if(this.anchor){
+            this.targetCounter++;
+            var offsets = this.getOffsets(),
+                xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,
+                dw = Ext.lib.Dom.getViewWidth() - 5,
+                dh = Ext.lib.Dom.getViewHeight() - 5,
+                de = document.documentElement,
+                bd = document.body,
+                scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
+                scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
+                axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
+                sz = this.getSize();
+                
+            this.anchorEl.removeClass(this.anchorCls);
+
+            if(this.targetCounter < 2){
+                if(axy[0] < scrollX){
+                    if(this.anchorToTarget){
+                        this.defaultAlign = 'l-r';
+                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
+                    }
+                    this.anchor = 'left';
+                    return this.getTargetXY();
+                }
+                if(axy[0]+sz.width > dw){
+                    if(this.anchorToTarget){
+                        this.defaultAlign = 'r-l';
+                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
+                    }
+                    this.anchor = 'right';
+                    return this.getTargetXY();
+                }
+                if(axy[1] < scrollY){
+                    if(this.anchorToTarget){
+                        this.defaultAlign = 't-b';
+                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
+                    }
+                    this.anchor = 'top';
+                    return this.getTargetXY();
+                }
+                if(axy[1]+sz.height > dh){
+                    if(this.anchorToTarget){
+                        this.defaultAlign = 'b-t';
+                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
+                    }
+                    this.anchor = 'bottom';
+                    return this.getTargetXY();
+                }
+            }
+
+            this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();
+            this.anchorEl.addClass(this.anchorCls);
+            this.targetCounter = 0;
+            return axy;
+        }else{
+            var mouseOffset = this.getMouseOffset();
+            return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];
+        }
+    },
+
+    getMouseOffset : function(){
+        var offset = this.anchor ? [0,0] : [15,18];
+        if(this.mouseOffset){
+            offset[0] += this.mouseOffset[0];
+            offset[1] += this.mouseOffset[1];
+        }
+        return offset;
+    },
+
+    // private
+    getAnchorPosition : function(){
+        if(this.anchor){
+            this.tipAnchor = this.anchor.charAt(0);
+        }else{
+            var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
+            if(!m){
+               throw 'AnchorTip.defaultAlign is invalid';
+            }
+            this.tipAnchor = m[1].charAt(0);
+        }
+
+        switch(this.tipAnchor){
+            case 't': return 'top';
+            case 'b': return 'bottom';
+            case 'r': return 'right';
+        }
+        return 'left';
+    },
+
+    // private
+    getAnchorAlign : function(){
+        switch(this.anchor){
+            case 'top'  : return 'tl-bl';
+            case 'left' : return 'tl-tr';
+            case 'right': return 'tr-tl';
+            default     : return 'bl-tl';
+        }
+    },
+
+    // private
+    getOffsets : function(){
+        var offsets, 
+            ap = this.getAnchorPosition().charAt(0);
+        if(this.anchorToTarget && !this.trackMouse){
+            switch(ap){
+                case 't':
+                    offsets = [0, 9];
+                    break;
+                case 'b':
+                    offsets = [0, -13];
+                    break;
+                case 'r':
+                    offsets = [-13, 0];
+                    break;
+                default:
+                    offsets = [9, 0];
+                    break;
+            }
+        }else{
+            switch(ap){
+                case 't':
+                    offsets = [-15-this.anchorOffset, 30];
+                    break;
+                case 'b':
+                    offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];
+                    break;
+                case 'r':
+                    offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];
+                    break;
+                default:
+                    offsets = [25, -13-this.anchorOffset];
+                    break;
+            }
+        }
+        var mouseOffset = this.getMouseOffset();
+        offsets[0] += mouseOffset[0];
+        offsets[1] += mouseOffset[1];
+
+        return offsets;
+    },
+
+    // private
+    onTargetOver : function(e){
+        if(this.disabled || e.within(this.target.dom, true)){
+            return;
+        }
+        var t = e.getTarget(this.delegate);
+        if (t) {
+            this.triggerElement = t;
+            this.clearTimer('hide');
+            this.targetXY = e.getXY();
+            this.delayShow();
+        }
+    },
+
+    // private
+    delayShow : function(){
+        if(this.hidden && !this.showTimer){
+            if(this.lastActive.getElapsed() < this.quickShowInterval){
+                this.show();
+            }else{
+                this.showTimer = this.show.defer(this.showDelay, this);
+            }
+        }else if(!this.hidden && this.autoHide !== false){
+            this.show();
+        }
+    },
+
+    // private
+    onTargetOut : function(e){
+        if(this.disabled || e.within(this.target.dom, true)){
+            return;
+        }
+        this.clearTimer('show');
+        if(this.autoHide !== false){
+            this.delayHide();
+        }
+    },
+
+    // private
+    delayHide : function(){
+        if(!this.hidden && !this.hideTimer){
+            this.hideTimer = this.hide.defer(this.hideDelay, this);
+        }
+    },
+
+    /**
+     * Hides this tooltip if visible.
+     */
+    hide: function(){
+        this.clearTimer('dismiss');
+        this.lastActive = new Date();
+        if(this.anchorEl){
+            this.anchorEl.hide();
+        }
+        Ext.ToolTip.superclass.hide.call(this);
+        delete this.triggerElement;
+    },
+
+    /**
+     * Shows this tooltip at the current event target XY position.
+     */
+    show : function(){
+        if(this.anchor){
+            // pre-show it off screen so that the el will have dimensions
+            // for positioning calcs when getting xy next
+            this.showAt([-1000,-1000]);
+            this.origConstrainPosition = this.constrainPosition;
+            this.constrainPosition = false;
+            this.anchor = this.origAnchor;
+        }
+        this.showAt(this.getTargetXY());
+
+        if(this.anchor){
+            this.syncAnchor();
+            this.anchorEl.show();
+            this.constrainPosition = this.origConstrainPosition;
+        }else{
+            this.anchorEl.hide();
+        }
+    },
+
+    // inherit docs
+    showAt : function(xy){
+        this.lastActive = new Date();
+        this.clearTimers();
+        Ext.ToolTip.superclass.showAt.call(this, xy);
+        if(this.dismissDelay && this.autoHide !== false){
+            this.dismissTimer = this.hide.defer(this.dismissDelay, this);
+        }
+        if(this.anchor && !this.anchorEl.isVisible()){
+            this.syncAnchor();
+            this.anchorEl.show();
+        }
+    },
+
+    // private
+    syncAnchor : function(){
+        var anchorPos, targetPos, offset;
+        switch(this.tipAnchor.charAt(0)){
+            case 't':
+                anchorPos = 'b';
+                targetPos = 'tl';
+                offset = [20+this.anchorOffset, 2];
+                break;
+            case 'r':
+                anchorPos = 'l';
+                targetPos = 'tr';
+                offset = [-2, 11+this.anchorOffset];
+                break;
+            case 'b':
+                anchorPos = 't';
+                targetPos = 'bl';
+                offset = [20+this.anchorOffset, -2];
+                break;
+            default:
+                anchorPos = 'r';
+                targetPos = 'tl';
+                offset = [2, 11+this.anchorOffset];
+                break;
+        }
+        this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);
+    },
+
+    // private
+    setPagePosition : function(x, y){
+        Ext.ToolTip.superclass.setPagePosition.call(this, x, y);
+        if(this.anchor){
+            this.syncAnchor();
+        }
+    },
+
+    // private
+    clearTimer : function(name){
+        name = name + 'Timer';
+        clearTimeout(this[name]);
+        delete this[name];
+    },
+
+    // private
+    clearTimers : function(){
+        this.clearTimer('show');
+        this.clearTimer('dismiss');
+        this.clearTimer('hide');
+    },
+
+    // private
+    onShow : function(){
+        Ext.ToolTip.superclass.onShow.call(this);
+        Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
+    },
+
+    // private
+    onHide : function(){
+        Ext.ToolTip.superclass.onHide.call(this);
+        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
+    },
+
+    // private
+    onDocMouseDown : function(e){
+        if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){
+            this.disable();
+            this.enable.defer(100, this);
+        }
+    },
+
+    // private
+    onDisable : function(){
+        this.clearTimers();
+        this.hide();
+    },
+
+    // private
+    adjustPosition : function(x, y){
+        if(this.contstrainPosition){
+            var ay = this.targetXY[1], h = this.getSize().height;
+            if(y <= ay && (y+h) >= ay){
+                y = ay-h-5;
+            }
+        }
+        return {x : x, y: y};
+    },
+    
+    beforeDestroy : function(){
+        this.clearTimers();
+        Ext.destroy(this.anchorEl);
+        delete this.anchorEl;
+        delete this.target;
+        delete this.anchorTarget;
+        delete this.triggerElement;
+        Ext.ToolTip.superclass.beforeDestroy.call(this);    
+    },
+
+    // private
+    onDestroy : function(){
+        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
+        Ext.ToolTip.superclass.onDestroy.call(this);
+    }
+});
+
+Ext.reg('tooltip', Ext.ToolTip);/**
+ * @class Ext.QuickTip
+ * @extends Ext.ToolTip
+ * @xtype quicktip
+ * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
+ * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.
+ * @constructor
+ * Create a new Tip
+ * @param {Object} config The configuration options
+ */
+Ext.QuickTip = Ext.extend(Ext.ToolTip, {
+    /**
+     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
+     */
+    /**
+     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
+     */
+    interceptTitles : false,
+
+    // private
+    tagConfig : {
+        namespace : "ext",
+        attribute : "qtip",
+        width : "qwidth",
+        target : "target",
+        title : "qtitle",
+        hide : "hide",
+        cls : "qclass",
+        align : "qalign",
+        anchor : "anchor"
+    },
+
+    // private
+    initComponent : function(){
+        this.target = this.target || Ext.getDoc();
+        this.targets = this.targets || {};
+        Ext.QuickTip.superclass.initComponent.call(this);
+    },
+
+    /**
+     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
+     * supported (for example usage, see the {@link Ext.QuickTips} class header):
+     * 
      
+     * 
    • autoHide
      • 
+     * 
    • cls
      • 
+     * 
    • dismissDelay (overrides the singleton value)
      • 
+     * 
    • target (required)
      • 
+     * 
    • text (required)
      • 
+     * 
    • title
      • 
+     * 
    • width
    
+     * @param {Object} config The config object
+     */
+    register : function(config){
+        var cs = Ext.isArray(config) ? config : arguments;
+        for(var i = 0, len = cs.length; i < len; i++){
+            var c = cs[i];
+            var target = c.target;
+            if(target){
+                if(Ext.isArray(target)){
+                    for(var j = 0, jlen = target.length; j < jlen; j++){
+                        this.targets[Ext.id(target[j])] = c;
+                    }
+                } else{
+                    this.targets[Ext.id(target)] = c;
+                }
+            }
+        }
+    },
+
+    /**
+     * Removes this quick tip from its element and destroys it.
+     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+     */
+    unregister : function(el){
+        delete this.targets[Ext.id(el)];
+    },
+    
+    /**
+     * Hides a visible tip or cancels an impending show for a particular element.
+     * @param {String/HTMLElement/Element} el The element that is the target of the tip.
+     */
+    cancelShow: function(el){
+        var at = this.activeTarget;
+        el = Ext.get(el).dom;
+        if(this.isVisible()){
+            if(at && at.el == el){
+                this.hide();
+            }
+        }else if(at && at.el == el){
+            this.clearTimer('show');
+        }
+    },
+    
+    getTipCfg: function(e) {
+        var t = e.getTarget(), 
+            ttp, 
+            cfg;
+        if(this.interceptTitles && t.title && Ext.isString(t.title)){
+            ttp = t.title;
+            t.qtip = ttp;
+            t.removeAttribute("title");
+            e.preventDefault();
+        }else{
+            cfg = this.tagConfig;
+            ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
+        }
+        return ttp;
+    },
+
+    // private
+    onTargetOver : function(e){
+        if(this.disabled){
+            return;
+        }
+        this.targetXY = e.getXY();
+        var t = e.getTarget();
+        if(!t || t.nodeType !== 1 || t == document || t == document.body){
+            return;
+        }
+        if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
+            this.clearTimer('hide');
+            this.show();
+            return;
+        }
+        if(t && this.targets[t.id]){
+            this.activeTarget = this.targets[t.id];
+            this.activeTarget.el = t;
+            this.anchor = this.activeTarget.anchor;
+            if(this.anchor){
+                this.anchorTarget = t;
+            }
+            this.delayShow();
+            return;
+        }
+        var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
+        if(ttp = this.getTipCfg(e)){
+            var autoHide = et.getAttribute(cfg.hide, ns);
+            this.activeTarget = {
+                el: t,
+                text: ttp,
+                width: et.getAttribute(cfg.width, ns),
+                autoHide: autoHide != "user" && autoHide !== 'false',
+                title: et.getAttribute(cfg.title, ns),
+                cls: et.getAttribute(cfg.cls, ns),
+                align: et.getAttribute(cfg.align, ns)
+                
+            };
+            this.anchor = et.getAttribute(cfg.anchor, ns);
+            if(this.anchor){
+                this.anchorTarget = t;
+            }
+            this.delayShow();
+        }
+    },
+
+    // private
+    onTargetOut : function(e){
+
+        // If moving within the current target, and it does not have a new tip, ignore the mouseout
+        if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
+            return;
+        }
+
+        this.clearTimer('show');
+        if(this.autoHide !== false){
+            this.delayHide();
+        }
+    },
+
+    // inherit docs
+    showAt : function(xy){
+        var t = this.activeTarget;
+        if(t){
+            if(!this.rendered){
+                this.render(Ext.getBody());
+                this.activeTarget = t;
+            }
+            if(t.width){
+                this.setWidth(t.width);
+                this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
+                this.measureWidth = false;
+            } else{
+                this.measureWidth = true;
+            }
+            this.setTitle(t.title || '');
+            this.body.update(t.text);
+            this.autoHide = t.autoHide;
+            this.dismissDelay = t.dismissDelay || this.dismissDelay;
+            if(this.lastCls){
+                this.el.removeClass(this.lastCls);
+                delete this.lastCls;
+            }
+            if(t.cls){
+                this.el.addClass(t.cls);
+                this.lastCls = t.cls;
+            }
+            if(this.anchor){
+                this.constrainPosition = false;
+            }else if(t.align){ // TODO: this doesn't seem to work consistently
+                xy = this.el.getAlignToXY(t.el, t.align);
+                this.constrainPosition = false;
+            }else{
+                this.constrainPosition = true;
+            }
+        }
+        Ext.QuickTip.superclass.showAt.call(this, xy);
+    },
+
+    // inherit docs
+    hide: function(){
+        delete this.activeTarget;
+        Ext.QuickTip.superclass.hide.call(this);
+    }
+});
+Ext.reg('quicktip', Ext.QuickTip);/**
+ * @class Ext.QuickTips
+ * 
    Provides attractive and customizable tooltips for any element. The QuickTips
+ * singleton is used to configure and manage tooltips globally for multiple elements
+ * in a generic manner.  To create individual tooltips with maximum customizability,
+ * you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.
    
+ * 
    Quicktips can be configured via tag attributes directly in markup, or by
+ * registering quick tips programmatically via the {@link #register} method.
    
+ * 
    The singleton's instance of {@link Ext.QuickTip} is available via
+ * {@link #getQuickTip}, and supports all the methods, and all the all the
+ * configuration properties of Ext.QuickTip. These settings will apply to all
+ * tooltips shown by the singleton.
    
+ * 
    Below is the summary of the configuration properties which can be used.
+ * For detailed descriptions see {@link #getQuickTip}
    
+ * 
    QuickTips singleton configs (all are optional)
    
+ * 
    • dismissDelay
      • 
+ * 
    • hideDelay
      • 
+ * 
    • maxWidth
      • 
+ * 
    • minWidth
      • 
+ * 
    • showDelay
      • 
+ * 
    • trackMouse
    
+ * 
    Target element configs (optional unless otherwise noted)
    
+ * 
    • autoHide
      • 
+ * 
    • cls
      • 
+ * 
    • dismissDelay (overrides singleton value)
      • 
+ * 
    • target (required)
      • 
+ * 
    • text (required)
      • 
+ * 
    • title
      • 
+ * 
    • width
    
+ * 
    Here is an example showing how some of these config options could be used:
    
+ * 
    
+// Init the singleton.  Any tag-based quick tips will start working.
+Ext.QuickTips.init();
+
+// Apply a set of config properties to the singleton
+Ext.apply(Ext.QuickTips.getQuickTip(), {
+    maxWidth: 200,
+    minWidth: 100,
+    showDelay: 50,
+    trackMouse: true
+});
+
+// Manually register a quick tip for a specific element
+Ext.QuickTips.register({
+    target: 'my-div',
+    title: 'My Tooltip',
+    text: 'This tooltip was added in code',
+    width: 100,
+    dismissDelay: 20
+});
+
    
+ * 
    To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
+ * the ext: namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
+ * of supported attributes (optional unless otherwise noted):
    
+ * 
    • hide: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the
+ * same as autoHide = true.
      • 
+ * 
    • qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
      • 
+ * 
    • qtip (required): The quick tip text (equivalent to the 'text' target element config).
      • 
+ * 
    • qtitle: The quick tip title (equivalent to the 'title' target element config).
      • 
+ * 
    • qwidth: The quick tip width (equivalent to the 'width' target element config).
    
+ * 
    Here is an example of configuring an HTML element to display a tooltip from markup:
    
+ * 
    
+// Add a quick tip to an HTML button
+<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
+     ext:qtip="This is a quick tip from markup!"></input>
+
    
+ * @singleton
+ */
+Ext.QuickTips = function(){
+    var tip, locks = [];
+    return {
+        /**
+         * Initialize the global QuickTips instance and prepare any quick tips.
+         * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true) 
+         */
+        init : function(autoRender){
+            if(!tip){
+                if(!Ext.isReady){
+                    Ext.onReady(function(){
+                        Ext.QuickTips.init(autoRender);
+                    });
+                    return;
+                }
+                tip = new Ext.QuickTip({elements:'header,body'});
+                if(autoRender !== false){
+                    tip.render(Ext.getBody());
+                }
+            }
+        },
+
+        /**
+         * Enable quick tips globally.
+         */
+        enable : function(){
+            if(tip){
+                locks.pop();
+                if(locks.length < 1){
+                    tip.enable();
+                }
+            }
+        },
+
+        /**
+         * Disable quick tips globally.
+         */
+        disable : function(){
+            if(tip){
+                tip.disable();
+            }
+            locks.push(1);
+        },
+
+        /**
+         * Returns true if quick tips are enabled, else false.
+         * @return {Boolean}
+         */
+        isEnabled : function(){
+            return tip !== undefined && !tip.disabled;
+        },
+
+        /**
+         * Gets the global QuickTips instance.
+         */
+        getQuickTip : function(){
+            return tip;
+        },
+
+        /**
+         * Configures a new quick tip instance and assigns it to a target element.  See
+         * {@link Ext.QuickTip#register} for details.
+         * @param {Object} config The config object
+         */
+        register : function(){
+            tip.register.apply(tip, arguments);
+        },
+
+        /**
+         * Removes any registered quick tip from the target element and destroys it.
+         * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+         */
+        unregister : function(){
+            tip.unregister.apply(tip, arguments);
+        },
+
+        /**
+         * Alias of {@link #register}.
+         * @param {Object} config The config object
+         */
+        tips :function(){
+            tip.register.apply(tip, arguments);
+        }
+    }
+}();/**
+ * @class Ext.tree.TreePanel
+ * @extends Ext.Panel
+ * 
    The TreePanel provides tree-structured UI representation of tree-structured data.
    
+ * 
    {@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
+ * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.
    
+ * 
    A TreePanel must have a {@link #root} node before it is rendered. This may either be
+ * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
+ * 
    An example of tree rendered to an existing div:
    
+var tree = new Ext.tree.TreePanel({
+    renderTo: 'tree-div',
+    useArrows: true,
+    autoScroll: true,
+    animate: true,
+    enableDD: true,
+    containerScroll: true,
+    border: false,
+    // auto create TreeLoader
+    dataUrl: 'get-nodes.php',
+
+    root: {
+        nodeType: 'async',
+        text: 'Ext JS',
+        draggable: false,
+        id: 'source'
+    }
+});
+
+tree.getRootNode().expand();
+ * 
    
+ * 
    The example above would work with a data packet similar to this:
    
+[{
+    "text": "adapter",
+    "id": "source\/adapter",
+    "cls": "folder"
+}, {
+    "text": "dd",
+    "id": "source\/dd",
+    "cls": "folder"
+}, {
+    "text": "debug.js",
+    "id": "source\/debug.js",
+    "leaf": true,
+    "cls": "file"
+}]
+ * 
    
+ * 
    An example of tree within a Viewport:
    
+new Ext.Viewport({
+    layout: 'border',
+    items: [{
+        region: 'west',
+        collapsible: true,
+        title: 'Navigation',
+        xtype: 'treepanel',
+        width: 200,
+        autoScroll: true,
+        split: true,
+        loader: new Ext.tree.TreeLoader(),
+        root: new Ext.tree.AsyncTreeNode({
+            expanded: true,
+            children: [{
+                text: 'Menu Option 1',
+                leaf: true
+            }, {
+                text: 'Menu Option 2',
+                leaf: true
+            }, {
+                text: 'Menu Option 3',
+                leaf: true
+            }]
+        }),
+        rootVisible: false,
+        listeners: {
+            click: function(n) {
+                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
+            }
+        }
+    }, {
+        region: 'center',
+        xtype: 'tabpanel',
+        // remaining code not shown ...
+    }]
+});
+
    
+ *
+ * @cfg {Ext.tree.TreeNode} root The root node for the tree.
+ * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
+ * @cfg {Boolean} lines false to disable tree lines (defaults to true)
+ * @cfg {Boolean} enableDD true to enable drag and drop
+ * @cfg {Boolean} enableDrag true to enable just drag
+ * @cfg {Boolean} enableDrop true to enable just drop
+ * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
+ * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
+ * @cfg {String} ddGroup The DD group this TreePanel belongs to
+ * @cfg {Boolean} ddAppendOnly true if the tree should only allow append drops (use for trees which are sorted)
+ * @cfg {Boolean} ddScroll true to enable body scrolling
+ * @cfg {Boolean} containerScroll true to register this container with ScrollManager
+ * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
+ * @cfg {String} hlColor The color of the node highlight (defaults to 'C3DAF9')
+ * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
+ * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
+ * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
+ * @cfg {Boolean} trackMouseOver false to disable mouse over highlighting
+ * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel
+ * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
+ * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false)
+ * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
+ *
+ * @constructor
+ * @param {Object} config
+ * @xtype treepanel
+ */
+Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
+    rootVisible : true,
+    animate : Ext.enableFx,
+    lines : true,
+    enableDD : false,
+    hlDrop : Ext.enableFx,
+    pathSeparator : '/',
+
+    /**
+     * @cfg {Array} bubbleEvents
+     * 
    An array of events that, when fired, should be bubbled to any parent container.
+     * See {@link Ext.util.Observable#enableBubble}.
+     * Defaults to [].
+     */
+    bubbleEvents : [],
+
+    initComponent : function(){
+        Ext.tree.TreePanel.superclass.initComponent.call(this);
+
+        if(!this.eventModel){
+            this.eventModel = new Ext.tree.TreeEventModel(this);
+        }
+
+        // initialize the loader
+        var l = this.loader;
+        if(!l){
+            l = new Ext.tree.TreeLoader({
+                dataUrl: this.dataUrl,
+                requestMethod: this.requestMethod
+            });
+        }else if(Ext.isObject(l) && !l.load){
+            l = new Ext.tree.TreeLoader(l);
+        }
+        this.loader = l;
+
+        this.nodeHash = {};
+
+        /**
+        * The root node of this tree.
+        * @type Ext.tree.TreeNode
+        * @property root
+        */
+        if(this.root){
+            var r = this.root;
+            delete this.root;
+            this.setRootNode(r);
+        }
+
+
+        this.addEvents(
+
+            /**
+            * @event append
+            * Fires when a new child node is appended to a node in this tree.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The newly appended node
+            * @param {Number} index The index of the newly appended node
+            */
+           'append',
+           /**
+            * @event remove
+            * Fires when a child node is removed from a node in this tree.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The child node removed
+            */
+           'remove',
+           /**
+            * @event movenode
+            * Fires when a node is moved to a new location in the tree
+            * @param {Tree} tree The owner tree
+            * @param {Node} node The node moved
+            * @param {Node} oldParent The old parent of this node
+            * @param {Node} newParent The new parent of this node
+            * @param {Number} index The index it was moved to
+            */
+           'movenode',
+           /**
+            * @event insert
+            * Fires when a new child node is inserted in a node in this tree.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The child node inserted
+            * @param {Node} refNode The child node the node was inserted before
+            */
+           'insert',
+           /**
+            * @event beforeappend
+            * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The child node to be appended
+            */
+           'beforeappend',
+           /**
+            * @event beforeremove
+            * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The child node to be removed
+            */
+           'beforeremove',
+           /**
+            * @event beforemovenode
+            * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+            * @param {Tree} tree The owner tree
+            * @param {Node} node The node being moved
+            * @param {Node} oldParent The parent of the node
+            * @param {Node} newParent The new parent the node is moving to
+            * @param {Number} index The index it is being moved to
+            */
+           'beforemovenode',
+           /**
+            * @event beforeinsert
+            * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+            * @param {Tree} tree The owner tree
+            * @param {Node} parent The parent node
+            * @param {Node} node The child node to be inserted
+            * @param {Node} refNode The child node the node is being inserted before
+            */
+            'beforeinsert',
+
+            /**
+            * @event beforeload
+            * Fires before a node is loaded, return false to cancel
+            * @param {Node} node The node being loaded
+            */
+            'beforeload',
+            /**
+            * @event load
+            * Fires when a node is loaded
+            * @param {Node} node The node that was loaded
+            */
+            'load',
+            /**
+            * @event textchange
+            * Fires when the text for a node is changed
+            * @param {Node} node The node
+            * @param {String} text The new text
+            * @param {String} oldText The old text
+            */
+            'textchange',
+            /**
+            * @event beforeexpandnode
+            * Fires before a node is expanded, return false to cancel.
+            * @param {Node} node The node
+            * @param {Boolean} deep
+            * @param {Boolean} anim
+            */
+            'beforeexpandnode',
+            /**
+            * @event beforecollapsenode
+            * Fires before a node is collapsed, return false to cancel.
+            * @param {Node} node The node
+            * @param {Boolean} deep
+            * @param {Boolean} anim
+            */
+            'beforecollapsenode',
+            /**
+            * @event expandnode
+            * Fires when a node is expanded
+            * @param {Node} node The node
+            */
+            'expandnode',
+            /**
+            * @event disabledchange
+            * Fires when the disabled status of a node changes
+            * @param {Node} node The node
+            * @param {Boolean} disabled
+            */
+            'disabledchange',
+            /**
+            * @event collapsenode
+            * Fires when a node is collapsed
+            * @param {Node} node The node
+            */
+            'collapsenode',
+            /**
+            * @event beforeclick
+            * Fires before click processing on a node. Return false to cancel the default action.
+            * @param {Node} node The node
+            * @param {Ext.EventObject} e The event object
+            */
+            'beforeclick',
+            /**
+            * @event click
+            * Fires when a node is clicked
+            * @param {Node} node The node
+            * @param {Ext.EventObject} e The event object
+            */
+            'click',
+            /**
+            * @event containerclick
+            * Fires when the tree container is clicked
+            * @param {Tree} this
+            * @param {Ext.EventObject} e The event object
+            */
+            'containerclick',
+            /**
+            * @event checkchange
+            * Fires when a node with a checkbox's checked property changes
+            * @param {Node} this This node
+            * @param {Boolean} checked
+            */
+            'checkchange',
+            /**
+            * @event beforedblclick
+            * Fires before double click processing on a node. Return false to cancel the default action.
+            * @param {Node} node The node
+            * @param {Ext.EventObject} e The event object
+            */
+            'beforedblclick',
+            /**
+            * @event dblclick
+            * Fires when a node is double clicked
+            * @param {Node} node The node
+            * @param {Ext.EventObject} e The event object
+            */
+            'dblclick',
+            /**
+            * @event containerdblclick
+            * Fires when the tree container is double clicked
+            * @param {Tree} this
+            * @param {Ext.EventObject} e The event object
+            */
+            'containerdblclick',
+            /**
+            * @event contextmenu
+            * Fires when a node is right clicked. To display a context menu in response to this
+            * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add
+            * a handler for this event:
    
+new Ext.tree.TreePanel({
+    title: 'My TreePanel',
+    root: new Ext.tree.AsyncTreeNode({
+        text: 'The Root',
+        children: [
+            { text: 'Child node 1', leaf: true },
+            { text: 'Child node 2', leaf: true }
+        ]
+    }),
+    contextMenu: new Ext.menu.Menu({
+        items: [{
+            id: 'delete-node',
+            text: 'Delete Node'
+        }],
+        listeners: {
+            itemclick: function(item) {
+                switch (item.id) {
+                    case 'delete-node':
+                        var n = item.parentMenu.contextNode;
+                        if (n.parentNode) {
+                            n.remove();
+                        }
+                        break;
+                }
+            }
+        }
+    }),
+    listeners: {
+        contextmenu: function(node, e) {
+//          Register the context node with the menu so that a Menu Item's handler function can access
+//          it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
+            node.select();
+            var c = node.getOwnerTree().contextMenu;
+            c.contextNode = node;
+            c.showAt(e.getXY());
+        }
+    }
+});
+
    
+            * @param {Node} node The node
+            * @param {Ext.EventObject} e The event object
+            */
+            'contextmenu',
+            /**
+            * @event containercontextmenu
+            * Fires when the tree container is right clicked
+            * @param {Tree} this
+            * @param {Ext.EventObject} e The event object
+            */
+            'containercontextmenu',
+            /**
+            * @event beforechildrenrendered
+            * Fires right before the child nodes for a node are rendered
+            * @param {Node} node The node
+            */
+            'beforechildrenrendered',
+           /**
+             * @event startdrag
+             * Fires when a node starts being dragged
+             * @param {Ext.tree.TreePanel} this
+             * @param {Ext.tree.TreeNode} node
+             * @param {event} e The raw browser event
+             */
+            'startdrag',
+            /**
+             * @event enddrag
+             * Fires when a drag operation is complete
+             * @param {Ext.tree.TreePanel} this
+             * @param {Ext.tree.TreeNode} node
+             * @param {event} e The raw browser event
+             */
+            'enddrag',
+            /**
+             * @event dragdrop
+             * Fires when a dragged node is dropped on a valid DD target
+             * @param {Ext.tree.TreePanel} this
+             * @param {Ext.tree.TreeNode} node
+             * @param {DD} dd The dd it was dropped on
+             * @param {event} e The raw browser event
+             */
+            'dragdrop',
+            /**
+             * @event beforenodedrop
+             * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
+             * passed to handlers has the following properties:
    
+             * 
      
+             * 
    • tree - The TreePanel
      • 
+             * 
    • target - The node being targeted for the drop
      • 
+             * 
    • data - The drag data from the drag source
      • 
+             * 
    • point - The point of the drop - append, above or below
      • 
+             * 
    • source - The drag source
      • 
+             * 
    • rawEvent - Raw mouse event
      • 
+             * 
    • dropNode - Drop node(s) provided by the source OR you can supply node(s)
+             * to be inserted by setting them on this object.
      • 
+             * 
    • cancel - Set this to true to cancel the drop.
      • 
+             * 
    • dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true
+             * will prevent the animated 'repair' from appearing.
      • 
+             * 
    
+             * @param {Object} dropEvent
+             */
+            'beforenodedrop',
+            /**
+             * @event nodedrop
+             * Fires after a DD object is dropped on a node in this tree. The dropEvent
+             * passed to handlers has the following properties:
    
+             * 
      
+             * 
    • tree - The TreePanel
      • 
+             * 
    • target - The node being targeted for the drop
      • 
+             * 
    • data - The drag data from the drag source
      • 
+             * 
    • point - The point of the drop - append, above or below
      • 
+             * 
    • source - The drag source
      • 
+             * 
    • rawEvent - Raw mouse event
      • 
+             * 
    • dropNode - Dropped node(s).
      • 
+             * 
    
+             * @param {Object} dropEvent
+             */
+            'nodedrop',
+             /**
+             * @event nodedragover
+             * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
+             * passed to handlers has the following properties:
    
+             * 
      
+             * 
    • tree - The TreePanel
      • 
+             * 
    • target - The node being targeted for the drop
      • 
+             * 
    • data - The drag data from the drag source
      • 
+             * 
    • point - The point of the drop - append, above or below
      • 
+             * 
    • source - The drag source
      • 
+             * 
    • rawEvent - Raw mouse event
      • 
+             * 
    • dropNode - Drop node(s) provided by the source.
      • 
+             * 
    • cancel - Set this to true to signal drop not allowed.
      • 
+             * 
    
+             * @param {Object} dragOverEvent
+             */
+            'nodedragover'
+        );
+        if(this.singleExpand){
+            this.on('beforeexpandnode', this.restrictExpand, this);
+        }
+    },
+
+    // private
+    proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){
+        if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){
+            ename = ename+'node';
+        }
+        // args inline for performance while bubbling events
+        return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
+    },
+
+
+    /**
+     * Returns this root node for this tree
+     * @return {Node}
+     */
+    getRootNode : function(){
+        return this.root;
+    },
+
+    /**
+     * Sets the root node for this tree. If the TreePanel has already rendered a root node, the
+     * previous root node (and all of its descendants) are destroyed before the new root node is rendered.
+     * @param {Node} node
+     * @return {Node}
+     */
+    setRootNode : function(node){
+        Ext.destroy(this.root);
+        if(!node.render){ // attributes passed
+            node = this.loader.createNode(node);
+        }
+        this.root = node;
+        node.ownerTree = this;
+        node.isRoot = true;
+        this.registerNode(node);
+        if(!this.rootVisible){
+            var uiP = node.attributes.uiProvider;
+            node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);
+        }
+        if(this.innerCt){
+            this.clearInnerCt();
+            this.renderRoot();
+        }
+        return node;
+    },
+    
+    clearInnerCt : function(){
+        this.innerCt.update('');    
+    },
+    
+    // private
+    renderRoot : function(){
+        this.root.render();
+        if(!this.rootVisible){
+            this.root.renderChildren();
+        }
+    },
+
+    /**
+     * Gets a node in this tree by its id
+     * @param {String} id
+     * @return {Node}
+     */
+    getNodeById : function(id){
+        return this.nodeHash[id];
+    },
+
+    // private
+    registerNode : function(node){
+        this.nodeHash[node.id] = node;
+    },
+
+    // private
+    unregisterNode : function(node){
+        delete this.nodeHash[node.id];
+    },
+
+    // private
+    toString : function(){
+        return '[Tree'+(this.id?' '+this.id:'')+']';
+    },
+
+    // private
+    restrictExpand : function(node){
+        var p = node.parentNode;
+        if(p){
+            if(p.expandedChild && p.expandedChild.parentNode == p){
+                p.expandedChild.collapse();
+            }
+            p.expandedChild = node;
+        }
+    },
+
+    /**
+     * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')
+     * @param {String} attribute (optional) Defaults to null (return the actual nodes)
+     * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
+     * @return {Array}
+     */
+    getChecked : function(a, startNode){
+        startNode = startNode || this.root;
+        var r = [];
+        var f = function(){
+            if(this.attributes.checked){
+                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
+            }
+        };
+        startNode.cascade(f);
+        return r;
+    },
+
+    /**
+     * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.
+     * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.
+     */
+    getLoader : function(){
+        return this.loader;
+    },
+
+    /**
+     * Expand all nodes
+     */
+    expandAll : function(){
+        this.root.expand(true);
+    },
+
+    /**
+     * Collapse all nodes
+     */
+    collapseAll : function(){
+        this.root.collapse(true);
+    },
+
+    /**
+     * Returns the selection model used by this TreePanel.
+     * @return {TreeSelectionModel} The selection model used by this TreePanel
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Ext.tree.DefaultSelectionModel();
+        }
+        return this.selModel;
+    },
+
+    /**
+     * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
+     * @param {String} path
+     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
+     * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
+     * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
+     */
+    expandPath : function(path, attr, callback){
+        attr = attr || 'id';
+        var keys = path.split(this.pathSeparator);
+        var curNode = this.root;
+        if(curNode.attributes[attr] != keys[1]){ // invalid root
+            if(callback){
+                callback(false, null);
+            }
+            return;
+        }
+        var index = 1;
+        var f = function(){
+            if(++index == keys.length){
+                if(callback){
+                    callback(true, curNode);
+                }
+                return;
+            }
+            var c = curNode.findChild(attr, keys[index]);
+            if(!c){
+                if(callback){
+                    callback(false, curNode);
+                }
+                return;
+            }
+            curNode = c;
+            c.expand(false, false, f);
+        };
+        curNode.expand(false, false, f);
+    },
+
+    /**
+     * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
+     * @param {String} path
+     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
+     * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
+     * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
+     */
+    selectPath : function(path, attr, callback){
+        attr = attr || 'id';
+        var keys = path.split(this.pathSeparator),
+            v = keys.pop();
+        if(keys.length > 1){
+            var f = function(success, node){
+                if(success && node){
+                    var n = node.findChild(attr, v);
+                    if(n){
+                        n.select();
+                        if(callback){
+                            callback(true, n);
+                        }
+                    }else if(callback){
+                        callback(false, n);
+                    }
+                }else{
+                    if(callback){
+                        callback(false, n);
+                    }
+                }
+            };
+            this.expandPath(keys.join(this.pathSeparator), attr, f);
+        }else{
+            this.root.select();
+            if(callback){
+                callback(true, this.root);
+            }
+        }
+    },
+
+    /**
+     * Returns the underlying Element for this tree
+     * @return {Ext.Element} The Element
+     */
+    getTreeEl : function(){
+        return this.body;
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
+        this.el.addClass('x-tree');
+        this.innerCt = this.body.createChild({tag:'ul',
+               cls:'x-tree-root-ct ' +
+               (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
+    },
+
+    // private
+    initEvents : function(){
+        Ext.tree.TreePanel.superclass.initEvents.call(this);
+
+        if(this.containerScroll){
+            Ext.dd.ScrollManager.register(this.body);
+        }
+        if((this.enableDD || this.enableDrop) && !this.dropZone){
+           /**
+            * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})
+            * @property dropZone
+            * @type Ext.tree.TreeDropZone
+            */
+             this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
+               ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true
+           });
+        }
+        if((this.enableDD || this.enableDrag) && !this.dragZone){
+           /**
+            * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})
+            * @property dragZone
+            * @type Ext.tree.TreeDragZone
+            */
+            this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
+               ddGroup: this.ddGroup || 'TreeDD',
+               scroll: this.ddScroll
+           });
+        }
+        this.getSelectionModel().init(this);
+    },
+
+    // private
+    afterRender : function(){
+        Ext.tree.TreePanel.superclass.afterRender.call(this);
+        this.renderRoot();
+    },
+
+    beforeDestroy : function(){
+        if(this.rendered){
+            Ext.dd.ScrollManager.unregister(this.body);
+            Ext.destroy(this.dropZone, this.dragZone);
+        }
+        Ext.destroy(this.root, this.loader);
+        this.nodeHash = this.root = this.loader = null;
+        Ext.tree.TreePanel.superclass.beforeDestroy.call(this);
+    }
+
+    /**
+     * @cfg {String/Number} activeItem
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} autoDestroy
+     * @hide
+     */
+    /**
+     * @cfg {Object/String/Function} autoLoad
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} autoWidth
+     * @hide
+     */
+    /**
+     * @cfg {Boolean/Number} bufferResize
+     * @hide
+     */
+    /**
+     * @cfg {String} defaultType
+     * @hide
+     */
+    /**
+     * @cfg {Object} defaults
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} hideBorders
+     * @hide
+     */
+    /**
+     * @cfg {Mixed} items
+     * @hide
+     */
+    /**
+     * @cfg {String} layout
+     * @hide
+     */
+    /**
+     * @cfg {Object} layoutConfig
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} monitorResize
+     * @hide
+     */
+    /**
+     * @property items
+     * @hide
+     */
+    /**
+     * @method cascade
+     * @hide
+     */
+    /**
+     * @method doLayout
+     * @hide
+     */
+    /**
+     * @method find
+     * @hide
+     */
+    /**
+     * @method findBy
+     * @hide
+     */
+    /**
+     * @method findById
+     * @hide
+     */
+    /**
+     * @method findByType
+     * @hide
+     */
+    /**
+     * @method getComponent
+     * @hide
+     */
+    /**
+     * @method getLayout
+     * @hide
+     */
+    /**
+     * @method getUpdater
+     * @hide
+     */
+    /**
+     * @method insert
+     * @hide
+     */
+    /**
+     * @method load
+     * @hide
+     */
+    /**
+     * @method remove
+     * @hide
+     */
+    /**
+     * @event add
+     * @hide
+     */
+    /**
+     * @method removeAll
+     * @hide
+     */
+    /**
+     * @event afterLayout
+     * @hide
+     */
+    /**
+     * @event beforeadd
+     * @hide
+     */
+    /**
+     * @event beforeremove
+     * @hide
+     */
+    /**
+     * @event remove
+     * @hide
+     */
+
+
+
+    /**
+     * @cfg {String} allowDomMove  @hide
+     */
+    /**
+     * @cfg {String} autoEl @hide
+     */
+    /**
+     * @cfg {String} applyTo  @hide
+     */
+    /**
+     * @cfg {String} contentEl  @hide
+     */
+    /**
+     * @cfg {Mixed} data  @hide
+     */
+    /**
+     * @cfg {Mixed} tpl  @hide
+     */
+    /**
+     * @cfg {String} tplWriteMode  @hide
+     */
+    /**
+     * @cfg {String} disabledClass  @hide
+     */
+    /**
+     * @cfg {String} elements  @hide
+     */
+    /**
+     * @cfg {String} html  @hide
+     */
+    /**
+     * @cfg {Boolean} preventBodyReset
+     * @hide
+     */
+    /**
+     * @property disabled
+     * @hide
+     */
+    /**
+     * @method applyToMarkup
+     * @hide
+     */
+    /**
+     * @method enable
+     * @hide
+     */
+    /**
+     * @method disable
+     * @hide
+     */
+    /**
+     * @method setDisabled
+     * @hide
+     */
+});
+
+Ext.tree.TreePanel.nodeTypes = {};
+
+Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){
+    this.tree = tree;
+    this.tree.on('render', this.initEvents, this);
+}
+
+Ext.tree.TreeEventModel.prototype = {
+    initEvents : function(){
+        var t = this.tree;
+
+        if(t.trackMouseOver !== false){
+            t.mon(t.innerCt, {
+                scope: this,
+                mouseover: this.delegateOver,
+                mouseout: this.delegateOut
+            });
+        }
+        t.mon(t.getTreeEl(), {
+            scope: this,
+            click: this.delegateClick,
+            dblclick: this.delegateDblClick,
+            contextmenu: this.delegateContextMenu
+        });
+    },
+
+    getNode : function(e){
+        var t;
+        if(t = e.getTarget('.x-tree-node-el', 10)){
+            var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');
+            if(id){
+                return this.tree.getNodeById(id);
+            }
+        }
+        return null;
+    },
+
+    getNodeTarget : function(e){
+        var t = e.getTarget('.x-tree-node-icon', 1);
+        if(!t){
+            t = e.getTarget('.x-tree-node-el', 6);
+        }
+        return t;
+    },
+
+    delegateOut : function(e, t){
+        if(!this.beforeEvent(e)){
+            return;
+        }
+        if(e.getTarget('.x-tree-ec-icon', 1)){
+            var n = this.getNode(e);
+            this.onIconOut(e, n);
+            if(n == this.lastEcOver){
+                delete this.lastEcOver;
+            }
+        }
+        if((t = this.getNodeTarget(e)) && !e.within(t, true)){
+            this.onNodeOut(e, this.getNode(e));
+        }
+    },
+
+    delegateOver : function(e, t){
+        if(!this.beforeEvent(e)){
+            return;
+        }
+        if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF
+            Ext.getBody().on('mouseover', this.trackExit, this);
+            this.trackingDoc = true;
+        }
+        if(this.lastEcOver){ // prevent hung highlight
+            this.onIconOut(e, this.lastEcOver);
+            delete this.lastEcOver;
+        }
+        if(e.getTarget('.x-tree-ec-icon', 1)){
+            this.lastEcOver = this.getNode(e);
+            this.onIconOver(e, this.lastEcOver);
+        }
+        if(t = this.getNodeTarget(e)){
+            this.onNodeOver(e, this.getNode(e));
+        }
+    },
+
+    trackExit : function(e){
+        if(this.lastOverNode){
+            if(this.lastOverNode.ui && !e.within(this.lastOverNode.ui.getEl())){
+                this.onNodeOut(e, this.lastOverNode);
+            }
+            delete this.lastOverNode;
+            Ext.getBody().un('mouseover', this.trackExit, this);
+            this.trackingDoc = false;
+        }
+
+    },
+
+    delegateClick : function(e, t){
+        if(this.beforeEvent(e)){
+            if(e.getTarget('input[type=checkbox]', 1)){
+                this.onCheckboxClick(e, this.getNode(e));
+            }else if(e.getTarget('.x-tree-ec-icon', 1)){
+                this.onIconClick(e, this.getNode(e));
+            }else if(this.getNodeTarget(e)){
+                this.onNodeClick(e, this.getNode(e));
+            }else{
+                this.onContainerEvent(e, 'click');
+            }
+        }
+    },
+
+    delegateDblClick : function(e, t){
+        if(this.beforeEvent(e)){
+            if(this.getNodeTarget(e)){
+                this.onNodeDblClick(e, this.getNode(e));
+            }else{
+                this.onContainerEvent(e, 'dblclick');
+            }
+        }
+    },
+
+    delegateContextMenu : function(e, t){
+        if(this.beforeEvent(e)){
+            if(this.getNodeTarget(e)){
+                this.onNodeContextMenu(e, this.getNode(e));
+            }else{
+                this.onContainerEvent(e, 'contextmenu');
+            }
+        }
+    },
+
+    onContainerEvent: function(e, type){
+        this.tree.fireEvent('container' + type, this.tree, e);
+    },
+
+    onNodeClick : function(e, node){
+        node.ui.onClick(e);
+    },
+
+    onNodeOver : function(e, node){
+        this.lastOverNode = node;
+        node.ui.onOver(e);
+    },
+
+    onNodeOut : function(e, node){
+        node.ui.onOut(e);
+    },
+
+    onIconOver : function(e, node){
+        node.ui.addClass('x-tree-ec-over');
+    },
+
+    onIconOut : function(e, node){
+        node.ui.removeClass('x-tree-ec-over');
+    },
+
+    onIconClick : function(e, node){
+        node.ui.ecClick(e);
+    },
+
+    onCheckboxClick : function(e, node){
+        node.ui.onCheckChange(e);
+    },
+
+    onNodeDblClick : function(e, node){
+        node.ui.onDblClick(e);
+    },
+
+    onNodeContextMenu : function(e, node){
+        node.ui.onContextMenu(e);
+    },
+
+    beforeEvent : function(e){
+        var node = this.getNode(e);
+        if(this.disabled || !node || !node.ui){
+            e.stopEvent();
+            return false;
+        }
+        return true;
+    },
+
+    disable: function(){
+        this.disabled = true;
+    },
+
+    enable: function(){
+        this.disabled = false;
+    }
+};/**
+ * @class Ext.tree.DefaultSelectionModel
+ * @extends Ext.util.Observable
+ * The default single selection for a TreePanel.
+ */
+Ext.tree.DefaultSelectionModel = function(config){
+   this.selNode = null;
+   
+   this.addEvents(
+       /**
+        * @event selectionchange
+        * Fires when the selected node changes
+        * @param {DefaultSelectionModel} this
+        * @param {TreeNode} node the new selection
+        */
+       'selectionchange',
+
+       /**
+        * @event beforeselect
+        * Fires before the selected node changes, return false to cancel the change
+        * @param {DefaultSelectionModel} this
+        * @param {TreeNode} node the new selection
+        * @param {TreeNode} node the old selection
+        */
+       'beforeselect'
+   );
+
+    Ext.apply(this, config);
+    Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {
+    init : function(tree){
+        this.tree = tree;
+        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
+        tree.on('click', this.onNodeClick, this);
+    },
+    
+    onNodeClick : function(node, e){
+        this.select(node);
+    },
+    
+    /**
+     * Select a node.
+     * @param {TreeNode} node The node to select
+     * @return {TreeNode} The selected node
+     */
+    select : function(node, /* private*/ selectNextNode){
+        // If node is hidden, select the next node in whatever direction was being moved in.
+        if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
+            return selectNextNode.call(this, node);
+        }
+        var last = this.selNode;
+        if(node == last){
+            node.ui.onSelectedChange(true);
+        }else if(this.fireEvent('beforeselect', this, node, last) !== false){
+            if(last && last.ui){
+                last.ui.onSelectedChange(false);
+            }
+            this.selNode = node;
+            node.ui.onSelectedChange(true);
+            this.fireEvent('selectionchange', this, node, last);
+        }
+        return node;
+    },
+    
+    /**
+     * Deselect a node.
+     * @param {TreeNode} node The node to unselect
+     * @param {Boolean} silent True to stop the selectionchange event from firing.
+     */
+    unselect : function(node, silent){
+        if(this.selNode == node){
+            this.clearSelections(silent);
+        }    
+    },
+    
+    /**
+     * Clear all selections
+     * @param {Boolean} silent True to stop the selectionchange event from firing.
+     */
+    clearSelections : function(silent){
+        var n = this.selNode;
+        if(n){
+            n.ui.onSelectedChange(false);
+            this.selNode = null;
+            if(silent !== true){
+                this.fireEvent('selectionchange', this, null);
+            }
+        }
+        return n;
+    },
+    
+    /**
+     * Get the selected node
+     * @return {TreeNode} The selected node
+     */
+    getSelectedNode : function(){
+        return this.selNode;    
+    },
+    
+    /**
+     * Returns true if the node is selected
+     * @param {TreeNode} node The node to check
+     * @return {Boolean}
+     */
+    isSelected : function(node){
+        return this.selNode == node;  
+    },
+
+    /**
+     * Selects the node above the selected node in the tree, intelligently walking the nodes
+     * @return TreeNode The new selection
+     */
+    selectPrevious : function(/* private */ s){
+        if(!(s = s || this.selNode || this.lastSelNode)){
+            return null;
+        }
+        // Here we pass in the current function to select to indicate the direction we're moving
+        var ps = s.previousSibling;
+        if(ps){
+            if(!ps.isExpanded() || ps.childNodes.length < 1){
+                return this.select(ps, this.selectPrevious);
+            } else{
+                var lc = ps.lastChild;
+                while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){
+                    lc = lc.lastChild;
+                }
+                return this.select(lc, this.selectPrevious);
+            }
+        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
+            return this.select(s.parentNode, this.selectPrevious);
+        }
+        return null;
+    },
+
+    /**
+     * Selects the node above the selected node in the tree, intelligently walking the nodes
+     * @return TreeNode The new selection
+     */
+    selectNext : function(/* private */ s){
+        if(!(s = s || this.selNode || this.lastSelNode)){
+            return null;
+        }
+        // Here we pass in the current function to select to indicate the direction we're moving
+        if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){
+             return this.select(s.firstChild, this.selectNext);
+         }else if(s.nextSibling){
+             return this.select(s.nextSibling, this.selectNext);
+         }else if(s.parentNode){
+            var newS = null;
+            s.parentNode.bubble(function(){
+                if(this.nextSibling){
+                    newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
+                    return false;
+                }
+            });
+            return newS;
+         }
+        return null;
+    },
+
+    onKeyDown : function(e){
+        var s = this.selNode || this.lastSelNode;
+        // undesirable, but required
+        var sm = this;
+        if(!s){
+            return;
+        }
+        var k = e.getKey();
+        switch(k){
+             case e.DOWN:
+                 e.stopEvent();
+                 this.selectNext();
+             break;
+             case e.UP:
+                 e.stopEvent();
+                 this.selectPrevious();
+             break;
+             case e.RIGHT:
+                 e.preventDefault();
+                 if(s.hasChildNodes()){
+                     if(!s.isExpanded()){
+                         s.expand();
+                     }else if(s.firstChild){
+                         this.select(s.firstChild, e);
+                     }
+                 }
+             break;
+             case e.LEFT:
+                 e.preventDefault();
+                 if(s.hasChildNodes() && s.isExpanded()){
+                     s.collapse();
+                 }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
+                     this.select(s.parentNode, e);
+                 }
+             break;
+        };
+    }
+});
+
+/**
+ * @class Ext.tree.MultiSelectionModel
+ * @extends Ext.util.Observable
+ * Multi selection for a TreePanel.
+ */
+Ext.tree.MultiSelectionModel = function(config){
+   this.selNodes = [];
+   this.selMap = {};
+   this.addEvents(
+       /**
+        * @event selectionchange
+        * Fires when the selected nodes change
+        * @param {MultiSelectionModel} this
+        * @param {Array} nodes Array of the selected nodes
+        */
+       'selectionchange'
+   );
+    Ext.apply(this, config);
+    Ext.tree.MultiSelectionModel.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {
+    init : function(tree){
+        this.tree = tree;
+        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
+        tree.on('click', this.onNodeClick, this);
+    },
+    
+    onNodeClick : function(node, e){
+        if(e.ctrlKey && this.isSelected(node)){
+            this.unselect(node);
+        }else{
+            this.select(node, e, e.ctrlKey);
+        }
+    },
+    
+    /**
+     * Select a node.
+     * @param {TreeNode} node The node to select
+     * @param {EventObject} e (optional) An event associated with the selection
+     * @param {Boolean} keepExisting True to retain existing selections
+     * @return {TreeNode} The selected node
+     */
+    select : function(node, e, keepExisting){
+        if(keepExisting !== true){
+            this.clearSelections(true);
+        }
+        if(this.isSelected(node)){
+            this.lastSelNode = node;
+            return node;
+        }
+        this.selNodes.push(node);
+        this.selMap[node.id] = node;
+        this.lastSelNode = node;
+        node.ui.onSelectedChange(true);
+        this.fireEvent('selectionchange', this, this.selNodes);
+        return node;
+    },
+    
+    /**
+     * Deselect a node.
+     * @param {TreeNode} node The node to unselect
+     */
+    unselect : function(node){
+        if(this.selMap[node.id]){
+            node.ui.onSelectedChange(false);
+            var sn = this.selNodes;
+            var index = sn.indexOf(node);
+            if(index != -1){
+                this.selNodes.splice(index, 1);
+            }
+            delete this.selMap[node.id];
+            this.fireEvent('selectionchange', this, this.selNodes);
+        }
+    },
+    
+    /**
+     * Clear all selections
+     */
+    clearSelections : function(suppressEvent){
+        var sn = this.selNodes;
+        if(sn.length > 0){
+            for(var i = 0, len = sn.length; i < len; i++){
+                sn[i].ui.onSelectedChange(false);
+            }
+            this.selNodes = [];
+            this.selMap = {};
+            if(suppressEvent !== true){
+                this.fireEvent('selectionchange', this, this.selNodes);
+            }
+        }
+    },
+    
+    /**
+     * Returns true if the node is selected
+     * @param {TreeNode} node The node to check
+     * @return {Boolean}
+     */
+    isSelected : function(node){
+        return this.selMap[node.id] ? true : false;  
+    },
+    
+    /**
+     * Returns an array of the selected nodes
+     * @return {Array}
+     */
+    getSelectedNodes : function(){
+        return this.selNodes;    
+    },
+
+    onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,
+
+    selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,
+
+    selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
+});/**
+ * @class Ext.data.Tree
+ * @extends Ext.util.Observable
+ * Represents a tree data structure and bubbles all the events for its nodes. The nodes
+ * in the tree have most standard DOM functionality.
+ * @constructor
+ * @param {Node} root (optional) The root node
+ */
+Ext.data.Tree = function(root){
+   this.nodeHash = {};
+   /**
+    * The root node for this tree
+    * @type Node
+    */
+   this.root = null;
+   if(root){
+       this.setRootNode(root);
+   }
+   this.addEvents(
+       /**
+        * @event append
+        * Fires when a new child node is appended to a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The newly appended node
+        * @param {Number} index The index of the newly appended node
+        */
+       "append",
+       /**
+        * @event remove
+        * Fires when a child node is removed from a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node removed
+        */
+       "remove",
+       /**
+        * @event move
+        * Fires when a node is moved to a new location in the tree
+        * @param {Tree} tree The owner tree
+        * @param {Node} node The node moved
+        * @param {Node} oldParent The old parent of this node
+        * @param {Node} newParent The new parent of this node
+        * @param {Number} index The index it was moved to
+        */
+       "move",
+       /**
+        * @event insert
+        * Fires when a new child node is inserted in a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node inserted
+        * @param {Node} refNode The child node the node was inserted before
+        */
+       "insert",
+       /**
+        * @event beforeappend
+        * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be appended
+        */
+       "beforeappend",
+       /**
+        * @event beforeremove
+        * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be removed
+        */
+       "beforeremove",
+       /**
+        * @event beforemove
+        * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+        * @param {Tree} tree The owner tree
+        * @param {Node} node The node being moved
+        * @param {Node} oldParent The parent of the node
+        * @param {Node} newParent The new parent the node is moving to
+        * @param {Number} index The index it is being moved to
+        */
+       "beforemove",
+       /**
+        * @event beforeinsert
+        * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be inserted
+        * @param {Node} refNode The child node the node is being inserted before
+        */
+       "beforeinsert"
+   );
+
+    Ext.data.Tree.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.data.Tree, Ext.util.Observable, {
+    /**
+     * @cfg {String} pathSeparator
+     * The token used to separate paths in node ids (defaults to '/').
+     */
+    pathSeparator: "/",
+
+    // private
+    proxyNodeEvent : function(){
+        return this.fireEvent.apply(this, arguments);
+    },
+
+    /**
+     * Returns the root node for this tree.
+     * @return {Node}
+     */
+    getRootNode : function(){
+        return this.root;
+    },
+
+    /**
+     * Sets the root node for this tree.
+     * @param {Node} node
+     * @return {Node}
+     */
+    setRootNode : function(node){
+        this.root = node;
+        node.ownerTree = this;
+        node.isRoot = true;
+        this.registerNode(node);
+        return node;
+    },
+
+    /**
+     * Gets a node in this tree by its id.
+     * @param {String} id
+     * @return {Node}
+     */
+    getNodeById : function(id){
+        return this.nodeHash[id];
+    },
+
+    // private
+    registerNode : function(node){
+        this.nodeHash[node.id] = node;
+    },
+
+    // private
+    unregisterNode : function(node){
+        delete this.nodeHash[node.id];
+    },
+
+    toString : function(){
+        return "[Tree"+(this.id?" "+this.id:"")+"]";
+    }
+});
+
+/**
+ * @class Ext.data.Node
+ * @extends Ext.util.Observable
+ * @cfg {Boolean} leaf true if this node is a leaf and does not have children
+ * @cfg {String} id The id for this node. If one is not specified, one is generated.
+ * @constructor
+ * @param {Object} attributes The attributes/config for the node
+ */
+Ext.data.Node = function(attributes){
+    /**
+     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
+     * @type {Object}
+     */
+    this.attributes = attributes || {};
+    this.leaf = this.attributes.leaf;
+    /**
+     * The node id. @type String
+     */
+    this.id = this.attributes.id;
+    if(!this.id){
+        this.id = Ext.id(null, "xnode-");
+        this.attributes.id = this.id;
+    }
+    /**
+     * All child nodes of this node. @type Array
+     */
+    this.childNodes = [];
+    if(!this.childNodes.indexOf){ // indexOf is a must
+        this.childNodes.indexOf = function(o){
+            for(var i = 0, len = this.length; i < len; i++){
+                if(this[i] == o){
+                    return i;
+                }
+            }
+            return -1;
+        };
+    }
+    /**
+     * The parent node for this node. @type Node
+     */
+    this.parentNode = null;
+    /**
+     * The first direct child node of this node, or null if this node has no child nodes. @type Node
+     */
+    this.firstChild = null;
+    /**
+     * The last direct child node of this node, or null if this node has no child nodes. @type Node
+     */
+    this.lastChild = null;
+    /**
+     * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
+     */
+    this.previousSibling = null;
+    /**
+     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
+     */
+    this.nextSibling = null;
+
+    this.addEvents({
+       /**
+        * @event append
+        * Fires when a new child node is appended
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The newly appended node
+        * @param {Number} index The index of the newly appended node
+        */
+       "append" : true,
+       /**
+        * @event remove
+        * Fires when a child node is removed
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The removed node
+        */
+       "remove" : true,
+       /**
+        * @event move
+        * Fires when this node is moved to a new location in the tree
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} oldParent The old parent of this node
+        * @param {Node} newParent The new parent of this node
+        * @param {Number} index The index it was moved to
+        */
+       "move" : true,
+       /**
+        * @event insert
+        * Fires when a new child node is inserted.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node inserted
+        * @param {Node} refNode The child node the node was inserted before
+        */
+       "insert" : true,
+       /**
+        * @event beforeappend
+        * Fires before a new child is appended, return false to cancel the append.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be appended
+        */
+       "beforeappend" : true,
+       /**
+        * @event beforeremove
+        * Fires before a child is removed, return false to cancel the remove.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be removed
+        */
+       "beforeremove" : true,
+       /**
+        * @event beforemove
+        * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} oldParent The parent of this node
+        * @param {Node} newParent The new parent this node is moving to
+        * @param {Number} index The index it is being moved to
+        */
+       "beforemove" : true,
+       /**
+        * @event beforeinsert
+        * Fires before a new child is inserted, return false to cancel the insert.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be inserted
+        * @param {Node} refNode The child node the node is being inserted before
+        */
+       "beforeinsert" : true
+   });
+    this.listeners = this.attributes.listeners;
+    Ext.data.Node.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.data.Node, Ext.util.Observable, {
+    // private
+    fireEvent : function(evtName){
+        // first do standard event for this node
+        if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){
+            return false;
+        }
+        // then bubble it up to the tree if the event wasn't cancelled
+        var ot = this.getOwnerTree();
+        if(ot){
+            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
+                return false;
+            }
+        }
+        return true;
+    },
+
+    /**
+     * Returns true if this node is a leaf
+     * @return {Boolean}
+     */
+    isLeaf : function(){
+        return this.leaf === true;
+    },
+
+    // private
+    setFirstChild : function(node){
+        this.firstChild = node;
+    },
+
+    //private
+    setLastChild : function(node){
+        this.lastChild = node;
+    },
+
+
+    /**
+     * Returns true if this node is the last child of its parent
+     * @return {Boolean}
+     */
+    isLast : function(){
+       return (!this.parentNode ? true : this.parentNode.lastChild == this);
+    },
+
+    /**
+     * Returns true if this node is the first child of its parent
+     * @return {Boolean}
+     */
+    isFirst : function(){
+       return (!this.parentNode ? true : this.parentNode.firstChild == this);
+    },
+
+    /**
+     * Returns true if this node has one or more child nodes, else false.
+     * @return {Boolean}
+     */
+    hasChildNodes : function(){
+        return !this.isLeaf() && this.childNodes.length > 0;
+    },
+    
+    /**
+     * Returns true if this node has one or more child nodes, or if the expandable
+     * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.
+     * @return {Boolean}
+     */
+    isExpandable : function(){
+        return this.attributes.expandable || this.hasChildNodes();
+    },
+
+    /**
+     * Insert node(s) as the last child node of this node.
+     * @param {Node/Array} node The node or Array of nodes to append
+     * @return {Node} The appended node if single append, or null if an array was passed
+     */
+    appendChild : function(node){
+        var multi = false;
+        if(Ext.isArray(node)){
+            multi = node;
+        }else if(arguments.length > 1){
+            multi = arguments;
+        }
+        // if passed an array or multiple args do them one by one
+        if(multi){
+            for(var i = 0, len = multi.length; i < len; i++) {
+            	this.appendChild(multi[i]);
+            }
+        }else{
+            if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
+                return false;
+            }
+            var index = this.childNodes.length;
+            var oldParent = node.parentNode;
+            // it's a move, make sure we move it cleanly
+            if(oldParent){
+                if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
+                    return false;
+                }
+                oldParent.removeChild(node);
+            }
+            index = this.childNodes.length;
+            if(index === 0){
+                this.setFirstChild(node);
+            }
+            this.childNodes.push(node);
+            node.parentNode = this;
+            var ps = this.childNodes[index-1];
+            if(ps){
+                node.previousSibling = ps;
+                ps.nextSibling = node;
+            }else{
+                node.previousSibling = null;
+            }
+            node.nextSibling = null;
+            this.setLastChild(node);
+            node.setOwnerTree(this.getOwnerTree());
+            this.fireEvent("append", this.ownerTree, this, node, index);
+            if(oldParent){
+                node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
+            }
+            return node;
+        }
+    },
+
+    /**
+     * Removes a child node from this node.
+     * @param {Node} node The node to remove
+     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
+     * @return {Node} The removed node
+     */
+    removeChild : function(node, destroy){
+        var index = this.childNodes.indexOf(node);
+        if(index == -1){
+            return false;
+        }
+        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
+            return false;
+        }
+
+        // remove it from childNodes collection
+        this.childNodes.splice(index, 1);
+
+        // update siblings
+        if(node.previousSibling){
+            node.previousSibling.nextSibling = node.nextSibling;
+        }
+        if(node.nextSibling){
+            node.nextSibling.previousSibling = node.previousSibling;
+        }
+
+        // update child refs
+        if(this.firstChild == node){
+            this.setFirstChild(node.nextSibling);
+        }
+        if(this.lastChild == node){
+            this.setLastChild(node.previousSibling);
+        }
+
+        node.clear();
+        this.fireEvent("remove", this.ownerTree, this, node);
+        if(destroy){
+            node.destroy();
+        }
+        return node;
+    },
+    
+    // private
+    clear : function(destroy){
+        // clear any references from the node
+        this.setOwnerTree(null, destroy);
+        this.parentNode = this.previousSibling = this.nextSibling = null
+        if(destroy){
+            this.firstChild = this.lastChild = null; 
+        }
+    },
+    
+    /**
+     * Destroys the node.
+     */
+    destroy : function(){
+        this.purgeListeners();
+        this.clear(true);  
+        Ext.each(this.childNodes, function(n){
+            n.destroy();
+        });
+        this.childNodes = null;
+    },
+
+    /**
+     * Inserts the first node before the second node in this nodes childNodes collection.
+     * @param {Node} node The node to insert
+     * @param {Node} refNode The node to insert before (if null the node is appended)
+     * @return {Node} The inserted node
+     */
+    insertBefore : function(node, refNode){
+        if(!refNode){ // like standard Dom, refNode can be null for append
+            return this.appendChild(node);
+        }
+        // nothing to do
+        if(node == refNode){
+            return false;
+        }
+
+        if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
+            return false;
+        }
+        var index = this.childNodes.indexOf(refNode);
+        var oldParent = node.parentNode;
+        var refIndex = index;
+
+        // when moving internally, indexes will change after remove
+        if(oldParent == this && this.childNodes.indexOf(node) < index){
+            refIndex--;
+        }
+
+        // it's a move, make sure we move it cleanly
+        if(oldParent){
+            if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
+                return false;
+            }
+            oldParent.removeChild(node);
+        }
+        if(refIndex === 0){
+            this.setFirstChild(node);
+        }
+        this.childNodes.splice(refIndex, 0, node);
+        node.parentNode = this;
+        var ps = this.childNodes[refIndex-1];
+        if(ps){
+            node.previousSibling = ps;
+            ps.nextSibling = node;
+        }else{
+            node.previousSibling = null;
+        }
+        node.nextSibling = refNode;
+        refNode.previousSibling = node;
+        node.setOwnerTree(this.getOwnerTree());
+        this.fireEvent("insert", this.ownerTree, this, node, refNode);
+        if(oldParent){
+            node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
+        }
+        return node;
+    },
+
+    /**
+     * Removes this node from its parent
+     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
+     * @return {Node} this
+     */
+    remove : function(destroy){
+        this.parentNode.removeChild(this, destroy);
+        return this;
+    },
+    
+    /**
+     * Removes all child nodes from this node.
+     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
+     * @return {Node} this
+     */
+    removeAll : function(destroy){
+        var cn = this.childNodes,
+            n;
+        while((n = cn[0])){
+            this.removeChild(n, destroy);
+        }
+        return this;
+    },
+
+    /**
+     * Returns the child node at the specified index.
+     * @param {Number} index
+     * @return {Node}
+     */
+    item : function(index){
+        return this.childNodes[index];
+    },
+
+    /**
+     * Replaces one child node in this node with another.
+     * @param {Node} newChild The replacement node
+     * @param {Node} oldChild The node to replace
+     * @return {Node} The replaced node
+     */
+    replaceChild : function(newChild, oldChild){
+        var s = oldChild ? oldChild.nextSibling : null;
+        this.removeChild(oldChild);
+        this.insertBefore(newChild, s);
+        return oldChild;
+    },
+
+    /**
+     * Returns the index of a child node
+     * @param {Node} node
+     * @return {Number} The index of the node or -1 if it was not found
+     */
+    indexOf : function(child){
+        return this.childNodes.indexOf(child);
+    },
+
+    /**
+     * Returns the tree this node is in.
+     * @return {Tree}
+     */
+    getOwnerTree : function(){
+        // if it doesn't have one, look for one
+        if(!this.ownerTree){
+            var p = this;
+            while(p){
+                if(p.ownerTree){
+                    this.ownerTree = p.ownerTree;
+                    break;
+                }
+                p = p.parentNode;
+            }
+        }
+        return this.ownerTree;
+    },
+
+    /**
+     * Returns depth of this node (the root node has a depth of 0)
+     * @return {Number}
+     */
+    getDepth : function(){
+        var depth = 0;
+        var p = this;
+        while(p.parentNode){
+            ++depth;
+            p = p.parentNode;
+        }
+        return depth;
+    },
+
+    // private
+    setOwnerTree : function(tree, destroy){
+        // if it is a move, we need to update everyone
+        if(tree != this.ownerTree){
+            if(this.ownerTree){
+                this.ownerTree.unregisterNode(this);
+            }
+            this.ownerTree = tree;
+            // If we're destroying, we don't need to recurse since it will be called on each child node
+            if(destroy !== true){
+                Ext.each(this.childNodes, function(n){
+                    n.setOwnerTree(tree);
+                });
+            }
+            if(tree){
+                tree.registerNode(this);
+            }
+        }
+    },
+    
+    /**
+     * Changes the id of this node.
+     * @param {String} id The new id for the node.
+     */
+    setId: function(id){
+        if(id !== this.id){
+            var t = this.ownerTree;
+            if(t){
+                t.unregisterNode(this);
+            }
+            this.id = this.attributes.id = id;
+            if(t){
+                t.registerNode(this);
+            }
+            this.onIdChange(id);
+        }
+    },
+    
+    // private
+    onIdChange: Ext.emptyFn,
+
+    /**
+     * Returns the path for this node. The path can be used to expand or select this node programmatically.
+     * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
+     * @return {String} The path
+     */
+    getPath : function(attr){
+        attr = attr || "id";
+        var p = this.parentNode;
+        var b = [this.attributes[attr]];
+        while(p){
+            b.unshift(p.attributes[attr]);
+            p = p.parentNode;
+        }
+        var sep = this.getOwnerTree().pathSeparator;
+        return sep + b.join(sep);
+    },
+
+    /**
+     * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the bubble is stopped.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
+     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+     */
+    bubble : function(fn, scope, args){
+        var p = this;
+        while(p){
+            if(fn.apply(scope || p, args || [p]) === false){
+                break;
+            }
+            p = p.parentNode;
+        }
+    },
+
+    /**
+     * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the cascade is stopped on that branch.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
+     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+     */
+    cascade : function(fn, scope, args){
+        if(fn.apply(scope || this, args || [this]) !== false){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++) {
+            	cs[i].cascade(fn, scope, args);
+            }
+        }
+    },
+
+    /**
+     * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the iteration stops.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node in the iteration.
+     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+     */
+    eachChild : function(fn, scope, args){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(fn.apply(scope || this, args || [cs[i]]) === false){
+        	    break;
+        	}
+        }
+    },
+
+    /**
+     * Finds the first child that has the attribute with the specified value.
+     * @param {String} attribute The attribute name
+     * @param {Mixed} value The value to search for
+     * @return {Node} The found child or null if none was found
+     */
+    findChild : function(attribute, value){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(cs[i].attributes[attribute] == value){
+        	    return cs[i];
+        	}
+        }
+        return null;
+    },
+
+    /**
+     * Finds the first child by a custom function. The child matches if the function passed returns true.
+     * @param {Function} fn A function which must return true if the passed Node is the required Node.
+     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Node being tested.
+     * @return {Node} The found child or null if none was found
+     */
+    findChildBy : function(fn, scope){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(fn.call(scope||cs[i], cs[i]) === true){
+        	    return cs[i];
+        	}
+        }
+        return null;
+    },
+
+    /**
+     * Sorts this nodes children using the supplied sort function.
+     * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
+     * @param {Object} scope (optional)The scope (this reference) in which the function is executed. Defaults to the browser window.
+     */
+    sort : function(fn, scope){
+        var cs = this.childNodes;
+        var len = cs.length;
+        if(len > 0){
+            var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
+            cs.sort(sortFn);
+            for(var i = 0; i < len; i++){
+                var n = cs[i];
+                n.previousSibling = cs[i-1];
+                n.nextSibling = cs[i+1];
+                if(i === 0){
+                    this.setFirstChild(n);
+                }
+                if(i == len-1){
+                    this.setLastChild(n);
+                }
+            }
+        }
+    },
+
+    /**
+     * Returns true if this node is an ancestor (at any point) of the passed node.
+     * @param {Node} node
+     * @return {Boolean}
+     */
+    contains : function(node){
+        return node.isAncestor(this);
+    },
+
+    /**
+     * Returns true if the passed node is an ancestor (at any point) of this node.
+     * @param {Node} node
+     * @return {Boolean}
+     */
+    isAncestor : function(node){
+        var p = this.parentNode;
+        while(p){
+            if(p == node){
+                return true;
+            }
+            p = p.parentNode;
+        }
+        return false;
+    },
+
+    toString : function(){
+        return "[Node"+(this.id?" "+this.id:"")+"]";
+    }
 });/**
  * @class Ext.tree.TreeNode
  * @extends Ext.data.Node
@@ -50311,1083 +50311,1083 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {
     }
 });
 
-Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;/**
- * @class Ext.tree.AsyncTreeNode
- * @extends Ext.tree.TreeNode
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
- */
- Ext.tree.AsyncTreeNode = function(config){
-    this.loaded = config && config.loaded === true;
-    this.loading = false;
-    Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
-    /**
-    * @event beforeload
-    * Fires before this node is loaded, return false to cancel
-    * @param {Node} this This node
-    */
-    this.addEvents('beforeload', 'load');
-    /**
-    * @event load
-    * Fires when this node is loaded
-    * @param {Node} this This node
-    */
-    /**
-     * The loader used by this node (defaults to using the tree's defined loader)
-     * @type TreeLoader
-     * @property loader
-     */
-};
-Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {
-    expand : function(deep, anim, callback, scope){
-        if(this.loading){ // if an async load is already running, waiting til it's done
-            var timer;
-            var f = function(){
-                if(!this.loading){ // done loading
-                    clearInterval(timer);
-                    this.expand(deep, anim, callback, scope);
-                }
-            }.createDelegate(this);
-            timer = setInterval(f, 200);
-            return;
-        }
-        if(!this.loaded){
-            if(this.fireEvent("beforeload", this) === false){
-                return;
-            }
-            this.loading = true;
-            this.ui.beforeLoad(this);
-            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
-            if(loader){
-                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);
-                return;
-            }
-        }
-        Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);
-    },
-    
-    /**
-     * Returns true if this node is currently loading
-     * @return {Boolean}
-     */
-    isLoading : function(){
-        return this.loading;  
-    },
-    
-    loadComplete : function(deep, anim, callback, scope){
-        this.loading = false;
-        this.loaded = true;
-        this.ui.afterLoad(this);
-        this.fireEvent("load", this);
-        this.expand(deep, anim, callback, scope);
-    },
-    
-    /**
-     * Returns true if this node has been loaded
-     * @return {Boolean}
-     */
-    isLoaded : function(){
-        return this.loaded;
-    },
-    
-    hasChildNodes : function(){
-        if(!this.isLeaf() && !this.loaded){
-            return true;
-        }else{
-            return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
-        }
-    },
-
-    /**
-     * Trigger a reload for this node
-     * @param {Function} callback
-     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this Node.
-     */
-    reload : function(callback, scope){
-        this.collapse(false, false);
-        while(this.firstChild){
-            this.removeChild(this.firstChild).destroy();
-        }
-        this.childrenRendered = false;
-        this.loaded = false;
-        if(this.isHiddenRoot()){
-            this.expanded = false;
-        }
-        this.expand(false, false, callback, scope);
-    }
-});
-
-Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/**
- * @class Ext.tree.TreeNodeUI
- * This class provides the default UI implementation for Ext TreeNodes.
- * The TreeNode UI implementation is separate from the
- * tree implementation, and allows customizing of the appearance of
- * tree nodes.
    
- * 
    
- * If you are customizing the Tree's user interface, you
- * may need to extend this class, but you should never need to instantiate this class.
    
- * 
    
- * This class provides access to the user interface components of an Ext TreeNode, through
- * {@link Ext.tree.TreeNode#getUI}
- */
-Ext.tree.TreeNodeUI = function(node){
-    this.node = node;
-    this.rendered = false;
-    this.animating = false;
-    this.wasLeaf = true;
-    this.ecc = 'x-tree-ec-icon x-tree-elbow';
-    this.emptyIcon = Ext.BLANK_IMAGE_URL;
-};
-
-Ext.tree.TreeNodeUI.prototype = {
-    // private
-    removeChild : function(node){
-        if(this.rendered){
-            this.ctNode.removeChild(node.ui.getEl());
-        }
-    },
-
-    // private
-    beforeLoad : function(){
-         this.addClass("x-tree-node-loading");
-    },
-
-    // private
-    afterLoad : function(){
-         this.removeClass("x-tree-node-loading");
-    },
-
-    // private
-    onTextChange : function(node, text, oldText){
-        if(this.rendered){
-            this.textNode.innerHTML = text;
-        }
-    },
-
-    // private
-    onDisableChange : function(node, state){
-        this.disabled = state;
-        if (this.checkbox) {
-            this.checkbox.disabled = state;
-        }
-        if(state){
-            this.addClass("x-tree-node-disabled");
-        }else{
-            this.removeClass("x-tree-node-disabled");
-        }
-    },
-
-    // private
-    onSelectedChange : function(state){
-        if(state){
-            this.focus();
-            this.addClass("x-tree-selected");
-        }else{
-            //this.blur();
-            this.removeClass("x-tree-selected");
-        }
-    },
-
-    // private
-    onMove : function(tree, node, oldParent, newParent, index, refNode){
-        this.childIndent = null;
-        if(this.rendered){
-            var targetNode = newParent.ui.getContainer();
-            if(!targetNode){//target not rendered
-                this.holder = document.createElement("div");
-                this.holder.appendChild(this.wrap);
-                return;
-            }
-            var insertBefore = refNode ? refNode.ui.getEl() : null;
-            if(insertBefore){
-                targetNode.insertBefore(this.wrap, insertBefore);
-            }else{
-                targetNode.appendChild(this.wrap);
-            }
-            this.node.renderIndent(true, oldParent != newParent);
-        }
-    },
-
-/**
- * Adds one or more CSS classes to the node's UI element.
- * Duplicate classes are automatically filtered out.
- * @param {String/Array} className The CSS class to add, or an array of classes
- */
-    addClass : function(cls){
-        if(this.elNode){
-            Ext.fly(this.elNode).addClass(cls);
-        }
-    },
-
-/**
- * Removes one or more CSS classes from the node's UI element.
- * @param {String/Array} className The CSS class to remove, or an array of classes
- */
-    removeClass : function(cls){
-        if(this.elNode){
-            Ext.fly(this.elNode).removeClass(cls);
-        }
-    },
-
-    // private
-    remove : function(){
-        if(this.rendered){
-            this.holder = document.createElement("div");
-            this.holder.appendChild(this.wrap);
-        }
-    },
-
-    // private
-    fireEvent : function(){
-        return this.node.fireEvent.apply(this.node, arguments);
-    },
-
-    // private
-    initEvents : function(){
-        this.node.on("move", this.onMove, this);
-
-        if(this.node.disabled){
-            this.onDisableChange(this.node, true);
-        }
-        if(this.node.hidden){
-            this.hide();
-        }
-        var ot = this.node.getOwnerTree();
-        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
-        if(dd && (!this.node.isRoot || ot.rootVisible)){
-            Ext.dd.Registry.register(this.elNode, {
-                node: this.node,
-                handles: this.getDDHandles(),
-                isHandle: false
-            });
-        }
-    },
-
-    // private
-    getDDHandles : function(){
-        return [this.iconNode, this.textNode, this.elNode];
-    },
-
-/**
- * Hides this node.
- */
-    hide : function(){
-        this.node.hidden = true;
-        if(this.wrap){
-            this.wrap.style.display = "none";
-        }
-    },
-
-/**
- * Shows this node.
- */
-    show : function(){
-        this.node.hidden = false;
-        if(this.wrap){
-            this.wrap.style.display = "";
-        }
-    },
-
-    // private
-    onContextMenu : function(e){
-        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
-            e.preventDefault();
-            this.focus();
-            this.fireEvent("contextmenu", this.node, e);
-        }
-    },
-
-    // private
-    onClick : function(e){
-        if(this.dropping){
-            e.stopEvent();
-            return;
-        }
-        if(this.fireEvent("beforeclick", this.node, e) !== false){
-            var a = e.getTarget('a');
-            if(!this.disabled && this.node.attributes.href && a){
-                this.fireEvent("click", this.node, e);
-                return;
-            }else if(a && e.ctrlKey){
-                e.stopEvent();
-            }
-            e.preventDefault();
-            if(this.disabled){
-                return;
-            }
-
-            if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
-                this.node.toggle();
-            }
-
-            this.fireEvent("click", this.node, e);
-        }else{
-            e.stopEvent();
-        }
-    },
-
-    // private
-    onDblClick : function(e){
-        e.preventDefault();
-        if(this.disabled){
-            return;
-        }
-        if(this.fireEvent("beforedblclick", this.node, e) !== false){
-            if(this.checkbox){
-                this.toggleCheck();
-            }
-            if(!this.animating && this.node.isExpandable()){
-                this.node.toggle();
-            }
-            this.fireEvent("dblclick", this.node, e);
-        }
-    },
-
-    onOver : function(e){
-        this.addClass('x-tree-node-over');
-    },
-
-    onOut : function(e){
-        this.removeClass('x-tree-node-over');
-    },
-
-    // private
-    onCheckChange : function(){
-        var checked = this.checkbox.checked;
-        // fix for IE6
-        this.checkbox.defaultChecked = checked;
-        this.node.attributes.checked = checked;
-        this.fireEvent('checkchange', this.node, checked);
-    },
-
-    // private
-    ecClick : function(e){
-        if(!this.animating && this.node.isExpandable()){
-            this.node.toggle();
-        }
-    },
-
-    // private
-    startDrop : function(){
-        this.dropping = true;
-    },
-
-    // delayed drop so the click event doesn't get fired on a drop
-    endDrop : function(){
-       setTimeout(function(){
-           this.dropping = false;
-       }.createDelegate(this), 50);
-    },
-
-    // private
-    expand : function(){
-        this.updateExpandIcon();
-        this.ctNode.style.display = "";
-    },
-
-    // private
-    focus : function(){
-        if(!this.node.preventHScroll){
-            try{this.anchor.focus();
-            }catch(e){}
-        }else{
-            try{
-                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
-                var l = noscroll.scrollLeft;
-                this.anchor.focus();
-                noscroll.scrollLeft = l;
-            }catch(e){}
-        }
-    },
-
-/**
- * Sets the checked status of the tree node to the passed value, or, if no value was passed,
- * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
- * @param {Boolean} (optional) The new checked status.
- */
-    toggleCheck : function(value){
-        var cb = this.checkbox;
-        if(cb){
-            cb.checked = (value === undefined ? !cb.checked : value);
-            this.onCheckChange();
-        }
-    },
-
-    // private
-    blur : function(){
-        try{
-            this.anchor.blur();
-        }catch(e){}
-    },
-
-    // private
-    animExpand : function(callback){
-        var ct = Ext.get(this.ctNode);
-        ct.stopFx();
-        if(!this.node.isExpandable()){
-            this.updateExpandIcon();
-            this.ctNode.style.display = "";
-            Ext.callback(callback);
-            return;
-        }
-        this.animating = true;
-        this.updateExpandIcon();
-
-        ct.slideIn('t', {
-           callback : function(){
-               this.animating = false;
-               Ext.callback(callback);
-            },
-            scope: this,
-            duration: this.node.ownerTree.duration || .25
-        });
-    },
-
-    // private
-    highlight : function(){
-        var tree = this.node.getOwnerTree();
-        Ext.fly(this.wrap).highlight(
-            tree.hlColor || "C3DAF9",
-            {endColor: tree.hlBaseColor}
-        );
-    },
-
-    // private
-    collapse : function(){
-        this.updateExpandIcon();
-        this.ctNode.style.display = "none";
-    },
-
-    // private
-    animCollapse : function(callback){
-        var ct = Ext.get(this.ctNode);
-        ct.enableDisplayMode('block');
-        ct.stopFx();
-
-        this.animating = true;
-        this.updateExpandIcon();
-
-        ct.slideOut('t', {
-            callback : function(){
-               this.animating = false;
-               Ext.callback(callback);
-            },
-            scope: this,
-            duration: this.node.ownerTree.duration || .25
-        });
-    },
-
-    // private
-    getContainer : function(){
-        return this.ctNode;
-    },
-
-/**
- * Returns the element which encapsulates this node.
- * @return {HtmlElement} The DOM element. The default implementation uses a <li>.
- */
-    getEl : function(){
-        return this.wrap;
-    },
-
-    // private
-    appendDDGhost : function(ghostNode){
-        ghostNode.appendChild(this.elNode.cloneNode(true));
-    },
-
-    // private
-    getDDRepairXY : function(){
-        return Ext.lib.Dom.getXY(this.iconNode);
-    },
-
-    // private
-    onRender : function(){
-        this.render();
-    },
-
-    // private
-    render : function(bulkRender){
-        var n = this.node, a = n.attributes;
-        var targetNode = n.parentNode ?
-              n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
-
-        if(!this.rendered){
-            this.rendered = true;
-
-            this.renderElements(n, a, targetNode, bulkRender);
-
-            if(a.qtip){
-               if(this.textNode.setAttributeNS){
-                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
-                   if(a.qtipTitle){
-                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
-                   }
-               }else{
-                   this.textNode.setAttribute("ext:qtip", a.qtip);
-                   if(a.qtipTitle){
-                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
-                   }
-               }
-            }else if(a.qtipCfg){
-                a.qtipCfg.target = Ext.id(this.textNode);
-                Ext.QuickTips.register(a.qtipCfg);
-            }
-            this.initEvents();
-            if(!this.node.expanded){
-                this.updateExpandIcon(true);
-            }
-        }else{
-            if(bulkRender === true) {
-                targetNode.appendChild(this.wrap);
-            }
-        }
-    },
-
-    // private
-    renderElements : function(n, a, targetNode, bulkRender){
-        // add some indent caching, this helps performance when rendering a large tree
-        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
-
-        var cb = Ext.isBoolean(a.checked),
-            nel,
-            href = a.href ? a.href : Ext.isGecko ? "" : "#",
-            buf = ['
  • ',
-            '',this.indentMarkup,"",
-            '',
-            '',
-            cb ? ('' : '/>')) : '',
-            '',n.text,"
    ",
-            '',
-            "
    • "].join('');
-
-        if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
-            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
-        }else{
-            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
-        }
-
-        this.elNode = this.wrap.childNodes[0];
-        this.ctNode = this.wrap.childNodes[1];
-        var cs = this.elNode.childNodes;
-        this.indentNode = cs[0];
-        this.ecNode = cs[1];
-        this.iconNode = cs[2];
-        var index = 3;
-        if(cb){
-            this.checkbox = cs[3];
-            // fix for IE6
-            this.checkbox.defaultChecked = this.checkbox.checked;
-            index++;
-        }
-        this.anchor = cs[index];
-        this.textNode = cs[index].firstChild;
-    },
-
-/**
- * Returns the <a> element that provides focus for the node's UI.
- * @return {HtmlElement} The DOM anchor element.
- */
-    getAnchor : function(){
-        return this.anchor;
-    },
-
-/**
- * Returns the text node.
- * @return {HtmlNode} The DOM text node.
- */
-    getTextEl : function(){
-        return this.textNode;
-    },
-
-/**
- * Returns the icon <img> element.
- * @return {HtmlElement} The DOM image element.
- */
-    getIconEl : function(){
-        return this.iconNode;
-    },
-
-/**
- * Returns the checked status of the node. If the node was rendered with no
- * checkbox, it returns false.
- * @return {Boolean} The checked flag.
- */
-    isChecked : function(){
-        return this.checkbox ? this.checkbox.checked : false;
-    },
-
-    // private
-    updateExpandIcon : function(){
-        if(this.rendered){
-            var n = this.node,
-                c1,
-                c2,
-                cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",
-                hasChild = n.hasChildNodes();
-            if(hasChild || n.attributes.expandable){
-                if(n.expanded){
-                    cls += "-minus";
-                    c1 = "x-tree-node-collapsed";
-                    c2 = "x-tree-node-expanded";
-                }else{
-                    cls += "-plus";
-                    c1 = "x-tree-node-expanded";
-                    c2 = "x-tree-node-collapsed";
-                }
-                if(this.wasLeaf){
-                    this.removeClass("x-tree-node-leaf");
-                    this.wasLeaf = false;
-                }
-                if(this.c1 != c1 || this.c2 != c2){
-                    Ext.fly(this.elNode).replaceClass(c1, c2);
-                    this.c1 = c1; this.c2 = c2;
-                }
-            }else{
-                if(!this.wasLeaf){
-                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
-                    delete this.c1;
-                    delete this.c2;
-                    this.wasLeaf = true;
-                }
-            }
-            var ecc = "x-tree-ec-icon "+cls;
-            if(this.ecc != ecc){
-                this.ecNode.className = ecc;
-                this.ecc = ecc;
-            }
-        }
-    },
-
-    // private
-    onIdChange: function(id){
-        if(this.rendered){
-            this.elNode.setAttribute('ext:tree-node-id', id);
-        }
-    },
-
-    // private
-    getChildIndent : function(){
-        if(!this.childIndent){
-            var buf = [],
-                p = this.node;
-            while(p){
-                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
-                    if(!p.isLast()) {
-                        buf.unshift('');
-                    } else {
-                        buf.unshift('');
-                    }
-                }
-                p = p.parentNode;
-            }
-            this.childIndent = buf.join("");
-        }
-        return this.childIndent;
-    },
-
-    // private
-    renderIndent : function(){
-        if(this.rendered){
-            var indent = "",
-                p = this.node.parentNode;
-            if(p){
-                indent = p.ui.getChildIndent();
-            }
-            if(this.indentMarkup != indent){ // don't rerender if not required
-                this.indentNode.innerHTML = indent;
-                this.indentMarkup = indent;
-            }
-            this.updateExpandIcon();
-        }
-    },
-
-    destroy : function(){
-        if(this.elNode){
-            Ext.dd.Registry.unregister(this.elNode.id);
-        }
-
-        Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){
-            if(this[el]){
-                Ext.fly(this[el]).remove();
-                delete this[el];
-            }
-        }, this);
-        delete this.node;
-    }
-};
-
-/**
- * @class Ext.tree.RootTreeNodeUI
- * This class provides the default UI implementation for root Ext TreeNodes.
- * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.
    
- * 
    
- * If you are customizing the Tree's user interface, you
- * may need to extend this class, but you should never need to instantiate this class.
    
- */
-Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
-    // private
-    render : function(){
-        if(!this.rendered){
-            var targetNode = this.node.ownerTree.innerCt.dom;
-            this.node.expanded = true;
-            targetNode.innerHTML = '
    ';
-            this.wrap = this.ctNode = targetNode.firstChild;
-        }
-    },
-    collapse : Ext.emptyFn,
-    expand : Ext.emptyFn
-});/**
- * @class Ext.tree.TreeLoader
- * @extends Ext.util.Observable
- * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child
- * nodes from a specified URL. The response must be a JavaScript Array definition
- * whose elements are node definition objects. e.g.:
- * 
    
-    [{
-        id: 1,
-        text: 'A leaf Node',
-        leaf: true
-    },{
-        id: 2,
-        text: 'A folder Node',
-        children: [{
-            id: 3,
-            text: 'A child Node',
-            leaf: true
-        }]
-   }]
-
    
- * 

    
- * A server request is sent, and child nodes are loaded only when a node is expanded.
- * The loading node's id is passed to the server under the parameter name "node" to
- * enable the server to produce the correct child nodes.
- * 

    
- * To pass extra parameters, an event handler may be attached to the "beforeload"
- * event, and the parameters specified in the TreeLoader's baseParams property:
- * 
    
-    myTreeLoader.on("beforeload", function(treeLoader, node) {
-        this.baseParams.category = node.attributes.category;
-    }, this);
-
    
- * This would pass an HTTP parameter called "category" to the server containing
- * the value of the Node's "category" attribute.
- * @constructor
- * Creates a new Treeloader.
- * @param {Object} config A config object containing config properties.
- */
-Ext.tree.TreeLoader = function(config){
-    this.baseParams = {};
-    Ext.apply(this, config);
-
-    this.addEvents(
-        /**
-         * @event beforeload
-         * Fires before a network request is made to retrieve the Json text which specifies a node's children.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
-         * @param {Object} callback The callback function specified in the {@link #load} call.
-         */
-        "beforeload",
-        /**
-         * @event load
-         * Fires when the node has been successfuly loaded.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
-         * @param {Object} response The response object containing the data from the server.
-         */
-        "load",
-        /**
-         * @event loadexception
-         * Fires if the network request failed.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
-         * @param {Object} response The response object containing the data from the server.
-         */
-        "loadexception"
-    );
-    Ext.tree.TreeLoader.superclass.constructor.call(this);
-    if(Ext.isString(this.paramOrder)){
-        this.paramOrder = this.paramOrder.split(/[\s,|]/);
-    }
-};
-
-Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {
-    /**
-    * @cfg {String} dataUrl The URL from which to request a Json string which
-    * specifies an array of node definition objects representing the child nodes
-    * to be loaded.
-    */
-    /**
-     * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
-     */
-    /**
-     * @cfg {String} url Equivalent to {@link #dataUrl}.
-     */
-    /**
-     * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.
-     */
-    /**
-    * @cfg {Object} baseParams (optional) An object containing properties which
-    * specify HTTP parameters to be passed to each request for child nodes.
-    */
-    /**
-    * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
-    * created by this loader. If the attributes sent by the server have an attribute in this object,
-    * they take priority.
-    */
-    /**
-    * @cfg {Object} uiProviders (optional) An object containing properties which
-    * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional
-    * uiProvider attribute of a returned child node is a string rather
-    * than a reference to a TreeNodeUI implementation, then that string value
-    * is used as a property name in the uiProviders object.
-    */
-    uiProviders : {},
-
-    /**
-    * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
-    * child nodes before loading.
-    */
-    clearOnLoad : true,
-
-    /**
-     * @cfg {Array/String} paramOrder Defaults to undefined. Only used when using directFn.
-     * Specifies the params in the order in which they must be passed to the server-side Direct method
-     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
-     * comma, or pipe. For example,
-     * any of the following would be acceptable:
    
-nodeParameter: 'node',
-paramOrder: ['param1','param2','param3']
-paramOrder: 'node param1 param2 param3'
-paramOrder: 'param1,node,param2,param3'
-paramOrder: 'param1|param2|param|node'
-     
    
-     */
-    paramOrder: undefined,
-
-    /**
-     * @cfg {Boolean} paramsAsHash Only used when using directFn.
-     * Send parameters as a collection of named arguments (defaults to false). Providing a
-     * {@link #paramOrder} nullifies this configuration.
-     */
-    paramsAsHash: false,
-
-    /**
-     * @cfg {String} nodeParameter The name of the parameter sent to the server which contains
-     * the identifier of the node. Defaults to 'node'.
-     */
-    nodeParameter: 'node',
-
-    /**
-     * @cfg {Function} directFn
-     * Function to call when executing a request.
-     */
-    directFn : undefined,
-
-    /**
-     * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.
-     * This is called automatically when a node is expanded, but may be used to reload
-     * a node (or append new children if the {@link #clearOnLoad} option is false.)
-     * @param {Ext.tree.TreeNode} node
-     * @param {Function} callback Function to call after the node has been loaded. The
-     * function is passed the TreeNode which was requested to be loaded.
-     * @param (Object) scope The cope (this reference) in which the callback is executed.
-     * defaults to the loaded TreeNode.
-     */
-    load : function(node, callback, scope){
-        if(this.clearOnLoad){
-            while(node.firstChild){
-                node.removeChild(node.firstChild);
-            }
-        }
-        if(this.doPreload(node)){ // preloaded json children
-            this.runCallback(callback, scope || node, [node]);
-        }else if(this.directFn || this.dataUrl || this.url){
-            this.requestData(node, callback, scope || node);
-        }
-    },
-
-    doPreload : function(node){
-        if(node.attributes.children){
-            if(node.childNodes.length < 1){ // preloaded?
-                var cs = node.attributes.children;
-                node.beginUpdate();
-                for(var i = 0, len = cs.length; i < len; i++){
-                    var cn = node.appendChild(this.createNode(cs[i]));
-                    if(this.preloadChildren){
-                        this.doPreload(cn);
-                    }
-                }
-                node.endUpdate();
-            }
-            return true;
-        }
-        return false;
-    },
-
-    getParams: function(node){
-        var bp = Ext.apply({}, this.baseParams),
-            np = this.nodeParameter,
-            po = this.paramOrder;
-
-        np && (bp[ np ] = node.id);
-
-        if(this.directFn){
-            var buf = [node.id];
-            if(po){
-                // reset 'buf' if the nodeParameter was included in paramOrder
-                if(np && po.indexOf(np) > -1){
-                    buf = [];
-                }
-
-                for(var i = 0, len = po.length; i < len; i++){
-                    buf.push(bp[ po[i] ]);
-                }
-            }else if(this.paramsAsHash){
-                buf = [bp];
-            }
-            return buf;
-        }else{
-            return bp;
-        }
-    },
-
-    requestData : function(node, callback, scope){
-        if(this.fireEvent("beforeload", this, node, callback) !== false){
-            if(this.directFn){
-                var args = this.getParams(node);
-                args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
-                this.directFn.apply(window, args);
-            }else{
-                this.transId = Ext.Ajax.request({
-                    method:this.requestMethod,
-                    url: this.dataUrl||this.url,
-                    success: this.handleResponse,
-                    failure: this.handleFailure,
-                    scope: this,
-                    argument: {callback: callback, node: node, scope: scope},
-                    params: this.getParams(node)
-                });
-            }
-        }else{
-            // if the load is cancelled, make sure we notify
-            // the node that we are done
-            this.runCallback(callback, scope || node, []);
-        }
-    },
-
-    processDirectResponse: function(result, response, args){
-        if(response.status){
-            this.handleResponse({
-                responseData: Ext.isArray(result) ? result : null,
-                responseText: result,
-                argument: args
-            });
-        }else{
-            this.handleFailure({
-                argument: args
-            });
-        }
-    },
-
-    // private
-    runCallback: function(cb, scope, args){
-        if(Ext.isFunction(cb)){
-            cb.apply(scope, args);
-        }
-    },
-
-    isLoading : function(){
-        return !!this.transId;
-    },
-
-    abort : function(){
-        if(this.isLoading()){
-            Ext.Ajax.abort(this.transId);
-        }
-    },
-
-    /**
-    * 
    Override this function for custom TreeNode node implementation, or to
-    * modify the attributes at creation time.
    
-    * Example:
    
-new Ext.tree.TreePanel({
-    ...
-    loader: new Ext.tree.TreeLoader({
-        url: 'dataUrl',
-        createNode: function(attr) {
-//          Allow consolidation consignments to have
-//          consignments dropped into them.
-            if (attr.isConsolidation) {
-                attr.iconCls = 'x-consol',
-                attr.allowDrop = true;
-            }
-            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
-        }
-    }),
-    ...
-});
-
    
-    * @param attr {Object} The attributes from which to create the new node.
-    */
-    createNode : function(attr){
-        // apply baseAttrs, nice idea Corey!
-        if(this.baseAttrs){
-            Ext.applyIf(attr, this.baseAttrs);
-        }
-        if(this.applyLoader !== false && !attr.loader){
-            attr.loader = this;
-        }
-        if(Ext.isString(attr.uiProvider)){
-           attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
-        }
-        if(attr.nodeType){
-            return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);
-        }else{
-            return attr.leaf ?
-                        new Ext.tree.TreeNode(attr) :
-                        new Ext.tree.AsyncTreeNode(attr);
-        }
-    },
-
-    processResponse : function(response, node, callback, scope){
-        var json = response.responseText;
-        try {
-            var o = response.responseData || Ext.decode(json);
-            node.beginUpdate();
-            for(var i = 0, len = o.length; i < len; i++){
-                var n = this.createNode(o[i]);
-                if(n){
-                    node.appendChild(n);
-                }
-            }
-            node.endUpdate();
-            this.runCallback(callback, scope || node, [node]);
-        }catch(e){
-            this.handleFailure(response);
-        }
-    },
-
-    handleResponse : function(response){
-        this.transId = false;
-        var a = response.argument;
-        this.processResponse(response, a.node, a.callback, a.scope);
-        this.fireEvent("load", this, a.node, response);
-    },
-
-    handleFailure : function(response){
-        this.transId = false;
-        var a = response.argument;
-        this.fireEvent("loadexception", this, a.node, response);
-        this.runCallback(a.callback, a.scope || a.node, [a.node]);
-    },
-
-    destroy : function(){
-        this.abort();
-        this.purgeListeners();
-    }
+Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;/**
+ * @class Ext.tree.AsyncTreeNode
+ * @extends Ext.tree.TreeNode
+ * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
+ */
+ Ext.tree.AsyncTreeNode = function(config){
+    this.loaded = config && config.loaded === true;
+    this.loading = false;
+    Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
+    /**
+    * @event beforeload
+    * Fires before this node is loaded, return false to cancel
+    * @param {Node} this This node
+    */
+    this.addEvents('beforeload', 'load');
+    /**
+    * @event load
+    * Fires when this node is loaded
+    * @param {Node} this This node
+    */
+    /**
+     * The loader used by this node (defaults to using the tree's defined loader)
+     * @type TreeLoader
+     * @property loader
+     */
+};
+Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {
+    expand : function(deep, anim, callback, scope){
+        if(this.loading){ // if an async load is already running, waiting til it's done
+            var timer;
+            var f = function(){
+                if(!this.loading){ // done loading
+                    clearInterval(timer);
+                    this.expand(deep, anim, callback, scope);
+                }
+            }.createDelegate(this);
+            timer = setInterval(f, 200);
+            return;
+        }
+        if(!this.loaded){
+            if(this.fireEvent("beforeload", this) === false){
+                return;
+            }
+            this.loading = true;
+            this.ui.beforeLoad(this);
+            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
+            if(loader){
+                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);
+                return;
+            }
+        }
+        Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);
+    },
+    
+    /**
+     * Returns true if this node is currently loading
+     * @return {Boolean}
+     */
+    isLoading : function(){
+        return this.loading;  
+    },
+    
+    loadComplete : function(deep, anim, callback, scope){
+        this.loading = false;
+        this.loaded = true;
+        this.ui.afterLoad(this);
+        this.fireEvent("load", this);
+        this.expand(deep, anim, callback, scope);
+    },
+    
+    /**
+     * Returns true if this node has been loaded
+     * @return {Boolean}
+     */
+    isLoaded : function(){
+        return this.loaded;
+    },
+    
+    hasChildNodes : function(){
+        if(!this.isLeaf() && !this.loaded){
+            return true;
+        }else{
+            return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+        }
+    },
+
+    /**
+     * Trigger a reload for this node
+     * @param {Function} callback
+     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this Node.
+     */
+    reload : function(callback, scope){
+        this.collapse(false, false);
+        while(this.firstChild){
+            this.removeChild(this.firstChild).destroy();
+        }
+        this.childrenRendered = false;
+        this.loaded = false;
+        if(this.isHiddenRoot()){
+            this.expanded = false;
+        }
+        this.expand(false, false, callback, scope);
+    }
+});
+
+Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/**
+ * @class Ext.tree.TreeNodeUI
+ * This class provides the default UI implementation for Ext TreeNodes.
+ * The TreeNode UI implementation is separate from the
+ * tree implementation, and allows customizing of the appearance of
+ * tree nodes.
    
+ * 
    
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.
    
+ * 
    
+ * This class provides access to the user interface components of an Ext TreeNode, through
+ * {@link Ext.tree.TreeNode#getUI}
+ */
+Ext.tree.TreeNodeUI = function(node){
+    this.node = node;
+    this.rendered = false;
+    this.animating = false;
+    this.wasLeaf = true;
+    this.ecc = 'x-tree-ec-icon x-tree-elbow';
+    this.emptyIcon = Ext.BLANK_IMAGE_URL;
+};
+
+Ext.tree.TreeNodeUI.prototype = {
+    // private
+    removeChild : function(node){
+        if(this.rendered){
+            this.ctNode.removeChild(node.ui.getEl());
+        }
+    },
+
+    // private
+    beforeLoad : function(){
+         this.addClass("x-tree-node-loading");
+    },
+
+    // private
+    afterLoad : function(){
+         this.removeClass("x-tree-node-loading");
+    },
+
+    // private
+    onTextChange : function(node, text, oldText){
+        if(this.rendered){
+            this.textNode.innerHTML = text;
+        }
+    },
+
+    // private
+    onDisableChange : function(node, state){
+        this.disabled = state;
+        if (this.checkbox) {
+            this.checkbox.disabled = state;
+        }
+        if(state){
+            this.addClass("x-tree-node-disabled");
+        }else{
+            this.removeClass("x-tree-node-disabled");
+        }
+    },
+
+    // private
+    onSelectedChange : function(state){
+        if(state){
+            this.focus();
+            this.addClass("x-tree-selected");
+        }else{
+            //this.blur();
+            this.removeClass("x-tree-selected");
+        }
+    },
+
+    // private
+    onMove : function(tree, node, oldParent, newParent, index, refNode){
+        this.childIndent = null;
+        if(this.rendered){
+            var targetNode = newParent.ui.getContainer();
+            if(!targetNode){//target not rendered
+                this.holder = document.createElement("div");
+                this.holder.appendChild(this.wrap);
+                return;
+            }
+            var insertBefore = refNode ? refNode.ui.getEl() : null;
+            if(insertBefore){
+                targetNode.insertBefore(this.wrap, insertBefore);
+            }else{
+                targetNode.appendChild(this.wrap);
+            }
+            this.node.renderIndent(true, oldParent != newParent);
+        }
+    },
+
+/**
+ * Adds one or more CSS classes to the node's UI element.
+ * Duplicate classes are automatically filtered out.
+ * @param {String/Array} className The CSS class to add, or an array of classes
+ */
+    addClass : function(cls){
+        if(this.elNode){
+            Ext.fly(this.elNode).addClass(cls);
+        }
+    },
+
+/**
+ * Removes one or more CSS classes from the node's UI element.
+ * @param {String/Array} className The CSS class to remove, or an array of classes
+ */
+    removeClass : function(cls){
+        if(this.elNode){
+            Ext.fly(this.elNode).removeClass(cls);
+        }
+    },
+
+    // private
+    remove : function(){
+        if(this.rendered){
+            this.holder = document.createElement("div");
+            this.holder.appendChild(this.wrap);
+        }
+    },
+
+    // private
+    fireEvent : function(){
+        return this.node.fireEvent.apply(this.node, arguments);
+    },
+
+    // private
+    initEvents : function(){
+        this.node.on("move", this.onMove, this);
+
+        if(this.node.disabled){
+            this.onDisableChange(this.node, true);
+        }
+        if(this.node.hidden){
+            this.hide();
+        }
+        var ot = this.node.getOwnerTree();
+        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
+        if(dd && (!this.node.isRoot || ot.rootVisible)){
+            Ext.dd.Registry.register(this.elNode, {
+                node: this.node,
+                handles: this.getDDHandles(),
+                isHandle: false
+            });
+        }
+    },
+
+    // private
+    getDDHandles : function(){
+        return [this.iconNode, this.textNode, this.elNode];
+    },
+
+/**
+ * Hides this node.
+ */
+    hide : function(){
+        this.node.hidden = true;
+        if(this.wrap){
+            this.wrap.style.display = "none";
+        }
+    },
+
+/**
+ * Shows this node.
+ */
+    show : function(){
+        this.node.hidden = false;
+        if(this.wrap){
+            this.wrap.style.display = "";
+        }
+    },
+
+    // private
+    onContextMenu : function(e){
+        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+            e.preventDefault();
+            this.focus();
+            this.fireEvent("contextmenu", this.node, e);
+        }
+    },
+
+    // private
+    onClick : function(e){
+        if(this.dropping){
+            e.stopEvent();
+            return;
+        }
+        if(this.fireEvent("beforeclick", this.node, e) !== false){
+            var a = e.getTarget('a');
+            if(!this.disabled && this.node.attributes.href && a){
+                this.fireEvent("click", this.node, e);
+                return;
+            }else if(a && e.ctrlKey){
+                e.stopEvent();
+            }
+            e.preventDefault();
+            if(this.disabled){
+                return;
+            }
+
+            if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
+                this.node.toggle();
+            }
+
+            this.fireEvent("click", this.node, e);
+        }else{
+            e.stopEvent();
+        }
+    },
+
+    // private
+    onDblClick : function(e){
+        e.preventDefault();
+        if(this.disabled){
+            return;
+        }
+        if(this.fireEvent("beforedblclick", this.node, e) !== false){
+            if(this.checkbox){
+                this.toggleCheck();
+            }
+            if(!this.animating && this.node.isExpandable()){
+                this.node.toggle();
+            }
+            this.fireEvent("dblclick", this.node, e);
+        }
+    },
+
+    onOver : function(e){
+        this.addClass('x-tree-node-over');
+    },
+
+    onOut : function(e){
+        this.removeClass('x-tree-node-over');
+    },
+
+    // private
+    onCheckChange : function(){
+        var checked = this.checkbox.checked;
+        // fix for IE6
+        this.checkbox.defaultChecked = checked;
+        this.node.attributes.checked = checked;
+        this.fireEvent('checkchange', this.node, checked);
+    },
+
+    // private
+    ecClick : function(e){
+        if(!this.animating && this.node.isExpandable()){
+            this.node.toggle();
+        }
+    },
+
+    // private
+    startDrop : function(){
+        this.dropping = true;
+    },
+
+    // delayed drop so the click event doesn't get fired on a drop
+    endDrop : function(){
+       setTimeout(function(){
+           this.dropping = false;
+       }.createDelegate(this), 50);
+    },
+
+    // private
+    expand : function(){
+        this.updateExpandIcon();
+        this.ctNode.style.display = "";
+    },
+
+    // private
+    focus : function(){
+        if(!this.node.preventHScroll){
+            try{this.anchor.focus();
+            }catch(e){}
+        }else{
+            try{
+                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
+                var l = noscroll.scrollLeft;
+                this.anchor.focus();
+                noscroll.scrollLeft = l;
+            }catch(e){}
+        }
+    },
+
+/**
+ * Sets the checked status of the tree node to the passed value, or, if no value was passed,
+ * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
+ * @param {Boolean} (optional) The new checked status.
+ */
+    toggleCheck : function(value){
+        var cb = this.checkbox;
+        if(cb){
+            cb.checked = (value === undefined ? !cb.checked : value);
+            this.onCheckChange();
+        }
+    },
+
+    // private
+    blur : function(){
+        try{
+            this.anchor.blur();
+        }catch(e){}
+    },
+
+    // private
+    animExpand : function(callback){
+        var ct = Ext.get(this.ctNode);
+        ct.stopFx();
+        if(!this.node.isExpandable()){
+            this.updateExpandIcon();
+            this.ctNode.style.display = "";
+            Ext.callback(callback);
+            return;
+        }
+        this.animating = true;
+        this.updateExpandIcon();
+
+        ct.slideIn('t', {
+           callback : function(){
+               this.animating = false;
+               Ext.callback(callback);
+            },
+            scope: this,
+            duration: this.node.ownerTree.duration || .25
+        });
+    },
+
+    // private
+    highlight : function(){
+        var tree = this.node.getOwnerTree();
+        Ext.fly(this.wrap).highlight(
+            tree.hlColor || "C3DAF9",
+            {endColor: tree.hlBaseColor}
+        );
+    },
+
+    // private
+    collapse : function(){
+        this.updateExpandIcon();
+        this.ctNode.style.display = "none";
+    },
+
+    // private
+    animCollapse : function(callback){
+        var ct = Ext.get(this.ctNode);
+        ct.enableDisplayMode('block');
+        ct.stopFx();
+
+        this.animating = true;
+        this.updateExpandIcon();
+
+        ct.slideOut('t', {
+            callback : function(){
+               this.animating = false;
+               Ext.callback(callback);
+            },
+            scope: this,
+            duration: this.node.ownerTree.duration || .25
+        });
+    },
+
+    // private
+    getContainer : function(){
+        return this.ctNode;
+    },
+
+/**
+ * Returns the element which encapsulates this node.
+ * @return {HtmlElement} The DOM element. The default implementation uses a <li>.
+ */
+    getEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    appendDDGhost : function(ghostNode){
+        ghostNode.appendChild(this.elNode.cloneNode(true));
+    },
+
+    // private
+    getDDRepairXY : function(){
+        return Ext.lib.Dom.getXY(this.iconNode);
+    },
+
+    // private
+    onRender : function(){
+        this.render();
+    },
+
+    // private
+    render : function(bulkRender){
+        var n = this.node, a = n.attributes;
+        var targetNode = n.parentNode ?
+              n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+
+        if(!this.rendered){
+            this.rendered = true;
+
+            this.renderElements(n, a, targetNode, bulkRender);
+
+            if(a.qtip){
+               if(this.textNode.setAttributeNS){
+                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
+                   if(a.qtipTitle){
+                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
+                   }
+               }else{
+                   this.textNode.setAttribute("ext:qtip", a.qtip);
+                   if(a.qtipTitle){
+                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
+                   }
+               }
+            }else if(a.qtipCfg){
+                a.qtipCfg.target = Ext.id(this.textNode);
+                Ext.QuickTips.register(a.qtipCfg);
+            }
+            this.initEvents();
+            if(!this.node.expanded){
+                this.updateExpandIcon(true);
+            }
+        }else{
+            if(bulkRender === true) {
+                targetNode.appendChild(this.wrap);
+            }
+        }
+    },
+
+    // private
+    renderElements : function(n, a, targetNode, bulkRender){
+        // add some indent caching, this helps performance when rendering a large tree
+        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+        var cb = Ext.isBoolean(a.checked),
+            nel,
+            href = a.href ? a.href : Ext.isGecko ? "" : "#",
+            buf = ['
  • ',
+            '',this.indentMarkup,"",
+            '',
+            '',
+            cb ? ('' : '/>')) : '',
+            '',n.text,"
    ",
+            '',
+            "
    • "].join('');
+
+        if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
+            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
+        }else{
+            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
+        }
+
+        this.elNode = this.wrap.childNodes[0];
+        this.ctNode = this.wrap.childNodes[1];
+        var cs = this.elNode.childNodes;
+        this.indentNode = cs[0];
+        this.ecNode = cs[1];
+        this.iconNode = cs[2];
+        var index = 3;
+        if(cb){
+            this.checkbox = cs[3];
+            // fix for IE6
+            this.checkbox.defaultChecked = this.checkbox.checked;
+            index++;
+        }
+        this.anchor = cs[index];
+        this.textNode = cs[index].firstChild;
+    },
+
+/**
+ * Returns the <a> element that provides focus for the node's UI.
+ * @return {HtmlElement} The DOM anchor element.
+ */
+    getAnchor : function(){
+        return this.anchor;
+    },
+
+/**
+ * Returns the text node.
+ * @return {HtmlNode} The DOM text node.
+ */
+    getTextEl : function(){
+        return this.textNode;
+    },
+
+/**
+ * Returns the icon <img> element.
+ * @return {HtmlElement} The DOM image element.
+ */
+    getIconEl : function(){
+        return this.iconNode;
+    },
+
+/**
+ * Returns the checked status of the node. If the node was rendered with no
+ * checkbox, it returns false.
+ * @return {Boolean} The checked flag.
+ */
+    isChecked : function(){
+        return this.checkbox ? this.checkbox.checked : false;
+    },
+
+    // private
+    updateExpandIcon : function(){
+        if(this.rendered){
+            var n = this.node,
+                c1,
+                c2,
+                cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",
+                hasChild = n.hasChildNodes();
+            if(hasChild || n.attributes.expandable){
+                if(n.expanded){
+                    cls += "-minus";
+                    c1 = "x-tree-node-collapsed";
+                    c2 = "x-tree-node-expanded";
+                }else{
+                    cls += "-plus";
+                    c1 = "x-tree-node-expanded";
+                    c2 = "x-tree-node-collapsed";
+                }
+                if(this.wasLeaf){
+                    this.removeClass("x-tree-node-leaf");
+                    this.wasLeaf = false;
+                }
+                if(this.c1 != c1 || this.c2 != c2){
+                    Ext.fly(this.elNode).replaceClass(c1, c2);
+                    this.c1 = c1; this.c2 = c2;
+                }
+            }else{
+                if(!this.wasLeaf){
+                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
+                    delete this.c1;
+                    delete this.c2;
+                    this.wasLeaf = true;
+                }
+            }
+            var ecc = "x-tree-ec-icon "+cls;
+            if(this.ecc != ecc){
+                this.ecNode.className = ecc;
+                this.ecc = ecc;
+            }
+        }
+    },
+
+    // private
+    onIdChange: function(id){
+        if(this.rendered){
+            this.elNode.setAttribute('ext:tree-node-id', id);
+        }
+    },
+
+    // private
+    getChildIndent : function(){
+        if(!this.childIndent){
+            var buf = [],
+                p = this.node;
+            while(p){
+                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
+                    if(!p.isLast()) {
+                        buf.unshift('');
+                    } else {
+                        buf.unshift('');
+                    }
+                }
+                p = p.parentNode;
+            }
+            this.childIndent = buf.join("");
+        }
+        return this.childIndent;
+    },
+
+    // private
+    renderIndent : function(){
+        if(this.rendered){
+            var indent = "",
+                p = this.node.parentNode;
+            if(p){
+                indent = p.ui.getChildIndent();
+            }
+            if(this.indentMarkup != indent){ // don't rerender if not required
+                this.indentNode.innerHTML = indent;
+                this.indentMarkup = indent;
+            }
+            this.updateExpandIcon();
+        }
+    },
+
+    destroy : function(){
+        if(this.elNode){
+            Ext.dd.Registry.unregister(this.elNode.id);
+        }
+
+        Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){
+            if(this[el]){
+                Ext.fly(this[el]).remove();
+                delete this[el];
+            }
+        }, this);
+        delete this.node;
+    }
+};
+
+/**
+ * @class Ext.tree.RootTreeNodeUI
+ * This class provides the default UI implementation for root Ext TreeNodes.
+ * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.
    
+ * 
    
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.
    
+ */
+Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+    // private
+    render : function(){
+        if(!this.rendered){
+            var targetNode = this.node.ownerTree.innerCt.dom;
+            this.node.expanded = true;
+            targetNode.innerHTML = '
    ';
+            this.wrap = this.ctNode = targetNode.firstChild;
+        }
+    },
+    collapse : Ext.emptyFn,
+    expand : Ext.emptyFn
+});/**
+ * @class Ext.tree.TreeLoader
+ * @extends Ext.util.Observable
+ * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child
+ * nodes from a specified URL. The response must be a JavaScript Array definition
+ * whose elements are node definition objects. e.g.:
+ * 
    
+    [{
+        id: 1,
+        text: 'A leaf Node',
+        leaf: true
+    },{
+        id: 2,
+        text: 'A folder Node',
+        children: [{
+            id: 3,
+            text: 'A child Node',
+            leaf: true
+        }]
+   }]
+
    
+ * 

    
+ * A server request is sent, and child nodes are loaded only when a node is expanded.
+ * The loading node's id is passed to the server under the parameter name "node" to
+ * enable the server to produce the correct child nodes.
+ * 

    
+ * To pass extra parameters, an event handler may be attached to the "beforeload"
+ * event, and the parameters specified in the TreeLoader's baseParams property:
+ * 
    
+    myTreeLoader.on("beforeload", function(treeLoader, node) {
+        this.baseParams.category = node.attributes.category;
+    }, this);
+
    
+ * This would pass an HTTP parameter called "category" to the server containing
+ * the value of the Node's "category" attribute.
+ * @constructor
+ * Creates a new Treeloader.
+ * @param {Object} config A config object containing config properties.
+ */
+Ext.tree.TreeLoader = function(config){
+    this.baseParams = {};
+    Ext.apply(this, config);
+
+    this.addEvents(
+        /**
+         * @event beforeload
+         * Fires before a network request is made to retrieve the Json text which specifies a node's children.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+         * @param {Object} callback The callback function specified in the {@link #load} call.
+         */
+        "beforeload",
+        /**
+         * @event load
+         * Fires when the node has been successfuly loaded.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+         * @param {Object} response The response object containing the data from the server.
+         */
+        "load",
+        /**
+         * @event loadexception
+         * Fires if the network request failed.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+         * @param {Object} response The response object containing the data from the server.
+         */
+        "loadexception"
+    );
+    Ext.tree.TreeLoader.superclass.constructor.call(this);
+    if(Ext.isString(this.paramOrder)){
+        this.paramOrder = this.paramOrder.split(/[\s,|]/);
+    }
+};
+
+Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {
+    /**
+    * @cfg {String} dataUrl The URL from which to request a Json string which
+    * specifies an array of node definition objects representing the child nodes
+    * to be loaded.
+    */
+    /**
+     * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
+     */
+    /**
+     * @cfg {String} url Equivalent to {@link #dataUrl}.
+     */
+    /**
+     * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.
+     */
+    /**
+    * @cfg {Object} baseParams (optional) An object containing properties which
+    * specify HTTP parameters to be passed to each request for child nodes.
+    */
+    /**
+    * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
+    * created by this loader. If the attributes sent by the server have an attribute in this object,
+    * they take priority.
+    */
+    /**
+    * @cfg {Object} uiProviders (optional) An object containing properties which
+    * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional
+    * uiProvider attribute of a returned child node is a string rather
+    * than a reference to a TreeNodeUI implementation, then that string value
+    * is used as a property name in the uiProviders object.
+    */
+    uiProviders : {},
+
+    /**
+    * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
+    * child nodes before loading.
+    */
+    clearOnLoad : true,
+
+    /**
+     * @cfg {Array/String} paramOrder Defaults to undefined. Only used when using directFn.
+     * Specifies the params in the order in which they must be passed to the server-side Direct method
+     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
+     * comma, or pipe. For example,
+     * any of the following would be acceptable:
    
+nodeParameter: 'node',
+paramOrder: ['param1','param2','param3']
+paramOrder: 'node param1 param2 param3'
+paramOrder: 'param1,node,param2,param3'
+paramOrder: 'param1|param2|param|node'
+     
    
+     */
+    paramOrder: undefined,
+
+    /**
+     * @cfg {Boolean} paramsAsHash Only used when using directFn.
+     * Send parameters as a collection of named arguments (defaults to false). Providing a
+     * {@link #paramOrder} nullifies this configuration.
+     */
+    paramsAsHash: false,
+
+    /**
+     * @cfg {String} nodeParameter The name of the parameter sent to the server which contains
+     * the identifier of the node. Defaults to 'node'.
+     */
+    nodeParameter: 'node',
+
+    /**
+     * @cfg {Function} directFn
+     * Function to call when executing a request.
+     */
+    directFn : undefined,
+
+    /**
+     * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.
+     * This is called automatically when a node is expanded, but may be used to reload
+     * a node (or append new children if the {@link #clearOnLoad} option is false.)
+     * @param {Ext.tree.TreeNode} node
+     * @param {Function} callback Function to call after the node has been loaded. The
+     * function is passed the TreeNode which was requested to be loaded.
+     * @param (Object) scope The cope (this reference) in which the callback is executed.
+     * defaults to the loaded TreeNode.
+     */
+    load : function(node, callback, scope){
+        if(this.clearOnLoad){
+            while(node.firstChild){
+                node.removeChild(node.firstChild);
+            }
+        }
+        if(this.doPreload(node)){ // preloaded json children
+            this.runCallback(callback, scope || node, [node]);
+        }else if(this.directFn || this.dataUrl || this.url){
+            this.requestData(node, callback, scope || node);
+        }
+    },
+
+    doPreload : function(node){
+        if(node.attributes.children){
+            if(node.childNodes.length < 1){ // preloaded?
+                var cs = node.attributes.children;
+                node.beginUpdate();
+                for(var i = 0, len = cs.length; i < len; i++){
+                    var cn = node.appendChild(this.createNode(cs[i]));
+                    if(this.preloadChildren){
+                        this.doPreload(cn);
+                    }
+                }
+                node.endUpdate();
+            }
+            return true;
+        }
+        return false;
+    },
+
+    getParams: function(node){
+        var bp = Ext.apply({}, this.baseParams),
+            np = this.nodeParameter,
+            po = this.paramOrder;
+
+        np && (bp[ np ] = node.id);
+
+        if(this.directFn){
+            var buf = [node.id];
+            if(po){
+                // reset 'buf' if the nodeParameter was included in paramOrder
+                if(np && po.indexOf(np) > -1){
+                    buf = [];
+                }
+
+                for(var i = 0, len = po.length; i < len; i++){
+                    buf.push(bp[ po[i] ]);
+                }
+            }else if(this.paramsAsHash){
+                buf = [bp];
+            }
+            return buf;
+        }else{
+            return bp;
+        }
+    },
+
+    requestData : function(node, callback, scope){
+        if(this.fireEvent("beforeload", this, node, callback) !== false){
+            if(this.directFn){
+                var args = this.getParams(node);
+                args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
+                this.directFn.apply(window, args);
+            }else{
+                this.transId = Ext.Ajax.request({
+                    method:this.requestMethod,
+                    url: this.dataUrl||this.url,
+                    success: this.handleResponse,
+                    failure: this.handleFailure,
+                    scope: this,
+                    argument: {callback: callback, node: node, scope: scope},
+                    params: this.getParams(node)
+                });
+            }
+        }else{
+            // if the load is cancelled, make sure we notify
+            // the node that we are done
+            this.runCallback(callback, scope || node, []);
+        }
+    },
+
+    processDirectResponse: function(result, response, args){
+        if(response.status){
+            this.handleResponse({
+                responseData: Ext.isArray(result) ? result : null,
+                responseText: result,
+                argument: args
+            });
+        }else{
+            this.handleFailure({
+                argument: args
+            });
+        }
+    },
+
+    // private
+    runCallback: function(cb, scope, args){
+        if(Ext.isFunction(cb)){
+            cb.apply(scope, args);
+        }
+    },
+
+    isLoading : function(){
+        return !!this.transId;
+    },
+
+    abort : function(){
+        if(this.isLoading()){
+            Ext.Ajax.abort(this.transId);
+        }
+    },
+
+    /**
+    * 
    Override this function for custom TreeNode node implementation, or to
+    * modify the attributes at creation time.
    
+    * Example:
    
+new Ext.tree.TreePanel({
+    ...
+    loader: new Ext.tree.TreeLoader({
+        url: 'dataUrl',
+        createNode: function(attr) {
+//          Allow consolidation consignments to have
+//          consignments dropped into them.
+            if (attr.isConsolidation) {
+                attr.iconCls = 'x-consol',
+                attr.allowDrop = true;
+            }
+            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
+        }
+    }),
+    ...
+});
+
    
+    * @param attr {Object} The attributes from which to create the new node.
+    */
+    createNode : function(attr){
+        // apply baseAttrs, nice idea Corey!
+        if(this.baseAttrs){
+            Ext.applyIf(attr, this.baseAttrs);
+        }
+        if(this.applyLoader !== false && !attr.loader){
+            attr.loader = this;
+        }
+        if(Ext.isString(attr.uiProvider)){
+           attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
+        }
+        if(attr.nodeType){
+            return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);
+        }else{
+            return attr.leaf ?
+                        new Ext.tree.TreeNode(attr) :
+                        new Ext.tree.AsyncTreeNode(attr);
+        }
+    },
+
+    processResponse : function(response, node, callback, scope){
+        var json = response.responseText;
+        try {
+            var o = response.responseData || Ext.decode(json);
+            node.beginUpdate();
+            for(var i = 0, len = o.length; i < len; i++){
+                var n = this.createNode(o[i]);
+                if(n){
+                    node.appendChild(n);
+                }
+            }
+            node.endUpdate();
+            this.runCallback(callback, scope || node, [node]);
+        }catch(e){
+            this.handleFailure(response);
+        }
+    },
+
+    handleResponse : function(response){
+        this.transId = false;
+        var a = response.argument;
+        this.processResponse(response, a.node, a.callback, a.scope);
+        this.fireEvent("load", this, a.node, response);
+    },
+
+    handleFailure : function(response){
+        this.transId = false;
+        var a = response.argument;
+        this.fireEvent("loadexception", this, a.node, response);
+        this.runCallback(a.callback, a.scope || a.node, [a.node]);
+    },
+
+    destroy : function(){
+        this.abort();
+        this.purgeListeners();
+    }
 });/**
  * @class Ext.tree.TreeFilter
  * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
@@ -51496,494 +51496,494 @@ Ext.tree.TreeFilter.prototype = {
         this.filtered = {};
     }
 };
-/**
- * @class Ext.tree.TreeSorter
- * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the
- * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
- * Example usage:
    
- * 
    
-new Ext.tree.TreeSorter(myTree, {
-    folderSort: true,
-    dir: "desc",
-    sortType: function(node) {
-        // sort by a custom, typed attribute:
-        return parseInt(node.id, 10);
-    }
-});
-
    
- * @constructor
- * @param {TreePanel} tree
- * @param {Object} config
- */
-Ext.tree.TreeSorter = function(tree, config){
-    /**
-     * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)
-     */
-    /**
-     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this
-     * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.
-     */
-    /**
-     * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")
-     */
-    /**
-     * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")
-     */
-    /**
-     * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)
-     */
-    /**
-     * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function
-     * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return
-     * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when
-     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for
-     * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.
-     */
-
-    Ext.apply(this, config);
-    tree.on("beforechildrenrendered", this.doSort, this);
-    tree.on("append", this.updateSort, this);
-    tree.on("insert", this.updateSort, this);
-    tree.on("textchange", this.updateSortParent, this);
-
-    var dsc = this.dir && this.dir.toLowerCase() == "desc";
-    var p = this.property || "text";
-    var sortType = this.sortType;
-    var fs = this.folderSort;
-    var cs = this.caseSensitive === true;
-    var leafAttr = this.leafAttr || 'leaf';
-
-    this.sortFn = function(n1, n2){
-        if(fs){
-            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
-                return 1;
-            }
-            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
-                return -1;
-            }
-        }
-        var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
-        var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
-        if(v1 < v2){
-            return dsc ? +1 : -1;
-        }else if(v1 > v2){
-            return dsc ? -1 : +1;
-        }else{
-            return 0;
-        }
-    };
-};
-
-Ext.tree.TreeSorter.prototype = {
-    doSort : function(node){
-        node.sort(this.sortFn);
-    },
-
-    compareNodes : function(n1, n2){
-        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
-    },
-
-    updateSort : function(tree, node){
-        if(node.childrenRendered){
-            this.doSort.defer(1, this, [node]);
-        }
-    },
-
-    updateSortParent : function(node){
-        var p = node.parentNode;
-        if(p && p.childrenRendered){
-            this.doSort.defer(1, this, [p]);
-        }
-    }
-};/**
- * @class Ext.tree.TreeDropZone
- * @extends Ext.dd.DropZone
- * @constructor
- * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping
- * @param {Object} config
- */
-if(Ext.dd.DropZone){
-    
-Ext.tree.TreeDropZone = function(tree, config){
-    /**
-     * @cfg {Boolean} allowParentInsert
-     * Allow inserting a dragged node between an expanded parent node and its first child that will become a
-     * sibling of the parent when dropped (defaults to false)
-     */
-    this.allowParentInsert = config.allowParentInsert || false;
-    /**
-     * @cfg {String} allowContainerDrop
-     * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
-     */
-    this.allowContainerDrop = config.allowContainerDrop || false;
-    /**
-     * @cfg {String} appendOnly
-     * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
-     */
-    this.appendOnly = config.appendOnly || false;
-
-    Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);
-    /**
-    * The TreePanel for this drop zone
-    * @type Ext.tree.TreePanel
-    * @property
-    */
-    this.tree = tree;
-    /**
-    * Arbitrary data that can be associated with this tree and will be included in the event object that gets
-    * passed to any nodedragover event handler (defaults to {})
-    * @type Ext.tree.TreePanel
-    * @property
-    */
-    this.dragOverData = {};
-    // private
-    this.lastInsertClass = "x-tree-no-status";
-};
-
-Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {
-    /**
-     * @cfg {String} ddGroup
-     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
-     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
-     */
-    ddGroup : "TreeDD",
-
-    /**
-     * @cfg {String} expandDelay
-     * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
-     * over the target (defaults to 1000)
-     */
-    expandDelay : 1000,
-
-    // private
-    expandNode : function(node){
-        if(node.hasChildNodes() && !node.isExpanded()){
-            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
-        }
-    },
-
-    // private
-    queueExpand : function(node){
-        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
-    },
-
-    // private
-    cancelExpand : function(){
-        if(this.expandProcId){
-            clearTimeout(this.expandProcId);
-            this.expandProcId = false;
-        }
-    },
-
-    // private
-    isValidDropPoint : function(n, pt, dd, e, data){
-        if(!n || !data){ return false; }
-        var targetNode = n.node;
-        var dropNode = data.node;
-        // default drop rules
-        if(!(targetNode && targetNode.isTarget && pt)){
-            return false;
-        }
-        if(pt == "append" && targetNode.allowChildren === false){
-            return false;
-        }
-        if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
-            return false;
-        }
-        if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
-            return false;
-        }
-        // reuse the object
-        var overEvent = this.dragOverData;
-        overEvent.tree = this.tree;
-        overEvent.target = targetNode;
-        overEvent.data = data;
-        overEvent.point = pt;
-        overEvent.source = dd;
-        overEvent.rawEvent = e;
-        overEvent.dropNode = dropNode;
-        overEvent.cancel = false;  
-        var result = this.tree.fireEvent("nodedragover", overEvent);
-        return overEvent.cancel === false && result !== false;
-    },
-
-    // private
-    getDropPoint : function(e, n, dd){
-        var tn = n.node;
-        if(tn.isRoot){
-            return tn.allowChildren !== false ? "append" : false; // always append for root
-        }
-        var dragEl = n.ddel;
-        var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
-        var y = Ext.lib.Event.getPageY(e);
-        var noAppend = tn.allowChildren === false || tn.isLeaf();
-        if(this.appendOnly || tn.parentNode.allowChildren === false){
-            return noAppend ? false : "append";
-        }
-        var noBelow = false;
-        if(!this.allowParentInsert){
-            noBelow = tn.hasChildNodes() && tn.isExpanded();
-        }
-        var q = (b - t) / (noAppend ? 2 : 3);
-        if(y >= t && y < (t + q)){
-            return "above";
-        }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
-            return "below";
-        }else{
-            return "append";
-        }
-    },
-
-    // private
-    onNodeEnter : function(n, dd, e, data){
-        this.cancelExpand();
-    },
-    
-    onContainerOver : function(dd, e, data) {
-        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
-            return this.dropAllowed;
-        }
-        return this.dropNotAllowed;
-    },
-
-    // private
-    onNodeOver : function(n, dd, e, data){
-        var pt = this.getDropPoint(e, n, dd);
-        var node = n.node;
-        
-        // auto node expand check
-        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
-            this.queueExpand(node);
-        }else if(pt != "append"){
-            this.cancelExpand();
-        }
-        
-        // set the insert point style on the target node
-        var returnCls = this.dropNotAllowed;
-        if(this.isValidDropPoint(n, pt, dd, e, data)){
-           if(pt){
-               var el = n.ddel;
-               var cls;
-               if(pt == "above"){
-                   returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
-                   cls = "x-tree-drag-insert-above";
-               }else if(pt == "below"){
-                   returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
-                   cls = "x-tree-drag-insert-below";
-               }else{
-                   returnCls = "x-tree-drop-ok-append";
-                   cls = "x-tree-drag-append";
-               }
-               if(this.lastInsertClass != cls){
-                   Ext.fly(el).replaceClass(this.lastInsertClass, cls);
-                   this.lastInsertClass = cls;
-               }
-           }
-       }
-       return returnCls;
-    },
-
-    // private
-    onNodeOut : function(n, dd, e, data){
-        this.cancelExpand();
-        this.removeDropIndicators(n);
-    },
-
-    // private
-    onNodeDrop : function(n, dd, e, data){
-        var point = this.getDropPoint(e, n, dd);
-        var targetNode = n.node;
-        targetNode.ui.startDrop();
-        if(!this.isValidDropPoint(n, point, dd, e, data)){
-            targetNode.ui.endDrop();
-            return false;
-        }
-        // first try to find the drop node
-        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
-        return this.processDrop(targetNode, data, point, dd, e, dropNode);
-    },
-    
-    onContainerDrop : function(dd, e, data){
-        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
-            var targetNode = this.tree.getRootNode();       
-            targetNode.ui.startDrop();
-            var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);
-            return this.processDrop(targetNode, data, 'append', dd, e, dropNode);
-        }
-        return false;
-    },
-    
-    // private
-    processDrop: function(target, data, point, dd, e, dropNode){
-        var dropEvent = {
-            tree : this.tree,
-            target: target,
-            data: data,
-            point: point,
-            source: dd,
-            rawEvent: e,
-            dropNode: dropNode,
-            cancel: !dropNode,
-            dropStatus: false
-        };
-        var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
-        if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
-            target.ui.endDrop();
-            return dropEvent.dropStatus;
-        }
-    
-        target = dropEvent.target;
-        if(point == 'append' && !target.isExpanded()){
-            target.expand(false, null, function(){
-                this.completeDrop(dropEvent);
-            }.createDelegate(this));
-        }else{
-            this.completeDrop(dropEvent);
-        }
-        return true;
-    },
-
-    // private
-    completeDrop : function(de){
-        var ns = de.dropNode, p = de.point, t = de.target;
-        if(!Ext.isArray(ns)){
-            ns = [ns];
-        }
-        var n;
-        for(var i = 0, len = ns.length; i < len; i++){
-            n = ns[i];
-            if(p == "above"){
-                t.parentNode.insertBefore(n, t);
-            }else if(p == "below"){
-                t.parentNode.insertBefore(n, t.nextSibling);
-            }else{
-                t.appendChild(n);
-            }
-        }
-        n.ui.focus();
-        if(Ext.enableFx && this.tree.hlDrop){
-            n.ui.highlight();
-        }
-        t.ui.endDrop();
-        this.tree.fireEvent("nodedrop", de);
-    },
-
-    // private
-    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
-        if(Ext.enableFx && this.tree.hlDrop){
-            dropNode.ui.focus();
-            dropNode.ui.highlight();
-        }
-        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
-    },
-
-    // private
-    getTree : function(){
-        return this.tree;
-    },
-
-    // private
-    removeDropIndicators : function(n){
-        if(n && n.ddel){
-            var el = n.ddel;
-            Ext.fly(el).removeClass([
-                    "x-tree-drag-insert-above",
-                    "x-tree-drag-insert-below",
-                    "x-tree-drag-append"]);
-            this.lastInsertClass = "_noclass";
-        }
-    },
-
-    // private
-    beforeDragDrop : function(target, e, id){
-        this.cancelExpand();
-        return true;
-    },
-
-    // private
-    afterRepair : function(data){
-        if(data && Ext.enableFx){
-            data.node.ui.highlight();
-        }
-        this.hideProxy();
-    }    
-});
-
-}/**
- * @class Ext.tree.TreeDragZone
- * @extends Ext.dd.DragZone
- * @constructor
- * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging
- * @param {Object} config
- */
-if(Ext.dd.DragZone){
-Ext.tree.TreeDragZone = function(tree, config){
-    Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);
-    /**
-    * The TreePanel for this drag zone
-    * @type Ext.tree.TreePanel
-    * @property
-    */
-    this.tree = tree;
-};
-
-Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {
-    /**
-     * @cfg {String} ddGroup
-     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
-     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
-     */
-    ddGroup : "TreeDD",
-
-    // private
-    onBeforeDrag : function(data, e){
-        var n = data.node;
-        return n && n.draggable && !n.disabled;
-    },
-
-    // private
-    onInitDrag : function(e){
-        var data = this.dragData;
-        this.tree.getSelectionModel().select(data.node);
-        this.tree.eventModel.disable();
-        this.proxy.update("");
-        data.node.ui.appendDDGhost(this.proxy.ghost.dom);
-        this.tree.fireEvent("startdrag", this.tree, data.node, e);
-    },
-
-    // private
-    getRepairXY : function(e, data){
-        return data.node.ui.getDDRepairXY();
-    },
-
-    // private
-    onEndDrag : function(data, e){
-        this.tree.eventModel.enable.defer(100, this.tree.eventModel);
-        this.tree.fireEvent("enddrag", this.tree, data.node, e);
-    },
-
-    // private
-    onValidDrop : function(dd, e, id){
-        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
-        this.hideProxy();
-    },
-
-    // private
-    beforeInvalidDrop : function(e, id){
-        // this scrolls the original position back into view
-        var sm = this.tree.getSelectionModel();
-        sm.clearSelections();
-        sm.select(this.dragData.node);
-    },
-    
-    // private
-    afterRepair : function(){
-        if (Ext.enableFx && this.tree.hlDrop) {
-            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
-        }
-        this.dragging = false;
-    }
-});
+/**
+ * @class Ext.tree.TreeSorter
+ * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the
+ * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
+ * Example usage:
    
+ * 
    
+new Ext.tree.TreeSorter(myTree, {
+    folderSort: true,
+    dir: "desc",
+    sortType: function(node) {
+        // sort by a custom, typed attribute:
+        return parseInt(node.id, 10);
+    }
+});
+
    
+ * @constructor
+ * @param {TreePanel} tree
+ * @param {Object} config
+ */
+Ext.tree.TreeSorter = function(tree, config){
+    /**
+     * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)
+     */
+    /**
+     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this
+     * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.
+     */
+    /**
+     * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")
+     */
+    /**
+     * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")
+     */
+    /**
+     * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)
+     */
+    /**
+     * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function
+     * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return
+     * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when
+     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for
+     * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.
+     */
+
+    Ext.apply(this, config);
+    tree.on("beforechildrenrendered", this.doSort, this);
+    tree.on("append", this.updateSort, this);
+    tree.on("insert", this.updateSort, this);
+    tree.on("textchange", this.updateSortParent, this);
+
+    var dsc = this.dir && this.dir.toLowerCase() == "desc";
+    var p = this.property || "text";
+    var sortType = this.sortType;
+    var fs = this.folderSort;
+    var cs = this.caseSensitive === true;
+    var leafAttr = this.leafAttr || 'leaf';
+
+    this.sortFn = function(n1, n2){
+        if(fs){
+            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+                return 1;
+            }
+            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+                return -1;
+            }
+        }
+        var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+        var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+        if(v1 < v2){
+            return dsc ? +1 : -1;
+        }else if(v1 > v2){
+            return dsc ? -1 : +1;
+        }else{
+            return 0;
+        }
+    };
+};
+
+Ext.tree.TreeSorter.prototype = {
+    doSort : function(node){
+        node.sort(this.sortFn);
+    },
+
+    compareNodes : function(n1, n2){
+        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+    },
+
+    updateSort : function(tree, node){
+        if(node.childrenRendered){
+            this.doSort.defer(1, this, [node]);
+        }
+    },
+
+    updateSortParent : function(node){
+        var p = node.parentNode;
+        if(p && p.childrenRendered){
+            this.doSort.defer(1, this, [p]);
+        }
+    }
+};/**
+ * @class Ext.tree.TreeDropZone
+ * @extends Ext.dd.DropZone
+ * @constructor
+ * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping
+ * @param {Object} config
+ */
+if(Ext.dd.DropZone){
+    
+Ext.tree.TreeDropZone = function(tree, config){
+    /**
+     * @cfg {Boolean} allowParentInsert
+     * Allow inserting a dragged node between an expanded parent node and its first child that will become a
+     * sibling of the parent when dropped (defaults to false)
+     */
+    this.allowParentInsert = config.allowParentInsert || false;
+    /**
+     * @cfg {String} allowContainerDrop
+     * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
+     */
+    this.allowContainerDrop = config.allowContainerDrop || false;
+    /**
+     * @cfg {String} appendOnly
+     * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
+     */
+    this.appendOnly = config.appendOnly || false;
+
+    Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);
+    /**
+    * The TreePanel for this drop zone
+    * @type Ext.tree.TreePanel
+    * @property
+    */
+    this.tree = tree;
+    /**
+    * Arbitrary data that can be associated with this tree and will be included in the event object that gets
+    * passed to any nodedragover event handler (defaults to {})
+    * @type Ext.tree.TreePanel
+    * @property
+    */
+    this.dragOverData = {};
+    // private
+    this.lastInsertClass = "x-tree-no-status";
+};
+
+Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
+     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
+     */
+    ddGroup : "TreeDD",
+
+    /**
+     * @cfg {String} expandDelay
+     * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
+     * over the target (defaults to 1000)
+     */
+    expandDelay : 1000,
+
+    // private
+    expandNode : function(node){
+        if(node.hasChildNodes() && !node.isExpanded()){
+            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
+        }
+    },
+
+    // private
+    queueExpand : function(node){
+        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+    },
+
+    // private
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
+            this.expandProcId = false;
+        }
+    },
+
+    // private
+    isValidDropPoint : function(n, pt, dd, e, data){
+        if(!n || !data){ return false; }
+        var targetNode = n.node;
+        var dropNode = data.node;
+        // default drop rules
+        if(!(targetNode && targetNode.isTarget && pt)){
+            return false;
+        }
+        if(pt == "append" && targetNode.allowChildren === false){
+            return false;
+        }
+        if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
+            return false;
+        }
+        if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
+            return false;
+        }
+        // reuse the object
+        var overEvent = this.dragOverData;
+        overEvent.tree = this.tree;
+        overEvent.target = targetNode;
+        overEvent.data = data;
+        overEvent.point = pt;
+        overEvent.source = dd;
+        overEvent.rawEvent = e;
+        overEvent.dropNode = dropNode;
+        overEvent.cancel = false;  
+        var result = this.tree.fireEvent("nodedragover", overEvent);
+        return overEvent.cancel === false && result !== false;
+    },
+
+    // private
+    getDropPoint : function(e, n, dd){
+        var tn = n.node;
+        if(tn.isRoot){
+            return tn.allowChildren !== false ? "append" : false; // always append for root
+        }
+        var dragEl = n.ddel;
+        var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
+        var y = Ext.lib.Event.getPageY(e);
+        var noAppend = tn.allowChildren === false || tn.isLeaf();
+        if(this.appendOnly || tn.parentNode.allowChildren === false){
+            return noAppend ? false : "append";
+        }
+        var noBelow = false;
+        if(!this.allowParentInsert){
+            noBelow = tn.hasChildNodes() && tn.isExpanded();
+        }
+        var q = (b - t) / (noAppend ? 2 : 3);
+        if(y >= t && y < (t + q)){
+            return "above";
+        }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
+            return "below";
+        }else{
+            return "append";
+        }
+    },
+
+    // private
+    onNodeEnter : function(n, dd, e, data){
+        this.cancelExpand();
+    },
+    
+    onContainerOver : function(dd, e, data) {
+        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
+            return this.dropAllowed;
+        }
+        return this.dropNotAllowed;
+    },
+
+    // private
+    onNodeOver : function(n, dd, e, data){
+        var pt = this.getDropPoint(e, n, dd);
+        var node = n.node;
+        
+        // auto node expand check
+        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
+            this.queueExpand(node);
+        }else if(pt != "append"){
+            this.cancelExpand();
+        }
+        
+        // set the insert point style on the target node
+        var returnCls = this.dropNotAllowed;
+        if(this.isValidDropPoint(n, pt, dd, e, data)){
+           if(pt){
+               var el = n.ddel;
+               var cls;
+               if(pt == "above"){
+                   returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
+                   cls = "x-tree-drag-insert-above";
+               }else if(pt == "below"){
+                   returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
+                   cls = "x-tree-drag-insert-below";
+               }else{
+                   returnCls = "x-tree-drop-ok-append";
+                   cls = "x-tree-drag-append";
+               }
+               if(this.lastInsertClass != cls){
+                   Ext.fly(el).replaceClass(this.lastInsertClass, cls);
+                   this.lastInsertClass = cls;
+               }
+           }
+       }
+       return returnCls;
+    },
+
+    // private
+    onNodeOut : function(n, dd, e, data){
+        this.cancelExpand();
+        this.removeDropIndicators(n);
+    },
+
+    // private
+    onNodeDrop : function(n, dd, e, data){
+        var point = this.getDropPoint(e, n, dd);
+        var targetNode = n.node;
+        targetNode.ui.startDrop();
+        if(!this.isValidDropPoint(n, point, dd, e, data)){
+            targetNode.ui.endDrop();
+            return false;
+        }
+        // first try to find the drop node
+        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
+        return this.processDrop(targetNode, data, point, dd, e, dropNode);
+    },
+    
+    onContainerDrop : function(dd, e, data){
+        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
+            var targetNode = this.tree.getRootNode();       
+            targetNode.ui.startDrop();
+            var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);
+            return this.processDrop(targetNode, data, 'append', dd, e, dropNode);
+        }
+        return false;
+    },
+    
+    // private
+    processDrop: function(target, data, point, dd, e, dropNode){
+        var dropEvent = {
+            tree : this.tree,
+            target: target,
+            data: data,
+            point: point,
+            source: dd,
+            rawEvent: e,
+            dropNode: dropNode,
+            cancel: !dropNode,
+            dropStatus: false
+        };
+        var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
+        if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
+            target.ui.endDrop();
+            return dropEvent.dropStatus;
+        }
+    
+        target = dropEvent.target;
+        if(point == 'append' && !target.isExpanded()){
+            target.expand(false, null, function(){
+                this.completeDrop(dropEvent);
+            }.createDelegate(this));
+        }else{
+            this.completeDrop(dropEvent);
+        }
+        return true;
+    },
+
+    // private
+    completeDrop : function(de){
+        var ns = de.dropNode, p = de.point, t = de.target;
+        if(!Ext.isArray(ns)){
+            ns = [ns];
+        }
+        var n;
+        for(var i = 0, len = ns.length; i < len; i++){
+            n = ns[i];
+            if(p == "above"){
+                t.parentNode.insertBefore(n, t);
+            }else if(p == "below"){
+                t.parentNode.insertBefore(n, t.nextSibling);
+            }else{
+                t.appendChild(n);
+            }
+        }
+        n.ui.focus();
+        if(Ext.enableFx && this.tree.hlDrop){
+            n.ui.highlight();
+        }
+        t.ui.endDrop();
+        this.tree.fireEvent("nodedrop", de);
+    },
+
+    // private
+    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
+        if(Ext.enableFx && this.tree.hlDrop){
+            dropNode.ui.focus();
+            dropNode.ui.highlight();
+        }
+        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+    },
+
+    // private
+    getTree : function(){
+        return this.tree;
+    },
+
+    // private
+    removeDropIndicators : function(n){
+        if(n && n.ddel){
+            var el = n.ddel;
+            Ext.fly(el).removeClass([
+                    "x-tree-drag-insert-above",
+                    "x-tree-drag-insert-below",
+                    "x-tree-drag-append"]);
+            this.lastInsertClass = "_noclass";
+        }
+    },
+
+    // private
+    beforeDragDrop : function(target, e, id){
+        this.cancelExpand();
+        return true;
+    },
+
+    // private
+    afterRepair : function(data){
+        if(data && Ext.enableFx){
+            data.node.ui.highlight();
+        }
+        this.hideProxy();
+    }    
+});
+
+}/**
+ * @class Ext.tree.TreeDragZone
+ * @extends Ext.dd.DragZone
+ * @constructor
+ * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging
+ * @param {Object} config
+ */
+if(Ext.dd.DragZone){
+Ext.tree.TreeDragZone = function(tree, config){
+    Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);
+    /**
+    * The TreePanel for this drag zone
+    * @type Ext.tree.TreePanel
+    * @property
+    */
+    this.tree = tree;
+};
+
+Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
+     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
+     */
+    ddGroup : "TreeDD",
+
+    // private
+    onBeforeDrag : function(data, e){
+        var n = data.node;
+        return n && n.draggable && !n.disabled;
+    },
+
+    // private
+    onInitDrag : function(e){
+        var data = this.dragData;
+        this.tree.getSelectionModel().select(data.node);
+        this.tree.eventModel.disable();
+        this.proxy.update("");
+        data.node.ui.appendDDGhost(this.proxy.ghost.dom);
+        this.tree.fireEvent("startdrag", this.tree, data.node, e);
+    },
+
+    // private
+    getRepairXY : function(e, data){
+        return data.node.ui.getDDRepairXY();
+    },
+
+    // private
+    onEndDrag : function(data, e){
+        this.tree.eventModel.enable.defer(100, this.tree.eventModel);
+        this.tree.fireEvent("enddrag", this.tree, data.node, e);
+    },
+
+    // private
+    onValidDrop : function(dd, e, id){
+        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
+        this.hideProxy();
+    },
+
+    // private
+    beforeInvalidDrop : function(e, id){
+        // this scrolls the original position back into view
+        var sm = this.tree.getSelectionModel();
+        sm.clearSelections();
+        sm.select(this.dragData.node);
+    },
+    
+    // private
+    afterRepair : function(){
+        if (Ext.enableFx && this.tree.hlDrop) {
+            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
+        }
+        this.dragging = false;
+    }
+});
 }/**
  * @class Ext.tree.TreeEditor
  * @extends Ext.Editor
@@ -52154,783 +52154,783 @@ Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
         tree.un('beforeclick', this.beforeNodeClick, this);
         tree.un('dblclick', this.onNodeDblClick, this);
     }
-});/*! SWFObject v2.2  
-    is released under the MIT License  
-*/
-
-var swfobject = function() {
-    
-    var UNDEF = "undefined",
-        OBJECT = "object",
-        SHOCKWAVE_FLASH = "Shockwave Flash",
-        SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
-        FLASH_MIME_TYPE = "application/x-shockwave-flash",
-        EXPRESS_INSTALL_ID = "SWFObjectExprInst",
-        ON_READY_STATE_CHANGE = "onreadystatechange",
-        
-        win = window,
-        doc = document,
-        nav = navigator,
-        
-        plugin = false,
-        domLoadFnArr = [main],
-        regObjArr = [],
-        objIdArr = [],
-        listenersArr = [],
-        storedAltContent,
-        storedAltContentId,
-        storedCallbackFn,
-        storedCallbackObj,
-        isDomLoaded = false,
-        isExpressInstallActive = false,
-        dynamicStylesheet,
-        dynamicStylesheetMedia,
-        autoHideShow = true,
-    
-    /* Centralized function for browser feature detection
-        - User agent string detection is only used when no good alternative is possible
-        - Is executed directly for optimal performance
-    */  
-    ua = function() {
-        var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF,
-            u = nav.userAgent.toLowerCase(),
-            p = nav.platform.toLowerCase(),
-            windows = p ? /win/.test(p) : /win/.test(u),
-            mac = p ? /mac/.test(p) : /mac/.test(u),
-            webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
-            ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
-            playerVersion = [0,0,0],
-            d = null;
-        if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
-            d = nav.plugins[SHOCKWAVE_FLASH].description;
-            if (d && !(typeof nav.mimeTypes != UNDEF && nav.mimeTypes[FLASH_MIME_TYPE] && !nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { // navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+
-                plugin = true;
-                ie = false; // cascaded feature detection for Internet Explorer
-                d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
-                playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
-                playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
-                playerVersion[2] = /[a-zA-Z]/.test(d) ? parseInt(d.replace(/^.*[a-zA-Z]+(.*)$/, "$1"), 10) : 0;
-            }
-        }
-        else if (typeof win.ActiveXObject != UNDEF) {
-            try {
-                var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
-                if (a) { // a will return null when ActiveX is disabled
-                    d = a.GetVariable("$version");
-                    if (d) {
-                        ie = true; // cascaded feature detection for Internet Explorer
-                        d = d.split(" ")[1].split(",");
-                        playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
-                    }
-                }
-            }
-            catch(e) {}
-        }
-        return { w3:w3cdom, pv:playerVersion, wk:webkit, ie:ie, win:windows, mac:mac };
-    }(),
-    
-    /* Cross-browser onDomLoad
-        - Will fire an event as soon as the DOM of a web page is loaded
-        - Internet Explorer workaround based on Diego Perini's solution: http://javascript.nwbox.com/IEContentLoaded/
-        - Regular onload serves as fallback
-    */ 
-    onDomLoad = function() {
-        if (!ua.w3) { return; }
-        if ((typeof doc.readyState != UNDEF && doc.readyState == "complete") || (typeof doc.readyState == UNDEF && (doc.getElementsByTagName("body")[0] || doc.body))) { // function is fired after onload, e.g. when script is inserted dynamically 
-            callDomLoadFunctions();
-        }
-        if (!isDomLoaded) {
-            if (typeof doc.addEventListener != UNDEF) {
-                doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, false);
-            }       
-            if (ua.ie && ua.win) {
-                doc.attachEvent(ON_READY_STATE_CHANGE, function() {
-                    if (doc.readyState == "complete") {
-                        doc.detachEvent(ON_READY_STATE_CHANGE, arguments.callee);
-                        callDomLoadFunctions();
-                    }
-                });
-                if (win == top) { // if not inside an iframe
-                    (function(){
-                        if (isDomLoaded) { return; }
-                        try {
-                            doc.documentElement.doScroll("left");
-                        }
-                        catch(e) {
-                            setTimeout(arguments.callee, 0);
-                            return;
-                        }
-                        callDomLoadFunctions();
-                    })();
-                }
-            }
-            if (ua.wk) {
-                (function(){
-                    if (isDomLoaded) { return; }
-                    if (!/loaded|complete/.test(doc.readyState)) {
-                        setTimeout(arguments.callee, 0);
-                        return;
-                    }
-                    callDomLoadFunctions();
-                })();
-            }
-            addLoadEvent(callDomLoadFunctions);
-        }
-    }();
-    
-    function callDomLoadFunctions() {
-        if (isDomLoaded) { return; }
-        try { // test if we can really add/remove elements to/from the DOM; we don't want to fire it too early
-            var t = doc.getElementsByTagName("body")[0].appendChild(createElement("span"));
-            t.parentNode.removeChild(t);
-        }
-        catch (e) { return; }
-        isDomLoaded = true;
-        var dl = domLoadFnArr.length;
-        for (var i = 0; i < dl; i++) {
-            domLoadFnArr[i]();
-        }
-    }
-    
-    function addDomLoadEvent(fn) {
-        if (isDomLoaded) {
-            fn();
-        }
-        else { 
-            domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
-        }
-    }
-    
-    /* Cross-browser onload
-        - Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
-        - Will fire an event as soon as a web page including all of its assets are loaded 
-     */
-    function addLoadEvent(fn) {
-        if (typeof win.addEventListener != UNDEF) {
-            win.addEventListener("load", fn, false);
-        }
-        else if (typeof doc.addEventListener != UNDEF) {
-            doc.addEventListener("load", fn, false);
-        }
-        else if (typeof win.attachEvent != UNDEF) {
-            addListener(win, "onload", fn);
-        }
-        else if (typeof win.onload == "function") {
-            var fnOld = win.onload;
-            win.onload = function() {
-                fnOld();
-                fn();
-            };
-        }
-        else {
-            win.onload = fn;
-        }
-    }
-    
-    /* Main function
-        - Will preferably execute onDomLoad, otherwise onload (as a fallback)
-    */
-    function main() { 
-        if (plugin) {
-            testPlayerVersion();
-        }
-        else {
-            matchVersions();
-        }
-    }
-    
-    /* Detect the Flash Player version for non-Internet Explorer browsers
-        - Detecting the plug-in version via the object element is more precise than using the plugins collection item's description:
-          a. Both release and build numbers can be detected
-          b. Avoid wrong descriptions by corrupt installers provided by Adobe
-          c. Avoid wrong descriptions by multiple Flash Player entries in the plugin Array, caused by incorrect browser imports
-        - Disadvantage of this method is that it depends on the availability of the DOM, while the plugins collection is immediately available
-    */
-    function testPlayerVersion() {
-        var b = doc.getElementsByTagName("body")[0];
-        var o = createElement(OBJECT);
-        o.setAttribute("type", FLASH_MIME_TYPE);
-        var t = b.appendChild(o);
-        if (t) {
-            var counter = 0;
-            (function(){
-                if (typeof t.GetVariable != UNDEF) {
-                    var d = t.GetVariable("$version");
-                    if (d) {
-                        d = d.split(" ")[1].split(",");
-                        ua.pv = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
-                    }
-                }
-                else if (counter < 10) {
-                    counter++;
-                    setTimeout(arguments.callee, 10);
-                    return;
-                }
-                b.removeChild(o);
-                t = null;
-                matchVersions();
-            })();
-        }
-        else {
-            matchVersions();
-        }
-    }
-    
-    /* Perform Flash Player and SWF version matching; static publishing only
-    */
-    function matchVersions() {
-        var rl = regObjArr.length;
-        if (rl > 0) {
-            for (var i = 0; i < rl; i++) { // for each registered object element
-                var id = regObjArr[i].id;
-                var cb = regObjArr[i].callbackFn;
-                var cbObj = {success:false, id:id};
-                if (ua.pv[0] > 0) {
-                    var obj = getElementById(id);
-                    if (obj) {
-                        if (hasPlayerVersion(regObjArr[i].swfVersion) && !(ua.wk && ua.wk < 312)) { // Flash Player version >= published SWF version: Houston, we have a match!
-                            setVisibility(id, true);
-                            if (cb) {
-                                cbObj.success = true;
-                                cbObj.ref = getObjectById(id);
-                                cb(cbObj);
-                            }
-                        }
-                        else if (regObjArr[i].expressInstall && canExpressInstall()) { // show the Adobe Express Install dialog if set by the web page author and if supported
-                            var att = {};
-                            att.data = regObjArr[i].expressInstall;
-                            att.width = obj.getAttribute("width") || "0";
-                            att.height = obj.getAttribute("height") || "0";
-                            if (obj.getAttribute("class")) { att.styleclass = obj.getAttribute("class"); }
-                            if (obj.getAttribute("align")) { att.align = obj.getAttribute("align"); }
-                            // parse HTML object param element's name-value pairs
-                            var par = {};
-                            var p = obj.getElementsByTagName("param");
-                            var pl = p.length;
-                            for (var j = 0; j < pl; j++) {
-                                if (p[j].getAttribute("name").toLowerCase() != "movie") {
-                                    par[p[j].getAttribute("name")] = p[j].getAttribute("value");
-                                }
-                            }
-                            showExpressInstall(att, par, id, cb);
-                        }
-                        else { // Flash Player and SWF version mismatch or an older Webkit engine that ignores the HTML object element's nested param elements: display alternative content instead of SWF
-                            displayAltContent(obj);
-                            if (cb) { cb(cbObj); }
-                        }
-                    }
-                }
-                else {  // if no Flash Player is installed or the fp version cannot be detected we let the HTML object element do its job (either show a SWF or alternative content)
-                    setVisibility(id, true);
-                    if (cb) {
-                        var o = getObjectById(id); // test whether there is an HTML object element or not
-                        if (o && typeof o.SetVariable != UNDEF) { 
-                            cbObj.success = true;
-                            cbObj.ref = o;
-                        }
-                        cb(cbObj);
-                    }
-                }
-            }
-        }
-    }
-    
-    function getObjectById(objectIdStr) {
-        var r = null;
-        var o = getElementById(objectIdStr);
-        if (o && o.nodeName == "OBJECT") {
-            if (typeof o.SetVariable != UNDEF) {
-                r = o;
-            }
-            else {
-                var n = o.getElementsByTagName(OBJECT)[0];
-                if (n) {
-                    r = n;
-                }
-            }
-        }
-        return r;
-    }
-    
-    /* Requirements for Adobe Express Install
-        - only one instance can be active at a time
-        - fp 6.0.65 or higher
-        - Win/Mac OS only
-        - no Webkit engines older than version 312
-    */
-    function canExpressInstall() {
-        return !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac) && !(ua.wk && ua.wk < 312);
-    }
-    
-    /* Show the Adobe Express Install dialog
-        - Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
-    */
-    function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
-        isExpressInstallActive = true;
-        storedCallbackFn = callbackFn || null;
-        storedCallbackObj = {success:false, id:replaceElemIdStr};
-        var obj = getElementById(replaceElemIdStr);
-        if (obj) {
-            if (obj.nodeName == "OBJECT") { // static publishing
-                storedAltContent = abstractAltContent(obj);
-                storedAltContentId = null;
-            }
-            else { // dynamic publishing
-                storedAltContent = obj;
-                storedAltContentId = replaceElemIdStr;
-            }
-            att.id = EXPRESS_INSTALL_ID;
-            if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; }
-            if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; }
-            doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
-            var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
-                fv = "MMredirectURL=" + win.location.toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title;
-            if (typeof par.flashvars != UNDEF) {
-                par.flashvars += "&" + fv;
-            }
-            else {
-                par.flashvars = fv;
-            }
-            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
-            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
-            if (ua.ie && ua.win && obj.readyState != 4) {
-                var newObj = createElement("div");
-                replaceElemIdStr += "SWFObjectNew";
-                newObj.setAttribute("id", replaceElemIdStr);
-                obj.parentNode.insertBefore(newObj, obj); // insert placeholder div that will be replaced by the object element that loads expressinstall.swf
-                obj.style.display = "none";
-                (function(){
-                    if (obj.readyState == 4) {
-                        obj.parentNode.removeChild(obj);
-                    }
-                    else {
-                        setTimeout(arguments.callee, 10);
-                    }
-                })();
-            }
-            createSWF(att, par, replaceElemIdStr);
-        }
-    }
-    
-    /* Functions to abstract and display alternative content
-    */
-    function displayAltContent(obj) {
-        if (ua.ie && ua.win && obj.readyState != 4) {
-            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
-            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
-            var el = createElement("div");
-            obj.parentNode.insertBefore(el, obj); // insert placeholder div that will be replaced by the alternative content
-            el.parentNode.replaceChild(abstractAltContent(obj), el);
-            obj.style.display = "none";
-            (function(){
-                if (obj.readyState == 4) {
-                    obj.parentNode.removeChild(obj);
-                }
-                else {
-                    setTimeout(arguments.callee, 10);
-                }
-            })();
-        }
-        else {
-            obj.parentNode.replaceChild(abstractAltContent(obj), obj);
-        }
-    } 
-
-    function abstractAltContent(obj) {
-        var ac = createElement("div");
-        if (ua.win && ua.ie) {
-            ac.innerHTML = obj.innerHTML;
-        }
-        else {
-            var nestedObj = obj.getElementsByTagName(OBJECT)[0];
-            if (nestedObj) {
-                var c = nestedObj.childNodes;
-                if (c) {
-                    var cl = c.length;
-                    for (var i = 0; i < cl; i++) {
-                        if (!(c[i].nodeType == 1 && c[i].nodeName == "PARAM") && !(c[i].nodeType == 8)) {
-                            ac.appendChild(c[i].cloneNode(true));
-                        }
-                    }
-                }
-            }
-        }
-        return ac;
-    }
-    
-    /* Cross-browser dynamic SWF creation
-    */
-    function createSWF(attObj, parObj, id) {
-        var r, el = getElementById(id);
-        if (ua.wk && ua.wk < 312) { return r; }
-        if (el) {
-            if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
-                attObj.id = id;
-            }
-            if (ua.ie && ua.win) { // Internet Explorer + the HTML object element + W3C DOM methods do not combine: fall back to outerHTML
-                var att = "";
-                for (var i in attObj) {
-                    if (attObj[i] != Object.prototype[i]) { // filter out prototype additions from other potential libraries
-                        if (i.toLowerCase() == "data") {
-                            parObj.movie = attObj[i];
-                        }
-                        else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
-                            att += ' class="' + attObj[i] + '"';
-                        }
-                        else if (i.toLowerCase() != "classid") {
-                            att += ' ' + i + '="' + attObj[i] + '"';
-                        }
-                    }
-                }
-                var par = "";
-                for (var j in parObj) {
-                    if (parObj[j] != Object.prototype[j]) { // filter out prototype additions from other potential libraries
-                        par += '';
-                    }
-                }
-                el.outerHTML = '' + par + '';
-                objIdArr[objIdArr.length] = attObj.id; // stored to fix object 'leaks' on unload (dynamic publishing only)
-                r = getElementById(attObj.id);  
-            }
-            else { // well-behaving browsers
-                var o = createElement(OBJECT);
-                o.setAttribute("type", FLASH_MIME_TYPE);
-                for (var m in attObj) {
-                    if (attObj[m] != Object.prototype[m]) { // filter out prototype additions from other potential libraries
-                        if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
-                            o.setAttribute("class", attObj[m]);
-                        }
-                        else if (m.toLowerCase() != "classid") { // filter out IE specific attribute
-                            o.setAttribute(m, attObj[m]);
-                        }
-                    }
-                }
-                for (var n in parObj) {
-                    if (parObj[n] != Object.prototype[n] && n.toLowerCase() != "movie") { // filter out prototype additions from other potential libraries and IE specific param element
-                        createObjParam(o, n, parObj[n]);
-                    }
-                }
-                el.parentNode.replaceChild(o, el);
-                r = o;
-            }
-        }
-        return r;
-    }
-    
-    function createObjParam(el, pName, pValue) {
-        var p = createElement("param");
-        p.setAttribute("name", pName);  
-        p.setAttribute("value", pValue);
-        el.appendChild(p);
-    }
-    
-    /* Cross-browser SWF removal
-        - Especially needed to safely and completely remove a SWF in Internet Explorer
-    */
-    function removeSWF(id) {
-        var obj = getElementById(id);
-        if (obj && obj.nodeName == "OBJECT") {
-            if (ua.ie && ua.win) {
-                obj.style.display = "none";
-                (function(){
-                    if (obj.readyState == 4) {
-                        removeObjectInIE(id);
-                    }
-                    else {
-                        setTimeout(arguments.callee, 10);
-                    }
-                })();
-            }
-            else {
-                obj.parentNode.removeChild(obj);
-            }
-        }
-    }
-    
-    function removeObjectInIE(id) {
-        var obj = getElementById(id);
-        if (obj) {
-            for (var i in obj) {
-                if (typeof obj[i] == "function") {
-                    obj[i] = null;
-                }
-            }
-            obj.parentNode.removeChild(obj);
-        }
-    }
-    
-    /* Functions to optimize JavaScript compression
-    */
-    function getElementById(id) {
-        var el = null;
-        try {
-            el = doc.getElementById(id);
-        }
-        catch (e) {}
-        return el;
-    }
-    
-    function createElement(el) {
-        return doc.createElement(el);
-    }
-    
-    /* Updated attachEvent function for Internet Explorer
-        - Stores attachEvent information in an Array, so on unload the detachEvent functions can be called to avoid memory leaks
-    */  
-    function addListener(target, eventType, fn) {
-        target.attachEvent(eventType, fn);
-        listenersArr[listenersArr.length] = [target, eventType, fn];
-    }
-    
-    /* Flash Player and SWF content version matching
-    */
-    function hasPlayerVersion(rv) {
-        var pv = ua.pv, v = rv.split(".");
-        v[0] = parseInt(v[0], 10);
-        v[1] = parseInt(v[1], 10) || 0; // supports short notation, e.g. "9" instead of "9.0.0"
-        v[2] = parseInt(v[2], 10) || 0;
-        return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
-    }
-    
-    /* Cross-browser dynamic CSS creation
-        - Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
-    */  
-    function createCSS(sel, decl, media, newStyle) {
-        if (ua.ie && ua.mac) { return; }
-        var h = doc.getElementsByTagName("head")[0];
-        if (!h) { return; } // to also support badly authored HTML pages that lack a head element
-        var m = (media && typeof media == "string") ? media : "screen";
-        if (newStyle) {
-            dynamicStylesheet = null;
-            dynamicStylesheetMedia = null;
-        }
-        if (!dynamicStylesheet || dynamicStylesheetMedia != m) { 
-            // create dynamic stylesheet + get a global reference to it
-            var s = createElement("style");
-            s.setAttribute("type", "text/css");
-            s.setAttribute("media", m);
-            dynamicStylesheet = h.appendChild(s);
-            if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
-                dynamicStylesheet = doc.styleSheets[doc.styleSheets.length - 1];
-            }
-            dynamicStylesheetMedia = m;
-        }
-        // add style rule
-        if (ua.ie && ua.win) {
-            if (dynamicStylesheet && typeof dynamicStylesheet.addRule == OBJECT) {
-                dynamicStylesheet.addRule(sel, decl);
-            }
-        }
-        else {
-            if (dynamicStylesheet && typeof doc.createTextNode != UNDEF) {
-                dynamicStylesheet.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
-            }
-        }
-    }
-    
-    function setVisibility(id, isVisible) {
-        if (!autoHideShow) { return; }
-        var v = isVisible ? "visible" : "hidden";
-        if (isDomLoaded && getElementById(id)) {
-            getElementById(id).style.visibility = v;
-        }
-        else {
-            createCSS("#" + id, "visibility:" + v);
-        }
-    }
-
-    /* Filter to avoid XSS attacks
-    */
-    function urlEncodeIfNecessary(s) {
-        var regex = /[\\\"<>\.;]/;
-        var hasBadChars = regex.exec(s) != null;
-        return hasBadChars && typeof encodeURIComponent != UNDEF ? encodeURIComponent(s) : s;
-    }
-    
-    /* Release memory to avoid memory leaks caused by closures, fix hanging audio/video threads and force open sockets/NetConnections to disconnect (Internet Explorer only)
-    */
-    var cleanup = function() {
-        if (ua.ie && ua.win) {
-            window.attachEvent("onunload", function() {
-                // remove listeners to avoid memory leaks
-                var ll = listenersArr.length;
-                for (var i = 0; i < ll; i++) {
-                    listenersArr[i][0].detachEvent(listenersArr[i][1], listenersArr[i][2]);
-                }
-                // cleanup dynamically embedded objects to fix audio/video threads and force open sockets and NetConnections to disconnect
-                var il = objIdArr.length;
-                for (var j = 0; j < il; j++) {
-                    removeSWF(objIdArr[j]);
-                }
-                // cleanup library's main closures to avoid memory leaks
-                for (var k in ua) {
-                    ua[k] = null;
-                }
-                ua = null;
-                for (var l in swfobject) {
-                    swfobject[l] = null;
-                }
-                swfobject = null;
-            });
-        }
-    }();
-    
-    return {
-        /* Public API
-            - Reference: http://code.google.com/p/swfobject/wiki/documentation
-        */ 
-        registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr, callbackFn) {
-            if (ua.w3 && objectIdStr && swfVersionStr) {
-                var regObj = {};
-                regObj.id = objectIdStr;
-                regObj.swfVersion = swfVersionStr;
-                regObj.expressInstall = xiSwfUrlStr;
-                regObj.callbackFn = callbackFn;
-                regObjArr[regObjArr.length] = regObj;
-                setVisibility(objectIdStr, false);
-            }
-            else if (callbackFn) {
-                callbackFn({success:false, id:objectIdStr});
-            }
-        },
-        
-        getObjectById: function(objectIdStr) {
-            if (ua.w3) {
-                return getObjectById(objectIdStr);
-            }
-        },
-        
-        embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) {
-            var callbackObj = {success:false, id:replaceElemIdStr};
-            if (ua.w3 && !(ua.wk && ua.wk < 312) && swfUrlStr && replaceElemIdStr && widthStr && heightStr && swfVersionStr) {
-                setVisibility(replaceElemIdStr, false);
-                addDomLoadEvent(function() {
-                    widthStr += ""; // auto-convert to string
-                    heightStr += "";
-                    var att = {};
-                    if (attObj && typeof attObj === OBJECT) {
-                        for (var i in attObj) { // copy object to avoid the use of references, because web authors often reuse attObj for multiple SWFs
-                            att[i] = attObj[i];
-                        }
-                    }
-                    att.data = swfUrlStr;
-                    att.width = widthStr;
-                    att.height = heightStr;
-                    var par = {}; 
-                    if (parObj && typeof parObj === OBJECT) {
-                        for (var j in parObj) { // copy object to avoid the use of references, because web authors often reuse parObj for multiple SWFs
-                            par[j] = parObj[j];
-                        }
-                    }
-                    if (flashvarsObj && typeof flashvarsObj === OBJECT) {
-                        for (var k in flashvarsObj) { // copy object to avoid the use of references, because web authors often reuse flashvarsObj for multiple SWFs
-                            if (typeof par.flashvars != UNDEF) {
-                                par.flashvars += "&" + k + "=" + flashvarsObj[k];
-                            }
-                            else {
-                                par.flashvars = k + "=" + flashvarsObj[k];
-                            }
-                        }
-                    }
-                    if (hasPlayerVersion(swfVersionStr)) { // create SWF
-                        var obj = createSWF(att, par, replaceElemIdStr);
-                        if (att.id == replaceElemIdStr) {
-                            setVisibility(replaceElemIdStr, true);
-                        }
-                        callbackObj.success = true;
-                        callbackObj.ref = obj;
-                    }
-                    else if (xiSwfUrlStr && canExpressInstall()) { // show Adobe Express Install
-                        att.data = xiSwfUrlStr;
-                        showExpressInstall(att, par, replaceElemIdStr, callbackFn);
-                        return;
-                    }
-                    else { // show alternative content
-                        setVisibility(replaceElemIdStr, true);
-                    }
-                    if (callbackFn) { callbackFn(callbackObj); }
-                });
-            }
-            else if (callbackFn) { callbackFn(callbackObj); }
-        },
-        
-        switchOffAutoHideShow: function() {
-            autoHideShow = false;
-        },
-        
-        ua: ua,
-        
-        getFlashPlayerVersion: function() {
-            return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
-        },
-        
-        hasFlashPlayerVersion: hasPlayerVersion,
-        
-        createSWF: function(attObj, parObj, replaceElemIdStr) {
-            if (ua.w3) {
-                return createSWF(attObj, parObj, replaceElemIdStr);
-            }
-            else {
-                return undefined;
-            }
-        },
-        
-        showExpressInstall: function(att, par, replaceElemIdStr, callbackFn) {
-            if (ua.w3 && canExpressInstall()) {
-                showExpressInstall(att, par, replaceElemIdStr, callbackFn);
-            }
-        },
-        
-        removeSWF: function(objElemIdStr) {
-            if (ua.w3) {
-                removeSWF(objElemIdStr);
-            }
-        },
-        
-        createCSS: function(selStr, declStr, mediaStr, newStyleBoolean) {
-            if (ua.w3) {
-                createCSS(selStr, declStr, mediaStr, newStyleBoolean);
-            }
-        },
-        
-        addDomLoadEvent: addDomLoadEvent,
-        
-        addLoadEvent: addLoadEvent,
-        
-        getQueryParamValue: function(param) {
-            var q = doc.location.search || doc.location.hash;
-            if (q) {
-                if (/\?/.test(q)) { q = q.split("?")[1]; } // strip question mark
-                if (param == null) {
-                    return urlEncodeIfNecessary(q);
-                }
-                var pairs = q.split("&");
-                for (var i = 0; i < pairs.length; i++) {
-                    if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
-                        return urlEncodeIfNecessary(pairs[i].substring((pairs[i].indexOf("=") + 1)));
-                    }
-                }
-            }
-            return "";
-        },
-        
-        // For internal usage only
-        expressInstallCallback: function() {
-            if (isExpressInstallActive) {
-                var obj = getElementById(EXPRESS_INSTALL_ID);
-                if (obj && storedAltContent) {
-                    obj.parentNode.replaceChild(storedAltContent, obj);
-                    if (storedAltContentId) {
-                        setVisibility(storedAltContentId, true);
-                        if (ua.ie && ua.win) { storedAltContent.style.display = "block"; }
-                    }
-                    if (storedCallbackFn) { storedCallbackFn(storedCallbackObj); }
-                }
-                isExpressInstallActive = false;
-            } 
-        }
-    };
-}();
+});/*! SWFObject v2.2  
+    is released under the MIT License  
+*/
+
+var swfobject = function() {
+    
+    var UNDEF = "undefined",
+        OBJECT = "object",
+        SHOCKWAVE_FLASH = "Shockwave Flash",
+        SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
+        FLASH_MIME_TYPE = "application/x-shockwave-flash",
+        EXPRESS_INSTALL_ID = "SWFObjectExprInst",
+        ON_READY_STATE_CHANGE = "onreadystatechange",
+        
+        win = window,
+        doc = document,
+        nav = navigator,
+        
+        plugin = false,
+        domLoadFnArr = [main],
+        regObjArr = [],
+        objIdArr = [],
+        listenersArr = [],
+        storedAltContent,
+        storedAltContentId,
+        storedCallbackFn,
+        storedCallbackObj,
+        isDomLoaded = false,
+        isExpressInstallActive = false,
+        dynamicStylesheet,
+        dynamicStylesheetMedia,
+        autoHideShow = true,
+    
+    /* Centralized function for browser feature detection
+        - User agent string detection is only used when no good alternative is possible
+        - Is executed directly for optimal performance
+    */  
+    ua = function() {
+        var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF,
+            u = nav.userAgent.toLowerCase(),
+            p = nav.platform.toLowerCase(),
+            windows = p ? /win/.test(p) : /win/.test(u),
+            mac = p ? /mac/.test(p) : /mac/.test(u),
+            webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
+            ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
+            playerVersion = [0,0,0],
+            d = null;
+        if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
+            d = nav.plugins[SHOCKWAVE_FLASH].description;
+            if (d && !(typeof nav.mimeTypes != UNDEF && nav.mimeTypes[FLASH_MIME_TYPE] && !nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { // navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+
+                plugin = true;
+                ie = false; // cascaded feature detection for Internet Explorer
+                d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
+                playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
+                playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
+                playerVersion[2] = /[a-zA-Z]/.test(d) ? parseInt(d.replace(/^.*[a-zA-Z]+(.*)$/, "$1"), 10) : 0;
+            }
+        }
+        else if (typeof win.ActiveXObject != UNDEF) {
+            try {
+                var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
+                if (a) { // a will return null when ActiveX is disabled
+                    d = a.GetVariable("$version");
+                    if (d) {
+                        ie = true; // cascaded feature detection for Internet Explorer
+                        d = d.split(" ")[1].split(",");
+                        playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+                    }
+                }
+            }
+            catch(e) {}
+        }
+        return { w3:w3cdom, pv:playerVersion, wk:webkit, ie:ie, win:windows, mac:mac };
+    }(),
+    
+    /* Cross-browser onDomLoad
+        - Will fire an event as soon as the DOM of a web page is loaded
+        - Internet Explorer workaround based on Diego Perini's solution: http://javascript.nwbox.com/IEContentLoaded/
+        - Regular onload serves as fallback
+    */ 
+    onDomLoad = function() {
+        if (!ua.w3) { return; }
+        if ((typeof doc.readyState != UNDEF && doc.readyState == "complete") || (typeof doc.readyState == UNDEF && (doc.getElementsByTagName("body")[0] || doc.body))) { // function is fired after onload, e.g. when script is inserted dynamically 
+            callDomLoadFunctions();
+        }
+        if (!isDomLoaded) {
+            if (typeof doc.addEventListener != UNDEF) {
+                doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, false);
+            }       
+            if (ua.ie && ua.win) {
+                doc.attachEvent(ON_READY_STATE_CHANGE, function() {
+                    if (doc.readyState == "complete") {
+                        doc.detachEvent(ON_READY_STATE_CHANGE, arguments.callee);
+                        callDomLoadFunctions();
+                    }
+                });
+                if (win == top) { // if not inside an iframe
+                    (function(){
+                        if (isDomLoaded) { return; }
+                        try {
+                            doc.documentElement.doScroll("left");
+                        }
+                        catch(e) {
+                            setTimeout(arguments.callee, 0);
+                            return;
+                        }
+                        callDomLoadFunctions();
+                    })();
+                }
+            }
+            if (ua.wk) {
+                (function(){
+                    if (isDomLoaded) { return; }
+                    if (!/loaded|complete/.test(doc.readyState)) {
+                        setTimeout(arguments.callee, 0);
+                        return;
+                    }
+                    callDomLoadFunctions();
+                })();
+            }
+            addLoadEvent(callDomLoadFunctions);
+        }
+    }();
+    
+    function callDomLoadFunctions() {
+        if (isDomLoaded) { return; }
+        try { // test if we can really add/remove elements to/from the DOM; we don't want to fire it too early
+            var t = doc.getElementsByTagName("body")[0].appendChild(createElement("span"));
+            t.parentNode.removeChild(t);
+        }
+        catch (e) { return; }
+        isDomLoaded = true;
+        var dl = domLoadFnArr.length;
+        for (var i = 0; i < dl; i++) {
+            domLoadFnArr[i]();
+        }
+    }
+    
+    function addDomLoadEvent(fn) {
+        if (isDomLoaded) {
+            fn();
+        }
+        else { 
+            domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
+        }
+    }
+    
+    /* Cross-browser onload
+        - Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
+        - Will fire an event as soon as a web page including all of its assets are loaded 
+     */
+    function addLoadEvent(fn) {
+        if (typeof win.addEventListener != UNDEF) {
+            win.addEventListener("load", fn, false);
+        }
+        else if (typeof doc.addEventListener != UNDEF) {
+            doc.addEventListener("load", fn, false);
+        }
+        else if (typeof win.attachEvent != UNDEF) {
+            addListener(win, "onload", fn);
+        }
+        else if (typeof win.onload == "function") {
+            var fnOld = win.onload;
+            win.onload = function() {
+                fnOld();
+                fn();
+            };
+        }
+        else {
+            win.onload = fn;
+        }
+    }
+    
+    /* Main function
+        - Will preferably execute onDomLoad, otherwise onload (as a fallback)
+    */
+    function main() { 
+        if (plugin) {
+            testPlayerVersion();
+        }
+        else {
+            matchVersions();
+        }
+    }
+    
+    /* Detect the Flash Player version for non-Internet Explorer browsers
+        - Detecting the plug-in version via the object element is more precise than using the plugins collection item's description:
+          a. Both release and build numbers can be detected
+          b. Avoid wrong descriptions by corrupt installers provided by Adobe
+          c. Avoid wrong descriptions by multiple Flash Player entries in the plugin Array, caused by incorrect browser imports
+        - Disadvantage of this method is that it depends on the availability of the DOM, while the plugins collection is immediately available
+    */
+    function testPlayerVersion() {
+        var b = doc.getElementsByTagName("body")[0];
+        var o = createElement(OBJECT);
+        o.setAttribute("type", FLASH_MIME_TYPE);
+        var t = b.appendChild(o);
+        if (t) {
+            var counter = 0;
+            (function(){
+                if (typeof t.GetVariable != UNDEF) {
+                    var d = t.GetVariable("$version");
+                    if (d) {
+                        d = d.split(" ")[1].split(",");
+                        ua.pv = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+                    }
+                }
+                else if (counter < 10) {
+                    counter++;
+                    setTimeout(arguments.callee, 10);
+                    return;
+                }
+                b.removeChild(o);
+                t = null;
+                matchVersions();
+            })();
+        }
+        else {
+            matchVersions();
+        }
+    }
+    
+    /* Perform Flash Player and SWF version matching; static publishing only
+    */
+    function matchVersions() {
+        var rl = regObjArr.length;
+        if (rl > 0) {
+            for (var i = 0; i < rl; i++) { // for each registered object element
+                var id = regObjArr[i].id;
+                var cb = regObjArr[i].callbackFn;
+                var cbObj = {success:false, id:id};
+                if (ua.pv[0] > 0) {
+                    var obj = getElementById(id);
+                    if (obj) {
+                        if (hasPlayerVersion(regObjArr[i].swfVersion) && !(ua.wk && ua.wk < 312)) { // Flash Player version >= published SWF version: Houston, we have a match!
+                            setVisibility(id, true);
+                            if (cb) {
+                                cbObj.success = true;
+                                cbObj.ref = getObjectById(id);
+                                cb(cbObj);
+                            }
+                        }
+                        else if (regObjArr[i].expressInstall && canExpressInstall()) { // show the Adobe Express Install dialog if set by the web page author and if supported
+                            var att = {};
+                            att.data = regObjArr[i].expressInstall;
+                            att.width = obj.getAttribute("width") || "0";
+                            att.height = obj.getAttribute("height") || "0";
+                            if (obj.getAttribute("class")) { att.styleclass = obj.getAttribute("class"); }
+                            if (obj.getAttribute("align")) { att.align = obj.getAttribute("align"); }
+                            // parse HTML object param element's name-value pairs
+                            var par = {};
+                            var p = obj.getElementsByTagName("param");
+                            var pl = p.length;
+                            for (var j = 0; j < pl; j++) {
+                                if (p[j].getAttribute("name").toLowerCase() != "movie") {
+                                    par[p[j].getAttribute("name")] = p[j].getAttribute("value");
+                                }
+                            }
+                            showExpressInstall(att, par, id, cb);
+                        }
+                        else { // Flash Player and SWF version mismatch or an older Webkit engine that ignores the HTML object element's nested param elements: display alternative content instead of SWF
+                            displayAltContent(obj);
+                            if (cb) { cb(cbObj); }
+                        }
+                    }
+                }
+                else {  // if no Flash Player is installed or the fp version cannot be detected we let the HTML object element do its job (either show a SWF or alternative content)
+                    setVisibility(id, true);
+                    if (cb) {
+                        var o = getObjectById(id); // test whether there is an HTML object element or not
+                        if (o && typeof o.SetVariable != UNDEF) { 
+                            cbObj.success = true;
+                            cbObj.ref = o;
+                        }
+                        cb(cbObj);
+                    }
+                }
+            }
+        }
+    }
+    
+    function getObjectById(objectIdStr) {
+        var r = null;
+        var o = getElementById(objectIdStr);
+        if (o && o.nodeName == "OBJECT") {
+            if (typeof o.SetVariable != UNDEF) {
+                r = o;
+            }
+            else {
+                var n = o.getElementsByTagName(OBJECT)[0];
+                if (n) {
+                    r = n;
+                }
+            }
+        }
+        return r;
+    }
+    
+    /* Requirements for Adobe Express Install
+        - only one instance can be active at a time
+        - fp 6.0.65 or higher
+        - Win/Mac OS only
+        - no Webkit engines older than version 312
+    */
+    function canExpressInstall() {
+        return !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac) && !(ua.wk && ua.wk < 312);
+    }
+    
+    /* Show the Adobe Express Install dialog
+        - Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
+    */
+    function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
+        isExpressInstallActive = true;
+        storedCallbackFn = callbackFn || null;
+        storedCallbackObj = {success:false, id:replaceElemIdStr};
+        var obj = getElementById(replaceElemIdStr);
+        if (obj) {
+            if (obj.nodeName == "OBJECT") { // static publishing
+                storedAltContent = abstractAltContent(obj);
+                storedAltContentId = null;
+            }
+            else { // dynamic publishing
+                storedAltContent = obj;
+                storedAltContentId = replaceElemIdStr;
+            }
+            att.id = EXPRESS_INSTALL_ID;
+            if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; }
+            if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; }
+            doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
+            var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
+                fv = "MMredirectURL=" + win.location.toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title;
+            if (typeof par.flashvars != UNDEF) {
+                par.flashvars += "&" + fv;
+            }
+            else {
+                par.flashvars = fv;
+            }
+            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+            if (ua.ie && ua.win && obj.readyState != 4) {
+                var newObj = createElement("div");
+                replaceElemIdStr += "SWFObjectNew";
+                newObj.setAttribute("id", replaceElemIdStr);
+                obj.parentNode.insertBefore(newObj, obj); // insert placeholder div that will be replaced by the object element that loads expressinstall.swf
+                obj.style.display = "none";
+                (function(){
+                    if (obj.readyState == 4) {
+                        obj.parentNode.removeChild(obj);
+                    }
+                    else {
+                        setTimeout(arguments.callee, 10);
+                    }
+                })();
+            }
+            createSWF(att, par, replaceElemIdStr);
+        }
+    }
+    
+    /* Functions to abstract and display alternative content
+    */
+    function displayAltContent(obj) {
+        if (ua.ie && ua.win && obj.readyState != 4) {
+            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+            var el = createElement("div");
+            obj.parentNode.insertBefore(el, obj); // insert placeholder div that will be replaced by the alternative content
+            el.parentNode.replaceChild(abstractAltContent(obj), el);
+            obj.style.display = "none";
+            (function(){
+                if (obj.readyState == 4) {
+                    obj.parentNode.removeChild(obj);
+                }
+                else {
+                    setTimeout(arguments.callee, 10);
+                }
+            })();
+        }
+        else {
+            obj.parentNode.replaceChild(abstractAltContent(obj), obj);
+        }
+    } 
+
+    function abstractAltContent(obj) {
+        var ac = createElement("div");
+        if (ua.win && ua.ie) {
+            ac.innerHTML = obj.innerHTML;
+        }
+        else {
+            var nestedObj = obj.getElementsByTagName(OBJECT)[0];
+            if (nestedObj) {
+                var c = nestedObj.childNodes;
+                if (c) {
+                    var cl = c.length;
+                    for (var i = 0; i < cl; i++) {
+                        if (!(c[i].nodeType == 1 && c[i].nodeName == "PARAM") && !(c[i].nodeType == 8)) {
+                            ac.appendChild(c[i].cloneNode(true));
+                        }
+                    }
+                }
+            }
+        }
+        return ac;
+    }
+    
+    /* Cross-browser dynamic SWF creation
+    */
+    function createSWF(attObj, parObj, id) {
+        var r, el = getElementById(id);
+        if (ua.wk && ua.wk < 312) { return r; }
+        if (el) {
+            if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
+                attObj.id = id;
+            }
+            if (ua.ie && ua.win) { // Internet Explorer + the HTML object element + W3C DOM methods do not combine: fall back to outerHTML
+                var att = "";
+                for (var i in attObj) {
+                    if (attObj[i] != Object.prototype[i]) { // filter out prototype additions from other potential libraries
+                        if (i.toLowerCase() == "data") {
+                            parObj.movie = attObj[i];
+                        }
+                        else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+                            att += ' class="' + attObj[i] + '"';
+                        }
+                        else if (i.toLowerCase() != "classid") {
+                            att += ' ' + i + '="' + attObj[i] + '"';
+                        }
+                    }
+                }
+                var par = "";
+                for (var j in parObj) {
+                    if (parObj[j] != Object.prototype[j]) { // filter out prototype additions from other potential libraries
+                        par += '';
+                    }
+                }
+                el.outerHTML = '' + par + '';
+                objIdArr[objIdArr.length] = attObj.id; // stored to fix object 'leaks' on unload (dynamic publishing only)
+                r = getElementById(attObj.id);  
+            }
+            else { // well-behaving browsers
+                var o = createElement(OBJECT);
+                o.setAttribute("type", FLASH_MIME_TYPE);
+                for (var m in attObj) {
+                    if (attObj[m] != Object.prototype[m]) { // filter out prototype additions from other potential libraries
+                        if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+                            o.setAttribute("class", attObj[m]);
+                        }
+                        else if (m.toLowerCase() != "classid") { // filter out IE specific attribute
+                            o.setAttribute(m, attObj[m]);
+                        }
+                    }
+                }
+                for (var n in parObj) {
+                    if (parObj[n] != Object.prototype[n] && n.toLowerCase() != "movie") { // filter out prototype additions from other potential libraries and IE specific param element
+                        createObjParam(o, n, parObj[n]);
+                    }
+                }
+                el.parentNode.replaceChild(o, el);
+                r = o;
+            }
+        }
+        return r;
+    }
+    
+    function createObjParam(el, pName, pValue) {
+        var p = createElement("param");
+        p.setAttribute("name", pName);  
+        p.setAttribute("value", pValue);
+        el.appendChild(p);
+    }
+    
+    /* Cross-browser SWF removal
+        - Especially needed to safely and completely remove a SWF in Internet Explorer
+    */
+    function removeSWF(id) {
+        var obj = getElementById(id);
+        if (obj && obj.nodeName == "OBJECT") {
+            if (ua.ie && ua.win) {
+                obj.style.display = "none";
+                (function(){
+                    if (obj.readyState == 4) {
+                        removeObjectInIE(id);
+                    }
+                    else {
+                        setTimeout(arguments.callee, 10);
+                    }
+                })();
+            }
+            else {
+                obj.parentNode.removeChild(obj);
+            }
+        }
+    }
+    
+    function removeObjectInIE(id) {
+        var obj = getElementById(id);
+        if (obj) {
+            for (var i in obj) {
+                if (typeof obj[i] == "function") {
+                    obj[i] = null;
+                }
+            }
+            obj.parentNode.removeChild(obj);
+        }
+    }
+    
+    /* Functions to optimize JavaScript compression
+    */
+    function getElementById(id) {
+        var el = null;
+        try {
+            el = doc.getElementById(id);
+        }
+        catch (e) {}
+        return el;
+    }
+    
+    function createElement(el) {
+        return doc.createElement(el);
+    }
+    
+    /* Updated attachEvent function for Internet Explorer
+        - Stores attachEvent information in an Array, so on unload the detachEvent functions can be called to avoid memory leaks
+    */  
+    function addListener(target, eventType, fn) {
+        target.attachEvent(eventType, fn);
+        listenersArr[listenersArr.length] = [target, eventType, fn];
+    }
+    
+    /* Flash Player and SWF content version matching
+    */
+    function hasPlayerVersion(rv) {
+        var pv = ua.pv, v = rv.split(".");
+        v[0] = parseInt(v[0], 10);
+        v[1] = parseInt(v[1], 10) || 0; // supports short notation, e.g. "9" instead of "9.0.0"
+        v[2] = parseInt(v[2], 10) || 0;
+        return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
+    }
+    
+    /* Cross-browser dynamic CSS creation
+        - Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
+    */  
+    function createCSS(sel, decl, media, newStyle) {
+        if (ua.ie && ua.mac) { return; }
+        var h = doc.getElementsByTagName("head")[0];
+        if (!h) { return; } // to also support badly authored HTML pages that lack a head element
+        var m = (media && typeof media == "string") ? media : "screen";
+        if (newStyle) {
+            dynamicStylesheet = null;
+            dynamicStylesheetMedia = null;
+        }
+        if (!dynamicStylesheet || dynamicStylesheetMedia != m) { 
+            // create dynamic stylesheet + get a global reference to it
+            var s = createElement("style");
+            s.setAttribute("type", "text/css");
+            s.setAttribute("media", m);
+            dynamicStylesheet = h.appendChild(s);
+            if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
+                dynamicStylesheet = doc.styleSheets[doc.styleSheets.length - 1];
+            }
+            dynamicStylesheetMedia = m;
+        }
+        // add style rule
+        if (ua.ie && ua.win) {
+            if (dynamicStylesheet && typeof dynamicStylesheet.addRule == OBJECT) {
+                dynamicStylesheet.addRule(sel, decl);
+            }
+        }
+        else {
+            if (dynamicStylesheet && typeof doc.createTextNode != UNDEF) {
+                dynamicStylesheet.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
+            }
+        }
+    }
+    
+    function setVisibility(id, isVisible) {
+        if (!autoHideShow) { return; }
+        var v = isVisible ? "visible" : "hidden";
+        if (isDomLoaded && getElementById(id)) {
+            getElementById(id).style.visibility = v;
+        }
+        else {
+            createCSS("#" + id, "visibility:" + v);
+        }
+    }
+
+    /* Filter to avoid XSS attacks
+    */
+    function urlEncodeIfNecessary(s) {
+        var regex = /[\\\"<>\.;]/;
+        var hasBadChars = regex.exec(s) != null;
+        return hasBadChars && typeof encodeURIComponent != UNDEF ? encodeURIComponent(s) : s;
+    }
+    
+    /* Release memory to avoid memory leaks caused by closures, fix hanging audio/video threads and force open sockets/NetConnections to disconnect (Internet Explorer only)
+    */
+    var cleanup = function() {
+        if (ua.ie && ua.win) {
+            window.attachEvent("onunload", function() {
+                // remove listeners to avoid memory leaks
+                var ll = listenersArr.length;
+                for (var i = 0; i < ll; i++) {
+                    listenersArr[i][0].detachEvent(listenersArr[i][1], listenersArr[i][2]);
+                }
+                // cleanup dynamically embedded objects to fix audio/video threads and force open sockets and NetConnections to disconnect
+                var il = objIdArr.length;
+                for (var j = 0; j < il; j++) {
+                    removeSWF(objIdArr[j]);
+                }
+                // cleanup library's main closures to avoid memory leaks
+                for (var k in ua) {
+                    ua[k] = null;
+                }
+                ua = null;
+                for (var l in swfobject) {
+                    swfobject[l] = null;
+                }
+                swfobject = null;
+            });
+        }
+    }();
+    
+    return {
+        /* Public API
+            - Reference: http://code.google.com/p/swfobject/wiki/documentation
+        */ 
+        registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr, callbackFn) {
+            if (ua.w3 && objectIdStr && swfVersionStr) {
+                var regObj = {};
+                regObj.id = objectIdStr;
+                regObj.swfVersion = swfVersionStr;
+                regObj.expressInstall = xiSwfUrlStr;
+                regObj.callbackFn = callbackFn;
+                regObjArr[regObjArr.length] = regObj;
+                setVisibility(objectIdStr, false);
+            }
+            else if (callbackFn) {
+                callbackFn({success:false, id:objectIdStr});
+            }
+        },
+        
+        getObjectById: function(objectIdStr) {
+            if (ua.w3) {
+                return getObjectById(objectIdStr);
+            }
+        },
+        
+        embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) {
+            var callbackObj = {success:false, id:replaceElemIdStr};
+            if (ua.w3 && !(ua.wk && ua.wk < 312) && swfUrlStr && replaceElemIdStr && widthStr && heightStr && swfVersionStr) {
+                setVisibility(replaceElemIdStr, false);
+                addDomLoadEvent(function() {
+                    widthStr += ""; // auto-convert to string
+                    heightStr += "";
+                    var att = {};
+                    if (attObj && typeof attObj === OBJECT) {
+                        for (var i in attObj) { // copy object to avoid the use of references, because web authors often reuse attObj for multiple SWFs
+                            att[i] = attObj[i];
+                        }
+                    }
+                    att.data = swfUrlStr;
+                    att.width = widthStr;
+                    att.height = heightStr;
+                    var par = {}; 
+                    if (parObj && typeof parObj === OBJECT) {
+                        for (var j in parObj) { // copy object to avoid the use of references, because web authors often reuse parObj for multiple SWFs
+                            par[j] = parObj[j];
+                        }
+                    }
+                    if (flashvarsObj && typeof flashvarsObj === OBJECT) {
+                        for (var k in flashvarsObj) { // copy object to avoid the use of references, because web authors often reuse flashvarsObj for multiple SWFs
+                            if (typeof par.flashvars != UNDEF) {
+                                par.flashvars += "&" + k + "=" + flashvarsObj[k];
+                            }
+                            else {
+                                par.flashvars = k + "=" + flashvarsObj[k];
+                            }
+                        }
+                    }
+                    if (hasPlayerVersion(swfVersionStr)) { // create SWF
+                        var obj = createSWF(att, par, replaceElemIdStr);
+                        if (att.id == replaceElemIdStr) {
+                            setVisibility(replaceElemIdStr, true);
+                        }
+                        callbackObj.success = true;
+                        callbackObj.ref = obj;
+                    }
+                    else if (xiSwfUrlStr && canExpressInstall()) { // show Adobe Express Install
+                        att.data = xiSwfUrlStr;
+                        showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+                        return;
+                    }
+                    else { // show alternative content
+                        setVisibility(replaceElemIdStr, true);
+                    }
+                    if (callbackFn) { callbackFn(callbackObj); }
+                });
+            }
+            else if (callbackFn) { callbackFn(callbackObj); }
+        },
+        
+        switchOffAutoHideShow: function() {
+            autoHideShow = false;
+        },
+        
+        ua: ua,
+        
+        getFlashPlayerVersion: function() {
+            return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
+        },
+        
+        hasFlashPlayerVersion: hasPlayerVersion,
+        
+        createSWF: function(attObj, parObj, replaceElemIdStr) {
+            if (ua.w3) {
+                return createSWF(attObj, parObj, replaceElemIdStr);
+            }
+            else {
+                return undefined;
+            }
+        },
+        
+        showExpressInstall: function(att, par, replaceElemIdStr, callbackFn) {
+            if (ua.w3 && canExpressInstall()) {
+                showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+            }
+        },
+        
+        removeSWF: function(objElemIdStr) {
+            if (ua.w3) {
+                removeSWF(objElemIdStr);
+            }
+        },
+        
+        createCSS: function(selStr, declStr, mediaStr, newStyleBoolean) {
+            if (ua.w3) {
+                createCSS(selStr, declStr, mediaStr, newStyleBoolean);
+            }
+        },
+        
+        addDomLoadEvent: addDomLoadEvent,
+        
+        addLoadEvent: addLoadEvent,
+        
+        getQueryParamValue: function(param) {
+            var q = doc.location.search || doc.location.hash;
+            if (q) {
+                if (/\?/.test(q)) { q = q.split("?")[1]; } // strip question mark
+                if (param == null) {
+                    return urlEncodeIfNecessary(q);
+                }
+                var pairs = q.split("&");
+                for (var i = 0; i < pairs.length; i++) {
+                    if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
+                        return urlEncodeIfNecessary(pairs[i].substring((pairs[i].indexOf("=") + 1)));
+                    }
+                }
+            }
+            return "";
+        },
+        
+        // For internal usage only
+        expressInstallCallback: function() {
+            if (isExpressInstallActive) {
+                var obj = getElementById(EXPRESS_INSTALL_ID);
+                if (obj && storedAltContent) {
+                    obj.parentNode.replaceChild(storedAltContent, obj);
+                    if (storedAltContentId) {
+                        setVisibility(storedAltContentId, true);
+                        if (ua.ie && ua.win) { storedAltContent.style.display = "block"; }
+                    }
+                    if (storedCallbackFn) { storedCallbackFn(storedCallbackObj); }
+                }
+                isExpressInstallActive = false;
+            } 
+        }
+    };
+}();
 /**
  * @class Ext.FlashComponent
  * @extends Ext.BoxComponent
@@ -53061,830 +53061,830 @@ Ext.FlashComponent = Ext.extend(Ext.BoxComponent, {
  */
 Ext.FlashComponent.EXPRESS_INSTALL_URL = 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf';
 
-Ext.reg('flash', Ext.FlashComponent);/**
- * @class Ext.FlashProxy
- * @singleton
- */
-Ext.FlashEventProxy = {
-    onEvent : function(id, e){
-        var fp = Ext.getCmp(id);
-        if(fp){
-            fp.onFlashEvent(e);
-        }else{
-            arguments.callee.defer(10, this, [id, e]);
-        }
-    }
-}/**
- * @class Ext.chart.Chart
- * @extends Ext.FlashComponent
- * The Ext.chart package provides the capability to visualize data with flash based charting.
- * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
- * To change the look and feel of a chart, see the {@link #chartStyle} and {@link #extraStyle} config options.
- * @constructor
- * @xtype chart
- */
- 
- Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
-    refreshBuffer: 100,
-    
-    /**
-     * @cfg {String} backgroundColor
-     * @hide
-     */
-
-    /**
-     * @cfg {Object} chartStyle
-     * Sets styles for this chart. This contains default styling, so modifying this property will override
-     * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. 
-     */
-    chartStyle: {
-        padding: 10,
-        animationEnabled: true,
-        font: {
-            name: 'Tahoma',
-            color: 0x444444,
-            size: 11
-        },
-        dataTip: {
-            padding: 5,
-            border: {
-                color: 0x99bbe8,
-                size:1
-            },
-            background: {
-                color: 0xDAE7F6,
-                alpha: .9
-            },
-            font: {
-                name: 'Tahoma',
-                color: 0x15428B,
-                size: 10,
-                bold: true
-            }
-        }
-    },
-    
-    /**
-     * @cfg {String} url
-     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
-     * be modified to point to the local charts resource.
-     */
-    
-    /**
-     * @cfg {Object} extraStyle
-     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
-     * For a detailed list of the options available, visit the YUI Charts site 
-     * at http://developer.yahoo.com/yui/charts/#basicstyles
    
-     * Some of the options availabe:
    
-     * 
      
-     * 
    • padding - The space around the edge of the chart's contents. Padding does not increase the size of the chart.
      • 
-     * 
    • animationEnabled - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.
      • 
-     * 
    • font - An Object defining the font style to be used in the chart. Defaults to { name: 'Tahoma', color: 0x444444, size: 11 }
      
-     *  
        
-     *      
      • name - font name
        • 
-     *      
      • color - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
-     *      
      • size - font size in points (numeric portion only, ie: 11)
        • 
-     *      
      • bold - boolean
        • 
-     *      
      • italic - boolean
        • 
-     *      
      • underline - boolean
        • 
-     *  
      
-     * 
      • 
-     * 
    • border - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.
      
-     *  
        
-     *      
      • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
-     *      
      • size - border size in pixels (numeric portion only, ie: 1)
        • 
-     *  
      
-     * 
      • 
-     * 
    • background - An object defining the background style of the chart.
      
-     *  
        
-     *      
      • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
-     *      
      • image - an image URL. May be relative to the current document or absolute.
        • 
-     *  
      
-     * 
      • 
-     * 
    • legend - An object defining the legend style
      
-     *  
        
-     *      
      • display - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".
        • 
-     *      
      • spacing - an image URL. May be relative to the current document or absolute.
        • 
-     *      
      • padding, border, background, font - same options as described above.
        • 
-     *  
      • 
-     * 
    • dataTip - An object defining the style of the data tip (tooltip).
      
-     *  
        
-     *      
      • padding, border, background, font - same options as described above.
        • 
-     *  
      • 
-     * 
    • xAxis and yAxis - An object defining the style of the style of either axis.
      
-     *  
        
-     *      
      • color - same option as described above.
        • 
-     *      
      • size - same option as described above.
        • 
-     *      
      • showLabels - boolean
        • 
-     *      
      • labelRotation - a value in degrees from -90 through 90. Default is zero.
        • 
-     *  
      • 
-     * 
    • majorGridLines and minorGridLines - An object defining the style of the style of the grid lines.
      
-     *  
        
-     *      
      • color, size - same options as described above.
        • 
-     *  
      • 
-     * 
    • zeroGridLine - An object defining the style of the style of the zero grid line.
      
-     *  
        
-     *      
      • color, size - same options as described above.
        • 
-     *  
      • 
-     * 
    • majorTicks and minorTicks - An object defining the style of the style of ticks in the chart.
      
-     *  
        
-     *      
      • color, size - same options as described above.
        • 
-     *      
      • length - the length of each tick in pixels extending from the axis.
        • 
-     *      
      • display - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".
        • 
-     *  
      • 
-     * 
    
-     */
-    extraStyle: null,
-    
-    /**
-     * @cfg {Object} seriesStyles
-     * Contains styles to apply to the series after a refresh. Defaults to null.
-     */
-    seriesStyles: null,
-    
-    /**
-     * @cfg {Boolean} disableCaching
-     * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
-     */
-    disableCaching: Ext.isIE || Ext.isOpera,
-    disableCacheParam: '_dc',
-
-    initComponent : function(){
-        Ext.chart.Chart.superclass.initComponent.call(this);
-        if(!this.url){
-            this.url = Ext.chart.Chart.CHART_URL;
-        }
-        if(this.disableCaching){
-            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
-        }
-        this.addEvents(
-            'itemmouseover',
-            'itemmouseout',
-            'itemclick',
-            'itemdoubleclick',
-            'itemdragstart',
-            'itemdrag',
-            'itemdragend',
-            /**
-             * @event beforerefresh
-             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns
-             * false the {@link #refresh} action will be cancelled.
-             * @param {Chart} this
-             */
-            'beforerefresh',
-            /**
-             * @event refresh
-             * Fires after the chart data has been refreshed.
-             * @param {Chart} this
-             */
-            'refresh'
-        );
-        this.store = Ext.StoreMgr.lookup(this.store);
-    },
-
-    /**
-     * Sets a single style value on the Chart instance.
-     *
-     * @param name {String} Name of the Chart style value to change.
-     * @param value {Object} New value to pass to the Chart style.
-     */
-     setStyle: function(name, value){
-         this.swf.setStyle(name, Ext.encode(value));
-     },
-
-    /**
-     * Resets all styles on the Chart instance.
-     *
-     * @param styles {Object} Initializer for all Chart styles.
-     */
-    setStyles: function(styles){
-        this.swf.setStyles(Ext.encode(styles));
-    },
-
-    /**
-     * Sets the styles on all series in the Chart.
-     *
-     * @param styles {Array} Initializer for all Chart series styles.
-     */
-    setSeriesStyles: function(styles){
-        this.seriesStyles = styles;
-        var s = [];
-        Ext.each(styles, function(style){
-            s.push(Ext.encode(style));
-        });
-        this.swf.setSeriesStyles(s);
-    },
-
-    setCategoryNames : function(names){
-        this.swf.setCategoryNames(names);
-    },
-
-    setTipRenderer : function(fn){
-        var chart = this;
-        this.tipFnName = this.createFnProxy(function(item, index, series){
-            var record = chart.store.getAt(index);
-            return fn(chart, record, index, series);
-        }, this.tipFnName);
-        this.swf.setDataTipFunction(this.tipFnName);
-    },
-
-    setSeries : function(series){
-        this.series = series;
-        this.refresh();
-    },
-
-    /**
-     * Changes the data store bound to this chart and refreshes it.
-     * @param {Store} store The store to bind to this chart
-     */
-    bindStore : function(store, initial){
-        if(!initial && this.store){
-            if(store !== this.store && this.store.autoDestroy){
-                this.store.destroy();
-            }else{
-                this.store.un("datachanged", this.refresh, this);
-                this.store.un("add", this.delayRefresh, this);
-                this.store.un("remove", this.delayRefresh, this);
-                this.store.un("update", this.delayRefresh, this);
-                this.store.un("clear", this.refresh, this);
-            }
-        }
-        if(store){
-            store = Ext.StoreMgr.lookup(store);
-            store.on({
-                scope: this,
-                datachanged: this.refresh,
-                add: this.delayRefresh,
-                remove: this.delayRefresh,
-                update: this.delayRefresh,
-                clear: this.refresh
-            });
-        }
-        this.store = store;
-        if(store && !initial){
-            this.refresh();
-        }
-    },
-
-    onSwfReady : function(isReset){
-        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
-        this.swf.setType(this.type);
-
-        if(this.chartStyle){
-            this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
-        }
-
-        if(this.categoryNames){
-            this.setCategoryNames(this.categoryNames);
-        }
-
-        if(this.tipRenderer){
-            this.setTipRenderer(this.tipRenderer);
-        }
-        if(!isReset){
-            this.bindStore(this.store, true);
-        }
-        this.refresh.defer(10, this);
-    },
-
-    delayRefresh : function(){
-        if(!this.refreshTask){
-            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
-        }
-        this.refreshTask.delay(this.refreshBuffer);
-    },
-
-    refresh : function(){
-        if(this.fireEvent('beforerefresh', this) !== false){
-	        var styleChanged = false;
-	        // convert the store data into something YUI charts can understand
-	        var data = [], rs = this.store.data.items;
-	        for(var j = 0, len = rs.length; j < len; j++){
-	            data[j] = rs[j].data;
-	        }
-	        //make a copy of the series definitions so that we aren't
-	        //editing them directly.
-	        var dataProvider = [];
-	        var seriesCount = 0;
-	        var currentSeries = null;
-	        var i = 0;
-	        if(this.series){
-	            seriesCount = this.series.length;
-	            for(i = 0; i < seriesCount; i++){
-	                currentSeries = this.series[i];
-	                var clonedSeries = {};
-	                for(var prop in currentSeries){
-	                    if(prop == "style" && currentSeries.style !== null){
-	                        clonedSeries.style = Ext.encode(currentSeries.style);
-	                        styleChanged = true;
-	                        //we don't want to modify the styles again next time
-	                        //so null out the style property.
-	                        // this causes issues
-	                        // currentSeries.style = null;
-	                    } else{
-	                        clonedSeries[prop] = currentSeries[prop];
-	                    }
-	                }
-	                dataProvider.push(clonedSeries);
-	            }
-	        }
-	
-	        if(seriesCount > 0){
-	            for(i = 0; i < seriesCount; i++){
-	                currentSeries = dataProvider[i];
-	                if(!currentSeries.type){
-	                    currentSeries.type = this.type;
-	                }
-	                currentSeries.dataProvider = data;
-	            }
-	        } else{
-	            dataProvider.push({type: this.type, dataProvider: data});
-	        }
-	        this.swf.setDataProvider(dataProvider);
-	        if(this.seriesStyles){
-	            this.setSeriesStyles(this.seriesStyles);
-	        }
-            this.fireEvent('refresh', this);
-        }
-    },
-
-    createFnProxy : function(fn, old){
-        if(old){
-            delete window[old];
-        }
-        var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);
-        window[fnName] = fn;
-        return fnName;
-    },
-    
-    onDestroy: function(){
-        Ext.chart.Chart.superclass.onDestroy.call(this);
-        this.bindStore(null);
-        var tip = this.tipFnName;
-        if(!Ext.isEmpty(tip)){
-            delete window[tip];
-        }
-    }
-});
-Ext.reg('chart', Ext.chart.Chart);
-Ext.chart.Chart.PROXY_FN_ID = 0;
-
-/**
- * Sets the url to load the chart from. This should be set to a local resource.
- * @static
- * @type String
- */
-Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf';
-
-/**
- * @class Ext.chart.PieChart
- * @extends Ext.chart.Chart
- * @constructor
- * @xtype piechart
- */
-Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
-    type: 'pie',
-
-    onSwfReady : function(isReset){
-        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);
-
-        this.setDataField(this.dataField);
-        this.setCategoryField(this.categoryField);
-    },
-
-    setDataField : function(field){
-        this.dataField = field;
-        this.swf.setDataField(field);
-    },
-
-    setCategoryField : function(field){
-        this.categoryField = field;
-        this.swf.setCategoryField(field);
-    }
-});
-Ext.reg('piechart', Ext.chart.PieChart);
-
-/**
- * @class Ext.chart.CartesianChart
- * @extends Ext.chart.Chart
- * @constructor
- * @xtype cartesianchart
- */
-Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
-    onSwfReady : function(isReset){
-        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
-
-        if(this.xField){
-            this.setXField(this.xField);
-        }
-        if(this.yField){
-            this.setYField(this.yField);
-        }
-        if(this.xAxis){
-            this.setXAxis(this.xAxis);
-        }
-        if(this.yAxis){
-            this.setYAxis(this.yAxis);
-        }
-    },
-
-    setXField : function(value){
-        this.xField = value;
-        this.swf.setHorizontalField(value);
-    },
-
-    setYField : function(value){
-        this.yField = value;
-        this.swf.setVerticalField(value);
-    },
-
-    setXAxis : function(value){
-        this.xAxis = this.createAxis('xAxis', value);
-        this.swf.setHorizontalAxis(this.xAxis);
-    },
-
-    setYAxis : function(value){
-        this.yAxis = this.createAxis('yAxis', value);
-        this.swf.setVerticalAxis(this.yAxis);
-    },
-
-    createAxis : function(axis, value){
-        var o = Ext.apply({}, value), oldFn = null;
-        if(this[axis]){
-            oldFn = this[axis].labelFunction;
-        }
-        if(o.labelRenderer){
-            var fn = o.labelRenderer;
-            o.labelFunction = this.createFnProxy(function(v){
-                return fn(v);
-            }, oldFn);
-            delete o.labelRenderer;
-        }
-        return o;
-    }
-});
-Ext.reg('cartesianchart', Ext.chart.CartesianChart);
-
-/**
- * @class Ext.chart.LineChart
- * @extends Ext.chart.CartesianChart
- * @constructor
- * @xtype linechart
- */
-Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {
-    type: 'line'
-});
-Ext.reg('linechart', Ext.chart.LineChart);
-
-/**
- * @class Ext.chart.ColumnChart
- * @extends Ext.chart.CartesianChart
- * @constructor
- * @xtype columnchart
- */
-Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {
-    type: 'column'
-});
-Ext.reg('columnchart', Ext.chart.ColumnChart);
-
-/**
- * @class Ext.chart.StackedColumnChart
- * @extends Ext.chart.CartesianChart
- * @constructor
- * @xtype stackedcolumnchart
- */
-Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {
-    type: 'stackcolumn'
-});
-Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
-
-/**
- * @class Ext.chart.BarChart
- * @extends Ext.chart.CartesianChart
- * @constructor
- * @xtype barchart
- */
-Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {
-    type: 'bar'
-});
-Ext.reg('barchart', Ext.chart.BarChart);
-
-/**
- * @class Ext.chart.StackedBarChart
- * @extends Ext.chart.CartesianChart
- * @constructor
- * @xtype stackedbarchart
- */
-Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {
-    type: 'stackbar'
-});
-Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
-
-
-
-/**
- * @class Ext.chart.Axis
- * Defines a CartesianChart's vertical or horizontal axis.
- * @constructor
- */
-Ext.chart.Axis = function(config){
-    Ext.apply(this, config);
-};
-
-Ext.chart.Axis.prototype =
-{
-    /**
-     * The type of axis.
-     *
-     * @property type
-     * @type String
-     */
-    type: null,
-
-    /**
-     * The direction in which the axis is drawn. May be "horizontal" or "vertical".
-     *
-     * @property orientation
-     * @type String
-     */
-    orientation: "horizontal",
-
-    /**
-     * If true, the items on the axis will be drawn in opposite direction.
-     *
-     * @property reverse
-     * @type Boolean
-     */
-    reverse: false,
-
-    /**
-     * A string reference to the globally-accessible function that may be called to
-     * determine each of the label values for this axis.
-     *
-     * @property labelFunction
-     * @type String
-     */
-    labelFunction: null,
-
-    /**
-     * If true, labels that overlap previously drawn labels on the axis will be hidden.
-     *
-     * @property hideOverlappingLabels
-     * @type Boolean
-     */
-    hideOverlappingLabels: true
-};
-
-/**
- * @class Ext.chart.NumericAxis
- * @extends Ext.chart.Axis
- * A type of axis whose units are measured in numeric values.
- * @constructor
- */
-Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {
-    type: "numeric",
-
-    /**
-     * The minimum value drawn by the axis. If not set explicitly, the axis minimum
-     * will be calculated automatically.
-     *
-     * @property minimum
-     * @type Number
-     */
-    minimum: NaN,
-
-    /**
-     * The maximum value drawn by the axis. If not set explicitly, the axis maximum
-     * will be calculated automatically.
-     *
-     * @property maximum
-     * @type Number
-     */
-    maximum: NaN,
-
-    /**
-     * The spacing between major intervals on this axis.
-     *
-     * @property majorUnit
-     * @type Number
-     */
-    majorUnit: NaN,
-
-    /**
-     * The spacing between minor intervals on this axis.
-     *
-     * @property minorUnit
-     * @type Number
-     */
-    minorUnit: NaN,
-
-    /**
-     * If true, the labels, ticks, gridlines, and other objects will snap to
-     * the nearest major or minor unit. If false, their position will be based
-     * on the minimum value.
-     *
-     * @property snapToUnits
-     * @type Boolean
-     */
-    snapToUnits: true,
-
-    /**
-     * If true, and the bounds are calculated automatically, either the minimum or
-     * maximum will be set to zero.
-     *
-     * @property alwaysShowZero
-     * @type Boolean
-     */
-    alwaysShowZero: true,
-
-    /**
-     * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".
-     *
-     * @property scale
-     * @type String
-     */
-    scale: "linear"
-});
-
-/**
- * @class Ext.chart.TimeAxis
- * @extends Ext.chart.Axis
- * A type of axis whose units are measured in time-based values.
- * @constructor
- */
-Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {
-    type: "time",
-
-    /**
-     * The minimum value drawn by the axis. If not set explicitly, the axis minimum
-     * will be calculated automatically.
-     *
-     * @property minimum
-     * @type Date
-     */
-    minimum: null,
-
-    /**
-     * The maximum value drawn by the axis. If not set explicitly, the axis maximum
-     * will be calculated automatically.
-     *
-     * @property maximum
-     * @type Number
-     */
-    maximum: null,
-
-    /**
-     * The spacing between major intervals on this axis.
-     *
-     * @property majorUnit
-     * @type Number
-     */
-    majorUnit: NaN,
-
-    /**
-     * The time unit used by the majorUnit.
-     *
-     * @property majorTimeUnit
-     * @type String
-     */
-    majorTimeUnit: null,
-
-    /**
-     * The spacing between minor intervals on this axis.
-     *
-     * @property majorUnit
-     * @type Number
-     */
-    minorUnit: NaN,
-
-    /**
-     * The time unit used by the minorUnit.
-     *
-     * @property majorTimeUnit
-     * @type String
-     */
-    minorTimeUnit: null,
-
-    /**
-     * If true, the labels, ticks, gridlines, and other objects will snap to
-     * the nearest major or minor unit. If false, their position will be based
-     * on the minimum value.
-     *
-     * @property snapToUnits
-     * @type Boolean
-     */
-    snapToUnits: true
-});
-
-/**
- * @class Ext.chart.CategoryAxis
- * @extends Ext.chart.Axis
- * A type of axis that displays items in categories.
- * @constructor
- */
-Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {
-    type: "category",
-
-    /**
-     * A list of category names to display along this axis.
-     *
-     * @property categoryNames
-     * @type Array
-     */
-    categoryNames: null
-});
-
-/**
- * @class Ext.chart.Series
- * Series class for the charts widget.
- * @constructor
- */
-Ext.chart.Series = function(config) { Ext.apply(this, config); };
-
-Ext.chart.Series.prototype =
-{
-    /**
-     * The type of series.
-     *
-     * @property type
-     * @type String
-     */
-    type: null,
-
-    /**
-     * The human-readable name of the series.
-     *
-     * @property displayName
-     * @type String
-     */
-    displayName: null
-};
-
-/**
- * @class Ext.chart.CartesianSeries
- * @extends Ext.chart.Series
- * CartesianSeries class for the charts widget.
- * @constructor
- */
-Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
-    /**
-     * The field used to access the x-axis value from the items from the data source.
-     *
-     * @property xField
-     * @type String
-     */
-    xField: null,
-
-    /**
-     * The field used to access the y-axis value from the items from the data source.
-     *
-     * @property yField
-     * @type String
-     */
-    yField: null
-});
-
-/**
- * @class Ext.chart.ColumnSeries
- * @extends Ext.chart.CartesianSeries
- * ColumnSeries class for the charts widget.
- * @constructor
- */
-Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
-    type: "column"
-});
-
-/**
- * @class Ext.chart.LineSeries
- * @extends Ext.chart.CartesianSeries
- * LineSeries class for the charts widget.
- * @constructor
- */
-Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
-    type: "line"
-});
-
-/**
- * @class Ext.chart.BarSeries
- * @extends Ext.chart.CartesianSeries
- * BarSeries class for the charts widget.
- * @constructor
- */
-Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
-    type: "bar"
-});
-
-
-/**
- * @class Ext.chart.PieSeries
- * @extends Ext.chart.Series
- * PieSeries class for the charts widget.
- * @constructor
- */
-Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
-    type: "pie",
-    dataField: null,
-    categoryField: null
+Ext.reg('flash', Ext.FlashComponent);/**
+ * @class Ext.FlashProxy
+ * @singleton
+ */
+Ext.FlashEventProxy = {
+    onEvent : function(id, e){
+        var fp = Ext.getCmp(id);
+        if(fp){
+            fp.onFlashEvent(e);
+        }else{
+            arguments.callee.defer(10, this, [id, e]);
+        }
+    }
+}/**
+ * @class Ext.chart.Chart
+ * @extends Ext.FlashComponent
+ * The Ext.chart package provides the capability to visualize data with flash based charting.
+ * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
+ * To change the look and feel of a chart, see the {@link #chartStyle} and {@link #extraStyle} config options.
+ * @constructor
+ * @xtype chart
+ */
+ 
+ Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
+    refreshBuffer: 100,
+    
+    /**
+     * @cfg {String} backgroundColor
+     * @hide
+     */
+
+    /**
+     * @cfg {Object} chartStyle
+     * Sets styles for this chart. This contains default styling, so modifying this property will override
+     * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. 
+     */
+    chartStyle: {
+        padding: 10,
+        animationEnabled: true,
+        font: {
+            name: 'Tahoma',
+            color: 0x444444,
+            size: 11
+        },
+        dataTip: {
+            padding: 5,
+            border: {
+                color: 0x99bbe8,
+                size:1
+            },
+            background: {
+                color: 0xDAE7F6,
+                alpha: .9
+            },
+            font: {
+                name: 'Tahoma',
+                color: 0x15428B,
+                size: 10,
+                bold: true
+            }
+        }
+    },
+    
+    /**
+     * @cfg {String} url
+     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
+     * be modified to point to the local charts resource.
+     */
+    
+    /**
+     * @cfg {Object} extraStyle
+     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
+     * For a detailed list of the options available, visit the YUI Charts site 
+     * at http://developer.yahoo.com/yui/charts/#basicstyles
    
+     * Some of the options availabe:
    
+     * 
      
+     * 
    • padding - The space around the edge of the chart's contents. Padding does not increase the size of the chart.
      • 
+     * 
    • animationEnabled - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.
      • 
+     * 
    • font - An Object defining the font style to be used in the chart. Defaults to { name: 'Tahoma', color: 0x444444, size: 11 }
      
+     *  
        
+     *      
      • name - font name
        • 
+     *      
      • color - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
+     *      
      • size - font size in points (numeric portion only, ie: 11)
        • 
+     *      
      • bold - boolean
        • 
+     *      
      • italic - boolean
        • 
+     *      
      • underline - boolean
        • 
+     *  
      
+     * 
      • 
+     * 
    • border - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.
      
+     *  
        
+     *      
      • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
+     *      
      • size - border size in pixels (numeric portion only, ie: 1)
        • 
+     *  
      
+     * 
      • 
+     * 
    • background - An object defining the background style of the chart.
      
+     *  
        
+     *      
      • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
        • 
+     *      
      • image - an image URL. May be relative to the current document or absolute.
        • 
+     *  
      
+     * 
      • 
+     * 
    • legend - An object defining the legend style
      
+     *  
        
+     *      
      • display - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".
        • 
+     *      
      • spacing - an image URL. May be relative to the current document or absolute.
        • 
+     *      
      • padding, border, background, font - same options as described above.
        • 
+     *  
      • 
+     * 
    • dataTip - An object defining the style of the data tip (tooltip).
      
+     *  
        
+     *      
      • padding, border, background, font - same options as described above.
        • 
+     *  
      • 
+     * 
    • xAxis and yAxis - An object defining the style of the style of either axis.
      
+     *  
        
+     *      
      • color - same option as described above.
        • 
+     *      
      • size - same option as described above.
        • 
+     *      
      • showLabels - boolean
        • 
+     *      
      • labelRotation - a value in degrees from -90 through 90. Default is zero.
        • 
+     *  
      • 
+     * 
    • majorGridLines and minorGridLines - An object defining the style of the style of the grid lines.
      
+     *  
        
+     *      
      • color, size - same options as described above.
        • 
+     *  
      • 
+     * 
    • zeroGridLine - An object defining the style of the style of the zero grid line.
      
+     *  
        
+     *      
      • color, size - same options as described above.
        • 
+     *  
      • 
+     * 
    • majorTicks and minorTicks - An object defining the style of the style of ticks in the chart.
      
+     *  
        
+     *      
      • color, size - same options as described above.
        • 
+     *      
      • length - the length of each tick in pixels extending from the axis.
        • 
+     *      
      • display - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".
        • 
+     *  
      • 
+     * 
    
+     */
+    extraStyle: null,
+    
+    /**
+     * @cfg {Object} seriesStyles
+     * Contains styles to apply to the series after a refresh. Defaults to null.
+     */
+    seriesStyles: null,
+    
+    /**
+     * @cfg {Boolean} disableCaching
+     * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
+     */
+    disableCaching: Ext.isIE || Ext.isOpera,
+    disableCacheParam: '_dc',
+
+    initComponent : function(){
+        Ext.chart.Chart.superclass.initComponent.call(this);
+        if(!this.url){
+            this.url = Ext.chart.Chart.CHART_URL;
+        }
+        if(this.disableCaching){
+            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
+        }
+        this.addEvents(
+            'itemmouseover',
+            'itemmouseout',
+            'itemclick',
+            'itemdoubleclick',
+            'itemdragstart',
+            'itemdrag',
+            'itemdragend',
+            /**
+             * @event beforerefresh
+             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns
+             * false the {@link #refresh} action will be cancelled.
+             * @param {Chart} this
+             */
+            'beforerefresh',
+            /**
+             * @event refresh
+             * Fires after the chart data has been refreshed.
+             * @param {Chart} this
+             */
+            'refresh'
+        );
+        this.store = Ext.StoreMgr.lookup(this.store);
+    },
+
+    /**
+     * Sets a single style value on the Chart instance.
+     *
+     * @param name {String} Name of the Chart style value to change.
+     * @param value {Object} New value to pass to the Chart style.
+     */
+     setStyle: function(name, value){
+         this.swf.setStyle(name, Ext.encode(value));
+     },
+
+    /**
+     * Resets all styles on the Chart instance.
+     *
+     * @param styles {Object} Initializer for all Chart styles.
+     */
+    setStyles: function(styles){
+        this.swf.setStyles(Ext.encode(styles));
+    },
+
+    /**
+     * Sets the styles on all series in the Chart.
+     *
+     * @param styles {Array} Initializer for all Chart series styles.
+     */
+    setSeriesStyles: function(styles){
+        this.seriesStyles = styles;
+        var s = [];
+        Ext.each(styles, function(style){
+            s.push(Ext.encode(style));
+        });
+        this.swf.setSeriesStyles(s);
+    },
+
+    setCategoryNames : function(names){
+        this.swf.setCategoryNames(names);
+    },
+
+    setTipRenderer : function(fn){
+        var chart = this;
+        this.tipFnName = this.createFnProxy(function(item, index, series){
+            var record = chart.store.getAt(index);
+            return fn(chart, record, index, series);
+        }, this.tipFnName);
+        this.swf.setDataTipFunction(this.tipFnName);
+    },
+
+    setSeries : function(series){
+        this.series = series;
+        this.refresh();
+    },
+
+    /**
+     * Changes the data store bound to this chart and refreshes it.
+     * @param {Store} store The store to bind to this chart
+     */
+    bindStore : function(store, initial){
+        if(!initial && this.store){
+            if(store !== this.store && this.store.autoDestroy){
+                this.store.destroy();
+            }else{
+                this.store.un("datachanged", this.refresh, this);
+                this.store.un("add", this.delayRefresh, this);
+                this.store.un("remove", this.delayRefresh, this);
+                this.store.un("update", this.delayRefresh, this);
+                this.store.un("clear", this.refresh, this);
+            }
+        }
+        if(store){
+            store = Ext.StoreMgr.lookup(store);
+            store.on({
+                scope: this,
+                datachanged: this.refresh,
+                add: this.delayRefresh,
+                remove: this.delayRefresh,
+                update: this.delayRefresh,
+                clear: this.refresh
+            });
+        }
+        this.store = store;
+        if(store && !initial){
+            this.refresh();
+        }
+    },
+
+    onSwfReady : function(isReset){
+        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
+        this.swf.setType(this.type);
+
+        if(this.chartStyle){
+            this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
+        }
+
+        if(this.categoryNames){
+            this.setCategoryNames(this.categoryNames);
+        }
+
+        if(this.tipRenderer){
+            this.setTipRenderer(this.tipRenderer);
+        }
+        if(!isReset){
+            this.bindStore(this.store, true);
+        }
+        this.refresh.defer(10, this);
+    },
+
+    delayRefresh : function(){
+        if(!this.refreshTask){
+            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
+        }
+        this.refreshTask.delay(this.refreshBuffer);
+    },
+
+    refresh : function(){
+        if(this.fireEvent('beforerefresh', this) !== false){
+	        var styleChanged = false;
+	        // convert the store data into something YUI charts can understand
+	        var data = [], rs = this.store.data.items;
+	        for(var j = 0, len = rs.length; j < len; j++){
+	            data[j] = rs[j].data;
+	        }
+	        //make a copy of the series definitions so that we aren't
+	        //editing them directly.
+	        var dataProvider = [];
+	        var seriesCount = 0;
+	        var currentSeries = null;
+	        var i = 0;
+	        if(this.series){
+	            seriesCount = this.series.length;
+	            for(i = 0; i < seriesCount; i++){
+	                currentSeries = this.series[i];
+	                var clonedSeries = {};
+	                for(var prop in currentSeries){
+	                    if(prop == "style" && currentSeries.style !== null){
+	                        clonedSeries.style = Ext.encode(currentSeries.style);
+	                        styleChanged = true;
+	                        //we don't want to modify the styles again next time
+	                        //so null out the style property.
+	                        // this causes issues
+	                        // currentSeries.style = null;
+	                    } else{
+	                        clonedSeries[prop] = currentSeries[prop];
+	                    }
+	                }
+	                dataProvider.push(clonedSeries);
+	            }
+	        }
+	
+	        if(seriesCount > 0){
+	            for(i = 0; i < seriesCount; i++){
+	                currentSeries = dataProvider[i];
+	                if(!currentSeries.type){
+	                    currentSeries.type = this.type;
+	                }
+	                currentSeries.dataProvider = data;
+	            }
+	        } else{
+	            dataProvider.push({type: this.type, dataProvider: data});
+	        }
+	        this.swf.setDataProvider(dataProvider);
+	        if(this.seriesStyles){
+	            this.setSeriesStyles(this.seriesStyles);
+	        }
+            this.fireEvent('refresh', this);
+        }
+    },
+
+    createFnProxy : function(fn, old){
+        if(old){
+            delete window[old];
+        }
+        var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);
+        window[fnName] = fn;
+        return fnName;
+    },
+    
+    onDestroy: function(){
+        Ext.chart.Chart.superclass.onDestroy.call(this);
+        this.bindStore(null);
+        var tip = this.tipFnName;
+        if(!Ext.isEmpty(tip)){
+            delete window[tip];
+        }
+    }
+});
+Ext.reg('chart', Ext.chart.Chart);
+Ext.chart.Chart.PROXY_FN_ID = 0;
+
+/**
+ * Sets the url to load the chart from. This should be set to a local resource.
+ * @static
+ * @type String
+ */
+Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf';
+
+/**
+ * @class Ext.chart.PieChart
+ * @extends Ext.chart.Chart
+ * @constructor
+ * @xtype piechart
+ */
+Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
+    type: 'pie',
+
+    onSwfReady : function(isReset){
+        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);
+
+        this.setDataField(this.dataField);
+        this.setCategoryField(this.categoryField);
+    },
+
+    setDataField : function(field){
+        this.dataField = field;
+        this.swf.setDataField(field);
+    },
+
+    setCategoryField : function(field){
+        this.categoryField = field;
+        this.swf.setCategoryField(field);
+    }
+});
+Ext.reg('piechart', Ext.chart.PieChart);
+
+/**
+ * @class Ext.chart.CartesianChart
+ * @extends Ext.chart.Chart
+ * @constructor
+ * @xtype cartesianchart
+ */
+Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
+    onSwfReady : function(isReset){
+        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
+
+        if(this.xField){
+            this.setXField(this.xField);
+        }
+        if(this.yField){
+            this.setYField(this.yField);
+        }
+        if(this.xAxis){
+            this.setXAxis(this.xAxis);
+        }
+        if(this.yAxis){
+            this.setYAxis(this.yAxis);
+        }
+    },
+
+    setXField : function(value){
+        this.xField = value;
+        this.swf.setHorizontalField(value);
+    },
+
+    setYField : function(value){
+        this.yField = value;
+        this.swf.setVerticalField(value);
+    },
+
+    setXAxis : function(value){
+        this.xAxis = this.createAxis('xAxis', value);
+        this.swf.setHorizontalAxis(this.xAxis);
+    },
+
+    setYAxis : function(value){
+        this.yAxis = this.createAxis('yAxis', value);
+        this.swf.setVerticalAxis(this.yAxis);
+    },
+
+    createAxis : function(axis, value){
+        var o = Ext.apply({}, value), oldFn = null;
+        if(this[axis]){
+            oldFn = this[axis].labelFunction;
+        }
+        if(o.labelRenderer){
+            var fn = o.labelRenderer;
+            o.labelFunction = this.createFnProxy(function(v){
+                return fn(v);
+            }, oldFn);
+            delete o.labelRenderer;
+        }
+        return o;
+    }
+});
+Ext.reg('cartesianchart', Ext.chart.CartesianChart);
+
+/**
+ * @class Ext.chart.LineChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype linechart
+ */
+Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'line'
+});
+Ext.reg('linechart', Ext.chart.LineChart);
+
+/**
+ * @class Ext.chart.ColumnChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype columnchart
+ */
+Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'column'
+});
+Ext.reg('columnchart', Ext.chart.ColumnChart);
+
+/**
+ * @class Ext.chart.StackedColumnChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype stackedcolumnchart
+ */
+Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'stackcolumn'
+});
+Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
+
+/**
+ * @class Ext.chart.BarChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype barchart
+ */
+Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'bar'
+});
+Ext.reg('barchart', Ext.chart.BarChart);
+
+/**
+ * @class Ext.chart.StackedBarChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype stackedbarchart
+ */
+Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'stackbar'
+});
+Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
+
+
+
+/**
+ * @class Ext.chart.Axis
+ * Defines a CartesianChart's vertical or horizontal axis.
+ * @constructor
+ */
+Ext.chart.Axis = function(config){
+    Ext.apply(this, config);
+};
+
+Ext.chart.Axis.prototype =
+{
+    /**
+     * The type of axis.
+     *
+     * @property type
+     * @type String
+     */
+    type: null,
+
+    /**
+     * The direction in which the axis is drawn. May be "horizontal" or "vertical".
+     *
+     * @property orientation
+     * @type String
+     */
+    orientation: "horizontal",
+
+    /**
+     * If true, the items on the axis will be drawn in opposite direction.
+     *
+     * @property reverse
+     * @type Boolean
+     */
+    reverse: false,
+
+    /**
+     * A string reference to the globally-accessible function that may be called to
+     * determine each of the label values for this axis.
+     *
+     * @property labelFunction
+     * @type String
+     */
+    labelFunction: null,
+
+    /**
+     * If true, labels that overlap previously drawn labels on the axis will be hidden.
+     *
+     * @property hideOverlappingLabels
+     * @type Boolean
+     */
+    hideOverlappingLabels: true
+};
+
+/**
+ * @class Ext.chart.NumericAxis
+ * @extends Ext.chart.Axis
+ * A type of axis whose units are measured in numeric values.
+ * @constructor
+ */
+Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {
+    type: "numeric",
+
+    /**
+     * The minimum value drawn by the axis. If not set explicitly, the axis minimum
+     * will be calculated automatically.
+     *
+     * @property minimum
+     * @type Number
+     */
+    minimum: NaN,
+
+    /**
+     * The maximum value drawn by the axis. If not set explicitly, the axis maximum
+     * will be calculated automatically.
+     *
+     * @property maximum
+     * @type Number
+     */
+    maximum: NaN,
+
+    /**
+     * The spacing between major intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    majorUnit: NaN,
+
+    /**
+     * The spacing between minor intervals on this axis.
+     *
+     * @property minorUnit
+     * @type Number
+     */
+    minorUnit: NaN,
+
+    /**
+     * If true, the labels, ticks, gridlines, and other objects will snap to
+     * the nearest major or minor unit. If false, their position will be based
+     * on the minimum value.
+     *
+     * @property snapToUnits
+     * @type Boolean
+     */
+    snapToUnits: true,
+
+    /**
+     * If true, and the bounds are calculated automatically, either the minimum or
+     * maximum will be set to zero.
+     *
+     * @property alwaysShowZero
+     * @type Boolean
+     */
+    alwaysShowZero: true,
+
+    /**
+     * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".
+     *
+     * @property scale
+     * @type String
+     */
+    scale: "linear"
+});
+
+/**
+ * @class Ext.chart.TimeAxis
+ * @extends Ext.chart.Axis
+ * A type of axis whose units are measured in time-based values.
+ * @constructor
+ */
+Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {
+    type: "time",
+
+    /**
+     * The minimum value drawn by the axis. If not set explicitly, the axis minimum
+     * will be calculated automatically.
+     *
+     * @property minimum
+     * @type Date
+     */
+    minimum: null,
+
+    /**
+     * The maximum value drawn by the axis. If not set explicitly, the axis maximum
+     * will be calculated automatically.
+     *
+     * @property maximum
+     * @type Number
+     */
+    maximum: null,
+
+    /**
+     * The spacing between major intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    majorUnit: NaN,
+
+    /**
+     * The time unit used by the majorUnit.
+     *
+     * @property majorTimeUnit
+     * @type String
+     */
+    majorTimeUnit: null,
+
+    /**
+     * The spacing between minor intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    minorUnit: NaN,
+
+    /**
+     * The time unit used by the minorUnit.
+     *
+     * @property majorTimeUnit
+     * @type String
+     */
+    minorTimeUnit: null,
+
+    /**
+     * If true, the labels, ticks, gridlines, and other objects will snap to
+     * the nearest major or minor unit. If false, their position will be based
+     * on the minimum value.
+     *
+     * @property snapToUnits
+     * @type Boolean
+     */
+    snapToUnits: true
+});
+
+/**
+ * @class Ext.chart.CategoryAxis
+ * @extends Ext.chart.Axis
+ * A type of axis that displays items in categories.
+ * @constructor
+ */
+Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {
+    type: "category",
+
+    /**
+     * A list of category names to display along this axis.
+     *
+     * @property categoryNames
+     * @type Array
+     */
+    categoryNames: null
+});
+
+/**
+ * @class Ext.chart.Series
+ * Series class for the charts widget.
+ * @constructor
+ */
+Ext.chart.Series = function(config) { Ext.apply(this, config); };
+
+Ext.chart.Series.prototype =
+{
+    /**
+     * The type of series.
+     *
+     * @property type
+     * @type String
+     */
+    type: null,
+
+    /**
+     * The human-readable name of the series.
+     *
+     * @property displayName
+     * @type String
+     */
+    displayName: null
+};
+
+/**
+ * @class Ext.chart.CartesianSeries
+ * @extends Ext.chart.Series
+ * CartesianSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
+    /**
+     * The field used to access the x-axis value from the items from the data source.
+     *
+     * @property xField
+     * @type String
+     */
+    xField: null,
+
+    /**
+     * The field used to access the y-axis value from the items from the data source.
+     *
+     * @property yField
+     * @type String
+     */
+    yField: null
+});
+
+/**
+ * @class Ext.chart.ColumnSeries
+ * @extends Ext.chart.CartesianSeries
+ * ColumnSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "column"
+});
+
+/**
+ * @class Ext.chart.LineSeries
+ * @extends Ext.chart.CartesianSeries
+ * LineSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "line"
+});
+
+/**
+ * @class Ext.chart.BarSeries
+ * @extends Ext.chart.CartesianSeries
+ * BarSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "bar"
+});
+
+
+/**
+ * @class Ext.chart.PieSeries
+ * @extends Ext.chart.Series
+ * PieSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
+    type: "pie",
+    dataField: null,
+    categoryField: null
 });/**
  * @class Ext.menu.Menu
  * @extends Ext.Container
@@ -55023,216 +55023,216 @@ Ext.menu.Separator = Ext.extend(Ext.menu.BaseItem, {
         Ext.menu.Separator.superclass.onRender.apply(this, arguments);
     }
 });
-Ext.reg('menuseparator', Ext.menu.Separator);/**
- * @class Ext.menu.Item
- * @extends Ext.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- * @xtype menuitem
- */
-Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {
-    /**
-     * @property menu
-     * @type Ext.menu.Menu
-     * The submenu associated with this Item if one was configured.
-     */
-    /**
-     * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
-     * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
-     */
-    /**
-     * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
-     * icon is specified {@link #iconCls} should not be.
-     */
-    /**
-     * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
-     * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
-     */
-    /**
-     * @cfg {String} text The text to display in this item (defaults to '').
-     */
-    /**
-     * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
-     */
-    /**
-     * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
-     */
-    /**
-     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
-     */
-    itemCls : 'x-menu-item',
-    /**
-     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
-     */
-    canActivate : true,
-    /**
-     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
-     */
-    showDelay: 200,
-    // doc'd in BaseItem
-    hideDelay: 200,
-
-    // private
-    ctype: 'Ext.menu.Item',
-
-    initComponent : function(){
-        Ext.menu.Item.superclass.initComponent.call(this);
-        if(this.menu){
-            this.menu = Ext.menu.MenuMgr.get(this.menu);
-            this.menu.ownerCt = this;
-        }
-    },
-
-    // private
-    onRender : function(container, position){
-        if (!this.itemTpl) {
-            this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
-                '',
-                        ' target="{hrefTarget}"',
-                    '',
-                 '>',
-                     '',
-                     '{text}',
-                 ''
-             );
-        }
-        var a = this.getTemplateArgs();
-        this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
-        this.iconEl = this.el.child('img.x-menu-item-icon');
-        this.textEl = this.el.child('.x-menu-item-text');
-        if(!this.href) { // if no link defined, prevent the default anchor event
-            this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
-        }
-        Ext.menu.Item.superclass.onRender.call(this, container, position);
-    },
-
-    getTemplateArgs: function() {
-        return {
-            id: this.id,
-            cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
-            href: this.href || '#',
-            hrefTarget: this.hrefTarget,
-            icon: this.icon || Ext.BLANK_IMAGE_URL,
-            iconCls: this.iconCls || '',
-            text: this.itemText||this.text||' '
-        };
-    },
-
-    /**
-     * Sets the text to display in this menu item
-     * @param {String} text The text to display
-     */
-    setText : function(text){
-        this.text = text||' ';
-        if(this.rendered){
-            this.textEl.update(this.text);
-            this.parentMenu.layout.doAutoSize();
-        }
-    },
-
-    /**
-     * Sets the CSS class to apply to the item's icon element
-     * @param {String} cls The CSS class to apply
-     */
-    setIconClass : function(cls){
-        var oldCls = this.iconCls;
-        this.iconCls = cls;
-        if(this.rendered){
-            this.iconEl.replaceClass(oldCls, this.iconCls);
-        }
-    },
-
-    //private
-    beforeDestroy: function(){
-        if (this.menu){
-            delete this.menu.ownerCt;
-            this.menu.destroy();
-        }
-        Ext.menu.Item.superclass.beforeDestroy.call(this);
-    },
-
-    // private
-    handleClick : function(e){
-        if(!this.href){ // if no link defined, stop the event automatically
-            e.stopEvent();
-        }
-        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
-    },
-
-    // private
-    activate : function(autoExpand){
-        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
-            this.focus();
-            if(autoExpand){
-                this.expandMenu();
-            }
-        }
-        return true;
-    },
-
-    // private
-    shouldDeactivate : function(e){
-        if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
-            if(this.menu && this.menu.isVisible()){
-                return !this.menu.getEl().getRegion().contains(e.getPoint());
-            }
-            return true;
-        }
-        return false;
-    },
-
-    // private
-    deactivate : function(){
-        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
-        this.hideMenu();
-    },
-
-    // private
-    expandMenu : function(autoActivate){
-        if(!this.disabled && this.menu){
-            clearTimeout(this.hideTimer);
-            delete this.hideTimer;
-            if(!this.menu.isVisible() && !this.showTimer){
-                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
-            }else if (this.menu.isVisible() && autoActivate){
-                this.menu.tryActivate(0, 1);
-            }
-        }
-    },
-
-    // private
-    deferExpand : function(autoActivate){
-        delete this.showTimer;
-        this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
-        if(autoActivate){
-            this.menu.tryActivate(0, 1);
-        }
-    },
-
-    // private
-    hideMenu : function(){
-        clearTimeout(this.showTimer);
-        delete this.showTimer;
-        if(!this.hideTimer && this.menu && this.menu.isVisible()){
-            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
-        }
-    },
-
-    // private
-    deferHide : function(){
-        delete this.hideTimer;
-        if(this.menu.over){
-            this.parentMenu.setActiveItem(this, false);
-        }else{
-            this.menu.hide();
-        }
-    }
-});
+Ext.reg('menuseparator', Ext.menu.Separator);/**
+ * @class Ext.menu.Item
+ * @extends Ext.menu.BaseItem
+ * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
+ * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
+ * activation and click handling.
+ * @constructor
+ * Creates a new Item
+ * @param {Object} config Configuration options
+ * @xtype menuitem
+ */
+Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {
+    /**
+     * @property menu
+     * @type Ext.menu.Menu
+     * The submenu associated with this Item if one was configured.
+     */
+    /**
+     * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
+     * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
+     */
+    /**
+     * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
+     * icon is specified {@link #iconCls} should not be.
+     */
+    /**
+     * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
+     * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
+     */
+    /**
+     * @cfg {String} text The text to display in this item (defaults to '').
+     */
+    /**
+     * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
+     */
+    /**
+     * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
+     */
+    /**
+     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
+     */
+    itemCls : 'x-menu-item',
+    /**
+     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
+     */
+    canActivate : true,
+    /**
+     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
+     */
+    showDelay: 200,
+    // doc'd in BaseItem
+    hideDelay: 200,
+
+    // private
+    ctype: 'Ext.menu.Item',
+
+    initComponent : function(){
+        Ext.menu.Item.superclass.initComponent.call(this);
+        if(this.menu){
+            this.menu = Ext.menu.MenuMgr.get(this.menu);
+            this.menu.ownerCt = this;
+        }
+    },
+
+    // private
+    onRender : function(container, position){
+        if (!this.itemTpl) {
+            this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
+                '',
+                        ' target="{hrefTarget}"',
+                    '',
+                 '>',
+                     '',
+                     '{text}',
+                 ''
+             );
+        }
+        var a = this.getTemplateArgs();
+        this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
+        this.iconEl = this.el.child('img.x-menu-item-icon');
+        this.textEl = this.el.child('.x-menu-item-text');
+        if(!this.href) { // if no link defined, prevent the default anchor event
+            this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
+        }
+        Ext.menu.Item.superclass.onRender.call(this, container, position);
+    },
+
+    getTemplateArgs: function() {
+        return {
+            id: this.id,
+            cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
+            href: this.href || '#',
+            hrefTarget: this.hrefTarget,
+            icon: this.icon || Ext.BLANK_IMAGE_URL,
+            iconCls: this.iconCls || '',
+            text: this.itemText||this.text||' '
+        };
+    },
+
+    /**
+     * Sets the text to display in this menu item
+     * @param {String} text The text to display
+     */
+    setText : function(text){
+        this.text = text||' ';
+        if(this.rendered){
+            this.textEl.update(this.text);
+            this.parentMenu.layout.doAutoSize();
+        }
+    },
+
+    /**
+     * Sets the CSS class to apply to the item's icon element
+     * @param {String} cls The CSS class to apply
+     */
+    setIconClass : function(cls){
+        var oldCls = this.iconCls;
+        this.iconCls = cls;
+        if(this.rendered){
+            this.iconEl.replaceClass(oldCls, this.iconCls);
+        }
+    },
+
+    //private
+    beforeDestroy: function(){
+        if (this.menu){
+            delete this.menu.ownerCt;
+            this.menu.destroy();
+        }
+        Ext.menu.Item.superclass.beforeDestroy.call(this);
+    },
+
+    // private
+    handleClick : function(e){
+        if(!this.href){ // if no link defined, stop the event automatically
+            e.stopEvent();
+        }
+        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
+    },
+
+    // private
+    activate : function(autoExpand){
+        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
+            this.focus();
+            if(autoExpand){
+                this.expandMenu();
+            }
+        }
+        return true;
+    },
+
+    // private
+    shouldDeactivate : function(e){
+        if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
+            if(this.menu && this.menu.isVisible()){
+                return !this.menu.getEl().getRegion().contains(e.getPoint());
+            }
+            return true;
+        }
+        return false;
+    },
+
+    // private
+    deactivate : function(){
+        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
+        this.hideMenu();
+    },
+
+    // private
+    expandMenu : function(autoActivate){
+        if(!this.disabled && this.menu){
+            clearTimeout(this.hideTimer);
+            delete this.hideTimer;
+            if(!this.menu.isVisible() && !this.showTimer){
+                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
+            }else if (this.menu.isVisible() && autoActivate){
+                this.menu.tryActivate(0, 1);
+            }
+        }
+    },
+
+    // private
+    deferExpand : function(autoActivate){
+        delete this.showTimer;
+        this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
+        if(autoActivate){
+            this.menu.tryActivate(0, 1);
+        }
+    },
+
+    // private
+    hideMenu : function(){
+        clearTimeout(this.showTimer);
+        delete this.showTimer;
+        if(!this.hideTimer && this.menu && this.menu.isVisible()){
+            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+        }
+    },
+
+    // private
+    deferHide : function(){
+        delete this.hideTimer;
+        if(this.menu.over){
+            this.parentMenu.setActiveItem(this, false);
+        }else{
+            this.menu.hide();
+        }
+    }
+});
 Ext.reg('menuitem', Ext.menu.Item);/**
  * @class Ext.menu.CheckItem
  * @extends Ext.menu.Item
@@ -55342,227 +55342,227 @@ Ext.menu.CheckItem = Ext.extend(Ext.menu.Item, {
        Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
     }
 });
-Ext.reg('menucheckitem', Ext.menu.CheckItem);/**
- * @class Ext.menu.DateMenu
- * @extends Ext.menu.Menu
- * 
    A menu containing an {@link Ext.DatePicker} Component.
    
- * 
    Notes:
      
- * 
    • Although not listed here, the constructor for this class
- * accepts all of the configuration options of {@link Ext.DatePicker}.
      • 
- * 
    • If subclassing DateMenu, any configuration options for the DatePicker must be
- * applied to the initialConfig property of the DateMenu.
- * Applying {@link Ext.DatePicker DatePicker} configuration settings to
- * this will not affect the DatePicker's configuration.
      • 
- * 
    
- * @xtype datemenu
- */
- Ext.menu.DateMenu = Ext.extend(Ext.menu.Menu, {
-    /** 
-     * @cfg {Boolean} enableScrolling
-     * @hide 
-     */
-    enableScrolling : false,
-    /**
-     * @cfg {Function} handler
-     * Optional. A function that will handle the select event of this menu.
-     * The handler is passed the following parameters:
      
-     * 
    • picker : DatePicker
      The Ext.DatePicker.
      • 
-     * 
    • date : Date
      The selected date.
      • 
-     * 
    
-     */
-    /**
-     * @cfg {Object} scope
-     * The scope (this reference) in which the {@link #handler}
-     * function will be called.  Defaults to this DateMenu instance.
-     */    
-    /** 
-     * @cfg {Boolean} hideOnClick
-     * False to continue showing the menu after a date is selected, defaults to true.
-     */
-    hideOnClick : true,
-    
-    /** 
-     * @cfg {String} pickerId
-     * An id to assign to the underlying date picker. Defaults to null.
-     */
-    pickerId : null,
-    
-    /** 
-     * @cfg {Number} maxHeight
-     * @hide 
-     */
-    /** 
-     * @cfg {Number} scrollIncrement
-     * @hide 
-     */
-    /**
-     * The {@link Ext.DatePicker} instance for this DateMenu
-     * @property picker
-     * @type DatePicker
-     */
-    cls : 'x-date-menu',
-    
-    /**
-     * @event click
-     * @hide
-     */
-    
-    /**
-     * @event itemclick
-     * @hide
-     */
-
-    initComponent : function(){
-        this.on('beforeshow', this.onBeforeShow, this);
-        if(this.strict = (Ext.isIE7 && Ext.isStrict)){
-            this.on('show', this.onShow, this, {single: true, delay: 20});
-        }
-        Ext.apply(this, {
-            plain: true,
-            showSeparator: false,
-            items: this.picker = new Ext.DatePicker(Ext.applyIf({
-                internalRender: this.strict || !Ext.isIE,
-                ctCls: 'x-menu-date-item',
-                id: this.pickerId
-            }, this.initialConfig))
-        });
-        this.picker.purgeListeners();
-        Ext.menu.DateMenu.superclass.initComponent.call(this);
-        /**
-         * @event select
-         * Fires when a date is selected from the {@link #picker Ext.DatePicker}
-         * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
-         * @param {Date} date The selected date
-         */
-        this.relayEvents(this.picker, ['select']);
-        this.on('show', this.picker.focus, this.picker);
-        this.on('select', this.menuHide, this);
-        if(this.handler){
-            this.on('select', this.handler, this.scope || this);
-        }
-    },
-
-    menuHide : function() {
-        if(this.hideOnClick){
-            this.hide(true);
-        }
-    },
-
-    onBeforeShow : function(){
-        if(this.picker){
-            this.picker.hideMonthPicker(true);
-        }
-    },
-
-    onShow : function(){
-        var el = this.picker.getEl();
-        el.setWidth(el.getWidth()); //nasty hack for IE7 strict mode
-    }
- });
- Ext.reg('datemenu', Ext.menu.DateMenu);
- /**
- * @class Ext.menu.ColorMenu
- * @extends Ext.menu.Menu
- * 
    A menu containing a {@link Ext.ColorPalette} Component.
    
- * 
    Notes:
      
- * 
    • Although not listed here, the constructor for this class
- * accepts all of the configuration options of {@link Ext.ColorPalette}.
      • 
- * 
    • If subclassing ColorMenu, any configuration options for the ColorPalette must be
- * applied to the initialConfig property of the ColorMenu.
- * Applying {@link Ext.ColorPalette ColorPalette} configuration settings to
- * this will not affect the ColorPalette's configuration.
      • 
- * 
     * 
- * @xtype colormenu
- */
- Ext.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {
-    /** 
-     * @cfg {Boolean} enableScrolling
-     * @hide 
-     */
-    enableScrolling : false,
-    /**
-     * @cfg {Function} handler
-     * Optional. A function that will handle the select event of this menu.
-     * The handler is passed the following parameters:
      
-     * 
    • palette : ColorPalette
      The {@link #palette Ext.ColorPalette}.
      • 
-     * 
    • color : String
      The 6-digit color hex code (without the # symbol).
      • 
-     * 
    
-     */
-    /**
-     * @cfg {Object} scope
-     * The scope (this reference) in which the {@link #handler}
-     * function will be called.  Defaults to this ColorMenu instance.
-     */    
-    
-    /** 
-     * @cfg {Boolean} hideOnClick
-     * False to continue showing the menu after a color is selected, defaults to true.
-     */
-    hideOnClick : true,
-    
-    cls : 'x-color-menu',
-    
-    /** 
-     * @cfg {String} paletteId
-     * An id to assign to the underlying color palette. Defaults to null.
-     */
-    paletteId : null,
-    
-    /** 
-     * @cfg {Number} maxHeight
-     * @hide 
-     */
-    /** 
-     * @cfg {Number} scrollIncrement
-     * @hide 
-     */
-    /**
-     * @property palette
-     * @type ColorPalette
-     * The {@link Ext.ColorPalette} instance for this ColorMenu
-     */
-    
-    
-    /**
-     * @event click
-     * @hide
-     */
-    
-    /**
-     * @event itemclick
-     * @hide
-     */
-    
-    initComponent : function(){
-        Ext.apply(this, {
-            plain: true,
-            showSeparator: false,
-            items: this.palette = new Ext.ColorPalette(Ext.applyIf({
-                id: this.paletteId
-            }, this.initialConfig))
-        });
-        this.palette.purgeListeners();
-        Ext.menu.ColorMenu.superclass.initComponent.call(this);
-        /**
-         * @event select
-         * Fires when a color is selected from the {@link #palette Ext.ColorPalette}
-         * @param {Ext.ColorPalette} palette The {@link #palette Ext.ColorPalette}
-	     * @param {String} color The 6-digit color hex code (without the # symbol)
-         */
-        this.relayEvents(this.palette, ['select']);
-        this.on('select', this.menuHide, this);
-        if(this.handler){
-            this.on('select', this.handler, this.scope || this);
-        }
-    },
-
-    menuHide : function(){
-        if(this.hideOnClick){
-            this.hide(true);
-        }
-    }
-});
-Ext.reg('colormenu', Ext.menu.ColorMenu);
+Ext.reg('menucheckitem', Ext.menu.CheckItem);/**
+ * @class Ext.menu.DateMenu
+ * @extends Ext.menu.Menu
+ * 
    A menu containing an {@link Ext.DatePicker} Component.
    
+ * 
    Notes:
      
+ * 
    • Although not listed here, the constructor for this class
+ * accepts all of the configuration options of {@link Ext.DatePicker}.
      • 
+ * 
    • If subclassing DateMenu, any configuration options for the DatePicker must be
+ * applied to the initialConfig property of the DateMenu.
+ * Applying {@link Ext.DatePicker DatePicker} configuration settings to
+ * this will not affect the DatePicker's configuration.
      • 
+ * 
    
+ * @xtype datemenu
+ */
+ Ext.menu.DateMenu = Ext.extend(Ext.menu.Menu, {
+    /** 
+     * @cfg {Boolean} enableScrolling
+     * @hide 
+     */
+    enableScrolling : false,
+    /**
+     * @cfg {Function} handler
+     * Optional. A function that will handle the select event of this menu.
+     * The handler is passed the following parameters:
      
+     * 
    • picker : DatePicker
      The Ext.DatePicker.
      • 
+     * 
    • date : Date
      The selected date.
      • 
+     * 
    
+     */
+    /**
+     * @cfg {Object} scope
+     * The scope (this reference) in which the {@link #handler}
+     * function will be called.  Defaults to this DateMenu instance.
+     */    
+    /** 
+     * @cfg {Boolean} hideOnClick
+     * False to continue showing the menu after a date is selected, defaults to true.
+     */
+    hideOnClick : true,
+    
+    /** 
+     * @cfg {String} pickerId
+     * An id to assign to the underlying date picker. Defaults to null.
+     */
+    pickerId : null,
+    
+    /** 
+     * @cfg {Number} maxHeight
+     * @hide 
+     */
+    /** 
+     * @cfg {Number} scrollIncrement
+     * @hide 
+     */
+    /**
+     * The {@link Ext.DatePicker} instance for this DateMenu
+     * @property picker
+     * @type DatePicker
+     */
+    cls : 'x-date-menu',
+    
+    /**
+     * @event click
+     * @hide
+     */
+    
+    /**
+     * @event itemclick
+     * @hide
+     */
+
+    initComponent : function(){
+        this.on('beforeshow', this.onBeforeShow, this);
+        if(this.strict = (Ext.isIE7 && Ext.isStrict)){
+            this.on('show', this.onShow, this, {single: true, delay: 20});
+        }
+        Ext.apply(this, {
+            plain: true,
+            showSeparator: false,
+            items: this.picker = new Ext.DatePicker(Ext.applyIf({
+                internalRender: this.strict || !Ext.isIE,
+                ctCls: 'x-menu-date-item',
+                id: this.pickerId
+            }, this.initialConfig))
+        });
+        this.picker.purgeListeners();
+        Ext.menu.DateMenu.superclass.initComponent.call(this);
+        /**
+         * @event select
+         * Fires when a date is selected from the {@link #picker Ext.DatePicker}
+         * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
+         * @param {Date} date The selected date
+         */
+        this.relayEvents(this.picker, ['select']);
+        this.on('show', this.picker.focus, this.picker);
+        this.on('select', this.menuHide, this);
+        if(this.handler){
+            this.on('select', this.handler, this.scope || this);
+        }
+    },
+
+    menuHide : function() {
+        if(this.hideOnClick){
+            this.hide(true);
+        }
+    },
+
+    onBeforeShow : function(){
+        if(this.picker){
+            this.picker.hideMonthPicker(true);
+        }
+    },
+
+    onShow : function(){
+        var el = this.picker.getEl();
+        el.setWidth(el.getWidth()); //nasty hack for IE7 strict mode
+    }
+ });
+ Ext.reg('datemenu', Ext.menu.DateMenu);
+ /**
+ * @class Ext.menu.ColorMenu
+ * @extends Ext.menu.Menu
+ * 
    A menu containing a {@link Ext.ColorPalette} Component.
    
+ * 
    Notes:
      
+ * 
    • Although not listed here, the constructor for this class
+ * accepts all of the configuration options of {@link Ext.ColorPalette}.
      • 
+ * 
    • If subclassing ColorMenu, any configuration options for the ColorPalette must be
+ * applied to the initialConfig property of the ColorMenu.
+ * Applying {@link Ext.ColorPalette ColorPalette} configuration settings to
+ * this will not affect the ColorPalette's configuration.
      • 
+ * 
     * 
+ * @xtype colormenu
+ */
+ Ext.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {
+    /** 
+     * @cfg {Boolean} enableScrolling
+     * @hide 
+     */
+    enableScrolling : false,
+    /**
+     * @cfg {Function} handler
+     * Optional. A function that will handle the select event of this menu.
+     * The handler is passed the following parameters:
      
+     * 
    • palette : ColorPalette
      The {@link #palette Ext.ColorPalette}.
      • 
+     * 
    • color : String
      The 6-digit color hex code (without the # symbol).
      • 
+     * 
    
+     */
+    /**
+     * @cfg {Object} scope
+     * The scope (this reference) in which the {@link #handler}
+     * function will be called.  Defaults to this ColorMenu instance.
+     */    
+    
+    /** 
+     * @cfg {Boolean} hideOnClick
+     * False to continue showing the menu after a color is selected, defaults to true.
+     */
+    hideOnClick : true,
+    
+    cls : 'x-color-menu',
+    
+    /** 
+     * @cfg {String} paletteId
+     * An id to assign to the underlying color palette. Defaults to null.
+     */
+    paletteId : null,
+    
+    /** 
+     * @cfg {Number} maxHeight
+     * @hide 
+     */
+    /** 
+     * @cfg {Number} scrollIncrement
+     * @hide 
+     */
+    /**
+     * @property palette
+     * @type ColorPalette
+     * The {@link Ext.ColorPalette} instance for this ColorMenu
+     */
+    
+    
+    /**
+     * @event click
+     * @hide
+     */
+    
+    /**
+     * @event itemclick
+     * @hide
+     */
+    
+    initComponent : function(){
+        Ext.apply(this, {
+            plain: true,
+            showSeparator: false,
+            items: this.palette = new Ext.ColorPalette(Ext.applyIf({
+                id: this.paletteId
+            }, this.initialConfig))
+        });
+        this.palette.purgeListeners();
+        Ext.menu.ColorMenu.superclass.initComponent.call(this);
+        /**
+         * @event select
+         * Fires when a color is selected from the {@link #palette Ext.ColorPalette}
+         * @param {Ext.ColorPalette} palette The {@link #palette Ext.ColorPalette}
+	     * @param {String} color The 6-digit color hex code (without the # symbol)
+         */
+        this.relayEvents(this.palette, ['select']);
+        this.on('select', this.menuHide, this);
+        if(this.handler){
+            this.on('select', this.handler, this.scope || this);
+        }
+    },
+
+    menuHide : function(){
+        if(this.hideOnClick){
+            this.hide(true);
+        }
+    }
+});
+Ext.reg('colormenu', Ext.menu.ColorMenu);
 /**
  * @class Ext.form.Field
  * @extends Ext.BoxComponent
@@ -57823,98 +57823,98 @@ dateField.setValue('2006-05-04');
      * @method autoSize
      */
 });
-Ext.reg('datefield', Ext.form.DateField);/**
- * @class Ext.form.DisplayField
- * @extends Ext.form.Field
- * A display-only text field which is not validated and not submitted.
- * @constructor
- * Creates a new DisplayField.
- * @param {Object} config Configuration options
- * @xtype displayfield
- */
-Ext.form.DisplayField = Ext.extend(Ext.form.Field,  {
-    validationEvent : false,
-    validateOnBlur : false,
-    defaultAutoCreate : {tag: "div"},
-    /**
-     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-display-field")
-     */
-    fieldClass : "x-form-display-field",
-    /**
-     * @cfg {Boolean} htmlEncode false to skip HTML-encoding the text when rendering it (defaults to
-     * false). This might be useful if you want to include tags in the field's innerHTML rather than
-     * rendering them as string literals per the default logic.
-     */
-    htmlEncode: false,
-
-    // private
-    initEvents : Ext.emptyFn,
-
-    isValid : function(){
-        return true;
-    },
-
-    validate : function(){
-        return true;
-    },
-
-    getRawValue : function(){
-        var v = this.rendered ? this.el.dom.innerHTML : Ext.value(this.value, '');
-        if(v === this.emptyText){
-            v = '';
-        }
-        if(this.htmlEncode){
-            v = Ext.util.Format.htmlDecode(v);
-        }
-        return v;
-    },
-
-    getValue : function(){
-        return this.getRawValue();
-    },
-    
-    getName: function() {
-        return this.name;
-    },
-
-    setRawValue : function(v){
-        if(this.htmlEncode){
-            v = Ext.util.Format.htmlEncode(v);
-        }
-        return this.rendered ? (this.el.dom.innerHTML = (Ext.isEmpty(v) ? '' : v)) : (this.value = v);
-    },
-
-    setValue : function(v){
-        this.setRawValue(v);
-        return this;
-    }
-    /** 
-     * @cfg {String} inputType 
-     * @hide
-     */
-    /** 
-     * @cfg {Boolean} disabled 
-     * @hide
-     */
-    /** 
-     * @cfg {Boolean} readOnly 
-     * @hide
-     */
-    /** 
-     * @cfg {Boolean} validateOnBlur 
-     * @hide
-     */
-    /** 
-     * @cfg {Number} validationDelay 
-     * @hide
-     */
-    /** 
-     * @cfg {String/Boolean} validationEvent 
-     * @hide
-     */
-});
-
-Ext.reg('displayfield', Ext.form.DisplayField);
+Ext.reg('datefield', Ext.form.DateField);/**
+ * @class Ext.form.DisplayField
+ * @extends Ext.form.Field
+ * A display-only text field which is not validated and not submitted.
+ * @constructor
+ * Creates a new DisplayField.
+ * @param {Object} config Configuration options
+ * @xtype displayfield
+ */
+Ext.form.DisplayField = Ext.extend(Ext.form.Field,  {
+    validationEvent : false,
+    validateOnBlur : false,
+    defaultAutoCreate : {tag: "div"},
+    /**
+     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-display-field")
+     */
+    fieldClass : "x-form-display-field",
+    /**
+     * @cfg {Boolean} htmlEncode false to skip HTML-encoding the text when rendering it (defaults to
+     * false). This might be useful if you want to include tags in the field's innerHTML rather than
+     * rendering them as string literals per the default logic.
+     */
+    htmlEncode: false,
+
+    // private
+    initEvents : Ext.emptyFn,
+
+    isValid : function(){
+        return true;
+    },
+
+    validate : function(){
+        return true;
+    },
+
+    getRawValue : function(){
+        var v = this.rendered ? this.el.dom.innerHTML : Ext.value(this.value, '');
+        if(v === this.emptyText){
+            v = '';
+        }
+        if(this.htmlEncode){
+            v = Ext.util.Format.htmlDecode(v);
+        }
+        return v;
+    },
+
+    getValue : function(){
+        return this.getRawValue();
+    },
+    
+    getName: function() {
+        return this.name;
+    },
+
+    setRawValue : function(v){
+        if(this.htmlEncode){
+            v = Ext.util.Format.htmlEncode(v);
+        }
+        return this.rendered ? (this.el.dom.innerHTML = (Ext.isEmpty(v) ? '' : v)) : (this.value = v);
+    },
+
+    setValue : function(v){
+        this.setRawValue(v);
+        return this;
+    }
+    /** 
+     * @cfg {String} inputType 
+     * @hide
+     */
+    /** 
+     * @cfg {Boolean} disabled 
+     * @hide
+     */
+    /** 
+     * @cfg {Boolean} readOnly 
+     * @hide
+     */
+    /** 
+     * @cfg {Boolean} validateOnBlur 
+     * @hide
+     */
+    /** 
+     * @cfg {Number} validationDelay 
+     * @hide
+     */
+    /** 
+     * @cfg {String/Boolean} validationEvent 
+     * @hide
+     */
+});
+
+Ext.reg('displayfield', Ext.form.DisplayField);
 /**
  * @class Ext.form.ComboBox
  * @extends Ext.form.TriggerField
@@ -60014,38 +60014,38 @@ Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, {
 });
 
 Ext.reg('radiogroup', Ext.form.RadioGroup);
-/**
- * @class Ext.form.Hidden
- * @extends Ext.form.Field
- * A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
- * @constructor
- * Create a new Hidden field.
- * @param {Object} config Configuration options
- * @xtype hidden
- */
-Ext.form.Hidden = Ext.extend(Ext.form.Field, {
-    // private
-    inputType : 'hidden',
-
-    // private
-    onRender : function(){
-        Ext.form.Hidden.superclass.onRender.apply(this, arguments);
-    },
-
-    // private
-    initEvents : function(){
-        this.originalValue = this.getValue();
-    },
-
-    // These are all private overrides
-    setSize : Ext.emptyFn,
-    setWidth : Ext.emptyFn,
-    setHeight : Ext.emptyFn,
-    setPosition : Ext.emptyFn,
-    setPagePosition : Ext.emptyFn,
-    markInvalid : Ext.emptyFn,
-    clearInvalid : Ext.emptyFn
-});
+/**
+ * @class Ext.form.Hidden
+ * @extends Ext.form.Field
+ * A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
+ * @constructor
+ * Create a new Hidden field.
+ * @param {Object} config Configuration options
+ * @xtype hidden
+ */
+Ext.form.Hidden = Ext.extend(Ext.form.Field, {
+    // private
+    inputType : 'hidden',
+
+    // private
+    onRender : function(){
+        Ext.form.Hidden.superclass.onRender.apply(this, arguments);
+    },
+
+    // private
+    initEvents : function(){
+        this.originalValue = this.getValue();
+    },
+
+    // These are all private overrides
+    setSize : Ext.emptyFn,
+    setWidth : Ext.emptyFn,
+    setHeight : Ext.emptyFn,
+    setPosition : Ext.emptyFn,
+    setPagePosition : Ext.emptyFn,
+    markInvalid : Ext.emptyFn,
+    clearInvalid : Ext.emptyFn
+});
 Ext.reg('hidden', Ext.form.Hidden);/**
  * @class Ext.form.BasicForm
  * @extends Ext.util.Observable
@@ -61162,297 +61162,297 @@ Ext.FormPanel = Ext.extend(Ext.Panel, {
 Ext.reg('form', Ext.FormPanel);
 
 Ext.form.FormPanel = Ext.FormPanel;
-/**
- * @class Ext.form.FieldSet
- * @extends Ext.Panel
- * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
- * 
    
-var form = new Ext.FormPanel({
-    title: 'Simple Form with FieldSets',
-    labelWidth: 75, // label settings here cascade unless overridden
-    url: 'save-form.php',
-    frame:true,
-    bodyStyle:'padding:5px 5px 0',
-    width: 700,
-    renderTo: document.body,
-    layout:'column', // arrange items in columns
-    defaults: {      // defaults applied to items
-        layout: 'form',
-        border: false,
-        bodyStyle: 'padding:4px'
-    },
-    items: [{
-        // Fieldset in Column 1
-        xtype:'fieldset',
-        columnWidth: 0.5,
-        title: 'Fieldset 1',
-        collapsible: true,
-        autoHeight:true,
-        defaults: {
-            anchor: '-20' // leave room for error icon
-        },
-        defaultType: 'textfield',
-        items :[{
-                fieldLabel: 'Field 1'
-            }, {
-                fieldLabel: 'Field 2'
-            }, {
-                fieldLabel: 'Field 3'
-            }
-        ]
-    },{
-        // Fieldset in Column 2 - Panel inside
-        xtype:'fieldset',
-        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
-        autoHeight:true,
-        columnWidth: 0.5,
-        checkboxToggle: true,
-        collapsed: true, // fieldset initially collapsed
-        layout:'anchor',
-        items :[{
-            xtype: 'panel',
-            anchor: '100%',
-            title: 'Panel inside a fieldset',
-            frame: true,
-            height: 100
-        }]
-    }]
-});
- * 
    
- * @constructor
- * @param {Object} config Configuration options
- * @xtype fieldset
- */
-Ext.form.FieldSet = Ext.extend(Ext.Panel, {
-    /**
-     * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
-     * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
-     * to false).
-     * 
    A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
-     * If true is specified, the default DomHelper config object used to create the element
-     * is:
    
-     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
-     * 
       
-     */
-    /**
-     * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
-     * (defaults to '[checkbox id]-checkbox').
-     */
-    /**
-     * @cfg {Boolean} collapsible
-     * true to make the fieldset collapsible and have the expand/collapse toggle button automatically
-     * rendered into the legend element, false to keep the fieldset statically sized with no collapse
-     * button (defaults to false). Another option is to configure {@link #checkboxToggle}.
-     */
-    /**
-     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
-     */
-    /**
-     * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see 
-     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
-     * This property cascades to child containers.
-     */
-    /**
-     * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
-     */
-    baseCls : 'x-fieldset',
-    /**
-     * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
-     */
-    layout : 'form',
-    /**
-     * @cfg {Boolean} animCollapse
-     * true to animate the transition when the panel is collapsed, false to skip the
-     * animation (defaults to false).
-     */
-    animCollapse : false,
-
-    // private
-    onRender : function(ct, position){
-        if(!this.el){
-            this.el = document.createElement('fieldset');
-            this.el.id = this.id;
-            if (this.title || this.header || this.checkboxToggle) {
-                this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
-            }
-        }
-
-        Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
-
-        if(this.checkboxToggle){
-            var o = typeof this.checkboxToggle == 'object' ?
-                    this.checkboxToggle :
-                    {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
-            this.checkbox = this.header.insertFirst(o);
-            this.checkbox.dom.checked = !this.collapsed;
-            this.mon(this.checkbox, 'click', this.onCheckClick, this);
-        }
-    },
-
-    // private
-    onCollapse : function(doAnim, animArg){
-        if(this.checkbox){
-            this.checkbox.dom.checked = false;
-        }
-        Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
-
-    },
-
-    // private
-    onExpand : function(doAnim, animArg){
-        if(this.checkbox){
-            this.checkbox.dom.checked = true;
-        }
-        Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
-    },
-
-    /**
-     * This function is called by the fieldset's checkbox when it is toggled (only applies when
-     * checkboxToggle = true).  This method should never be called externally, but can be
-     * overridden to provide custom behavior when the checkbox is toggled if needed.
-     */
-    onCheckClick : function(){
-        this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
-    }
-
-    /**
-     * @cfg {String/Number} activeItem
-     * @hide
-     */
-    /**
-     * @cfg {Mixed} applyTo
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} bodyBorder
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} border
-     * @hide
-     */
-    /**
-     * @cfg {Boolean/Number} bufferResize
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} collapseFirst
-     * @hide
-     */
-    /**
-     * @cfg {String} defaultType
-     * @hide
-     */
-    /**
-     * @cfg {String} disabledClass
-     * @hide
-     */
-    /**
-     * @cfg {String} elements
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} floating
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} footer
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} frame
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} header
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} headerAsText
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} hideCollapseTool
-     * @hide
-     */
-    /**
-     * @cfg {String} iconCls
-     * @hide
-     */
-    /**
-     * @cfg {Boolean/String} shadow
-     * @hide
-     */
-    /**
-     * @cfg {Number} shadowOffset
-     * @hide
-     */
-    /**
-     * @cfg {Boolean} shim
-     * @hide
-     */
-    /**
-     * @cfg {Object/Array} tbar
-     * @hide
-     */
-    /**
-     * @cfg {Array} tools
-     * @hide
-     */
-    /**
-     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
-     * @hide
-     */
-    /**
-     * @cfg {String} xtype
-     * @hide
-     */
-    /**
-     * @property header
-     * @hide
-     */
-    /**
-     * @property footer
-     * @hide
-     */
-    /**
-     * @method focus
-     * @hide
-     */
-    /**
-     * @method getBottomToolbar
-     * @hide
-     */
-    /**
-     * @method getTopToolbar
-     * @hide
-     */
-    /**
-     * @method setIconClass
-     * @hide
-     */
-    /**
-     * @event activate
-     * @hide
-     */
-    /**
-     * @event beforeclose
-     * @hide
-     */
-    /**
-     * @event bodyresize
-     * @hide
-     */
-    /**
-     * @event close
-     * @hide
-     */
-    /**
-     * @event deactivate
-     * @hide
-     */
-});
-Ext.reg('fieldset', Ext.form.FieldSet);
+/**
+ * @class Ext.form.FieldSet
+ * @extends Ext.Panel
+ * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
+ * 
    
+var form = new Ext.FormPanel({
+    title: 'Simple Form with FieldSets',
+    labelWidth: 75, // label settings here cascade unless overridden
+    url: 'save-form.php',
+    frame:true,
+    bodyStyle:'padding:5px 5px 0',
+    width: 700,
+    renderTo: document.body,
+    layout:'column', // arrange items in columns
+    defaults: {      // defaults applied to items
+        layout: 'form',
+        border: false,
+        bodyStyle: 'padding:4px'
+    },
+    items: [{
+        // Fieldset in Column 1
+        xtype:'fieldset',
+        columnWidth: 0.5,
+        title: 'Fieldset 1',
+        collapsible: true,
+        autoHeight:true,
+        defaults: {
+            anchor: '-20' // leave room for error icon
+        },
+        defaultType: 'textfield',
+        items :[{
+                fieldLabel: 'Field 1'
+            }, {
+                fieldLabel: 'Field 2'
+            }, {
+                fieldLabel: 'Field 3'
+            }
+        ]
+    },{
+        // Fieldset in Column 2 - Panel inside
+        xtype:'fieldset',
+        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
+        autoHeight:true,
+        columnWidth: 0.5,
+        checkboxToggle: true,
+        collapsed: true, // fieldset initially collapsed
+        layout:'anchor',
+        items :[{
+            xtype: 'panel',
+            anchor: '100%',
+            title: 'Panel inside a fieldset',
+            frame: true,
+            height: 100
+        }]
+    }]
+});
+ * 
    
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype fieldset
+ */
+Ext.form.FieldSet = Ext.extend(Ext.Panel, {
+    /**
+     * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
+     * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
+     * to false).
+     * 
    A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
+     * If true is specified, the default DomHelper config object used to create the element
+     * is:
    
+     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+     * 
       
+     */
+    /**
+     * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
+     * (defaults to '[checkbox id]-checkbox').
+     */
+    /**
+     * @cfg {Boolean} collapsible
+     * true to make the fieldset collapsible and have the expand/collapse toggle button automatically
+     * rendered into the legend element, false to keep the fieldset statically sized with no collapse
+     * button (defaults to false). Another option is to configure {@link #checkboxToggle}.
+     */
+    /**
+     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see 
+     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
+     * This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
+     */
+    baseCls : 'x-fieldset',
+    /**
+     * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
+     */
+    layout : 'form',
+    /**
+     * @cfg {Boolean} animCollapse
+     * true to animate the transition when the panel is collapsed, false to skip the
+     * animation (defaults to false).
+     */
+    animCollapse : false,
+
+    // private
+    onRender : function(ct, position){
+        if(!this.el){
+            this.el = document.createElement('fieldset');
+            this.el.id = this.id;
+            if (this.title || this.header || this.checkboxToggle) {
+                this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
+            }
+        }
+
+        Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
+
+        if(this.checkboxToggle){
+            var o = typeof this.checkboxToggle == 'object' ?
+                    this.checkboxToggle :
+                    {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
+            this.checkbox = this.header.insertFirst(o);
+            this.checkbox.dom.checked = !this.collapsed;
+            this.mon(this.checkbox, 'click', this.onCheckClick, this);
+        }
+    },
+
+    // private
+    onCollapse : function(doAnim, animArg){
+        if(this.checkbox){
+            this.checkbox.dom.checked = false;
+        }
+        Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
+
+    },
+
+    // private
+    onExpand : function(doAnim, animArg){
+        if(this.checkbox){
+            this.checkbox.dom.checked = true;
+        }
+        Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
+    },
+
+    /**
+     * This function is called by the fieldset's checkbox when it is toggled (only applies when
+     * checkboxToggle = true).  This method should never be called externally, but can be
+     * overridden to provide custom behavior when the checkbox is toggled if needed.
+     */
+    onCheckClick : function(){
+        this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
+    }
+
+    /**
+     * @cfg {String/Number} activeItem
+     * @hide
+     */
+    /**
+     * @cfg {Mixed} applyTo
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} bodyBorder
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} border
+     * @hide
+     */
+    /**
+     * @cfg {Boolean/Number} bufferResize
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} collapseFirst
+     * @hide
+     */
+    /**
+     * @cfg {String} defaultType
+     * @hide
+     */
+    /**
+     * @cfg {String} disabledClass
+     * @hide
+     */
+    /**
+     * @cfg {String} elements
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} floating
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} footer
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} frame
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} header
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} headerAsText
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} hideCollapseTool
+     * @hide
+     */
+    /**
+     * @cfg {String} iconCls
+     * @hide
+     */
+    /**
+     * @cfg {Boolean/String} shadow
+     * @hide
+     */
+    /**
+     * @cfg {Number} shadowOffset
+     * @hide
+     */
+    /**
+     * @cfg {Boolean} shim
+     * @hide
+     */
+    /**
+     * @cfg {Object/Array} tbar
+     * @hide
+     */
+    /**
+     * @cfg {Array} tools
+     * @hide
+     */
+    /**
+     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
+     * @hide
+     */
+    /**
+     * @cfg {String} xtype
+     * @hide
+     */
+    /**
+     * @property header
+     * @hide
+     */
+    /**
+     * @property footer
+     * @hide
+     */
+    /**
+     * @method focus
+     * @hide
+     */
+    /**
+     * @method getBottomToolbar
+     * @hide
+     */
+    /**
+     * @method getTopToolbar
+     * @hide
+     */
+    /**
+     * @method setIconClass
+     * @hide
+     */
+    /**
+     * @event activate
+     * @hide
+     */
+    /**
+     * @event beforeclose
+     * @hide
+     */
+    /**
+     * @event bodyresize
+     * @hide
+     */
+    /**
+     * @event close
+     * @hide
+     */
+    /**
+     * @event deactivate
+     * @hide
+     */
+});
+Ext.reg('fieldset', Ext.form.FieldSet);
 /**
  * @class Ext.form.HtmlEditor
  * @extends Ext.form.Field
@@ -61649,7 +61649,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
      */
     createToolbar : function(editor){
         var items = [];
-        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
+        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
 
 
         function btn(id, toggle, handler){
@@ -61668,13 +61668,13 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         }
 
 
-        if(this.enableFont && !Ext.isSafari2){
-            var fontSelectItem = new Ext.Toolbar.Item({
-               autoEl: {
-                    tag:'select',
-                    cls:'x-font-select',
-                    html: this.createFontOptions()
-               }
+        if(this.enableFont && !Ext.isSafari2){
+            var fontSelectItem = new Ext.Toolbar.Item({
+               autoEl: {
+                    tag:'select',
+                    cls:'x-font-select',
+                    html: this.createFontOptions()
+               }
             });
 
             items.push(
@@ -61786,29 +61786,29 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                     })
                 );
             }
-        }
-
-        // build the toolbar
-        var tb = new Ext.Toolbar({
-            renderTo: this.wrap.dom.firstChild,
-            items: items
-        });
-
-        if (fontSelectItem) {
-            this.fontSelect = fontSelectItem.el;
-
-            this.mon(this.fontSelect, 'change', function(){
-                var font = this.fontSelect.dom.value;
-                this.relayCmd('fontname', font);
-                this.deferFocus();
-            }, this);
-        }
-
-
-        // stop form submits
-        this.mon(tb.el, 'click', function(e){
-            e.preventDefault();
-        });
+        }
+
+        // build the toolbar
+        var tb = new Ext.Toolbar({
+            renderTo: this.wrap.dom.firstChild,
+            items: items
+        });
+
+        if (fontSelectItem) {
+            this.fontSelect = fontSelectItem.el;
+
+            this.mon(this.fontSelect, 'change', function(){
+                var font = this.fontSelect.dom.value;
+                this.relayCmd('fontname', font);
+                this.deferFocus();
+            }, this);
+        }
+
+
+        // stop form submits
+        this.mon(tb.el, 'click', function(e){
+            e.preventDefault();
+        });
 
         this.tb = tb;
     },
@@ -61826,22 +61826,22 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
     setReadOnly: function(readOnly){
 
         Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
-        if(this.initialized){
-            this.setDesignMode(!readOnly);
-            var bd = this.getEditorBody();
-            if(bd){
-                bd.style.cursor = this.readOnly ? 'default' : 'text';
-            }
-            this.disableItems(readOnly);
-        }
+        if(this.initialized){
+            this.setDesignMode(!readOnly);
+            var bd = this.getEditorBody();
+            if(bd){
+                bd.style.cursor = this.readOnly ? 'default' : 'text';
+            }
+            this.disableItems(readOnly);
+        }
     },
 
     /**
      * Protected method that will not generally be called directly. It
      * is called when the editor initializes the iframe with HTML contents. Override this method if you
      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
-     *
-     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
+     *
+     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
      */
     getDocMarkup : function(){
         return '';
@@ -61895,7 +61895,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         var iframe = document.createElement('iframe');
         iframe.name = Ext.id();
         iframe.frameBorder = '0';
-        iframe.style.overflow = 'auto';
+        iframe.style.overflow = 'auto';
 
         this.wrap.dom.appendChild(iframe);
         this.iframe = iframe;
@@ -61944,29 +61944,29 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             }
         }
     },
-
-    /* private
-     * set current design mode. To enable, mode can be true or 'on', off otherwise
-     */
-    setDesignMode : function(mode){
-        var doc ;
-        if(doc = this.getDoc()){
-            if(this.readOnly){
-                mode = false;
-            }
-            doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
-        }
-
-    },
-
-    // private
+
+    /* private
+     * set current design mode. To enable, mode can be true or 'on', off otherwise
+     */
+    setDesignMode : function(mode){
+        var doc ;
+        if(doc = this.getDoc()){
+            if(this.readOnly){
+                mode = false;
+            }
+            doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
+        }
+
+    },
+
+    // private
     getDesignMode : function(){
-        var doc = this.getDoc();
-        if(!doc){ return ''; }
-        return String(doc.designMode).toLowerCase();
-
-    },
-
+        var doc = this.getDoc();
+        if(!doc){ return ''; }
+        return String(doc.designMode).toLowerCase();
+
+    },
+
     disableItems: function(disabled){
         if(this.fontSelect){
             this.fontSelect.dom.disabled = disabled;
@@ -62140,13 +62140,13 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                 this.getEditorBody().innerHTML = v;
                 if(Ext.isGecko){
                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
-                    this.setDesignMode(false);  //toggle off first
-
+                    this.setDesignMode(false);  //toggle off first
+
                 }
-                this.setDesignMode(true);
+                this.setDesignMode(true);
                 this.fireEvent('push', this, v);
             }
-
+
         }
     },
 
@@ -62698,186 +62698,186 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
      * @hide
      */
 });
-Ext.reg('htmleditor', Ext.form.HtmlEditor);/**
- * @class Ext.form.TimeField
- * @extends Ext.form.ComboBox
- * Provides a time input field with a time dropdown and automatic time validation.  Example usage:
- * 
    
-new Ext.form.TimeField({
-    minValue: '9:00 AM',
-    maxValue: '6:00 PM',
-    increment: 30
-});
-
    
- * @constructor
- * Create a new TimeField
- * @param {Object} config
- * @xtype timefield
- */
-Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
-    /**
-     * @cfg {Date/String} minValue
-     * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string 
-     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
-     */
-    minValue : undefined,
-    /**
-     * @cfg {Date/String} maxValue
-     * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string 
-     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
-     */
-    maxValue : undefined,
-    /**
-     * @cfg {String} minText
-     * The error text to display when the date in the cell is before minValue (defaults to
-     * 'The time in this field must be equal to or after {0}').
-     */
-    minText : "The time in this field must be equal to or after {0}",
-    /**
-     * @cfg {String} maxText
-     * The error text to display when the time is after maxValue (defaults to
-     * 'The time in this field must be equal to or before {0}').
-     */
-    maxText : "The time in this field must be equal to or before {0}",
-    /**
-     * @cfg {String} invalidText
-     * The error text to display when the time in the field is invalid (defaults to
-     * '{value} is not a valid time').
-     */
-    invalidText : "{0} is not a valid time",
-    /**
-     * @cfg {String} format
-     * The default time format string which can be overriden for localization support.  The format must be
-     * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM').  For 24-hour time
-     * format try 'H:i' instead.
-     */
-    format : "g:i A",
-    /**
-     * @cfg {String} altFormats
-     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
-     * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H').
-     */
-    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H",
-    /**
-     * @cfg {Number} increment
-     * The number of minutes between each time value in the list (defaults to 15).
-     */
-    increment: 15,
-
-    // private override
-    mode: 'local',
-    // private override
-    triggerAction: 'all',
-    // private override
-    typeAhead: false,
-    
-    // private - This is the date to use when generating time values in the absence of either minValue
-    // or maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an 
-    // arbitrary "safe" date that can be any date aside from DST boundary dates.
-    initDate: '1/1/2008',
-
-    // private
-    initComponent : function(){
-        if(Ext.isDefined(this.minValue)){
-            this.setMinValue(this.minValue, true);
-        }
-        if(Ext.isDefined(this.maxValue)){
-            this.setMaxValue(this.maxValue, true);
-        }
-        if(!this.store){
-            this.generateStore(true);
-        }
-        Ext.form.TimeField.superclass.initComponent.call(this);
-    },
-    
-    /**
-     * Replaces any existing {@link #minValue} with the new time and refreshes the store.
-     * @param {Date/String} value The minimum time that can be selected
-     */
-    setMinValue: function(value, /* private */ initial){
-        this.setLimit(value, true, initial);
-        return this;
-    },
-
-    /**
-     * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
-     * @param {Date/String} value The maximum time that can be selected
-     */
-    setMaxValue: function(value, /* private */ initial){
-        this.setLimit(value, false, initial);
-        return this;
-    },
-    
-    // private
-    generateStore: function(initial){
-        var min = this.minValue || new Date(this.initDate).clearTime(),
-            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
-            times = [];
-            
-        while(min <= max){
-            times.push(min.dateFormat(this.format));
-            min = min.add('mi', this.increment);
-        }
-        this.bindStore(times, initial);
-    },
-
-    // private
-    setLimit: function(value, isMin, initial){
-        var d;
-        if(Ext.isString(value)){
-            d = this.parseDate(value);
-        }else if(Ext.isDate(value)){
-            d = value;
-        }
-        if(d){
-            var val = new Date(this.initDate).clearTime();
-            val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0);
-            this[isMin ? 'minValue' : 'maxValue'] = val;
-            if(!initial){
-                this.generateStore();
-            }
-        }
-    },
-    
-    // inherited docs
-    getValue : function(){
-        var v = Ext.form.TimeField.superclass.getValue.call(this);
-        return this.formatDate(this.parseDate(v)) || '';
-    },
-
-    // inherited docs
-    setValue : function(value){
-        return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
-    },
-
-    // private overrides
-    validateValue : Ext.form.DateField.prototype.validateValue,
-    parseDate : Ext.form.DateField.prototype.parseDate,
-    formatDate : Ext.form.DateField.prototype.formatDate,
-
-    // private
-    beforeBlur : function(){
-        var v = this.parseDate(this.getRawValue());
-        if(v){
-            this.setValue(v.dateFormat(this.format));
-        }
-        Ext.form.TimeField.superclass.beforeBlur.call(this);
-    }
-
-    /**
-     * @cfg {Boolean} grow @hide
-     */
-    /**
-     * @cfg {Number} growMin @hide
-     */
-    /**
-     * @cfg {Number} growMax @hide
-     */
-    /**
-     * @hide
-     * @method autoSize
-     */
-});
+Ext.reg('htmleditor', Ext.form.HtmlEditor);/**
+ * @class Ext.form.TimeField
+ * @extends Ext.form.ComboBox
+ * Provides a time input field with a time dropdown and automatic time validation.  Example usage:
+ * 
    
+new Ext.form.TimeField({
+    minValue: '9:00 AM',
+    maxValue: '6:00 PM',
+    increment: 30
+});
+
    
+ * @constructor
+ * Create a new TimeField
+ * @param {Object} config
+ * @xtype timefield
+ */
+Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
+    /**
+     * @cfg {Date/String} minValue
+     * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string 
+     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+     */
+    minValue : undefined,
+    /**
+     * @cfg {Date/String} maxValue
+     * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string 
+     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+     */
+    maxValue : undefined,
+    /**
+     * @cfg {String} minText
+     * The error text to display when the date in the cell is before minValue (defaults to
+     * 'The time in this field must be equal to or after {0}').
+     */
+    minText : "The time in this field must be equal to or after {0}",
+    /**
+     * @cfg {String} maxText
+     * The error text to display when the time is after maxValue (defaults to
+     * 'The time in this field must be equal to or before {0}').
+     */
+    maxText : "The time in this field must be equal to or before {0}",
+    /**
+     * @cfg {String} invalidText
+     * The error text to display when the time in the field is invalid (defaults to
+     * '{value} is not a valid time').
+     */
+    invalidText : "{0} is not a valid time",
+    /**
+     * @cfg {String} format
+     * The default time format string which can be overriden for localization support.  The format must be
+     * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM').  For 24-hour time
+     * format try 'H:i' instead.
+     */
+    format : "g:i A",
+    /**
+     * @cfg {String} altFormats
+     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+     * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H').
+     */
+    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H",
+    /**
+     * @cfg {Number} increment
+     * The number of minutes between each time value in the list (defaults to 15).
+     */
+    increment: 15,
+
+    // private override
+    mode: 'local',
+    // private override
+    triggerAction: 'all',
+    // private override
+    typeAhead: false,
+    
+    // private - This is the date to use when generating time values in the absence of either minValue
+    // or maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an 
+    // arbitrary "safe" date that can be any date aside from DST boundary dates.
+    initDate: '1/1/2008',
+
+    // private
+    initComponent : function(){
+        if(Ext.isDefined(this.minValue)){
+            this.setMinValue(this.minValue, true);
+        }
+        if(Ext.isDefined(this.maxValue)){
+            this.setMaxValue(this.maxValue, true);
+        }
+        if(!this.store){
+            this.generateStore(true);
+        }
+        Ext.form.TimeField.superclass.initComponent.call(this);
+    },
+    
+    /**
+     * Replaces any existing {@link #minValue} with the new time and refreshes the store.
+     * @param {Date/String} value The minimum time that can be selected
+     */
+    setMinValue: function(value, /* private */ initial){
+        this.setLimit(value, true, initial);
+        return this;
+    },
+
+    /**
+     * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
+     * @param {Date/String} value The maximum time that can be selected
+     */
+    setMaxValue: function(value, /* private */ initial){
+        this.setLimit(value, false, initial);
+        return this;
+    },
+    
+    // private
+    generateStore: function(initial){
+        var min = this.minValue || new Date(this.initDate).clearTime(),
+            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
+            times = [];
+            
+        while(min <= max){
+            times.push(min.dateFormat(this.format));
+            min = min.add('mi', this.increment);
+        }
+        this.bindStore(times, initial);
+    },
+
+    // private
+    setLimit: function(value, isMin, initial){
+        var d;
+        if(Ext.isString(value)){
+            d = this.parseDate(value);
+        }else if(Ext.isDate(value)){
+            d = value;
+        }
+        if(d){
+            var val = new Date(this.initDate).clearTime();
+            val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0);
+            this[isMin ? 'minValue' : 'maxValue'] = val;
+            if(!initial){
+                this.generateStore();
+            }
+        }
+    },
+    
+    // inherited docs
+    getValue : function(){
+        var v = Ext.form.TimeField.superclass.getValue.call(this);
+        return this.formatDate(this.parseDate(v)) || '';
+    },
+
+    // inherited docs
+    setValue : function(value){
+        return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
+    },
+
+    // private overrides
+    validateValue : Ext.form.DateField.prototype.validateValue,
+    parseDate : Ext.form.DateField.prototype.parseDate,
+    formatDate : Ext.form.DateField.prototype.formatDate,
+
+    // private
+    beforeBlur : function(){
+        var v = this.parseDate(this.getRawValue());
+        if(v){
+            this.setValue(v.dateFormat(this.format));
+        }
+        Ext.form.TimeField.superclass.beforeBlur.call(this);
+    }
+
+    /**
+     * @cfg {Boolean} grow @hide
+     */
+    /**
+     * @cfg {Number} growMin @hide
+     */
+    /**
+     * @cfg {Number} growMax @hide
+     */
+    /**
+     * @hide
+     * @method autoSize
+     */
+});
 Ext.reg('timefield', Ext.form.TimeField);/**
  * @class Ext.form.Label
  * @extends Ext.BoxComponent
@@ -63808,1123 +63808,1123 @@ Ext.form.VTypes = function(){
          */
         'alphanumMask' : /[a-z0-9_]/i
     };
-}();/**
- * @class Ext.grid.GridPanel
- * @extends Ext.Panel
- * 
    This class represents the primary interface of a component based grid control to represent data
- * in a tabular format of rows and columns. The GridPanel is composed of the following:
    
- * 
      
- * 
    • {@link Ext.data.Store Store} : The Model holding the data records (rows)
- * 
      • 
- * 
    • {@link Ext.grid.ColumnModel Column model} : Column makeup
- * 
      • 
- * 
    • {@link Ext.grid.GridView View} : Encapsulates the user interface 
- * 
      • 
- * 
    • {@link Ext.grid.AbstractSelectionModel selection model} : Selection behavior 
- * 
      • 
- * 
    
- * 
    Example usage:
    
- * 
    
-var grid = new Ext.grid.GridPanel({
-    {@link #store}: new {@link Ext.data.Store}({
-        {@link Ext.data.Store#autoDestroy autoDestroy}: true,
-        {@link Ext.data.Store#reader reader}: reader,
-        {@link Ext.data.Store#data data}: xg.dummyData
-    }),
-    {@link #colModel}: new {@link Ext.grid.ColumnModel}({
-        {@link Ext.grid.ColumnModel#defaults defaults}: {
-            width: 120,
-            sortable: true
-        },
-        {@link Ext.grid.ColumnModel#columns columns}: [
-            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
-            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
-            {header: 'Change', dataIndex: 'change'},
-            {header: '% Change', dataIndex: 'pctChange'},
-            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
-            {
-                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
-                xtype: 'datecolumn', format: 'M d, Y'
-            }
-        ],
-    }),
-    {@link #viewConfig}: {
-        {@link Ext.grid.GridView#forceFit forceFit}: true,
-
-//      Return CSS class to apply to rows depending upon data values
-        {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
-            var c = record.{@link Ext.data.Record#get get}('change');
-            if (c < 0) {
-                return 'price-fall';
-            } else if (c > 0) {
-                return 'price-rise';
-            }
-        }
-    },
-    {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
-    width: 600,
-    height: 300,
-    frame: true,
-    title: 'Framed with Row Selection and Horizontal Scrolling',
-    iconCls: 'icon-grid'
-});
- * 
    
- * 
    Notes:
    
- * 
      
- * 
    • Although this class inherits many configuration options from base classes, some of them
- * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
- * have no effect.
      • 
- * 
    • A grid requires a width in which to scroll its columns, and a height in which to
- * scroll its rows. These dimensions can either be set explicitly through the
- * {@link Ext.BoxComponent#height height} and {@link Ext.BoxComponent#width width}
- * configuration options or implicitly set by using the grid as a child item of a
- * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
- * provide the sizing of its child items (for example the Container of the Grid may specify
- * {@link Ext.Container#layout layout}:'fit').
      • 
- * 
    • To access the data in a Grid, it is necessary to use the data model encapsulated
- * by the {@link #store Store}. See the {@link #cellclick} event for more details.
      • 
- * 
    
- * @constructor
- * @param {Object} config The config object
- * @xtype grid
- */
-Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
-    /**
-     * @cfg {String} autoExpandColumn
-     * 
    The {@link Ext.grid.Column#id id} of a {@link Ext.grid.Column column} in
-     * this grid that should expand to fill unused space. This value specified here can not
-     * be 0.
    
-     * 
    Note: If the Grid's {@link Ext.grid.GridView view} is configured with
-     * {@link Ext.grid.GridView#forceFit forceFit}=true the autoExpandColumn
-     * is ignored. See {@link Ext.grid.Column}.{@link Ext.grid.Column#width width}
-     * for additional details.
    
-     * 
    See {@link #autoExpandMax} and {@link #autoExpandMin} also.
    
-     */
-    autoExpandColumn : false,
-    /**
-     * @cfg {Number} autoExpandMax The maximum width the {@link #autoExpandColumn}
-     * can have (if enabled). Defaults to 1000.
-     */
-    autoExpandMax : 1000,
-    /**
-     * @cfg {Number} autoExpandMin The minimum width the {@link #autoExpandColumn}
-     * can have (if enabled). Defaults to 50.
-     */
-    autoExpandMin : 50,
-    /**
-     * @cfg {Boolean} columnLines true to add css for column separation lines.
-     * Default is false.
-     */
-    columnLines : false,
-    /**
-     * @cfg {Object} cm Shorthand for {@link #colModel}.
-     */
-    /**
-     * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
-     */
-    /**
-     * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
-     * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
-     * {@link #colModel} configuration property.
-     */
-    /**
-     * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
-     */
-    /**
-     * @cfg {String} ddText
-     * Configures the text in the drag proxy.  Defaults to:
-     * 
    
-     * ddText : '{0} selected row{1}'
-     * 
    
-     * {0} is replaced with the number of selected rows.
-     */
-    ddText : '{0} selected row{1}',
-    /**
-     * @cfg {Boolean} deferRowRender 
    Defaults to true to enable deferred row rendering.
    
-     * 
    This allows the GridPanel to be initially rendered empty, with the expensive update of the row
-     * structure deferred so that layouts with GridPanels appear more quickly.
    
-     */
-    deferRowRender : true,
-    /**
-     * @cfg {Boolean} disableSelection 
    true to disable selections in the grid. Defaults to false.
    
-     * 
    Ignored if a {@link #selModel SelectionModel} is specified.
    
-     */
-    /**
-     * @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
-     */
-    /**
-     * @cfg {Boolean} enableColumnHide
-     * Defaults to true to enable {@link Ext.grid.Column#hidden hiding of columns}
-     * with the {@link #enableHdMenu header menu}.
-     */
-    enableColumnHide : true,
-    /**
-     * @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false
-     * to turn off column reordering via drag drop.
-     */
-    enableColumnMove : true,
-    /**
-     * @cfg {Boolean} enableDragDrop 
    Enables dragging of the selected rows of the GridPanel. Defaults to false.
    
-     * 
    Setting this to true causes this GridPanel's {@link #getView GridView} to
-     * create an instance of {@link Ext.grid.GridDragZone}. Note: this is available only after
-     * the Grid has been rendered as the GridView's {@link Ext.grid.GridView#dragZone dragZone}
-     * property.
    
-     * 
    A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
-     * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
-     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
-     * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.
    
-     */
-    enableDragDrop : false,
-    /**
-     * @cfg {Boolean} enableHdMenu Defaults to true to enable the drop down button for menu in the headers.
-     */
-    enableHdMenu : true,
-    /**
-     * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to false.
-     */
-    /**
-     * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
-     * loading. Defaults to false.
-     */
-    loadMask : false,
-    /**
-     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
-     */
-    /**
-     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
-     */
-    minColumnWidth : 25,
-    /**
-     * @cfg {Object} sm Shorthand for {@link #selModel}.
-     */
-    /**
-     * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
-     * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
-     */
-    /**
-     * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
-     */
-    /**
-     * @cfg {Boolean} stripeRows true to stripe the rows. Default is false.
-     * 
    This causes the CSS class x-grid3-row-alt to be added to alternate rows of
-     * the grid. A default CSS rule is provided which sets a background colour, but you can override this
-     * with a rule which either overrides the background-color style using the '!important'
-     * modifier, or which uses a CSS selector of higher specificity.
    
-     */
-    stripeRows : false,
-    /**
-     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true
-     * for GridPanel, but false for EditorGridPanel.
-     */
-    trackMouseOver : true,
-    /**
-     * @cfg {Array} stateEvents
-     * An array of events that, when fired, should trigger this component to save its state.
-     * Defaults to:
    
-     * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
-     * 
    
-     * 
    These can be any types of events supported by this component, including browser or
-     * custom events (e.g., ['click', 'customerchange']).
    
-     * 
    See {@link Ext.Component#stateful} for an explanation of saving and restoring
-     * Component state.
    
-     */
-    stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
-    /**
-     * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
-     * before a call to {@link Ext.Component#render render()}.
-     */
-    view : null,
-    
-    /**
-     * @cfg {Array} bubbleEvents
-     * 
    An array of events that, when fired, should be bubbled to any parent container.
-     * See {@link Ext.util.Observable#enableBubble}. 
-     * Defaults to [].
-     */
-    bubbleEvents: [],
-    
-    /**
-     * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
-     * the config options available for {@link Ext.grid.GridView} can be specified here. This option
-     * is ignored if {@link #view} is specified.
-     */
-
-    // private
-    rendered : false,
-    // private
-    viewReady : false,
-
-    // private
-    initComponent : function(){
-        Ext.grid.GridPanel.superclass.initComponent.call(this);
-
-        if(this.columnLines){
-            this.cls = (this.cls || '') + ' x-grid-with-col-lines';
-        }
-        // override any provided value since it isn't valid
-        // and is causing too many bug reports ;)
-        this.autoScroll = false;
-        this.autoWidth = false;
-
-        if(Ext.isArray(this.columns)){
-            this.colModel = new Ext.grid.ColumnModel(this.columns);
-            delete this.columns;
-        }
-
-        // check and correct shorthanded configs
-        if(this.ds){
-            this.store = this.ds;
-            delete this.ds;
-        }
-        if(this.cm){
-            this.colModel = this.cm;
-            delete this.cm;
-        }
-        if(this.sm){
-            this.selModel = this.sm;
-            delete this.sm;
-        }
-        this.store = Ext.StoreMgr.lookup(this.store);
-
-        this.addEvents(
-            // raw events
-            /**
-             * @event click
-             * The raw click event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'click',
-            /**
-             * @event dblclick
-             * The raw dblclick event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'dblclick',
-            /**
-             * @event contextmenu
-             * The raw contextmenu event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'contextmenu',
-            /**
-             * @event mousedown
-             * The raw mousedown event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'mousedown',
-            /**
-             * @event mouseup
-             * The raw mouseup event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'mouseup',
-            /**
-             * @event mouseover
-             * The raw mouseover event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'mouseover',
-            /**
-             * @event mouseout
-             * The raw mouseout event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'mouseout',
-            /**
-             * @event keypress
-             * The raw keypress event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'keypress',
-            /**
-             * @event keydown
-             * The raw keydown event for the entire grid.
-             * @param {Ext.EventObject} e
-             */
-            'keydown',
-
-            // custom events
-            /**
-             * @event cellmousedown
-             * Fires before a cell is clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'cellmousedown',
-            /**
-             * @event rowmousedown
-             * Fires before a row is clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowmousedown',
-            /**
-             * @event headermousedown
-             * Fires before a header is clicked
-             * @param {Grid} this
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'headermousedown',
-            
-            /**
-             * @event groupmousedown
-             * Fires before a group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
-             * @param {Grid} this
-             * @param {String} groupField
-             * @param {String} groupValue
-             * @param {Ext.EventObject} e
-             */
-            'groupmousedown',
-            
-            /**
-             * @event rowbodymousedown
-             * Fires before the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowbodymousedown',
-            
-            /**
-             * @event containermousedown
-             * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
-             * @param {Grid} this
-             * @param {Ext.EventObject} e
-             */
-            'containermousedown',
-
-            /**
-             * @event cellclick
-             * Fires when a cell is clicked.
-             * The data for the cell is drawn from the {@link Ext.data.Record Record}
-             * for this row. To access the data in the listener function use the
-             * following technique:
-             * 
    
-function(grid, rowIndex, columnIndex, e) {
-    var record = grid.getStore().getAt(rowIndex);  // Get the Record
-    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
-    var data = record.get(fieldName);
-}
-
    
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'cellclick',
-            /**
-             * @event celldblclick
-             * Fires when a cell is double clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'celldblclick',
-            /**
-             * @event rowclick
-             * Fires when a row is clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowclick',
-            /**
-             * @event rowdblclick
-             * Fires when a row is double clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowdblclick',
-            /**
-             * @event headerclick
-             * Fires when a header is clicked
-             * @param {Grid} this
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'headerclick',
-            /**
-             * @event headerdblclick
-             * Fires when a header cell is double clicked
-             * @param {Grid} this
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'headerdblclick',
-            /**
-             * @event groupclick
-             * Fires when group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
-             * @param {Grid} this
-             * @param {String} groupField
-             * @param {String} groupValue
-             * @param {Ext.EventObject} e
-             */
-            'groupclick',
-            /**
-             * @event groupdblclick
-             * Fires when group header is double clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
-             * @param {Grid} this
-             * @param {String} groupField
-             * @param {String} groupValue
-             * @param {Ext.EventObject} e
-             */
-            'groupdblclick',
-            /**
-             * @event containerclick
-             * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
-             * @param {Grid} this
-             * @param {Ext.EventObject} e
-             */
-            'containerclick',
-            /**
-             * @event containerdblclick
-             * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
-             * @param {Grid} this
-             * @param {Ext.EventObject} e
-             */
-            'containerdblclick',
-            
-            /**
-             * @event rowbodyclick
-             * Fires when the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowbodyclick',
-            /**
-             * @event rowbodydblclick
-             * Fires when the row body is double clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowbodydblclick',
-            
-            /**
-             * @event rowcontextmenu
-             * Fires when a row is right clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowcontextmenu',
-            /**
-             * @event cellcontextmenu
-             * Fires when a cell is right clicked
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Number} cellIndex
-             * @param {Ext.EventObject} e
-             */
-            'cellcontextmenu',
-            /**
-             * @event headercontextmenu
-             * Fires when a header is right clicked
-             * @param {Grid} this
-             * @param {Number} columnIndex
-             * @param {Ext.EventObject} e
-             */
-            'headercontextmenu',
-            /**
-             * @event groupcontextmenu
-             * Fires when group header is right clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
-             * @param {Grid} this
-             * @param {String} groupField
-             * @param {String} groupValue
-             * @param {Ext.EventObject} e
-             */
-            'groupcontextmenu',
-            /**
-             * @event containercontextmenu
-             * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
-             * @param {Grid} this
-             * @param {Ext.EventObject} e
-             */
-            'containercontextmenu',
-            /**
-             * @event rowbodycontextmenu
-             * Fires when the row body is right clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
-             * @param {Grid} this
-             * @param {Number} rowIndex
-             * @param {Ext.EventObject} e
-             */
-            'rowbodycontextmenu',
-            /**
-             * @event bodyscroll
-             * Fires when the body element is scrolled
-             * @param {Number} scrollLeft
-             * @param {Number} scrollTop
-             */
-            'bodyscroll',
-            /**
-             * @event columnresize
-             * Fires when the user resizes a column
-             * @param {Number} columnIndex
-             * @param {Number} newSize
-             */
-            'columnresize',
-            /**
-             * @event columnmove
-             * Fires when the user moves a column
-             * @param {Number} oldIndex
-             * @param {Number} newIndex
-             */
-            'columnmove',
-            /**
-             * @event sortchange
-             * Fires when the grid's store sort changes
-             * @param {Grid} this
-             * @param {Object} sortInfo An object with the keys field and direction
-             */
-            'sortchange',
-            /**
-             * @event groupchange
-             * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
-             * @param {Grid} this
-             * @param {String} groupField A string with the grouping field, null if the store is not grouped.
-             */
-            'groupchange',
-            /**
-             * @event reconfigure
-             * Fires when the grid is reconfigured with a new store and/or column model.
-             * @param {Grid} this
-             * @param {Ext.data.Store} store The new store
-             * @param {Ext.grid.ColumnModel} colModel The new column model
-             */
-            'reconfigure',
-            /**
-             * @event viewready
-             * Fires when the grid view is available (use this for selecting a default row). 
-             * @param {Grid} this
-             */
-            'viewready'
-        );
-    },
-
-    // private
-    onRender : function(ct, position){
-        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
-
-        var c = this.getGridEl();
-
-        this.el.addClass('x-grid-panel');
-
-        this.mon(c, {
-            scope: this,
-            mousedown: this.onMouseDown,
-            click: this.onClick,
-            dblclick: this.onDblClick,
-            contextmenu: this.onContextMenu
-        });
-
-        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
-
-        var view = this.getView();
-        view.init(this);
-        view.render();
-        this.getSelectionModel().init(this);
-    },
-
-    // private
-    initEvents : function(){
-        Ext.grid.GridPanel.superclass.initEvents.call(this);
-
-        if(this.loadMask){
-            this.loadMask = new Ext.LoadMask(this.bwrap,
-                    Ext.apply({store:this.store}, this.loadMask));
-        }
-    },
-
-    initStateEvents : function(){
-        Ext.grid.GridPanel.superclass.initStateEvents.call(this);
-        this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
-    },
-
-    applyState : function(state){
-        var cm = this.colModel,
-            cs = state.columns,
-            store = this.store,
-            s,
-            c,
-            oldIndex;
-            
-        if(cs){
-            for(var i = 0, len = cs.length; i < len; i++){
-                s = cs[i];
-                c = cm.getColumnById(s.id);
-                if(c){
-                    c.hidden = s.hidden;
-                    c.width = s.width;
-                    oldIndex = cm.getIndexById(s.id);
-                    if(oldIndex != i){
-                        cm.moveColumn(oldIndex, i);
-                    }
-                }
-            }
-        }
-        if(store){
-            s = state.sort;
-            if(s){
-                store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
-            }
-            s = state.group;
-            if(store.groupBy){
-                if(s){
-                    store.groupBy(s);
-                }else{
-                    store.clearGrouping();
-                }
-            }
-
-        }
-        var o = Ext.apply({}, state);
-        delete o.columns;
-        delete o.sort;
-        Ext.grid.GridPanel.superclass.applyState.call(this, o);
-    },
-
-    getState : function(){
-        var o = {columns: []},
-            store = this.store,
-            ss,
-            gs;
-            
-        for(var i = 0, c; (c = this.colModel.config[i]); i++){
-            o.columns[i] = {
-                id: c.id,
-                width: c.width
-            };
-            if(c.hidden){
-                o.columns[i].hidden = true;
-            }
-        }
-        if(store){
-            ss = store.getSortState();
-            if(ss){
-                o.sort = ss;
-            }
-            if(store.getGroupState){
-                gs = store.getGroupState();
-                if(gs){
-                    o.group = gs;
-                }
-            }
-        }
-        return o;
-    },
-
-    // private
-    afterRender : function(){
-        Ext.grid.GridPanel.superclass.afterRender.call(this);
-        var v = this.view;
-        this.on('bodyresize', v.layout, v);
-        v.layout();
-        if(this.deferRowRender){
-            v.afterRender.defer(10, this.view);
-        }else{
-            v.afterRender();
-        }
-        this.viewReady = true;
-    },
-
-    /**
-     * 
    Reconfigures the grid to use a different Store and Column Model
-     * and fires the 'reconfigure' event. The View will be bound to the new
-     * objects and refreshed.
    
-     * 
    Be aware that upon reconfiguring a GridPanel, certain existing settings may become
-     * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
-     * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
-     * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
-     * with the new data.
    
-     * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
-     * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
-     */
-    reconfigure : function(store, colModel){
-        var rendered = this.rendered;
-        if(rendered){
-            if(this.loadMask){
-                this.loadMask.destroy();
-                this.loadMask = new Ext.LoadMask(this.bwrap,
-                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));
-            }
-        }
-        if(this.view){
-            this.view.initData(store, colModel);
-        }
-        this.store = store;
-        this.colModel = colModel;
-        if(rendered){
-            this.view.refresh(true);
-        }
-        this.fireEvent('reconfigure', this, store, colModel);
-    },
-
-    // private
-    onDestroy : function(){
-        if(this.rendered){
-            Ext.destroy(this.view, this.loadMask);
-        }else if(this.store && this.store.autoDestroy){
-            this.store.destroy();
-        }
-        Ext.destroy(this.colModel, this.selModel);
-        this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
-        Ext.grid.GridPanel.superclass.onDestroy.call(this);
-    },
-
-    // private
-    processEvent : function(name, e){
-        this.fireEvent(name, e);
-        var t = e.getTarget(),
-            v = this.view,
-            header = v.findHeaderIndex(t);
-            
-        if(header !== false){
-            this.fireEvent('header' + name, this, header, e);
-        }else{
-            var row = v.findRowIndex(t),
-                cell,
-                body;
-            if(row !== false){
-                this.fireEvent('row' + name, this, row, e);
-                cell = v.findCellIndex(t);
-                body = v.findRowBody(t);
-                if(cell !== false){
-                    this.fireEvent('cell' + name, this, row, cell, e);
-                }
-                if(body){
-                    this.fireEvent('rowbody' + name, this, row, e);
-                }
-            }else{
-                this.fireEvent('container' + name, this, e);
-            }
-        }
-        this.view.processEvent(name, e);
-    },
-
-    // private
-    onClick : function(e){
-        this.processEvent('click', e);
-    },
-
-    // private
-    onMouseDown : function(e){
-        this.processEvent('mousedown', e);
-    },
-
-    // private
-    onContextMenu : function(e, t){
-        this.processEvent('contextmenu', e);
-    },
-
-    // private
-    onDblClick : function(e){
-        this.processEvent('dblclick', e);
-    },
-
-    // private
-    walkCells : function(row, col, step, fn, scope){
-        var cm = this.colModel, 
-            clen = cm.getColumnCount(),
-            ds = this.store, 
-            rlen = ds.getCount(), 
-            first = true;
-        if(step < 0){
-            if(col < 0){
-                row--;
-                first = false;
-            }
-            while(row >= 0){
-                if(!first){
-                    col = clen-1;
-                }
-                first = false;
-                while(col >= 0){
-                    if(fn.call(scope || this, row, col, cm) === true){
-                        return [row, col];
-                    }
-                    col--;
-                }
-                row--;
-            }
-        } else {
-            if(col >= clen){
-                row++;
-                first = false;
-            }
-            while(row < rlen){
-                if(!first){
-                    col = 0;
-                }
-                first = false;
-                while(col < clen){
-                    if(fn.call(scope || this, row, col, cm) === true){
-                        return [row, col];
-                    }
-                    col++;
-                }
-                row++;
-            }
-        }
-        return null;
-    },
-
-    // private
-    onResize : function(){
-        Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
-        if(this.viewReady){
-            this.view.layout();
-        }
-    },
-
-    /**
-     * Returns the grid's underlying element.
-     * @return {Element} The element
-     */
-    getGridEl : function(){
-        return this.body;
-    },
-
-    // private for compatibility, overridden by editor grid
-    stopEditing : Ext.emptyFn,
-
-    /**
-     * Returns the grid's selection model configured by the {@link #selModel}
-     * configuration option. If no selection model was configured, this will create
-     * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
-     * @return {SelectionModel}
-     */
-    getSelectionModel : function(){
-        if(!this.selModel){
-            this.selModel = new Ext.grid.RowSelectionModel(
-                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);
-        }
-        return this.selModel;
-    },
-
-    /**
-     * Returns the grid's data store.
-     * @return {Ext.data.Store} The store
-     */
-    getStore : function(){
-        return this.store;
-    },
-
-    /**
-     * Returns the grid's ColumnModel.
-     * @return {Ext.grid.ColumnModel} The column model
-     */
-    getColumnModel : function(){
-        return this.colModel;
-    },
-
-    /**
-     * Returns the grid's GridView object.
-     * @return {Ext.grid.GridView} The grid view
-     */
-    getView : function(){
-        if(!this.view){
-            this.view = new Ext.grid.GridView(this.viewConfig);
-        }
-        return this.view;
-    },
-    /**
-     * Called to get grid's drag proxy text, by default returns this.ddText.
-     * @return {String} The text
-     */
-    getDragDropText : function(){
-        var count = this.selModel.getCount();
-        return String.format(this.ddText, count, count == 1 ? '' : 's');
-    }
-
-    /** 
-     * @cfg {String/Number} activeItem 
-     * @hide 
-     */
-    /** 
-     * @cfg {Boolean} autoDestroy 
-     * @hide 
-     */
-    /** 
-     * @cfg {Object/String/Function} autoLoad 
-     * @hide 
-     */
-    /** 
-     * @cfg {Boolean} autoWidth 
-     * @hide 
-     */
-    /** 
-     * @cfg {Boolean/Number} bufferResize 
-     * @hide 
-     */
-    /** 
-     * @cfg {String} defaultType 
-     * @hide 
-     */
-    /** 
-     * @cfg {Object} defaults 
-     * @hide 
-     */
-    /** 
-     * @cfg {Boolean} hideBorders 
-     * @hide 
-     */
-    /** 
-     * @cfg {Mixed} items 
-     * @hide 
-     */
-    /** 
-     * @cfg {String} layout 
-     * @hide 
-     */
-    /** 
-     * @cfg {Object} layoutConfig 
-     * @hide 
-     */
-    /** 
-     * @cfg {Boolean} monitorResize 
-     * @hide 
-     */
-    /** 
-     * @property items 
-     * @hide 
-     */
-    /** 
-     * @method add 
-     * @hide 
-     */
-    /** 
-     * @method cascade 
-     * @hide 
-     */
-    /** 
-     * @method doLayout 
-     * @hide 
-     */
-    /** 
-     * @method find 
-     * @hide 
-     */
-    /** 
-     * @method findBy 
-     * @hide 
-     */
-    /** 
-     * @method findById 
-     * @hide 
-     */
-    /** 
-     * @method findByType 
-     * @hide 
-     */
-    /** 
-     * @method getComponent 
-     * @hide 
-     */
-    /** 
-     * @method getLayout 
-     * @hide 
-     */
-    /** 
-     * @method getUpdater 
-     * @hide 
-     */
-    /** 
-     * @method insert 
-     * @hide 
-     */
-    /** 
-     * @method load 
-     * @hide 
-     */
-    /** 
-     * @method remove 
-     * @hide 
-     */
-    /** 
-     * @event add 
-     * @hide 
-     */
-    /** 
-     * @event afterlayout 
-     * @hide 
-     */
-    /** 
-     * @event beforeadd 
-     * @hide 
-     */
-    /** 
-     * @event beforeremove 
-     * @hide 
-     */
-    /** 
-     * @event remove 
-     * @hide 
-     */
-
-
-
-    /**
-     * @cfg {String} allowDomMove  @hide
-     */
-    /**
-     * @cfg {String} autoEl @hide
-     */
-    /**
-     * @cfg {String} applyTo  @hide
-     */
-    /**
-     * @cfg {String} autoScroll  @hide
-     */
-    /**
-     * @cfg {String} bodyBorder  @hide
-     */
-    /**
-     * @cfg {String} bodyStyle  @hide
-     */
-    /**
-     * @cfg {String} contentEl  @hide
-     */
-    /**
-     * @cfg {String} disabledClass  @hide
-     */
-    /**
-     * @cfg {String} elements  @hide
-     */
-    /**
-     * @cfg {String} html  @hide
-     */
-    /**
-     * @cfg {Boolean} preventBodyReset
-     * @hide
-     */
-    /**
-     * @property disabled
-     * @hide
-     */
-    /**
-     * @method applyToMarkup
-     * @hide
-     */
-    /**
-     * @method enable
-     * @hide
-     */
-    /**
-     * @method disable
-     * @hide
-     */
-    /**
-     * @method setDisabled
-     * @hide
-     */
-});
+}();/**
+ * @class Ext.grid.GridPanel
+ * @extends Ext.Panel
+ * 
    This class represents the primary interface of a component based grid control to represent data
+ * in a tabular format of rows and columns. The GridPanel is composed of the following:
    
+ * 
      
+ * 
    • {@link Ext.data.Store Store} : The Model holding the data records (rows)
+ * 
      • 
+ * 
    • {@link Ext.grid.ColumnModel Column model} : Column makeup
+ * 
      • 
+ * 
    • {@link Ext.grid.GridView View} : Encapsulates the user interface 
+ * 
      • 
+ * 
    • {@link Ext.grid.AbstractSelectionModel selection model} : Selection behavior 
+ * 
      • 
+ * 
    
+ * 
    Example usage:
    
+ * 
    
+var grid = new Ext.grid.GridPanel({
+    {@link #store}: new {@link Ext.data.Store}({
+        {@link Ext.data.Store#autoDestroy autoDestroy}: true,
+        {@link Ext.data.Store#reader reader}: reader,
+        {@link Ext.data.Store#data data}: xg.dummyData
+    }),
+    {@link #colModel}: new {@link Ext.grid.ColumnModel}({
+        {@link Ext.grid.ColumnModel#defaults defaults}: {
+            width: 120,
+            sortable: true
+        },
+        {@link Ext.grid.ColumnModel#columns columns}: [
+            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+            {header: 'Change', dataIndex: 'change'},
+            {header: '% Change', dataIndex: 'pctChange'},
+            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
+            {
+                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
+                xtype: 'datecolumn', format: 'M d, Y'
+            }
+        ],
+    }),
+    {@link #viewConfig}: {
+        {@link Ext.grid.GridView#forceFit forceFit}: true,
+
+//      Return CSS class to apply to rows depending upon data values
+        {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
+            var c = record.{@link Ext.data.Record#get get}('change');
+            if (c < 0) {
+                return 'price-fall';
+            } else if (c > 0) {
+                return 'price-rise';
+            }
+        }
+    },
+    {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
+    width: 600,
+    height: 300,
+    frame: true,
+    title: 'Framed with Row Selection and Horizontal Scrolling',
+    iconCls: 'icon-grid'
+});
+ * 
    
+ * 
    Notes:
    
+ * 
      
+ * 
    • Although this class inherits many configuration options from base classes, some of them
+ * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
+ * have no effect.
      • 
+ * 
    • A grid requires a width in which to scroll its columns, and a height in which to
+ * scroll its rows. These dimensions can either be set explicitly through the
+ * {@link Ext.BoxComponent#height height} and {@link Ext.BoxComponent#width width}
+ * configuration options or implicitly set by using the grid as a child item of a
+ * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
+ * provide the sizing of its child items (for example the Container of the Grid may specify
+ * {@link Ext.Container#layout layout}:'fit').
      • 
+ * 
    • To access the data in a Grid, it is necessary to use the data model encapsulated
+ * by the {@link #store Store}. See the {@link #cellclick} event for more details.
      • 
+ * 
    
+ * @constructor
+ * @param {Object} config The config object
+ * @xtype grid
+ */
+Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
+    /**
+     * @cfg {String} autoExpandColumn
+     * 
    The {@link Ext.grid.Column#id id} of a {@link Ext.grid.Column column} in
+     * this grid that should expand to fill unused space. This value specified here can not
+     * be 0.
    
+     * 
    Note: If the Grid's {@link Ext.grid.GridView view} is configured with
+     * {@link Ext.grid.GridView#forceFit forceFit}=true the autoExpandColumn
+     * is ignored. See {@link Ext.grid.Column}.{@link Ext.grid.Column#width width}
+     * for additional details.
    
+     * 
    See {@link #autoExpandMax} and {@link #autoExpandMin} also.
    
+     */
+    autoExpandColumn : false,
+    /**
+     * @cfg {Number} autoExpandMax The maximum width the {@link #autoExpandColumn}
+     * can have (if enabled). Defaults to 1000.
+     */
+    autoExpandMax : 1000,
+    /**
+     * @cfg {Number} autoExpandMin The minimum width the {@link #autoExpandColumn}
+     * can have (if enabled). Defaults to 50.
+     */
+    autoExpandMin : 50,
+    /**
+     * @cfg {Boolean} columnLines true to add css for column separation lines.
+     * Default is false.
+     */
+    columnLines : false,
+    /**
+     * @cfg {Object} cm Shorthand for {@link #colModel}.
+     */
+    /**
+     * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
+     */
+    /**
+     * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
+     * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
+     * {@link #colModel} configuration property.
+     */
+    /**
+     * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
+     */
+    /**
+     * @cfg {String} ddText
+     * Configures the text in the drag proxy.  Defaults to:
+     * 
    
+     * ddText : '{0} selected row{1}'
+     * 
    
+     * {0} is replaced with the number of selected rows.
+     */
+    ddText : '{0} selected row{1}',
+    /**
+     * @cfg {Boolean} deferRowRender 
    Defaults to true to enable deferred row rendering.
    
+     * 
    This allows the GridPanel to be initially rendered empty, with the expensive update of the row
+     * structure deferred so that layouts with GridPanels appear more quickly.
    
+     */
+    deferRowRender : true,
+    /**
+     * @cfg {Boolean} disableSelection 
    true to disable selections in the grid. Defaults to false.
    
+     * 
    Ignored if a {@link #selModel SelectionModel} is specified.
    
+     */
+    /**
+     * @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
+     */
+    /**
+     * @cfg {Boolean} enableColumnHide
+     * Defaults to true to enable {@link Ext.grid.Column#hidden hiding of columns}
+     * with the {@link #enableHdMenu header menu}.
+     */
+    enableColumnHide : true,
+    /**
+     * @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false
+     * to turn off column reordering via drag drop.
+     */
+    enableColumnMove : true,
+    /**
+     * @cfg {Boolean} enableDragDrop 
    Enables dragging of the selected rows of the GridPanel. Defaults to false.
    
+     * 
    Setting this to true causes this GridPanel's {@link #getView GridView} to
+     * create an instance of {@link Ext.grid.GridDragZone}. Note: this is available only after
+     * the Grid has been rendered as the GridView's {@link Ext.grid.GridView#dragZone dragZone}
+     * property.
    
+     * 
    A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
+     * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
+     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
+     * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.
    
+     */
+    enableDragDrop : false,
+    /**
+     * @cfg {Boolean} enableHdMenu Defaults to true to enable the drop down button for menu in the headers.
+     */
+    enableHdMenu : true,
+    /**
+     * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to false.
+     */
+    /**
+     * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
+     * loading. Defaults to false.
+     */
+    loadMask : false,
+    /**
+     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+     */
+    /**
+     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
+     */
+    minColumnWidth : 25,
+    /**
+     * @cfg {Object} sm Shorthand for {@link #selModel}.
+     */
+    /**
+     * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
+     * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
+     */
+    /**
+     * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
+     */
+    /**
+     * @cfg {Boolean} stripeRows true to stripe the rows. Default is false.
+     * 
    This causes the CSS class x-grid3-row-alt to be added to alternate rows of
+     * the grid. A default CSS rule is provided which sets a background colour, but you can override this
+     * with a rule which either overrides the background-color style using the '!important'
+     * modifier, or which uses a CSS selector of higher specificity.
    
+     */
+    stripeRows : false,
+    /**
+     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true
+     * for GridPanel, but false for EditorGridPanel.
+     */
+    trackMouseOver : true,
+    /**
+     * @cfg {Array} stateEvents
+     * An array of events that, when fired, should trigger this component to save its state.
+     * Defaults to:
    
+     * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
+     * 
    
+     * 
    These can be any types of events supported by this component, including browser or
+     * custom events (e.g., ['click', 'customerchange']).
    
+     * 
    See {@link Ext.Component#stateful} for an explanation of saving and restoring
+     * Component state.
    
+     */
+    stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
+    /**
+     * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
+     * before a call to {@link Ext.Component#render render()}.
+     */
+    view : null,
+    
+    /**
+     * @cfg {Array} bubbleEvents
+     * 
    An array of events that, when fired, should be bubbled to any parent container.
+     * See {@link Ext.util.Observable#enableBubble}. 
+     * Defaults to [].
+     */
+    bubbleEvents: [],
+    
+    /**
+     * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
+     * the config options available for {@link Ext.grid.GridView} can be specified here. This option
+     * is ignored if {@link #view} is specified.
+     */
+
+    // private
+    rendered : false,
+    // private
+    viewReady : false,
+
+    // private
+    initComponent : function(){
+        Ext.grid.GridPanel.superclass.initComponent.call(this);
+
+        if(this.columnLines){
+            this.cls = (this.cls || '') + ' x-grid-with-col-lines';
+        }
+        // override any provided value since it isn't valid
+        // and is causing too many bug reports ;)
+        this.autoScroll = false;
+        this.autoWidth = false;
+
+        if(Ext.isArray(this.columns)){
+            this.colModel = new Ext.grid.ColumnModel(this.columns);
+            delete this.columns;
+        }
+
+        // check and correct shorthanded configs
+        if(this.ds){
+            this.store = this.ds;
+            delete this.ds;
+        }
+        if(this.cm){
+            this.colModel = this.cm;
+            delete this.cm;
+        }
+        if(this.sm){
+            this.selModel = this.sm;
+            delete this.sm;
+        }
+        this.store = Ext.StoreMgr.lookup(this.store);
+
+        this.addEvents(
+            // raw events
+            /**
+             * @event click
+             * The raw click event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'click',
+            /**
+             * @event dblclick
+             * The raw dblclick event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'dblclick',
+            /**
+             * @event contextmenu
+             * The raw contextmenu event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'contextmenu',
+            /**
+             * @event mousedown
+             * The raw mousedown event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mousedown',
+            /**
+             * @event mouseup
+             * The raw mouseup event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseup',
+            /**
+             * @event mouseover
+             * The raw mouseover event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseover',
+            /**
+             * @event mouseout
+             * The raw mouseout event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseout',
+            /**
+             * @event keypress
+             * The raw keypress event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'keypress',
+            /**
+             * @event keydown
+             * The raw keydown event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'keydown',
+
+            // custom events
+            /**
+             * @event cellmousedown
+             * Fires before a cell is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellmousedown',
+            /**
+             * @event rowmousedown
+             * Fires before a row is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowmousedown',
+            /**
+             * @event headermousedown
+             * Fires before a header is clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headermousedown',
+            
+            /**
+             * @event groupmousedown
+             * Fires before a group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupmousedown',
+            
+            /**
+             * @event rowbodymousedown
+             * Fires before the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodymousedown',
+            
+            /**
+             * @event containermousedown
+             * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containermousedown',
+
+            /**
+             * @event cellclick
+             * Fires when a cell is clicked.
+             * The data for the cell is drawn from the {@link Ext.data.Record Record}
+             * for this row. To access the data in the listener function use the
+             * following technique:
+             * 
    
+function(grid, rowIndex, columnIndex, e) {
+    var record = grid.getStore().getAt(rowIndex);  // Get the Record
+    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
+    var data = record.get(fieldName);
+}
+
    
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellclick',
+            /**
+             * @event celldblclick
+             * Fires when a cell is double clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'celldblclick',
+            /**
+             * @event rowclick
+             * Fires when a row is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowclick',
+            /**
+             * @event rowdblclick
+             * Fires when a row is double clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowdblclick',
+            /**
+             * @event headerclick
+             * Fires when a header is clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headerclick',
+            /**
+             * @event headerdblclick
+             * Fires when a header cell is double clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headerdblclick',
+            /**
+             * @event groupclick
+             * Fires when group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupclick',
+            /**
+             * @event groupdblclick
+             * Fires when group header is double clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupdblclick',
+            /**
+             * @event containerclick
+             * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containerclick',
+            /**
+             * @event containerdblclick
+             * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containerdblclick',
+            
+            /**
+             * @event rowbodyclick
+             * Fires when the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodyclick',
+            /**
+             * @event rowbodydblclick
+             * Fires when the row body is double clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodydblclick',
+            
+            /**
+             * @event rowcontextmenu
+             * Fires when a row is right clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowcontextmenu',
+            /**
+             * @event cellcontextmenu
+             * Fires when a cell is right clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} cellIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellcontextmenu',
+            /**
+             * @event headercontextmenu
+             * Fires when a header is right clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headercontextmenu',
+            /**
+             * @event groupcontextmenu
+             * Fires when group header is right clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupcontextmenu',
+            /**
+             * @event containercontextmenu
+             * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containercontextmenu',
+            /**
+             * @event rowbodycontextmenu
+             * Fires when the row body is right clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodycontextmenu',
+            /**
+             * @event bodyscroll
+             * Fires when the body element is scrolled
+             * @param {Number} scrollLeft
+             * @param {Number} scrollTop
+             */
+            'bodyscroll',
+            /**
+             * @event columnresize
+             * Fires when the user resizes a column
+             * @param {Number} columnIndex
+             * @param {Number} newSize
+             */
+            'columnresize',
+            /**
+             * @event columnmove
+             * Fires when the user moves a column
+             * @param {Number} oldIndex
+             * @param {Number} newIndex
+             */
+            'columnmove',
+            /**
+             * @event sortchange
+             * Fires when the grid's store sort changes
+             * @param {Grid} this
+             * @param {Object} sortInfo An object with the keys field and direction
+             */
+            'sortchange',
+            /**
+             * @event groupchange
+             * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
+             * @param {Grid} this
+             * @param {String} groupField A string with the grouping field, null if the store is not grouped.
+             */
+            'groupchange',
+            /**
+             * @event reconfigure
+             * Fires when the grid is reconfigured with a new store and/or column model.
+             * @param {Grid} this
+             * @param {Ext.data.Store} store The new store
+             * @param {Ext.grid.ColumnModel} colModel The new column model
+             */
+            'reconfigure',
+            /**
+             * @event viewready
+             * Fires when the grid view is available (use this for selecting a default row). 
+             * @param {Grid} this
+             */
+            'viewready'
+        );
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
+
+        var c = this.getGridEl();
+
+        this.el.addClass('x-grid-panel');
+
+        this.mon(c, {
+            scope: this,
+            mousedown: this.onMouseDown,
+            click: this.onClick,
+            dblclick: this.onDblClick,
+            contextmenu: this.onContextMenu
+        });
+
+        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
+
+        var view = this.getView();
+        view.init(this);
+        view.render();
+        this.getSelectionModel().init(this);
+    },
+
+    // private
+    initEvents : function(){
+        Ext.grid.GridPanel.superclass.initEvents.call(this);
+
+        if(this.loadMask){
+            this.loadMask = new Ext.LoadMask(this.bwrap,
+                    Ext.apply({store:this.store}, this.loadMask));
+        }
+    },
+
+    initStateEvents : function(){
+        Ext.grid.GridPanel.superclass.initStateEvents.call(this);
+        this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
+    },
+
+    applyState : function(state){
+        var cm = this.colModel,
+            cs = state.columns,
+            store = this.store,
+            s,
+            c,
+            oldIndex;
+            
+        if(cs){
+            for(var i = 0, len = cs.length; i < len; i++){
+                s = cs[i];
+                c = cm.getColumnById(s.id);
+                if(c){
+                    c.hidden = s.hidden;
+                    c.width = s.width;
+                    oldIndex = cm.getIndexById(s.id);
+                    if(oldIndex != i){
+                        cm.moveColumn(oldIndex, i);
+                    }
+                }
+            }
+        }
+        if(store){
+            s = state.sort;
+            if(s){
+                store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
+            }
+            s = state.group;
+            if(store.groupBy){
+                if(s){
+                    store.groupBy(s);
+                }else{
+                    store.clearGrouping();
+                }
+            }
+
+        }
+        var o = Ext.apply({}, state);
+        delete o.columns;
+        delete o.sort;
+        Ext.grid.GridPanel.superclass.applyState.call(this, o);
+    },
+
+    getState : function(){
+        var o = {columns: []},
+            store = this.store,
+            ss,
+            gs;
+            
+        for(var i = 0, c; (c = this.colModel.config[i]); i++){
+            o.columns[i] = {
+                id: c.id,
+                width: c.width
+            };
+            if(c.hidden){
+                o.columns[i].hidden = true;
+            }
+        }
+        if(store){
+            ss = store.getSortState();
+            if(ss){
+                o.sort = ss;
+            }
+            if(store.getGroupState){
+                gs = store.getGroupState();
+                if(gs){
+                    o.group = gs;
+                }
+            }
+        }
+        return o;
+    },
+
+    // private
+    afterRender : function(){
+        Ext.grid.GridPanel.superclass.afterRender.call(this);
+        var v = this.view;
+        this.on('bodyresize', v.layout, v);
+        v.layout();
+        if(this.deferRowRender){
+            v.afterRender.defer(10, this.view);
+        }else{
+            v.afterRender();
+        }
+        this.viewReady = true;
+    },
+
+    /**
+     * 
    Reconfigures the grid to use a different Store and Column Model
+     * and fires the 'reconfigure' event. The View will be bound to the new
+     * objects and refreshed.
    
+     * 
    Be aware that upon reconfiguring a GridPanel, certain existing settings may become
+     * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
+     * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
+     * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
+     * with the new data.
    
+     * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
+     * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
+     */
+    reconfigure : function(store, colModel){
+        var rendered = this.rendered;
+        if(rendered){
+            if(this.loadMask){
+                this.loadMask.destroy();
+                this.loadMask = new Ext.LoadMask(this.bwrap,
+                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));
+            }
+        }
+        if(this.view){
+            this.view.initData(store, colModel);
+        }
+        this.store = store;
+        this.colModel = colModel;
+        if(rendered){
+            this.view.refresh(true);
+        }
+        this.fireEvent('reconfigure', this, store, colModel);
+    },
+
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            Ext.destroy(this.view, this.loadMask);
+        }else if(this.store && this.store.autoDestroy){
+            this.store.destroy();
+        }
+        Ext.destroy(this.colModel, this.selModel);
+        this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
+        Ext.grid.GridPanel.superclass.onDestroy.call(this);
+    },
+
+    // private
+    processEvent : function(name, e){
+        this.fireEvent(name, e);
+        var t = e.getTarget(),
+            v = this.view,
+            header = v.findHeaderIndex(t);
+            
+        if(header !== false){
+            this.fireEvent('header' + name, this, header, e);
+        }else{
+            var row = v.findRowIndex(t),
+                cell,
+                body;
+            if(row !== false){
+                this.fireEvent('row' + name, this, row, e);
+                cell = v.findCellIndex(t);
+                body = v.findRowBody(t);
+                if(cell !== false){
+                    this.fireEvent('cell' + name, this, row, cell, e);
+                }
+                if(body){
+                    this.fireEvent('rowbody' + name, this, row, e);
+                }
+            }else{
+                this.fireEvent('container' + name, this, e);
+            }
+        }
+        this.view.processEvent(name, e);
+    },
+
+    // private
+    onClick : function(e){
+        this.processEvent('click', e);
+    },
+
+    // private
+    onMouseDown : function(e){
+        this.processEvent('mousedown', e);
+    },
+
+    // private
+    onContextMenu : function(e, t){
+        this.processEvent('contextmenu', e);
+    },
+
+    // private
+    onDblClick : function(e){
+        this.processEvent('dblclick', e);
+    },
+
+    // private
+    walkCells : function(row, col, step, fn, scope){
+        var cm = this.colModel, 
+            clen = cm.getColumnCount(),
+            ds = this.store, 
+            rlen = ds.getCount(), 
+            first = true;
+        if(step < 0){
+            if(col < 0){
+                row--;
+                first = false;
+            }
+            while(row >= 0){
+                if(!first){
+                    col = clen-1;
+                }
+                first = false;
+                while(col >= 0){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col--;
+                }
+                row--;
+            }
+        } else {
+            if(col >= clen){
+                row++;
+                first = false;
+            }
+            while(row < rlen){
+                if(!first){
+                    col = 0;
+                }
+                first = false;
+                while(col < clen){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col++;
+                }
+                row++;
+            }
+        }
+        return null;
+    },
+
+    // private
+    onResize : function(){
+        Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
+        if(this.viewReady){
+            this.view.layout();
+        }
+    },
+
+    /**
+     * Returns the grid's underlying element.
+     * @return {Element} The element
+     */
+    getGridEl : function(){
+        return this.body;
+    },
+
+    // private for compatibility, overridden by editor grid
+    stopEditing : Ext.emptyFn,
+
+    /**
+     * Returns the grid's selection model configured by the {@link #selModel}
+     * configuration option. If no selection model was configured, this will create
+     * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
+     * @return {SelectionModel}
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Ext.grid.RowSelectionModel(
+                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);
+        }
+        return this.selModel;
+    },
+
+    /**
+     * Returns the grid's data store.
+     * @return {Ext.data.Store} The store
+     */
+    getStore : function(){
+        return this.store;
+    },
+
+    /**
+     * Returns the grid's ColumnModel.
+     * @return {Ext.grid.ColumnModel} The column model
+     */
+    getColumnModel : function(){
+        return this.colModel;
+    },
+
+    /**
+     * Returns the grid's GridView object.
+     * @return {Ext.grid.GridView} The grid view
+     */
+    getView : function(){
+        if(!this.view){
+            this.view = new Ext.grid.GridView(this.viewConfig);
+        }
+        return this.view;
+    },
+    /**
+     * Called to get grid's drag proxy text, by default returns this.ddText.
+     * @return {String} The text
+     */
+    getDragDropText : function(){
+        var count = this.selModel.getCount();
+        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    }
+
+    /** 
+     * @cfg {String/Number} activeItem 
+     * @hide 
+     */
+    /** 
+     * @cfg {Boolean} autoDestroy 
+     * @hide 
+     */
+    /** 
+     * @cfg {Object/String/Function} autoLoad 
+     * @hide 
+     */
+    /** 
+     * @cfg {Boolean} autoWidth 
+     * @hide 
+     */
+    /** 
+     * @cfg {Boolean/Number} bufferResize 
+     * @hide 
+     */
+    /** 
+     * @cfg {String} defaultType 
+     * @hide 
+     */
+    /** 
+     * @cfg {Object} defaults 
+     * @hide 
+     */
+    /** 
+     * @cfg {Boolean} hideBorders 
+     * @hide 
+     */
+    /** 
+     * @cfg {Mixed} items 
+     * @hide 
+     */
+    /** 
+     * @cfg {String} layout 
+     * @hide 
+     */
+    /** 
+     * @cfg {Object} layoutConfig 
+     * @hide 
+     */
+    /** 
+     * @cfg {Boolean} monitorResize 
+     * @hide 
+     */
+    /** 
+     * @property items 
+     * @hide 
+     */
+    /** 
+     * @method add 
+     * @hide 
+     */
+    /** 
+     * @method cascade 
+     * @hide 
+     */
+    /** 
+     * @method doLayout 
+     * @hide 
+     */
+    /** 
+     * @method find 
+     * @hide 
+     */
+    /** 
+     * @method findBy 
+     * @hide 
+     */
+    /** 
+     * @method findById 
+     * @hide 
+     */
+    /** 
+     * @method findByType 
+     * @hide 
+     */
+    /** 
+     * @method getComponent 
+     * @hide 
+     */
+    /** 
+     * @method getLayout 
+     * @hide 
+     */
+    /** 
+     * @method getUpdater 
+     * @hide 
+     */
+    /** 
+     * @method insert 
+     * @hide 
+     */
+    /** 
+     * @method load 
+     * @hide 
+     */
+    /** 
+     * @method remove 
+     * @hide 
+     */
+    /** 
+     * @event add 
+     * @hide 
+     */
+    /** 
+     * @event afterlayout 
+     * @hide 
+     */
+    /** 
+     * @event beforeadd 
+     * @hide 
+     */
+    /** 
+     * @event beforeremove 
+     * @hide 
+     */
+    /** 
+     * @event remove 
+     * @hide 
+     */
+
+
+
+    /**
+     * @cfg {String} allowDomMove  @hide
+     */
+    /**
+     * @cfg {String} autoEl @hide
+     */
+    /**
+     * @cfg {String} applyTo  @hide
+     */
+    /**
+     * @cfg {String} autoScroll  @hide
+     */
+    /**
+     * @cfg {String} bodyBorder  @hide
+     */
+    /**
+     * @cfg {String} bodyStyle  @hide
+     */
+    /**
+     * @cfg {String} contentEl  @hide
+     */
+    /**
+     * @cfg {String} disabledClass  @hide
+     */
+    /**
+     * @cfg {String} elements  @hide
+     */
+    /**
+     * @cfg {String} html  @hide
+     */
+    /**
+     * @cfg {Boolean} preventBodyReset
+     * @hide
+     */
+    /**
+     * @property disabled
+     * @hide
+     */
+    /**
+     * @method applyToMarkup
+     * @hide
+     */
+    /**
+     * @method enable
+     * @hide
+     */
+    /**
+     * @method disable
+     * @hide
+     */
+    /**
+     * @method setDisabled
+     * @hide
+     */
+});
 Ext.reg('grid', Ext.grid.GridPanel);/**
  * @class Ext.grid.GridView
  * @extends Ext.util.Observable
@@ -66791,199 +66791,199 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {
         this.setDelta(0,0);
     }
 });
-// private
-// This is a support class used internally by the Grid components
-Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, {
-    maxDragWidth: 120,
-    
-    constructor : function(grid, hd, hd2){
-        this.grid = grid;
-        this.view = grid.getView();
-        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
-        Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd);
-        if(hd2){
-            this.setHandleElId(Ext.id(hd));
-            this.setOuterHandleElId(Ext.id(hd2));
-        }
-        this.scroll = false;
-    },
-    
-    getDragData : function(e){
-        var t = Ext.lib.Event.getTarget(e);
-        var h = this.view.findHeaderCell(t);
-        if(h){
-            return {ddel: h.firstChild, header:h};
-        }
-        return false;
-    },
-
-    onInitDrag : function(e){
-        this.view.headersDisabled = true;
-        var clone = this.dragData.ddel.cloneNode(true);
-        clone.id = Ext.id();
-        clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
-        this.proxy.update(clone);
-        return true;
-    },
-
-    afterValidDrop : function(){
-        var v = this.view;
-        setTimeout(function(){
-            v.headersDisabled = false;
-        }, 50);
-    },
-
-    afterInvalidDrop : function(){
-        var v = this.view;
-        setTimeout(function(){
-            v.headersDisabled = false;
-        }, 50);
-    }
-});
-
-// private
-// This is a support class used internally by the Grid components
-Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, {
-    proxyOffsets : [-4, -9],
-    fly: Ext.Element.fly,
-    
-    constructor : function(grid, hd, hd2){
-        this.grid = grid;
-        this.view = grid.getView();
-        // split the proxies so they don't interfere with mouse events
-        this.proxyTop = Ext.DomHelper.append(document.body, {
-            cls:"col-move-top", html:" "
-        }, true);
-        this.proxyBottom = Ext.DomHelper.append(document.body, {
-            cls:"col-move-bottom", html:" "
-        }, true);
-        this.proxyTop.hide = this.proxyBottom.hide = function(){
-            this.setLeftTop(-100,-100);
-            this.setStyle("visibility", "hidden");
-        };
-        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
-        // temporarily disabled
-        //Ext.dd.ScrollManager.register(this.view.scroller.dom);
-        Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
-    },
-
-    getTargetFromEvent : function(e){
-        var t = Ext.lib.Event.getTarget(e);
-        var cindex = this.view.findCellIndex(t);
-        if(cindex !== false){
-            return this.view.getHeaderCell(cindex);
-        }
-    },
-
-    nextVisible : function(h){
-        var v = this.view, cm = this.grid.colModel;
-        h = h.nextSibling;
-        while(h){
-            if(!cm.isHidden(v.getCellIndex(h))){
-                return h;
-            }
-            h = h.nextSibling;
-        }
-        return null;
-    },
-
-    prevVisible : function(h){
-        var v = this.view, cm = this.grid.colModel;
-        h = h.prevSibling;
-        while(h){
-            if(!cm.isHidden(v.getCellIndex(h))){
-                return h;
-            }
-            h = h.prevSibling;
-        }
-        return null;
-    },
-
-    positionIndicator : function(h, n, e){
-        var x = Ext.lib.Event.getPageX(e);
-        var r = Ext.lib.Dom.getRegion(n.firstChild);
-        var px, pt, py = r.top + this.proxyOffsets[1];
-        if((r.right - x) <= (r.right-r.left)/2){
-            px = r.right+this.view.borderWidth;
-            pt = "after";
-        }else{
-            px = r.left;
-            pt = "before";
-        }
-
-        if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){
-            return false;
-        }
-
-        px +=  this.proxyOffsets[0];
-        this.proxyTop.setLeftTop(px, py);
-        this.proxyTop.show();
-        if(!this.bottomOffset){
-            this.bottomOffset = this.view.mainHd.getHeight();
-        }
-        this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
-        this.proxyBottom.show();
-        return pt;
-    },
-
-    onNodeEnter : function(n, dd, e, data){
-        if(data.header != n){
-            this.positionIndicator(data.header, n, e);
-        }
-    },
-
-    onNodeOver : function(n, dd, e, data){
-        var result = false;
-        if(data.header != n){
-            result = this.positionIndicator(data.header, n, e);
-        }
-        if(!result){
-            this.proxyTop.hide();
-            this.proxyBottom.hide();
-        }
-        return result ? this.dropAllowed : this.dropNotAllowed;
-    },
-
-    onNodeOut : function(n, dd, e, data){
-        this.proxyTop.hide();
-        this.proxyBottom.hide();
-    },
-
-    onNodeDrop : function(n, dd, e, data){
-        var h = data.header;
-        if(h != n){
-            var cm = this.grid.colModel;
-            var x = Ext.lib.Event.getPageX(e);
-            var r = Ext.lib.Dom.getRegion(n.firstChild);
-            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
-            var oldIndex = this.view.getCellIndex(h);
-            var newIndex = this.view.getCellIndex(n);
-            if(pt == "after"){
-                newIndex++;
-            }
-            if(oldIndex < newIndex){
-                newIndex--;
-            }
-            cm.moveColumn(oldIndex, newIndex);
-            return true;
-        }
-        return false;
-    }
-});
-
-Ext.grid.GridView.ColumnDragZone = Ext.extend(Ext.grid.HeaderDragZone, {
-    
-    constructor : function(grid, hd){
-        Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
-        this.proxy.el.addClass('x-grid3-col-dd');
-    },
-    
-    handleMouseDown : function(e){
-    },
-
-    callHandleMouseDown : function(e){
-        Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
-    }
+// private
+// This is a support class used internally by the Grid components
+Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, {
+    maxDragWidth: 120,
+    
+    constructor : function(grid, hd, hd2){
+        this.grid = grid;
+        this.view = grid.getView();
+        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+        Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+        if(hd2){
+            this.setHandleElId(Ext.id(hd));
+            this.setOuterHandleElId(Ext.id(hd2));
+        }
+        this.scroll = false;
+    },
+    
+    getDragData : function(e){
+        var t = Ext.lib.Event.getTarget(e);
+        var h = this.view.findHeaderCell(t);
+        if(h){
+            return {ddel: h.firstChild, header:h};
+        }
+        return false;
+    },
+
+    onInitDrag : function(e){
+        this.view.headersDisabled = true;
+        var clone = this.dragData.ddel.cloneNode(true);
+        clone.id = Ext.id();
+        clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+        this.proxy.update(clone);
+        return true;
+    },
+
+    afterValidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    },
+
+    afterInvalidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    }
+});
+
+// private
+// This is a support class used internally by the Grid components
+Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, {
+    proxyOffsets : [-4, -9],
+    fly: Ext.Element.fly,
+    
+    constructor : function(grid, hd, hd2){
+        this.grid = grid;
+        this.view = grid.getView();
+        // split the proxies so they don't interfere with mouse events
+        this.proxyTop = Ext.DomHelper.append(document.body, {
+            cls:"col-move-top", html:" "
+        }, true);
+        this.proxyBottom = Ext.DomHelper.append(document.body, {
+            cls:"col-move-bottom", html:" "
+        }, true);
+        this.proxyTop.hide = this.proxyBottom.hide = function(){
+            this.setLeftTop(-100,-100);
+            this.setStyle("visibility", "hidden");
+        };
+        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+        // temporarily disabled
+        //Ext.dd.ScrollManager.register(this.view.scroller.dom);
+        Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+    },
+
+    getTargetFromEvent : function(e){
+        var t = Ext.lib.Event.getTarget(e);
+        var cindex = this.view.findCellIndex(t);
+        if(cindex !== false){
+            return this.view.getHeaderCell(cindex);
+        }
+    },
+
+    nextVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.nextSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.nextSibling;
+        }
+        return null;
+    },
+
+    prevVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.prevSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.prevSibling;
+        }
+        return null;
+    },
+
+    positionIndicator : function(h, n, e){
+        var x = Ext.lib.Event.getPageX(e);
+        var r = Ext.lib.Dom.getRegion(n.firstChild);
+        var px, pt, py = r.top + this.proxyOffsets[1];
+        if((r.right - x) <= (r.right-r.left)/2){
+            px = r.right+this.view.borderWidth;
+            pt = "after";
+        }else{
+            px = r.left;
+            pt = "before";
+        }
+
+        if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){
+            return false;
+        }
+
+        px +=  this.proxyOffsets[0];
+        this.proxyTop.setLeftTop(px, py);
+        this.proxyTop.show();
+        if(!this.bottomOffset){
+            this.bottomOffset = this.view.mainHd.getHeight();
+        }
+        this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+        this.proxyBottom.show();
+        return pt;
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+        if(data.header != n){
+            this.positionIndicator(data.header, n, e);
+        }
+    },
+
+    onNodeOver : function(n, dd, e, data){
+        var result = false;
+        if(data.header != n){
+            result = this.positionIndicator(data.header, n, e);
+        }
+        if(!result){
+            this.proxyTop.hide();
+            this.proxyBottom.hide();
+        }
+        return result ? this.dropAllowed : this.dropNotAllowed;
+    },
+
+    onNodeOut : function(n, dd, e, data){
+        this.proxyTop.hide();
+        this.proxyBottom.hide();
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+        var h = data.header;
+        if(h != n){
+            var cm = this.grid.colModel;
+            var x = Ext.lib.Event.getPageX(e);
+            var r = Ext.lib.Dom.getRegion(n.firstChild);
+            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+            var oldIndex = this.view.getCellIndex(h);
+            var newIndex = this.view.getCellIndex(n);
+            if(pt == "after"){
+                newIndex++;
+            }
+            if(oldIndex < newIndex){
+                newIndex--;
+            }
+            cm.moveColumn(oldIndex, newIndex);
+            return true;
+        }
+        return false;
+    }
+});
+
+Ext.grid.GridView.ColumnDragZone = Ext.extend(Ext.grid.HeaderDragZone, {
+    
+    constructor : function(grid, hd){
+        Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
+        this.proxy.el.addClass('x-grid3-col-dd');
+    },
+    
+    handleMouseDown : function(e){
+    },
+
+    callHandleMouseDown : function(e){
+        Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
+    }
 });// private
 // This is a support class used internally by the Grid components
 Ext.grid.SplitDragZone = Ext.extend(Ext.dd.DDProxy, {
@@ -67727,56 +67727,56 @@ Ext.grid.ColumnModel.defaultRenderer = function(value){
         return " ";
     }
     return value;
-};/**
- * @class Ext.grid.AbstractSelectionModel
- * @extends Ext.util.Observable
- * Abstract base class for grid SelectionModels.  It provides the interface that should be
- * implemented by descendant classes.  This class should not be directly instantiated.
- * @constructor
- */
-Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable,  {
-    /**
-     * The GridPanel for which this SelectionModel is handling selection. Read-only.
-     * @type Object
-     * @property grid
-     */
-    
-    constructor : function(){
-        this.locked = false;
-        Ext.grid.AbstractSelectionModel.superclass.constructor.call(this);
-    },
-
-    /** @ignore Called by the grid automatically. Do not call directly. */
-    init : function(grid){
-        this.grid = grid;
-        this.initEvents();
-    },
-
-    /**
-     * Locks the selections.
-     */
-    lock : function(){
-        this.locked = true;
-    },
-
-    /**
-     * Unlocks the selections.
-     */
-    unlock : function(){
-        this.locked = false;
-    },
-
-    /**
-     * Returns true if the selections are locked.
-     * @return {Boolean}
-     */
-    isLocked : function(){
-        return this.locked;
-    },
-    
-    destroy: function(){
-        this.purgeListeners();
-    }
+};/**
+ * @class Ext.grid.AbstractSelectionModel
+ * @extends Ext.util.Observable
+ * Abstract base class for grid SelectionModels.  It provides the interface that should be
+ * implemented by descendant classes.  This class should not be directly instantiated.
+ * @constructor
+ */
+Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable,  {
+    /**
+     * The GridPanel for which this SelectionModel is handling selection. Read-only.
+     * @type Object
+     * @property grid
+     */
+    
+    constructor : function(){
+        this.locked = false;
+        Ext.grid.AbstractSelectionModel.superclass.constructor.call(this);
+    },
+
+    /** @ignore Called by the grid automatically. Do not call directly. */
+    init : function(grid){
+        this.grid = grid;
+        this.initEvents();
+    },
+
+    /**
+     * Locks the selections.
+     */
+    lock : function(){
+        this.locked = true;
+    },
+
+    /**
+     * Unlocks the selections.
+     */
+    unlock : function(){
+        this.locked = false;
+    },
+
+    /**
+     * Returns true if the selections are locked.
+     * @return {Boolean}
+     */
+    isLocked : function(){
+        return this.locked;
+    },
+    
+    destroy: function(){
+        this.purgeListeners();
+    }
 });/**
  * @class Ext.grid.RowSelectionModel
  * @extends Ext.grid.AbstractSelectionModel
@@ -68309,427 +68309,427 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel,  {
         }
         Ext.grid.RowSelectionModel.superclass.destroy.call(this);
     }
-});/**
- * @class Ext.grid.Column
- * 
    This class encapsulates column configuration data to be used in the initialization of a
- * {@link Ext.grid.ColumnModel ColumnModel}.
    
- * 
    While subclasses are provided to render data in different ways, this class renders a passed
- * data field unchanged and is usually used for textual columns.
    
- */
-Ext.grid.Column = Ext.extend(Object, {
-    /**
-     * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
-     * {@link #editor}.  Set to false to initially disable editing on this column.
-     * The initial configuration may be dynamically altered using
-     * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
-     */
-    /**
-     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
-     * ordinal position.) The id is used to create a CSS class name which is applied to all
-     * table cells (including headers) in that column (in this context the id does not need to be
-     * unique). The class name takes the form of 
    x-grid3-td-id
    
-     * Header cells will also receive this class name, but will also have the class 
    x-grid3-hd
    
-     * So, to target header cells, use CSS selectors such as:
    .x-grid3-hd-row .x-grid3-td-id
    
-     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
-     * unique identifier.
-     */
-    /**
-     * @cfg {String} header Optional. The header text to be used as innerHTML
-     * (html tags are accepted) to display in the Grid view.  Note: to
-     * have a clickable header with no text displayed use ' '.
-     */
-    /**
-     * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to disable the header menu item to group by the column selected. Defaults to true,
-     * which enables the header menu group option.  Set to false to disable (but still show) the
-     * group option in the header menu for the column. See also {@link #groupName}.
-     */
-    /**
-     * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text with which to prefix the group field value in the group header line.
-     * See also {@link #groupRenderer} and
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
-     */
-    /**
-     * @cfg {Function} groupRenderer 
    Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the function used to format the grouping field value for display in the group
-     * {@link #groupName header}.  If a groupRenderer is not specified, the configured
-     * {@link #renderer} will be called; if a {@link #renderer} is also not specified
-     * the new value of the group field will be used.
    
-     * 
    The called function (either the groupRenderer or {@link #renderer}) will be
-     * passed the following parameters:
-     * 
      
-     * 
    • v : Object
      The new value of the group field.
      • 
-     * 
    • unused : undefined
      Unused parameter.
      • 
-     * 
    • r : Ext.data.Record
      The Record providing the data
-     * for the row which caused group change.
      • 
-     * 
    • rowIndex : Number
      The row index of the Record which caused group change.
      • 
-     * 
    • colIndex : Number
      The column index of the group field.
      • 
-     * 
    • ds : Ext.data.Store
      The Store which is providing the data Model.
      • 
-     * 
    
-     * 
    The function should return a string value.
    
-     */
-    /**
-     * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text to display when there is an empty group value. Defaults to the
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
-     */
-    /**
-     * @cfg {String} dataIndex 
    Required. The name of the field in the
-     * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
-     * which to draw the column's value.
    
-     */
-    /**
-     * @cfg {Number} width
-     * Optional. The initial width in pixels of the column.
-     * The width of each column can also be affected if any of the following are configured:
-     * 
      
-     * 
    • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
      • 
-     * 
    • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit}
-     * 
      
-     * 
      By specifying forceFit:true, {@link #fixed non-fixed width} columns will be
-     * re-proportioned (based on the relative initial widths) to fill the width of the grid so
-     * that no horizontal scrollbar is shown.
      
-     * 
      • 
-     * 
    • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
      • 
-     * 
    • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}
      • 
-     * 
      Note: when the width of each column is determined, a space on the right side
-     * is reserved for the vertical scrollbar.  The
-     * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset}
-     * can be modified to reduce or eliminate the reserved offset.
      
-     */
-    /**
-     * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column.
-     * Defaults to the value of the {@link Ext.grid.ColumnModel#defaultSortable} property.
-     * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
-     */
-    /**
-     * @cfg {Boolean} fixed Optional. true if the column width cannot be changed.  Defaults to false.
-     */
-    /**
-     * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
-     */
-    /**
-     * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
-     */
-    /**
-     * @cfg {Boolean} hidden
-     * Optional. true to initially hide this column. Defaults to false.
-     * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
-     * If a column is never to be shown, simply do not include this column in the Column Model at all. 
-     */
-    /**
-     * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
-     * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
-     * header's HTML title attribute. Defaults to ''.
-     */
-    /**
-     * @cfg {Mixed} renderer
-     * 
      For an alternative to specifying a renderer see {@link #xtype}
      
-     * 
      Optional. A renderer is an 'interceptor' method which can be used transform data (value,
-     * appearance, etc.) before it is rendered). This may be specified in either of three ways:
-     * 
        
-     * 
      • A renderer function used to return HTML markup for a cell given the cell's data value.
        • 
-     * 
      • A string which references a property name of the {@link Ext.util.Format} class which
-     * provides a renderer function.
        • 
-     * 
      • An object specifying both the renderer function, and its execution scope (this
-     * reference) e.g.:
        
-{
-    fn: this.gridRenderer,
-    scope: this
-}
-
      
-     * If not specified, the default renderer uses the raw data value.
      
-     * 
      For information about the renderer function (passed parameters, etc.), see
-     * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:
      
-var companyColumn = {
-   header: 'Company Name',
-   dataIndex: 'company',
-   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
-      // provide the logic depending on business rules
-      // name of your own choosing to manipulate the cell depending upon
-      // the data in the underlying Record object.
-      if (value == 'whatever') {
-          //metaData.css : String : A CSS class name to add to the TD element of the cell.
-          //metaData.attr : String : An html attribute definition string to apply to
-          //                         the data container element within the table
-          //                         cell (e.g. 'style="color:red;"').
-          metaData.css = 'name-of-css-class-you-will-define';
-      }
-      return value;
-   }
-}
-     * 
      
-     * See also {@link #scope}.
-     */
-    /**
-     * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
-     * type which is preconfigured with an appropriate {@link #renderer} to be easily
-     * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
-     * 
        
-     * 
      • gridcolumn : {@link Ext.grid.Column} (Default)
        • 
-     * 
      • booleancolumn : {@link Ext.grid.BooleanColumn}
        • 
-     * 
      • numbercolumn : {@link Ext.grid.NumberColumn}
        • 
-     * 
      • datecolumn : {@link Ext.grid.DateColumn}
        • 
-     * 
      • templatecolumn : {@link Ext.grid.TemplateColumn}
        • 
-     * 
      
-     * 
      Configuration properties for the specified xtype may be specified with
-     * the Column configuration properties, for example:
      
-     * 
      
-var grid = new Ext.grid.GridPanel({
-    ...
-    columns: [{
-        header: 'Last Updated',
-        dataIndex: 'lastChange',
-        width: 85,
-        sortable: true,
-        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
-        xtype: 'datecolumn', // use xtype instead of renderer
-        format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
-    }, {
-        ...
-    }]
-});
-     * 
      
-     */
-    /**
-     * @cfg {Object} scope Optional. The scope (this reference) in which to execute the
-     * renderer.  Defaults to the Column configuration object.
-     */
-    /**
-     * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
-     */
-    /**
-     * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
-     * (excluding headers). Defaults to undefined.
-     */
-    /**
-     * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
-     * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
-     * {@link Ext.grid.GridPanel#enableColumnHide} instead.
-     */
-    /**
-     * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
-     * if editing is supported by the grid. See {@link #editable} also.
-     */
-
-    /**
-     * @private
-     * @cfg {Boolean} isColumn
-     * Used by ColumnModel setConfig method to avoid reprocessing a Column
-     * if isColumn is not set ColumnModel will recreate a new Ext.grid.Column
-     * Defaults to true.
-     */
-    isColumn : true,
-    
-    constructor : function(config){
-        Ext.apply(this, config);
-        
-        if(Ext.isString(this.renderer)){
-            this.renderer = Ext.util.Format[this.renderer];
-        }else if(Ext.isObject(this.renderer)){
-            this.scope = this.renderer.scope;
-            this.renderer = this.renderer.fn;
-        }
-        if(!this.scope){
-            this.scope = this;
-        }
-        
-        var ed = this.editor;
-        delete this.editor;
-        this.setEditor(ed);
-    },
-
-    /**
-     * Optional. A function which returns displayable data when passed the following parameters:
-     * 
        
-     * 
      • value : Object
        The data value for the cell.
        • 
-     * 
      • metadata : Object
        An object in which you may set the following attributes:
          
-     * 
        • css : String
          A CSS class name to add to the cell's TD element.
          • 
-     * 
        • attr : String
          An HTML attribute definition string to apply to the data container
-     * element within the table cell (e.g. 'style="color:red;"').
        • 
-     * 
      • record : Ext.data.record
        The {@link Ext.data.Record} from which the data was
-     * extracted.
        • 
-     * 
      • rowIndex : Number
        Row index
        • 
-     * 
      • colIndex : Number
        Column index
        • 
-     * 
      • store : Ext.data.Store
        The {@link Ext.data.Store} object from which the Record
-     * was extracted.
        • 
-     * 
      
-     * @property renderer
-     * @type Function
-     */
-    renderer : function(value){
-        if(Ext.isString(value) && value.length < 1){
-            return ' ';
-        }
-        return value;
-    },
-
-    // private
-    getEditor: function(rowIndex){
-        return this.editable !== false ? this.editor : null;
-    },
-    
-    /**
-     * Sets a new editor for this column.
-     * @param {Ext.Editor/Ext.form.Field} editor The editor to set
-     */
-    setEditor : function(editor){
-        if(this.editor){
-            this.editor.destroy();
-        }
-        this.editor = null;
-        if(editor){
-            //not an instance, create it
-            if(!editor.isXType){
-                editor = Ext.create(editor, 'textfield');
-            }
-            //check if it's wrapped in an editor
-            if(!editor.startEdit){
-                editor = new Ext.grid.GridEditor(editor);
-            }
-            this.editor = editor;
-        }
-    },
-    
-    destroy : function(){
-        this.setEditor(null);
-    },
-
-    /**
-     * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
-     * used to edit the cell.
-     * @param {Number} rowIndex The row index
-     * @return {Ext.Editor}
-     */
-    getCellEditor: function(rowIndex){
-        return this.getEditor(rowIndex);
-    }
-});
-
-/**
- * @class Ext.grid.BooleanColumn
- * @extends Ext.grid.Column
- * 
      A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}
- * config option of {@link Ext.grid.Column} for more details.
      
- */
-Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
-    /**
-     * @cfg {String} trueText
-     * The string returned by the renderer when the column value is not falsey (defaults to 'true').
-     */
-    trueText: 'true',
-    /**
-     * @cfg {String} falseText
-     * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
-     * 'false').
-     */
-    falseText: 'false',
-    /**
-     * @cfg {String} undefinedText
-     * The string returned by the renderer when the column value is undefined (defaults to ' ').
-     */
-    undefinedText: ' ',
-
-    constructor: function(cfg){
-        Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
-        var t = this.trueText, f = this.falseText, u = this.undefinedText;
-        this.renderer = function(v){
-            if(v === undefined){
-                return u;
-            }
-            if(!v || v === 'false'){
-                return f;
-            }
-            return t;
-        };
-    }
-});
-
-/**
- * @class Ext.grid.NumberColumn
- * @extends Ext.grid.Column
- * 
      A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
- * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.
      
- */
-Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
-    /**
-     * @cfg {String} format
-     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
-     * (defaults to '0,000.00').
-     */
-    format : '0,000.00',
-    constructor: function(cfg){
-        Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
-        this.renderer = Ext.util.Format.numberRenderer(this.format);
-    }
-});
-
-/**
- * @class Ext.grid.DateColumn
- * @extends Ext.grid.Column
- * 
      A Column definition class which renders a passed date according to the default locale, or a configured
- * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
- * for more details.
      
- */
-Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
-    /**
-     * @cfg {String} format
-     * A formatting string as used by {@link Date#format} to format a Date for this Column
-     * (defaults to 'm/d/Y').
-     */
-    format : 'm/d/Y',
-    constructor: function(cfg){
-        Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
-        this.renderer = Ext.util.Format.dateRenderer(this.format);
-    }
-});
-
-/**
- * @class Ext.grid.TemplateColumn
- * @extends Ext.grid.Column
- * 
      A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
- * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
- * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
- * details.
      
- */
-Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
-    /**
-     * @cfg {String/XTemplate} tpl
-     * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a
-     * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
-     */
-    constructor: function(cfg){
-        Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
-        var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
-        this.renderer = function(value, p, r){
-            return tpl.apply(r.data);
-        };
-        this.tpl = tpl;
-    }
-});
-
-/*
- * @property types
- * @type Object
- * @member Ext.grid.Column
- * @static
- * 
      An object containing predefined Column classes keyed by a mnemonic code which may be referenced
- * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
      
- * 
      This contains the following properties
        
- * 
      • gridcolumn : {@link Ext.grid.Column Column constructor}
        • 
- * 
      • booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
        • 
- * 
      • numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
        • 
- * 
      • datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
        • 
- * 
      • templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}
        • 
- * 
      
- */
-Ext.grid.Column.types = {
-    gridcolumn : Ext.grid.Column,
-    booleancolumn: Ext.grid.BooleanColumn,
-    numbercolumn: Ext.grid.NumberColumn,
-    datecolumn: Ext.grid.DateColumn,
-    templatecolumn: Ext.grid.TemplateColumn
+});/**
+ * @class Ext.grid.Column
+ * 
      This class encapsulates column configuration data to be used in the initialization of a
+ * {@link Ext.grid.ColumnModel ColumnModel}.
      
+ * 
      While subclasses are provided to render data in different ways, this class renders a passed
+ * data field unchanged and is usually used for textual columns.
      
+ */
+Ext.grid.Column = Ext.extend(Object, {
+    /**
+     * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
+     * {@link #editor}.  Set to false to initially disable editing on this column.
+     * The initial configuration may be dynamically altered using
+     * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
+     */
+    /**
+     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
+     * ordinal position.) The id is used to create a CSS class name which is applied to all
+     * table cells (including headers) in that column (in this context the id does not need to be
+     * unique). The class name takes the form of 
      x-grid3-td-id
      
+     * Header cells will also receive this class name, but will also have the class 
      x-grid3-hd
      
+     * So, to target header cells, use CSS selectors such as:
      .x-grid3-hd-row .x-grid3-td-id
      
+     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
+     * unique identifier.
+     */
+    /**
+     * @cfg {String} header Optional. The header text to be used as innerHTML
+     * (html tags are accepted) to display in the Grid view.  Note: to
+     * have a clickable header with no text displayed use ' '.
+     */
+    /**
+     * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
+     * may be used to disable the header menu item to group by the column selected. Defaults to true,
+     * which enables the header menu group option.  Set to false to disable (but still show) the
+     * group option in the header menu for the column. See also {@link #groupName}.
+     */
+    /**
+     * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
+     * may be used to specify the text with which to prefix the group field value in the group header line.
+     * See also {@link #groupRenderer} and
+     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
+     */
+    /**
+     * @cfg {Function} groupRenderer 
      Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
+     * may be used to specify the function used to format the grouping field value for display in the group
+     * {@link #groupName header}.  If a groupRenderer is not specified, the configured
+     * {@link #renderer} will be called; if a {@link #renderer} is also not specified
+     * the new value of the group field will be used.
      
+     * 
      The called function (either the groupRenderer or {@link #renderer}) will be
+     * passed the following parameters:
+     * 
        
+     * 
      • v : Object
        The new value of the group field.
        • 
+     * 
      • unused : undefined
        Unused parameter.
        • 
+     * 
      • r : Ext.data.Record
        The Record providing the data
+     * for the row which caused group change.
        • 
+     * 
      • rowIndex : Number
        The row index of the Record which caused group change.
        • 
+     * 
      • colIndex : Number
        The column index of the group field.
        • 
+     * 
      • ds : Ext.data.Store
        The Store which is providing the data Model.
        • 
+     * 
      
+     * 
      The function should return a string value.
      
+     */
+    /**
+     * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
+     * may be used to specify the text to display when there is an empty group value. Defaults to the
+     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
+     */
+    /**
+     * @cfg {String} dataIndex 
      Required. The name of the field in the
+     * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
+     * which to draw the column's value.
      
+     */
+    /**
+     * @cfg {Number} width
+     * Optional. The initial width in pixels of the column.
+     * The width of each column can also be affected if any of the following are configured:
+     * 
        
+     * 
      • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
        • 
+     * 
      • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit}
+     * 
        
+     * 
        By specifying forceFit:true, {@link #fixed non-fixed width} columns will be
+     * re-proportioned (based on the relative initial widths) to fill the width of the grid so
+     * that no horizontal scrollbar is shown.
        
+     * 
        • 
+     * 
      • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
        • 
+     * 
      • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}
        • 
+     * 
        Note: when the width of each column is determined, a space on the right side
+     * is reserved for the vertical scrollbar.  The
+     * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset}
+     * can be modified to reduce or eliminate the reserved offset.
        
+     */
+    /**
+     * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column.
+     * Defaults to the value of the {@link Ext.grid.ColumnModel#defaultSortable} property.
+     * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
+     */
+    /**
+     * @cfg {Boolean} fixed Optional. true if the column width cannot be changed.  Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
+     */
+    /**
+     * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} hidden
+     * Optional. true to initially hide this column. Defaults to false.
+     * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
+     * If a column is never to be shown, simply do not include this column in the Column Model at all. 
+     */
+    /**
+     * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
+     * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
+     * header's HTML title attribute. Defaults to ''.
+     */
+    /**
+     * @cfg {Mixed} renderer
+     * 
        For an alternative to specifying a renderer see {@link #xtype}
        
+     * 
        Optional. A renderer is an 'interceptor' method which can be used transform data (value,
+     * appearance, etc.) before it is rendered). This may be specified in either of three ways:
+     * 
          
+     * 
        • A renderer function used to return HTML markup for a cell given the cell's data value.
          • 
+     * 
        • A string which references a property name of the {@link Ext.util.Format} class which
+     * provides a renderer function.
          • 
+     * 
        • An object specifying both the renderer function, and its execution scope (this
+     * reference) e.g.:
          
+{
+    fn: this.gridRenderer,
+    scope: this
+}
+
        
+     * If not specified, the default renderer uses the raw data value.
        
+     * 
        For information about the renderer function (passed parameters, etc.), see
+     * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:
        
+var companyColumn = {
+   header: 'Company Name',
+   dataIndex: 'company',
+   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
+      // provide the logic depending on business rules
+      // name of your own choosing to manipulate the cell depending upon
+      // the data in the underlying Record object.
+      if (value == 'whatever') {
+          //metaData.css : String : A CSS class name to add to the TD element of the cell.
+          //metaData.attr : String : An html attribute definition string to apply to
+          //                         the data container element within the table
+          //                         cell (e.g. 'style="color:red;"').
+          metaData.css = 'name-of-css-class-you-will-define';
+      }
+      return value;
+   }
+}
+     * 
        
+     * See also {@link #scope}.
+     */
+    /**
+     * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
+     * type which is preconfigured with an appropriate {@link #renderer} to be easily
+     * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
+     * 
          
+     * 
        • gridcolumn : {@link Ext.grid.Column} (Default)
          • 
+     * 
        • booleancolumn : {@link Ext.grid.BooleanColumn}
          • 
+     * 
        • numbercolumn : {@link Ext.grid.NumberColumn}
          • 
+     * 
        • datecolumn : {@link Ext.grid.DateColumn}
          • 
+     * 
        • templatecolumn : {@link Ext.grid.TemplateColumn}
          • 
+     * 
        
+     * 
        Configuration properties for the specified xtype may be specified with
+     * the Column configuration properties, for example:
        
+     * 
        
+var grid = new Ext.grid.GridPanel({
+    ...
+    columns: [{
+        header: 'Last Updated',
+        dataIndex: 'lastChange',
+        width: 85,
+        sortable: true,
+        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
+        xtype: 'datecolumn', // use xtype instead of renderer
+        format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
+    }, {
+        ...
+    }]
+});
+     * 
        
+     */
+    /**
+     * @cfg {Object} scope Optional. The scope (this reference) in which to execute the
+     * renderer.  Defaults to the Column configuration object.
+     */
+    /**
+     * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
+     */
+    /**
+     * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
+     * (excluding headers). Defaults to undefined.
+     */
+    /**
+     * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
+     * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
+     * {@link Ext.grid.GridPanel#enableColumnHide} instead.
+     */
+    /**
+     * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
+     * if editing is supported by the grid. See {@link #editable} also.
+     */
+
+    /**
+     * @private
+     * @cfg {Boolean} isColumn
+     * Used by ColumnModel setConfig method to avoid reprocessing a Column
+     * if isColumn is not set ColumnModel will recreate a new Ext.grid.Column
+     * Defaults to true.
+     */
+    isColumn : true,
+    
+    constructor : function(config){
+        Ext.apply(this, config);
+        
+        if(Ext.isString(this.renderer)){
+            this.renderer = Ext.util.Format[this.renderer];
+        }else if(Ext.isObject(this.renderer)){
+            this.scope = this.renderer.scope;
+            this.renderer = this.renderer.fn;
+        }
+        if(!this.scope){
+            this.scope = this;
+        }
+        
+        var ed = this.editor;
+        delete this.editor;
+        this.setEditor(ed);
+    },
+
+    /**
+     * Optional. A function which returns displayable data when passed the following parameters:
+     * 
          
+     * 
        • value : Object
          The data value for the cell.
          • 
+     * 
        • metadata : Object
          An object in which you may set the following attributes:
            
+     * 
          • css : String
            A CSS class name to add to the cell's TD element.
            • 
+     * 
          • attr : String
            An HTML attribute definition string to apply to the data container
+     * element within the table cell (e.g. 'style="color:red;"').
          • 
+     * 
        • record : Ext.data.record
          The {@link Ext.data.Record} from which the data was
+     * extracted.
          • 
+     * 
        • rowIndex : Number
          Row index
          • 
+     * 
        • colIndex : Number
          Column index
          • 
+     * 
        • store : Ext.data.Store
          The {@link Ext.data.Store} object from which the Record
+     * was extracted.
          • 
+     * 
        
+     * @property renderer
+     * @type Function
+     */
+    renderer : function(value){
+        if(Ext.isString(value) && value.length < 1){
+            return ' ';
+        }
+        return value;
+    },
+
+    // private
+    getEditor: function(rowIndex){
+        return this.editable !== false ? this.editor : null;
+    },
+    
+    /**
+     * Sets a new editor for this column.
+     * @param {Ext.Editor/Ext.form.Field} editor The editor to set
+     */
+    setEditor : function(editor){
+        if(this.editor){
+            this.editor.destroy();
+        }
+        this.editor = null;
+        if(editor){
+            //not an instance, create it
+            if(!editor.isXType){
+                editor = Ext.create(editor, 'textfield');
+            }
+            //check if it's wrapped in an editor
+            if(!editor.startEdit){
+                editor = new Ext.grid.GridEditor(editor);
+            }
+            this.editor = editor;
+        }
+    },
+    
+    destroy : function(){
+        this.setEditor(null);
+    },
+
+    /**
+     * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
+     * used to edit the cell.
+     * @param {Number} rowIndex The row index
+     * @return {Ext.Editor}
+     */
+    getCellEditor: function(rowIndex){
+        return this.getEditor(rowIndex);
+    }
+});
+
+/**
+ * @class Ext.grid.BooleanColumn
+ * @extends Ext.grid.Column
+ * 
        A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}
+ * config option of {@link Ext.grid.Column} for more details.
        
+ */
+Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
+    /**
+     * @cfg {String} trueText
+     * The string returned by the renderer when the column value is not falsey (defaults to 'true').
+     */
+    trueText: 'true',
+    /**
+     * @cfg {String} falseText
+     * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
+     * 'false').
+     */
+    falseText: 'false',
+    /**
+     * @cfg {String} undefinedText
+     * The string returned by the renderer when the column value is undefined (defaults to ' ').
+     */
+    undefinedText: ' ',
+
+    constructor: function(cfg){
+        Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
+        var t = this.trueText, f = this.falseText, u = this.undefinedText;
+        this.renderer = function(v){
+            if(v === undefined){
+                return u;
+            }
+            if(!v || v === 'false'){
+                return f;
+            }
+            return t;
+        };
+    }
+});
+
+/**
+ * @class Ext.grid.NumberColumn
+ * @extends Ext.grid.Column
+ * 
        A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
+ * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.
        
+ */
+Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
+    /**
+     * @cfg {String} format
+     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
+     * (defaults to '0,000.00').
+     */
+    format : '0,000.00',
+    constructor: function(cfg){
+        Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
+        this.renderer = Ext.util.Format.numberRenderer(this.format);
+    }
+});
+
+/**
+ * @class Ext.grid.DateColumn
+ * @extends Ext.grid.Column
+ * 
        A Column definition class which renders a passed date according to the default locale, or a configured
+ * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
+ * for more details.
        
+ */
+Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
+    /**
+     * @cfg {String} format
+     * A formatting string as used by {@link Date#format} to format a Date for this Column
+     * (defaults to 'm/d/Y').
+     */
+    format : 'm/d/Y',
+    constructor: function(cfg){
+        Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
+        this.renderer = Ext.util.Format.dateRenderer(this.format);
+    }
+});
+
+/**
+ * @class Ext.grid.TemplateColumn
+ * @extends Ext.grid.Column
+ * 
        A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
+ * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
+ * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
+ * details.
        
+ */
+Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
+    /**
+     * @cfg {String/XTemplate} tpl
+     * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a
+     * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
+     */
+    constructor: function(cfg){
+        Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
+        var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
+        this.renderer = function(value, p, r){
+            return tpl.apply(r.data);
+        };
+        this.tpl = tpl;
+    }
+});
+
+/*
+ * @property types
+ * @type Object
+ * @member Ext.grid.Column
+ * @static
+ * 
        An object containing predefined Column classes keyed by a mnemonic code which may be referenced
+ * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
        
+ * 
        This contains the following properties
          
+ * 
        • gridcolumn : {@link Ext.grid.Column Column constructor}
          • 
+ * 
        • booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
          • 
+ * 
        • numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
          • 
+ * 
        • datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
          • 
+ * 
        • templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}
          • 
+ * 
        
+ */
+Ext.grid.Column.types = {
+    gridcolumn : Ext.grid.Column,
+    booleancolumn: Ext.grid.BooleanColumn,
+    numbercolumn: Ext.grid.NumberColumn,
+    datecolumn: Ext.grid.DateColumn,
+    templatecolumn: Ext.grid.TemplateColumn
 };/**
  * @class Ext.grid.RowNumberer
  * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides
@@ -68784,102 +68784,102 @@ Ext.grid.RowNumberer = Ext.extend(Object, {
         }
         return rowIndex+1;
     }
-});/**
- * @class Ext.grid.CheckboxSelectionModel
- * @extends Ext.grid.RowSelectionModel
- * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
- * @constructor
- * @param {Object} config The configuration options
- */
-Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
-
-    /**
-     * @cfg {Boolean} checkOnly true if rows can only be selected by clicking on the
-     * checkbox column (defaults to false).
-     */
-    /**
-     * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the
-     * checkbox column.  Defaults to:
        
-     * '<div class="x-grid3-hd-checker">&#160;</div>'
-     * 
        
-     * The default CSS class of 'x-grid3-hd-checker' displays a checkbox in the header
-     * and provides support for automatic check all/none behavior on header click. This string
-     * can be replaced by any valid HTML fragment, including a simple text string (e.g.,
-     * 'Select Rows'), but the automatic check all/none behavior will only work if the
-     * 'x-grid3-hd-checker' class is supplied.
-     */
-    header : '
         
        ',
-    /**
-     * @cfg {Number} width The default width in pixels of the checkbox column (defaults to 20).
-     */
-    width : 20,
-    /**
-     * @cfg {Boolean} sortable true if the checkbox column is sortable (defaults to
-     * false).
-     */
-    sortable : false,
-
-    // private
-    menuDisabled : true,
-    fixed : true,
-    dataIndex : '',
-    id : 'checker',
-
-    constructor : function(){
-        Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);
-
-        if(this.checkOnly){
-            this.handleMouseDown = Ext.emptyFn;
-        }
-    },
-
-    // private
-    initEvents : function(){
-        Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
-        this.grid.on('render', function(){
-            var view = this.grid.getView();
-            view.mainBody.on('mousedown', this.onMouseDown, this);
-            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
-
-        }, this);
-    },
-
-    // private
-    onMouseDown : function(e, t){
-        if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
-            e.stopEvent();
-            var row = e.getTarget('.x-grid3-row');
-            if(row){
-                var index = row.rowIndex;
-                if(this.isSelected(index)){
-                    this.deselectRow(index);
-                }else{
-                    this.selectRow(index, true);
-                }
-            }
-        }
-    },
-
-    // private
-    onHdMouseDown : function(e, t){
-        if(t.className == 'x-grid3-hd-checker'){
-            e.stopEvent();
-            var hd = Ext.fly(t.parentNode);
-            var isChecked = hd.hasClass('x-grid3-hd-checker-on');
-            if(isChecked){
-                hd.removeClass('x-grid3-hd-checker-on');
-                this.clearSelections();
-            }else{
-                hd.addClass('x-grid3-hd-checker-on');
-                this.selectAll();
-            }
-        }
-    },
-
-    // private
-    renderer : function(v, p, record){
-        return '
         
        ';
-    }
+});/**
+ * @class Ext.grid.CheckboxSelectionModel
+ * @extends Ext.grid.RowSelectionModel
+ * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
+ * @constructor
+ * @param {Object} config The configuration options
+ */
+Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
+
+    /**
+     * @cfg {Boolean} checkOnly true if rows can only be selected by clicking on the
+     * checkbox column (defaults to false).
+     */
+    /**
+     * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the
+     * checkbox column.  Defaults to:
        
+     * '<div class="x-grid3-hd-checker">&#160;</div>'
+     * 
        
+     * The default CSS class of 'x-grid3-hd-checker' displays a checkbox in the header
+     * and provides support for automatic check all/none behavior on header click. This string
+     * can be replaced by any valid HTML fragment, including a simple text string (e.g.,
+     * 'Select Rows'), but the automatic check all/none behavior will only work if the
+     * 'x-grid3-hd-checker' class is supplied.
+     */
+    header : '
         
        ',
+    /**
+     * @cfg {Number} width The default width in pixels of the checkbox column (defaults to 20).
+     */
+    width : 20,
+    /**
+     * @cfg {Boolean} sortable true if the checkbox column is sortable (defaults to
+     * false).
+     */
+    sortable : false,
+
+    // private
+    menuDisabled : true,
+    fixed : true,
+    dataIndex : '',
+    id : 'checker',
+
+    constructor : function(){
+        Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);
+
+        if(this.checkOnly){
+            this.handleMouseDown = Ext.emptyFn;
+        }
+    },
+
+    // private
+    initEvents : function(){
+        Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
+        this.grid.on('render', function(){
+            var view = this.grid.getView();
+            view.mainBody.on('mousedown', this.onMouseDown, this);
+            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
+
+        }, this);
+    },
+
+    // private
+    onMouseDown : function(e, t){
+        if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
+            e.stopEvent();
+            var row = e.getTarget('.x-grid3-row');
+            if(row){
+                var index = row.rowIndex;
+                if(this.isSelected(index)){
+                    this.deselectRow(index);
+                }else{
+                    this.selectRow(index, true);
+                }
+            }
+        }
+    },
+
+    // private
+    onHdMouseDown : function(e, t){
+        if(t.className == 'x-grid3-hd-checker'){
+            e.stopEvent();
+            var hd = Ext.fly(t.parentNode);
+            var isChecked = hd.hasClass('x-grid3-hd-checker-on');
+            if(isChecked){
+                hd.removeClass('x-grid3-hd-checker-on');
+                this.clearSelections();
+            }else{
+                hd.addClass('x-grid3-hd-checker-on');
+                this.selectAll();
+            }
+        }
+    },
+
+    // private
+    renderer : function(v, p, record){
+        return '
         
        ';
+    }
 });/**
  * @class Ext.grid.CellSelectionModel
  * @extends Ext.grid.AbstractSelectionModel
@@ -69950,568 +69950,568 @@ grid.setSource({
      */
 });
 Ext.reg("propertygrid", Ext.grid.PropertyGrid);
-/**
- * @class Ext.grid.GroupingView
- * @extends Ext.grid.GridView
- * Adds the ability for single level grouping to the grid. A {@link Ext.data.GroupingStore GroupingStore}
- * must be used to enable grouping.  Some grouping characteristics may also be configured at the
- * {@link Ext.grid.Column Column level}
          
- * 
        • {@link Ext.grid.Column#emptyGroupText emptyGroupText}
          • 
- * 
        • {@link Ext.grid.Column#groupable groupable}
          • 
- * 
        • {@link Ext.grid.Column#groupName groupName}
          • 
- * 
        • {@link Ext.grid.Column#groupRender groupRender}
          • 
- * 
        
- * 
        Sample usage:
        
- * 
        
-var grid = new Ext.grid.GridPanel({
-    // A groupingStore is required for a GroupingView
-    store: new {@link Ext.data.GroupingStore}({
-        autoDestroy: true,
-        reader: reader,
-        data: xg.dummyData,
-        sortInfo: {field: 'company', direction: 'ASC'},
-        {@link Ext.data.GroupingStore#groupOnSort groupOnSort}: true,
-        {@link Ext.data.GroupingStore#remoteGroup remoteGroup}: true,
-        {@link Ext.data.GroupingStore#groupField groupField}: 'industry'
-    }),
-    colModel: new {@link Ext.grid.ColumnModel}({
-        columns:[
-            {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
-            // {@link Ext.grid.Column#groupable groupable}, {@link Ext.grid.Column#groupName groupName}, {@link Ext.grid.Column#groupRender groupRender} are also configurable at column level
-            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', {@link Ext.grid.Column#groupable groupable}: false},
-            {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
-            {header: 'Industry', dataIndex: 'industry'},
-            {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
-        ],
-        defaults: {
-            sortable: true,
-            menuDisabled: false,
-            width: 20
-        }
-    }),
-
-    view: new Ext.grid.GroupingView({
-        {@link Ext.grid.GridView#forceFit forceFit}: true,
-        // custom grouping text template to display the number of items per group
-        {@link #groupTextTpl}: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
-    }),
-
-    frame:true,
-    width: 700,
-    height: 450,
-    collapsible: true,
-    animCollapse: false,
-    title: 'Grouping Example',
-    iconCls: 'icon-grid',
-    renderTo: document.body
-});
- * 
        
- * @constructor
- * @param {Object} config
- */
-Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, {
-
-    /**
-     * @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column
-     * (defaults to 'Group By This Field').
-     */
-    groupByText : 'Group By This Field',
-    /**
-     * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
-     * (defaults to 'Show in Groups').
-     */
-    showGroupsText : 'Show in Groups',
-    /**
-     * @cfg {Boolean} hideGroupedColumn true to hide the column that is currently grouped (defaults to false)
-     */
-    hideGroupedColumn : false,
-    /**
-     * @cfg {Boolean} showGroupName If true will display a prefix plus a ': ' before the group field value
-     * in the group header line.  The prefix will consist of the {@link Ext.grid.Column#groupName groupName}
-     * (or the configured {@link Ext.grid.Column#header header} if not provided) configured in the
-     * {@link Ext.grid.Column} for each set of grouped rows (defaults to true).
-     */
-    showGroupName : true,
-    /**
-     * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false)
-     */
-    startCollapsed : false,
-    /**
-     * @cfg {Boolean} enableGrouping false to disable grouping functionality (defaults to true)
-     */
-    enableGrouping : true,
-    /**
-     * @cfg {Boolean} enableGroupingMenu true to enable the grouping control in the column menu (defaults to true)
-     */
-    enableGroupingMenu : true,
-    /**
-     * @cfg {Boolean} enableNoGroups true to allow the user to turn off grouping (defaults to true)
-     */
-    enableNoGroups : true,
-    /**
-     * @cfg {String} emptyGroupText The text to display when there is an empty group value (defaults to '(None)').
-     * May also be specified per column, see {@link Ext.grid.Column}.{@link Ext.grid.Column#emptyGroupText emptyGroupText}.
-     */
-    emptyGroupText : '(None)',
-    /**
-     * @cfg {Boolean} ignoreAdd true to skip refreshing the view when new rows are added (defaults to false)
-     */
-    ignoreAdd : false,
-    /**
-     * @cfg {String} groupTextTpl The template used to render the group header (defaults to '{text}').
-     * This is used to format an object which contains the following properties:
-     * 
          
-     * 
        • group : String
          The rendered value of the group field.
-     * By default this is the unchanged value of the group field. If a {@link Ext.grid.Column#groupRenderer groupRenderer}
-     * is specified, it is the result of a call to that function.
          • 
-     * 
        • gvalue : Object
          The raw value of the group field.
          • 
-     * 
        • text : String
          The configured header (as described in {@link #showGroupName})
-     * if {@link #showGroupName} is true) plus the rendered group field value.
          • 
-     * 
        • groupId : String
          A unique, generated ID which is applied to the
-     * View Element which contains the group.
          • 
-     * 
        • startRow : Number
          The row index of the Record which caused group change.
          • 
-     * 
        • rs : Array
          Contains a single element: The Record providing the data
-     * for the row which caused group change.
          • 
-     * 
        • cls : String
          The generated class name string to apply to the group header Element.
          • 
-     * 
        • style : String
          The inline style rules to apply to the group header Element.
          • 
-     * 
        
-     * See {@link Ext.XTemplate} for information on how to format data using a template. Possible usage:
        
-var grid = new Ext.grid.GridPanel({
-    ...
-    view: new Ext.grid.GroupingView({
-        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
-    }),
-});
-     * 
        
-     */
-    groupTextTpl : '{text}',
-
-    /**
-     * @cfg {String} groupMode Indicates how to construct the group identifier. 'value' constructs the id using
-     * raw value, 'display' constructs the id using the rendered value. Defaults to 'value'.
-     */
-    groupMode: 'value',
-
-    /**
-     * @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
-     * each column.
-     */
-
-    // private
-    gidSeed : 1000,
-
-    // private
-    initTemplates : function(){
-        Ext.grid.GroupingView.superclass.initTemplates.call(this);
-        this.state = {};
-
-        var sm = this.grid.getSelectionModel();
-        sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
-                this.onBeforeRowSelect, this);
-
-        if(!this.startGroup){
-            this.startGroup = new Ext.XTemplate(
-                '
        ',
-                    '
        ', this.groupTextTpl ,'
        ',
-                    '
        '
-            );
-        }
-        this.startGroup.compile();
-        if(!this.endGroup){
-            this.endGroup = '
        ';
-        }
-
-        this.endGroup = '
    ';
-    },
-
-    // private
-    findGroup : function(el){
-        return Ext.fly(el).up('.x-grid-group', this.mainBody.dom);
-    },
-
-    // private
-    getGroups : function(){
-        return this.hasRows() ? this.mainBody.dom.childNodes : [];
-    },
-
-    // private
-    onAdd : function(){
-        if(this.canGroup() && !this.ignoreAdd){
-            var ss = this.getScrollState();
-            this.refresh();
-            this.restoreScroll(ss);
-        }else if(!this.canGroup()){
-            Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
-        }
-    },
-
-    // private
-    onRemove : function(ds, record, index, isUpdate){
-        Ext.grid.GroupingView.superclass.onRemove.apply(this, arguments);
-        var g = document.getElementById(record._groupId);
-        if(g && g.childNodes[1].childNodes.length < 1){
-            Ext.removeNode(g);
-        }
-        this.applyEmptyText();
-    },
-
-    // private
-    refreshRow : function(record){
-        if(this.ds.getCount()==1){
-            this.refresh();
-        }else{
-            this.isUpdating = true;
-            Ext.grid.GroupingView.superclass.refreshRow.apply(this, arguments);
-            this.isUpdating = false;
-        }
-    },
-
-    // private
-    beforeMenuShow : function(){
-        var item, items = this.hmenu.items, disabled = this.cm.config[this.hdCtxIndex].groupable === false;
-        if((item = items.get('groupBy'))){
-            item.setDisabled(disabled);
-        }
-        if((item = items.get('showGroups'))){
-            item.setDisabled(disabled);
-            item.setChecked(this.enableGrouping, true);
-        }
-    },
-
-    // private
-    renderUI : function(){
-        Ext.grid.GroupingView.superclass.renderUI.call(this);
-        this.mainBody.on('mousedown', this.interceptMouse, this);
-
-        if(this.enableGroupingMenu && this.hmenu){
-            this.hmenu.add('-',{
-                itemId:'groupBy',
-                text: this.groupByText,
-                handler: this.onGroupByClick,
-                scope: this,
-                iconCls:'x-group-by-icon'
-            });
-            if(this.enableNoGroups){
-                this.hmenu.add({
-                    itemId:'showGroups',
-                    text: this.showGroupsText,
-                    checked: true,
-                    checkHandler: this.onShowGroupsClick,
-                    scope: this
-                });
-            }
-            this.hmenu.on('beforeshow', this.beforeMenuShow, this);
-        }
-    },
-
-    processEvent: function(name, e){
-        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
-        if(hd){
-            // group value is at the end of the string
-            var field = this.getGroupField(),
-                prefix = this.getPrefix(field),
-                groupValue = hd.id.substring(prefix.length);
-
-            // remove trailing '-hd'
-            groupValue = groupValue.substr(0, groupValue.length - 3);
-            if(groupValue){
-                this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
-            }
-        }
-
-    },
-
-    // private
-    onGroupByClick : function(){
-        this.enableGrouping = true;
-        this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
-        this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState());
-        this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
-        this.refresh();
-    },
-
-    // private
-    onShowGroupsClick : function(mi, checked){
-    this.enableGrouping = checked;
-        if(checked){
-            this.onGroupByClick();
-        }else{
-            this.grid.store.clearGrouping();
-            this.grid.fireEvent('groupchange', this, null);
-        }
-    },
-
-    /**
-     * Toggle the group that contains the specific row.
-     * @param {Number} rowIndex The row inside the group
-     * @param {Boolean} expanded (optional)
-     */
-    toggleRowIndex : function(rowIndex, expanded){
-        if(!this.canGroup()){
-            return;
-        }
-        var row = this.getRow(rowIndex);
-        if(row){
-            this.toggleGroup(this.findGroup(row), expanded);
-        }
-    },
-
-    /**
-     * Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
-     * @param {String} groupId The groupId assigned to the group (see getGroupId)
-     * @param {Boolean} expanded (optional)
-     */
-    toggleGroup : function(group, expanded){
-        var gel = Ext.get(group);
-        expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
-        if(this.state[gel.id] !== expanded){
-            this.grid.stopEditing(true);
-            this.state[gel.id] = expanded;
-            gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
-        }
-    },
-
-    /**
-     * Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
-     * @param {Boolean} expanded (optional)
-     */
-    toggleAllGroups : function(expanded){
-        var groups = this.getGroups();
-        for(var i = 0, len = groups.length; i < len; i++){
-            this.toggleGroup(groups[i], expanded);
-        }
-    },
-
-    /**
-     * Expands all grouped rows.
-     */
-    expandAllGroups : function(){
-        this.toggleAllGroups(true);
-    },
-
-    /**
-     * Collapses all grouped rows.
-     */
-    collapseAllGroups : function(){
-        this.toggleAllGroups(false);
-    },
-
-    // private
-    interceptMouse : function(e){
-        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
-        if(hd){
-            e.stopEvent();
-            this.toggleGroup(hd.parentNode);
-        }
-    },
-
-    // private
-    getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
-        var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
-        if(g === '' || g === ' '){
-            g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
-        }
-        return g;
-    },
-
-    // private
-    getGroupField : function(){
-        return this.grid.store.getGroupState();
-    },
-
-    // private
-    afterRender : function(){
-        if(!this.ds || !this.cm){
-            return;
-        }
-        Ext.grid.GroupingView.superclass.afterRender.call(this);
-        if(this.grid.deferRowRender){
-            this.updateGroupWidths();
-        }
-    },
-
-    // private
-    renderRows : function(){
-        var groupField = this.getGroupField();
-        var eg = !!groupField;
-        // if they turned off grouping and the last grouped field is hidden
-        if(this.hideGroupedColumn) {
-            var colIndex = this.cm.findColumnIndex(groupField),
-                hasLastGroupField = Ext.isDefined(this.lastGroupField);
-            if(!eg && hasLastGroupField){
-                this.mainBody.update('');
-                this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
-                delete this.lastGroupField;
-            }else if (eg && !hasLastGroupField){
-                this.lastGroupField = groupField;
-                this.cm.setHidden(colIndex, true);
-            }else if (eg && hasLastGroupField && groupField !== this.lastGroupField) {
-                this.mainBody.update('');
-                var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
-                this.cm.setHidden(oldIndex, false);
-                this.lastGroupField = groupField;
-                this.cm.setHidden(colIndex, true);
-            }
-        }
-        return Ext.grid.GroupingView.superclass.renderRows.apply(
-                    this, arguments);
-    },
-
-    // private
-    doRender : function(cs, rs, ds, startRow, colCount, stripe){
-        if(rs.length < 1){
-            return '';
-        }
-
-        if(!this.canGroup() || this.isUpdating){
-            return Ext.grid.GroupingView.superclass.doRender.apply(
-                    this, arguments);
-        }
-
-        var groupField = this.getGroupField(),
-            colIndex = this.cm.findColumnIndex(groupField),
-            g,
-            gstyle = 'width:' + this.getTotalWidth() + ';',
-            cfg = this.cm.config[colIndex],
-            groupRenderer = cfg.groupRenderer || cfg.renderer,
-            prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : '',
-            groups = [],
-            curGroup, i, len, gid;
-
-        for(i = 0, len = rs.length; i < len; i++){
-            var rowIndex = startRow + i,
-                r = rs[i],
-                gvalue = r.data[groupField];
-
-                g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
-            if(!curGroup || curGroup.group != g){
-                gid = this.constructId(gvalue, groupField, colIndex);
-                // if state is defined use it, however state is in terms of expanded
-                // so negate it, otherwise use the default.
-                this.state[gid] = !(Ext.isDefined(this.state[gid]) ? !this.state[gid] : this.startCollapsed);
-                curGroup = {
-                    group: g,
-                    gvalue: gvalue,
-                    text: prefix + g,
-                    groupId: gid,
-                    startRow: rowIndex,
-                    rs: [r],
-                    cls: this.state[gid] ? '' : 'x-grid-group-collapsed',
-                    style: gstyle
-                };
-                groups.push(curGroup);
-            }else{
-                curGroup.rs.push(r);
-            }
-            r._groupId = gid;
-        }
-
-        var buf = [];
-        for(i = 0, len = groups.length; i < len; i++){
-            g = groups[i];
-            this.doGroupStart(buf, g, cs, ds, colCount);
-            buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
-                    this, cs, g.rs, ds, g.startRow, colCount, stripe);
-
-            this.doGroupEnd(buf, g, cs, ds, colCount);
-        }
-        return buf.join('');
-    },
-
-    /**
-     * Dynamically tries to determine the groupId of a specific value
-     * @param {String} value
-     * @return {String} The group id
-     */
-    getGroupId : function(value){
-        var field = this.getGroupField();
-        return this.constructId(value, field, this.cm.findColumnIndex(field));
-    },
-
-    // private
-    constructId : function(value, field, idx){
-        var cfg = this.cm.config[idx],
-            groupRenderer = cfg.groupRenderer || cfg.renderer,
-            val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);
-
-        return this.getPrefix(field) + Ext.util.Format.htmlEncode(val);
-    },
-
-    // private
-    canGroup  : function(){
-        return this.enableGrouping && !!this.getGroupField();
-    },
-
-    // private
-    getPrefix: function(field){
-        return this.grid.getGridEl().id + '-gp-' + field + '-';
-    },
-
-    // private
-    doGroupStart : function(buf, g, cs, ds, colCount){
-        buf[buf.length] = this.startGroup.apply(g);
-    },
-
-    // private
-    doGroupEnd : function(buf, g, cs, ds, colCount){
-        buf[buf.length] = this.endGroup;
-    },
-
-    // private
-    getRows : function(){
-        if(!this.canGroup()){
-            return Ext.grid.GroupingView.superclass.getRows.call(this);
-        }
-        var r = [];
-        var g, gs = this.getGroups();
-        for(var i = 0, len = gs.length; i < len; i++){
-            g = gs[i].childNodes[1].childNodes;
-            for(var j = 0, jlen = g.length; j < jlen; j++){
-                r[r.length] = g[j];
-            }
-        }
-        return r;
-    },
-
-    // private
-    updateGroupWidths : function(){
-        if(!this.canGroup() || !this.hasRows()){
-            return;
-        }
-        var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.getScrollOffset()) +'px';
-        var gs = this.getGroups();
-        for(var i = 0, len = gs.length; i < len; i++){
-            gs[i].firstChild.style.width = tw;
-        }
-    },
-
-    // private
-    onColumnWidthUpdated : function(col, w, tw){
-        Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw);
-        this.updateGroupWidths();
-    },
-
-    // private
-    onAllColumnWidthsUpdated : function(ws, tw){
-        Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw);
-        this.updateGroupWidths();
-    },
-
-    // private
-    onColumnHiddenUpdated : function(col, hidden, tw){
-        Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw);
-        this.updateGroupWidths();
-    },
-
-    // private
-    onLayout : function(){
-        this.updateGroupWidths();
-    },
-
-    // private
-    onBeforeRowSelect : function(sm, rowIndex){
-        this.toggleRowIndex(rowIndex, true);
-    }
-});
-// private
-Ext.grid.GroupingView.GROUP_ID = 1000;
\ No newline at end of file
+/**
+ * @class Ext.grid.GroupingView
+ * @extends Ext.grid.GridView
+ * Adds the ability for single level grouping to the grid. A {@link Ext.data.GroupingStore GroupingStore}
+ * must be used to enable grouping.  Some grouping characteristics may also be configured at the
+ * {@link Ext.grid.Column Column level}
      
+ * 
    • {@link Ext.grid.Column#emptyGroupText emptyGroupText}
      • 
+ * 
    • {@link Ext.grid.Column#groupable groupable}
      • 
+ * 
    • {@link Ext.grid.Column#groupName groupName}
      • 
+ * 
    • {@link Ext.grid.Column#groupRender groupRender}
      • 
+ * 
    
+ * 
    Sample usage:
    
+ * 
    
+var grid = new Ext.grid.GridPanel({
+    // A groupingStore is required for a GroupingView
+    store: new {@link Ext.data.GroupingStore}({
+        autoDestroy: true,
+        reader: reader,
+        data: xg.dummyData,
+        sortInfo: {field: 'company', direction: 'ASC'},
+        {@link Ext.data.GroupingStore#groupOnSort groupOnSort}: true,
+        {@link Ext.data.GroupingStore#remoteGroup remoteGroup}: true,
+        {@link Ext.data.GroupingStore#groupField groupField}: 'industry'
+    }),
+    colModel: new {@link Ext.grid.ColumnModel}({
+        columns:[
+            {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
+            // {@link Ext.grid.Column#groupable groupable}, {@link Ext.grid.Column#groupName groupName}, {@link Ext.grid.Column#groupRender groupRender} are also configurable at column level
+            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', {@link Ext.grid.Column#groupable groupable}: false},
+            {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
+            {header: 'Industry', dataIndex: 'industry'},
+            {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+        ],
+        defaults: {
+            sortable: true,
+            menuDisabled: false,
+            width: 20
+        }
+    }),
+
+    view: new Ext.grid.GroupingView({
+        {@link Ext.grid.GridView#forceFit forceFit}: true,
+        // custom grouping text template to display the number of items per group
+        {@link #groupTextTpl}: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
+    }),
+
+    frame:true,
+    width: 700,
+    height: 450,
+    collapsible: true,
+    animCollapse: false,
+    title: 'Grouping Example',
+    iconCls: 'icon-grid',
+    renderTo: document.body
+});
+ * 
    
+ * @constructor
+ * @param {Object} config
+ */
+Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, {
+
+    /**
+     * @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column
+     * (defaults to 'Group By This Field').
+     */
+    groupByText : 'Group By This Field',
+    /**
+     * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
+     * (defaults to 'Show in Groups').
+     */
+    showGroupsText : 'Show in Groups',
+    /**
+     * @cfg {Boolean} hideGroupedColumn true to hide the column that is currently grouped (defaults to false)
+     */
+    hideGroupedColumn : false,
+    /**
+     * @cfg {Boolean} showGroupName If true will display a prefix plus a ': ' before the group field value
+     * in the group header line.  The prefix will consist of the {@link Ext.grid.Column#groupName groupName}
+     * (or the configured {@link Ext.grid.Column#header header} if not provided) configured in the
+     * {@link Ext.grid.Column} for each set of grouped rows (defaults to true).
+     */
+    showGroupName : true,
+    /**
+     * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false)
+     */
+    startCollapsed : false,
+    /**
+     * @cfg {Boolean} enableGrouping false to disable grouping functionality (defaults to true)
+     */
+    enableGrouping : true,
+    /**
+     * @cfg {Boolean} enableGroupingMenu true to enable the grouping control in the column menu (defaults to true)
+     */
+    enableGroupingMenu : true,
+    /**
+     * @cfg {Boolean} enableNoGroups true to allow the user to turn off grouping (defaults to true)
+     */
+    enableNoGroups : true,
+    /**
+     * @cfg {String} emptyGroupText The text to display when there is an empty group value (defaults to '(None)').
+     * May also be specified per column, see {@link Ext.grid.Column}.{@link Ext.grid.Column#emptyGroupText emptyGroupText}.
+     */
+    emptyGroupText : '(None)',
+    /**
+     * @cfg {Boolean} ignoreAdd true to skip refreshing the view when new rows are added (defaults to false)
+     */
+    ignoreAdd : false,
+    /**
+     * @cfg {String} groupTextTpl The template used to render the group header (defaults to '{text}').
+     * This is used to format an object which contains the following properties:
+     * 
      
+     * 
    • group : String
      The rendered value of the group field.
+     * By default this is the unchanged value of the group field. If a {@link Ext.grid.Column#groupRenderer groupRenderer}
+     * is specified, it is the result of a call to that function.
      • 
+     * 
    • gvalue : Object
      The raw value of the group field.
      • 
+     * 
    • text : String
      The configured header (as described in {@link #showGroupName})
+     * if {@link #showGroupName} is true) plus the rendered group field value.
      • 
+     * 
    • groupId : String
      A unique, generated ID which is applied to the
+     * View Element which contains the group.
      • 
+     * 
    • startRow : Number
      The row index of the Record which caused group change.
      • 
+     * 
    • rs : Array
      Contains a single element: The Record providing the data
+     * for the row which caused group change.
      • 
+     * 
    • cls : String
      The generated class name string to apply to the group header Element.
      • 
+     * 
    • style : String
      The inline style rules to apply to the group header Element.
      • 
+     * 
    
+     * See {@link Ext.XTemplate} for information on how to format data using a template. Possible usage:
    
+var grid = new Ext.grid.GridPanel({
+    ...
+    view: new Ext.grid.GroupingView({
+        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
+    }),
+});
+     * 
    
+     */
+    groupTextTpl : '{text}',
+
+    /**
+     * @cfg {String} groupMode Indicates how to construct the group identifier. 'value' constructs the id using
+     * raw value, 'display' constructs the id using the rendered value. Defaults to 'value'.
+     */
+    groupMode: 'value',
+
+    /**
+     * @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
+     * each column.
+     */
+
+    // private
+    gidSeed : 1000,
+
+    // private
+    initTemplates : function(){
+        Ext.grid.GroupingView.superclass.initTemplates.call(this);
+        this.state = {};
+
+        var sm = this.grid.getSelectionModel();
+        sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
+                this.onBeforeRowSelect, this);
+
+        if(!this.startGroup){
+            this.startGroup = new Ext.XTemplate(
+                '
    ',
+                    '
    ', this.groupTextTpl ,'
    ',
+                    '
    '
+            );
+        }
+        this.startGroup.compile();
+        if(!this.endGroup){
+            this.endGroup = '
    ';
+        }
+
+        this.endGroup = '';
+    },
+
+    // private
+    findGroup : function(el){
+        return Ext.fly(el).up('.x-grid-group', this.mainBody.dom);
+    },
+
+    // private
+    getGroups : function(){
+        return this.hasRows() ? this.mainBody.dom.childNodes : [];
+    },
+
+    // private
+    onAdd : function(){
+        if(this.canGroup() && !this.ignoreAdd){
+            var ss = this.getScrollState();
+            this.refresh();
+            this.restoreScroll(ss);
+        }else if(!this.canGroup()){
+            Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
+        }
+    },
+
+    // private
+    onRemove : function(ds, record, index, isUpdate){
+        Ext.grid.GroupingView.superclass.onRemove.apply(this, arguments);
+        var g = document.getElementById(record._groupId);
+        if(g && g.childNodes[1].childNodes.length < 1){
+            Ext.removeNode(g);
+        }
+        this.applyEmptyText();
+    },
+
+    // private
+    refreshRow : function(record){
+        if(this.ds.getCount()==1){
+            this.refresh();
+        }else{
+            this.isUpdating = true;
+            Ext.grid.GroupingView.superclass.refreshRow.apply(this, arguments);
+            this.isUpdating = false;
+        }
+    },
+
+    // private
+    beforeMenuShow : function(){
+        var item, items = this.hmenu.items, disabled = this.cm.config[this.hdCtxIndex].groupable === false;
+        if((item = items.get('groupBy'))){
+            item.setDisabled(disabled);
+        }
+        if((item = items.get('showGroups'))){
+            item.setDisabled(disabled);
+            item.setChecked(this.enableGrouping, true);
+        }
+    },
+
+    // private
+    renderUI : function(){
+        Ext.grid.GroupingView.superclass.renderUI.call(this);
+        this.mainBody.on('mousedown', this.interceptMouse, this);
+
+        if(this.enableGroupingMenu && this.hmenu){
+            this.hmenu.add('-',{
+                itemId:'groupBy',
+                text: this.groupByText,
+                handler: this.onGroupByClick,
+                scope: this,
+                iconCls:'x-group-by-icon'
+            });
+            if(this.enableNoGroups){
+                this.hmenu.add({
+                    itemId:'showGroups',
+                    text: this.showGroupsText,
+                    checked: true,
+                    checkHandler: this.onShowGroupsClick,
+                    scope: this
+                });
+            }
+            this.hmenu.on('beforeshow', this.beforeMenuShow, this);
+        }
+    },
+
+    processEvent: function(name, e){
+        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
+        if(hd){
+            // group value is at the end of the string
+            var field = this.getGroupField(),
+                prefix = this.getPrefix(field),
+                groupValue = hd.id.substring(prefix.length);
+
+            // remove trailing '-hd'
+            groupValue = groupValue.substr(0, groupValue.length - 3);
+            if(groupValue){
+                this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
+            }
+        }
+
+    },
+
+    // private
+    onGroupByClick : function(){
+        this.enableGrouping = true;
+        this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
+        this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState());
+        this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
+        this.refresh();
+    },
+
+    // private
+    onShowGroupsClick : function(mi, checked){
+    this.enableGrouping = checked;
+        if(checked){
+            this.onGroupByClick();
+        }else{
+            this.grid.store.clearGrouping();
+            this.grid.fireEvent('groupchange', this, null);
+        }
+    },
+
+    /**
+     * Toggle the group that contains the specific row.
+     * @param {Number} rowIndex The row inside the group
+     * @param {Boolean} expanded (optional)
+     */
+    toggleRowIndex : function(rowIndex, expanded){
+        if(!this.canGroup()){
+            return;
+        }
+        var row = this.getRow(rowIndex);
+        if(row){
+            this.toggleGroup(this.findGroup(row), expanded);
+        }
+    },
+
+    /**
+     * Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
+     * @param {String} groupId The groupId assigned to the group (see getGroupId)
+     * @param {Boolean} expanded (optional)
+     */
+    toggleGroup : function(group, expanded){
+        var gel = Ext.get(group);
+        expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
+        if(this.state[gel.id] !== expanded){
+            this.grid.stopEditing(true);
+            this.state[gel.id] = expanded;
+            gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
+        }
+    },
+
+    /**
+     * Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
+     * @param {Boolean} expanded (optional)
+     */
+    toggleAllGroups : function(expanded){
+        var groups = this.getGroups();
+        for(var i = 0, len = groups.length; i < len; i++){
+            this.toggleGroup(groups[i], expanded);
+        }
+    },
+
+    /**
+     * Expands all grouped rows.
+     */
+    expandAllGroups : function(){
+        this.toggleAllGroups(true);
+    },
+
+    /**
+     * Collapses all grouped rows.
+     */
+    collapseAllGroups : function(){
+        this.toggleAllGroups(false);
+    },
+
+    // private
+    interceptMouse : function(e){
+        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
+        if(hd){
+            e.stopEvent();
+            this.toggleGroup(hd.parentNode);
+        }
+    },
+
+    // private
+    getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
+        var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
+        if(g === '' || g === ' '){
+            g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
+        }
+        return g;
+    },
+
+    // private
+    getGroupField : function(){
+        return this.grid.store.getGroupState();
+    },
+
+    // private
+    afterRender : function(){
+        if(!this.ds || !this.cm){
+            return;
+        }
+        Ext.grid.GroupingView.superclass.afterRender.call(this);
+        if(this.grid.deferRowRender){
+            this.updateGroupWidths();
+        }
+    },
+
+    // private
+    renderRows : function(){
+        var groupField = this.getGroupField();
+        var eg = !!groupField;
+        // if they turned off grouping and the last grouped field is hidden
+        if(this.hideGroupedColumn) {
+            var colIndex = this.cm.findColumnIndex(groupField),
+                hasLastGroupField = Ext.isDefined(this.lastGroupField);
+            if(!eg && hasLastGroupField){
+                this.mainBody.update('');
+                this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
+                delete this.lastGroupField;
+            }else if (eg && !hasLastGroupField){
+                this.lastGroupField = groupField;
+                this.cm.setHidden(colIndex, true);
+            }else if (eg && hasLastGroupField && groupField !== this.lastGroupField) {
+                this.mainBody.update('');
+                var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
+                this.cm.setHidden(oldIndex, false);
+                this.lastGroupField = groupField;
+                this.cm.setHidden(colIndex, true);
+            }
+        }
+        return Ext.grid.GroupingView.superclass.renderRows.apply(
+                    this, arguments);
+    },
+
+    // private
+    doRender : function(cs, rs, ds, startRow, colCount, stripe){
+        if(rs.length < 1){
+            return '';
+        }
+
+        if(!this.canGroup() || this.isUpdating){
+            return Ext.grid.GroupingView.superclass.doRender.apply(
+                    this, arguments);
+        }
+
+        var groupField = this.getGroupField(),
+            colIndex = this.cm.findColumnIndex(groupField),
+            g,
+            gstyle = 'width:' + this.getTotalWidth() + ';',
+            cfg = this.cm.config[colIndex],
+            groupRenderer = cfg.groupRenderer || cfg.renderer,
+            prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : '',
+            groups = [],
+            curGroup, i, len, gid;
+
+        for(i = 0, len = rs.length; i < len; i++){
+            var rowIndex = startRow + i,
+                r = rs[i],
+                gvalue = r.data[groupField];
+
+                g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
+            if(!curGroup || curGroup.group != g){
+                gid = this.constructId(gvalue, groupField, colIndex);
+                // if state is defined use it, however state is in terms of expanded
+                // so negate it, otherwise use the default.
+                this.state[gid] = !(Ext.isDefined(this.state[gid]) ? !this.state[gid] : this.startCollapsed);
+                curGroup = {
+                    group: g,
+                    gvalue: gvalue,
+                    text: prefix + g,
+                    groupId: gid,
+                    startRow: rowIndex,
+                    rs: [r],
+                    cls: this.state[gid] ? '' : 'x-grid-group-collapsed',
+                    style: gstyle
+                };
+                groups.push(curGroup);
+            }else{
+                curGroup.rs.push(r);
+            }
+            r._groupId = gid;
+        }
+
+        var buf = [];
+        for(i = 0, len = groups.length; i < len; i++){
+            g = groups[i];
+            this.doGroupStart(buf, g, cs, ds, colCount);
+            buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
+                    this, cs, g.rs, ds, g.startRow, colCount, stripe);
+
+            this.doGroupEnd(buf, g, cs, ds, colCount);
+        }
+        return buf.join('');
+    },
+
+    /**
+     * Dynamically tries to determine the groupId of a specific value
+     * @param {String} value
+     * @return {String} The group id
+     */
+    getGroupId : function(value){
+        var field = this.getGroupField();
+        return this.constructId(value, field, this.cm.findColumnIndex(field));
+    },
+
+    // private
+    constructId : function(value, field, idx){
+        var cfg = this.cm.config[idx],
+            groupRenderer = cfg.groupRenderer || cfg.renderer,
+            val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);
+
+        return this.getPrefix(field) + Ext.util.Format.htmlEncode(val);
+    },
+
+    // private
+    canGroup  : function(){
+        return this.enableGrouping && !!this.getGroupField();
+    },
+
+    // private
+    getPrefix: function(field){
+        return this.grid.getGridEl().id + '-gp-' + field + '-';
+    },
+
+    // private
+    doGroupStart : function(buf, g, cs, ds, colCount){
+        buf[buf.length] = this.startGroup.apply(g);
+    },
+
+    // private
+    doGroupEnd : function(buf, g, cs, ds, colCount){
+        buf[buf.length] = this.endGroup;
+    },
+
+    // private
+    getRows : function(){
+        if(!this.canGroup()){
+            return Ext.grid.GroupingView.superclass.getRows.call(this);
+        }
+        var r = [];
+        var g, gs = this.getGroups();
+        for(var i = 0, len = gs.length; i < len; i++){
+            g = gs[i].childNodes[1].childNodes;
+            for(var j = 0, jlen = g.length; j < jlen; j++){
+                r[r.length] = g[j];
+            }
+        }
+        return r;
+    },
+
+    // private
+    updateGroupWidths : function(){
+        if(!this.canGroup() || !this.hasRows()){
+            return;
+        }
+        var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.getScrollOffset()) +'px';
+        var gs = this.getGroups();
+        for(var i = 0, len = gs.length; i < len; i++){
+            gs[i].firstChild.style.width = tw;
+        }
+    },
+
+    // private
+    onColumnWidthUpdated : function(col, w, tw){
+        Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw);
+        this.updateGroupWidths();
+    },
+
+    // private
+    onAllColumnWidthsUpdated : function(ws, tw){
+        Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw);
+        this.updateGroupWidths();
+    },
+
+    // private
+    onColumnHiddenUpdated : function(col, hidden, tw){
+        Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw);
+        this.updateGroupWidths();
+    },
+
+    // private
+    onLayout : function(){
+        this.updateGroupWidths();
+    },
+
+    // private
+    onBeforeRowSelect : function(sm, rowIndex){
+        this.toggleRowIndex(rowIndex, true);
+    }
+});
+// private
+Ext.grid.GroupingView.GROUP_ID = 1000;