Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Ext-more.html
index 071fd04..630b892 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @class Ext
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext'>/**
+</span> * @class Ext
+
+ The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.&lt;/p&gt;
+ Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided
+ as direct properties of the Ext namespace.
+
+ Also many frequently used methods from other classes are provided as shortcuts within the Ext namespace.
+ For example {@link Ext#getCmp Ext.getCmp} aliases {@link Ext.ComponentManager#get Ext.ComponentManager.get}.
+
+ Many applications are initiated with {@link Ext#onReady Ext.onReady} which is called once the DOM is ready.
+ This ensures all scripts have been loaded, preventing dependency issues. For example
+
+     Ext.onReady(function(){
+         new Ext.Component({
+             renderTo: document.body,
+             html: 'DOM ready!'
+         });
+     });
+
+For more information about how to use the Ext classes, see
+
+- &lt;a href=&quot;http://www.sencha.com/learn/&quot;&gt;The Learning Center&lt;/a&gt;
+- &lt;a href=&quot;http://www.sencha.com/learn/Ext_FAQ&quot;&gt;The FAQ&lt;/a&gt;
+- &lt;a href=&quot;http://www.sencha.com/forum/&quot;&gt;The forums&lt;/a&gt;
+
+ * @singleton
+ * @markdown
  */
+Ext.apply(Ext, {
+    userAgent: navigator.userAgent.toLowerCase(),
+    cache: {},
+    idSeed: 1000,
+    windowId: 'ext-window',
+    documentId: 'ext-document',
 
-Ext.ns("Ext.grid", "Ext.list", "Ext.dd", "Ext.tree", "Ext.form", "Ext.menu",
-       "Ext.state", "Ext.layout", "Ext.app", "Ext.ux", "Ext.chart", "Ext.direct");
-    <div id="prop-Ext-ux"></div>/**
-     * Namespace alloted for extensions to the framework.
-     * @property ux
-     * @type Object
+<span id='Ext-property-isReady'>    /**
+</span>     * True when the document is fully initialized and ready for action
+     * @type Boolean
      */
+    isReady: false,
 
-Ext.apply(Ext, function(){
-    var E = Ext,
-        idSeed = 0,
-        scrollWidth = null;
-
-    return {
-        <div id="prop-Ext-emptyFn"></div>/**
-        * A reusable empty function
-        * @property
-        * @type Function
-        */
-        emptyFn : function(){},
-
-        <div id="prop-Ext-BLANK_IMAGE_URL"></div>/**
-         * URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images.
-         * In older versions of IE, this defaults to "http://extjs.com/s.gif" and you should change this to a URL on your server.
-         * For other browsers it uses an inline data URL.
+<span id='Ext-property-enableGarbageCollector'>    /**
+</span>     * True to automatically uncache orphaned Ext.Elements periodically
+     * @type Boolean
+     */
+    enableGarbageCollector: true,
+
+<span id='Ext-property-enableListenerCollection'>    /**
+</span>     * True to automatically purge event listeners during garbageCollection.
+     * @type Boolean
+     */
+    enableListenerCollection: true,
+
+<span id='Ext-method-id'>    /**
+</span>     * Generates unique ids. If the element already has an id, it is unchanged
+     * @param {HTMLElement/Ext.Element} el (optional) The element to generate an id for
+     * @param {String} prefix (optional) Id prefix (defaults &quot;ext-gen&quot;)
+     * @return {String} The generated Id.
+     */
+    id: function(el, prefix) {
+        var me = this,
+            sandboxPrefix = '';
+        el = Ext.getDom(el, true) || {};
+        if (el === document) {
+            el.id = me.documentId;
+        }
+        else if (el === window) {
+            el.id = me.windowId;
+        }
+        if (!el.id) {
+            if (me.isSandboxed) {
+                if (!me.uniqueGlobalNamespace) {
+                    me.getUniqueGlobalNamespace();
+                }
+                sandboxPrefix = me.uniqueGlobalNamespace + '-';
+            }
+            el.id = sandboxPrefix + (prefix || &quot;ext-gen&quot;) + (++Ext.idSeed);
+        }
+        return el.id;
+    },
+
+<span id='Ext-method-getBody'>    /**
+</span>     * Returns the current document body as an {@link Ext.Element}.
+     * @return Ext.Element The document body
+     */
+    getBody: function() {
+        return Ext.get(document.body || false);
+    },
+
+<span id='Ext-method-getHead'>    /**
+</span>     * Returns the current document head as an {@link Ext.Element}.
+     * @return Ext.Element The document head
+     * @method
+     */
+    getHead: function() {
+        var head;
+
+        return function() {
+            if (head == undefined) {
+                head = Ext.get(document.getElementsByTagName(&quot;head&quot;)[0]);
+            }
+
+            return head;
+        };
+    }(),
+
+<span id='Ext-method-getDoc'>    /**
+</span>     * Returns the current HTML document object as an {@link Ext.Element}.
+     * @return Ext.Element The document
+     */
+    getDoc: function() {
+        return Ext.get(document);
+    },
+
+<span id='Ext-method-getCmp'>    /**
+</span>     * This is shorthand reference to {@link Ext.ComponentManager#get}.
+     * Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
+     * @param {String} id The component {@link Ext.Component#id id}
+     * @return Ext.Component The Component, &lt;tt&gt;undefined&lt;/tt&gt; if not found, or &lt;tt&gt;null&lt;/tt&gt; if a
+     * Class was found.
+    */
+    getCmp: function(id) {
+        return Ext.ComponentManager.get(id);
+    },
+
+<span id='Ext-method-getOrientation'>    /**
+</span>     * Returns the current orientation of the mobile device
+     * @return {String} Either 'portrait' or 'landscape'
+     */
+    getOrientation: function() {
+        return window.innerHeight &gt; window.innerWidth ? 'portrait' : 'landscape';
+    },
+
+<span id='Ext-method-destroy'>    /**
+</span>     * Attempts to destroy any objects passed to it by removing all event listeners, removing them from the
+     * DOM (if applicable) and calling their destroy functions (if available).  This method is primarily
+     * intended for arguments of type {@link Ext.Element} and {@link Ext.Component}, but any subclass of
+     * {@link Ext.util.Observable} can be passed in.  Any number of elements and/or components can be
+     * passed into this function in a single call as separate arguments.
+     * @param {Ext.Element/Ext.Component/Ext.Element[]/Ext.Component[]...} arg1
+     * An {@link Ext.Element}, {@link Ext.Component}, or an Array of either of these to destroy
+     */
+    destroy: function() {
+        var ln = arguments.length,
+        i, arg;
+
+        for (i = 0; i &lt; ln; i++) {
+            arg = arguments[i];
+            if (arg) {
+                if (Ext.isArray(arg)) {
+                    this.destroy.apply(this, arg);
+                }
+                else if (Ext.isFunction(arg.destroy)) {
+                    arg.destroy();
+                }
+                else if (arg.dom) {
+                    arg.remove();
+                }
+            }
+        }
+    },
+
+<span id='Ext-method-callback'>    /**
+</span>     * Execute a callback function in a particular scope. If no function is passed the call is ignored.
+     *
+     * For example, these lines are equivalent:
+     *
+     *     Ext.callback(myFunc, this, [arg1, arg2]);
+     *     Ext.isFunction(myFunc) &amp;&amp; myFunc.apply(this, [arg1, arg2]);
+     *
+     * @param {Function} callback The callback to execute
+     * @param {Object} scope (optional) The scope to execute in
+     * @param {Array} args (optional) The arguments to pass to the function
+     * @param {Number} delay (optional) Pass a number to delay the call by a number of milliseconds.
+     */
+    callback: function(callback, scope, args, delay){
+        if(Ext.isFunction(callback)){
+            args = args || [];
+            scope = scope || window;
+            if (delay) {
+                Ext.defer(callback, delay, scope, args);
+            } else {
+                callback.apply(scope, args);
+            }
+        }
+    },
+
+<span id='Ext-method-htmlEncode'>    /**
+</span>     * Convert certain characters (&amp;, &lt;, &gt;, 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 Ext.String.htmlEncode(value);
+    },
+
+<span id='Ext-method-htmlDecode'>    /**
+</span>     * Convert certain characters (&amp;, &lt;, &gt;, and ') from their HTML character equivalents.
+     * @param {String} value The string to decode
+     * @return {String} The decoded text
+     */
+    htmlDecode : function(value) {
+         return Ext.String.htmlDecode(value);
+    },
+
+<span id='Ext-method-urlAppend'>    /**
+</span>     * Appends content to the query string of a URL, handling logic for whether to place
+     * a question mark or ampersand.
+     * @param {String} url The URL to append to.
+     * @param {String} s The content to append to the URL.
+     * @return (String) The resulting URL
+     */
+    urlAppend : function(url, s) {
+        if (!Ext.isEmpty(s)) {
+            return url + (url.indexOf('?') === -1 ? '?' : '&amp;') + s;
+        }
+        return url;
+    }
+});
+
+
+Ext.ns = Ext.namespace;
+
+// for old browsers
+window.undefined = window.undefined;
+
+<span id='Ext'>/**
+</span> * @class Ext
+ * Ext core utilities and functions.
+ * @singleton
+ */
+(function(){
+/*
+FF 3.6      - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.17) Gecko/20110420 Firefox/3.6.17
+FF 4.0.1    - Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
+FF 5.0      - Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
+
+IE6         - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;)
+IE7         - Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SV1;)
+IE8         - Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
+IE9         - Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
+
+Chrome 11   - Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.60 Safari/534.24
+
+Safari 5    - Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
+
+Opera 11.11 - Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
+*/
+    var check = function(regex){
+            return regex.test(Ext.userAgent);
+        },
+        isStrict = document.compatMode == &quot;CSS1Compat&quot;,
+        version = function (is, regex) {
+            var m;
+            return (is &amp;&amp; (m = regex.exec(Ext.userAgent))) ? parseFloat(m[1]) : 0;
+        },
+        docMode = document.documentMode,
+        isOpera = check(/opera/),
+        isOpera10_5 = isOpera &amp;&amp; check(/version\/10\.5/),
+        isChrome = check(/\bchrome\b/),
+        isWebKit = check(/webkit/),
+        isSafari = !isChrome &amp;&amp; check(/safari/),
+        isSafari2 = isSafari &amp;&amp; check(/applewebkit\/4/), // unique to Safari 2
+        isSafari3 = isSafari &amp;&amp; check(/version\/3/),
+        isSafari4 = isSafari &amp;&amp; check(/version\/4/),
+        isSafari5 = isSafari &amp;&amp; check(/version\/5/),
+        isIE = !isOpera &amp;&amp; check(/msie/),
+        isIE7 = isIE &amp;&amp; (check(/msie 7/) || docMode == 7),
+        isIE8 = isIE &amp;&amp; (check(/msie 8/) &amp;&amp; docMode != 7 &amp;&amp; docMode != 9 || docMode == 8),
+        isIE9 = isIE &amp;&amp; (check(/msie 9/) &amp;&amp; docMode != 7 &amp;&amp; docMode != 8 || docMode == 9),
+        isIE6 = isIE &amp;&amp; check(/msie 6/),
+        isGecko = !isWebKit &amp;&amp; check(/gecko/),
+        isGecko3 = isGecko &amp;&amp; check(/rv:1\.9/),
+        isGecko4 = isGecko &amp;&amp; check(/rv:2\.0/),
+        isGecko5 = isGecko &amp;&amp; check(/rv:5\./),
+        isFF3_0 = isGecko3 &amp;&amp; check(/rv:1\.9\.0/),
+        isFF3_5 = isGecko3 &amp;&amp; check(/rv:1\.9\.1/),
+        isFF3_6 = isGecko3 &amp;&amp; check(/rv:1\.9\.2/),
+        isWindows = check(/windows|win32/),
+        isMac = check(/macintosh|mac os x/),
+        isLinux = check(/linux/),
+        scrollbarSize = null,
+        chromeVersion = version(true, /\bchrome\/(\d+\.\d+)/),
+        firefoxVersion = version(true, /\bfirefox\/(\d+\.\d+)/),
+        ieVersion = version(isIE, /msie (\d+\.\d+)/),
+        operaVersion = version(isOpera, /version\/(\d+\.\d+)/),
+        safariVersion = version(isSafari, /version\/(\d+\.\d+)/),
+        webKitVersion = version(isWebKit, /webkit\/(\d+\.\d+)/),
+        isSecure = /^https/i.test(window.location.protocol);
+
+    // remove css image flicker
+    try {
+        document.execCommand(&quot;BackgroundImageCache&quot;, false, true);
+    } catch(e) {}
+
+    //&lt;debug&gt;
+    function dumpObject (object) {
+        var member, members = [];
+
+        // Cannot use Ext.encode since it can recurse endlessly (if we're lucky)
+        // ...and the data could be prettier!
+        Ext.Object.each(object, function (name, value) {
+            if (typeof(value) === &quot;function&quot;) {
+                return;
+            }
+
+            if (!Ext.isDefined(value) || value === null ||
+                    Ext.isDate(value) ||
+                    Ext.isString(value) || (typeof(value) == &quot;number&quot;) ||
+                    Ext.isBoolean(value)) {
+                member = Ext.encode(value);
+            } else if (Ext.isArray(value)) {
+                member = '[ ]';
+            } else if (Ext.isObject(value)) {
+                member = '{ }';
+            } else {
+                member = 'undefined';
+            }
+            members.push(Ext.encode(name) + ': ' + member);
+        });
+
+        if (members.length) {
+            return ' \nData: {\n  ' + members.join(',\n  ') + '\n}';
+        }
+        return '';
+    }
+
+    function log (message) {
+        var options, dump,
+            con = Ext.global.console,
+            level = 'log',
+            indent = log.indent || 0,
+            stack;
+
+        log.indent = indent;
+
+        if (!Ext.isString(message)) {
+            options = message;
+            message = options.msg || '';
+            level = options.level || level;
+            dump = options.dump;
+            stack = options.stack;
+
+            if (options.indent) {
+                ++log.indent;
+            } else if (options.outdent) {
+                log.indent = indent = Math.max(indent - 1, 0);
+            }
+
+            if (dump &amp;&amp; !(con &amp;&amp; con.dir)) {
+                message += dumpObject(dump);
+                dump = null;
+            }
+        }
+
+        if (arguments.length &gt; 1) {
+            message += Array.prototype.slice.call(arguments, 1).join('');
+        }
+
+        message = indent ? Ext.String.repeat('   ', indent) + message : message;
+        // w/o console, all messages are equal, so munge the level into the message:
+        if (level != 'log') {
+            message = '[' + level.charAt(0).toUpperCase() + '] ' + message;
+        }
+
+        // Not obvious, but 'console' comes and goes when Firebug is turned on/off, so
+        // an early test may fail either direction if Firebug is toggled.
+        //
+        if (con) { // if (Firebug-like console)
+            if (con[level]) {
+                con[level](message);
+            } else {
+                con.log(message);
+            }
+
+            if (dump) {
+                con.dir(dump);
+            }
+
+            if (stack &amp;&amp; con.trace) {
+                // Firebug's console.error() includes a trace already...
+                if (!con.firebug || level != 'error') {
+                    con.trace();
+                }
+            }
+        } else {
+            if (Ext.isOpera) {
+                opera.postError(message);
+            } else {
+                var out = log.out,
+                    max = log.max;
+
+                if (out.length &gt;= max) {
+                    // this formula allows out.max to change (via debugger), where the
+                    // more obvious &quot;max/4&quot; would not quite be the same
+                    Ext.Array.erase(out, 0, out.length - 3 * Math.floor(max / 4)); // keep newest 75%
+                }
+
+                out.push(message);
+            }
+        }
+
+        // Mostly informational, but the Ext.Error notifier uses them:
+        ++log.count;
+        ++log.counters[level];
+    }
+
+    log.count = 0;
+    log.counters = { error: 0, warn: 0, info: 0, log: 0 };
+    log.out = [];
+    log.max = 250;
+    log.show = function () {
+        window.open('','extlog').document.write([
+            '&lt;html&gt;&lt;head&gt;&lt;script type=&quot;text/javascript&quot;&gt;',
+                'var lastCount = 0;',
+                'function update () {',
+                    'var ext = window.opener.Ext,',
+                        'extlog = ext &amp;&amp; ext.log;',
+                    'if (extlog &amp;&amp; extlog.out &amp;&amp; lastCount != extlog.count) {',
+                        'lastCount = extlog.count;',
+                        'var s = &quot;&lt;tt&gt;&quot; + extlog.out.join(&quot;&lt;br&gt;&quot;).replace(/[ ]/g, &quot;&amp;nbsp;&quot;) + &quot;&lt;/tt&gt;&quot;;',
+                        'document.body.innerHTML = s;',
+                    '}',
+                    'setTimeout(update, 1000);',
+                '}',
+                'setTimeout(update, 1000);',
+            '&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;'].join(''));
+    };
+    //&lt;/debug&gt;
+
+    Ext.setVersion('extjs', '4.0.7');
+    Ext.apply(Ext, {
+<span id='Ext-property-SSL_SECURE_URL'>        /**
+</span>         * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
+         * the IE insecure content warning (&lt;tt&gt;'about:blank'&lt;/tt&gt;, except for IE in secure mode, which is &lt;tt&gt;'javascript:&quot;&quot;'&lt;/tt&gt;).
          * @type String
          */
-        BLANK_IMAGE_URL : Ext.isIE6 || Ext.isIE7 || Ext.isAir ?
-                            'http:/' + '/www.extjs.com/s.gif' :
-                            'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+        SSL_SECURE_URL : isSecure &amp;&amp; isIE ? 'javascript:&quot;&quot;' : 'about:blank',
 
-        extendX : function(supr, fn){
-            return Ext.extend(supr, fn(supr.prototype));
-        },
+<span id='Ext-property-enableFx'>        /**
+</span>         * True if the {@link Ext.fx.Anim} Class is available
+         * @type Boolean
+         * @property enableFx
+         */
+
+<span id='Ext-property-scopeResetCSS'>        /**
+</span>         * True to scope the reset CSS to be just applied to Ext components. Note that this wraps root containers
+         * with an additional element. Also remember that when you turn on this option, you have to use ext-all-scoped {
+         * unless you use the bootstrap.js to load your javascript, in which case it will be handled for you.
+         * @type Boolean
+         */
+        scopeResetCSS : Ext.buildSettings.scopeResetCSS,
 
-        <div id="method-Ext-getDoc"></div>/**
-         * Returns the current HTML document object as an {@link Ext.Element}.
-         * @return Ext.Element The document
+<span id='Ext-property-enableNestedListenerRemoval'>        /**
+</span>         * EXPERIMENTAL - True to cascade listener removal to child elements when an element is removed.
+         * Currently not optimized for performance.
+         * @type Boolean
+         */
+        enableNestedListenerRemoval : false,
+
+<span id='Ext-property-USE_NATIVE_JSON'>        /**
+</span>         * Indicates whether to use native browser parsing for JSON methods.
+         * This option is ignored if the browser does not support native JSON methods.
+         * &lt;b&gt;Note: Native JSON methods will not work with objects that have functions.
+         * Also, property names must be quoted, otherwise the data will not parse.&lt;/b&gt; (Defaults to false)
+         * @type Boolean
          */
-        getDoc : function(){
-            return Ext.get(document);
+        USE_NATIVE_JSON : false,
+
+<span id='Ext-method-getDom'>        /**
+</span>         * Return the dom node for the passed String (id), dom node, or Ext.Element.
+         * Optional 'strict' flag is needed for IE since it can return 'name' and
+         * 'id' elements by using getElementById.
+         * Here are some examples:
+         * &lt;pre&gt;&lt;code&gt;
+// gets dom node based on id
+var elDom = Ext.getDom('elId');
+// gets dom node based on the dom node
+var elDom1 = Ext.getDom(elDom);
+
+// If we don&amp;#39;t know if we are working with an
+// Ext.Element or a dom node use Ext.getDom
+function(el){
+    var dom = Ext.getDom(el);
+    // do something with the dom node
+}
+         * &lt;/code&gt;&lt;/pre&gt;
+         * &lt;b&gt;Note&lt;/b&gt;: the dom node to be found actually needs to exist (be rendered, etc)
+         * when this method is called to be successful.
+         * @param {String/HTMLElement/Ext.Element} el
+         * @return HTMLElement
+         */
+        getDom : function(el, strict) {
+            if (!el || !document) {
+                return null;
+            }
+            if (el.dom) {
+                return el.dom;
+            } else {
+                if (typeof el == 'string') {
+                    var e = document.getElementById(el);
+                    // IE returns elements with the 'name' and 'id' attribute.
+                    // we do a strict check to return the element with only the id attribute
+                    if (e &amp;&amp; isIE &amp;&amp; strict) {
+                        if (el == e.getAttribute('id')) {
+                            return e;
+                        } else {
+                            return null;
+                        }
+                    }
+                    return e;
+                } else {
+                    return el;
+                }
+            }
         },
 
-        <div id="method-Ext-num"></div>/**
-         * Utility method for validating that a value is numeric, returning the specified default value if it is not.
-         * @param {Mixed} value Should be a number, but any type will be handled appropriately
-         * @param {Number} defaultValue The value to return if the original value is non-numeric
-         * @return {Number} Value, if numeric, else defaultValue
+<span id='Ext-method-removeNode'>        /**
+</span>         * Removes a DOM node from the document.
+         * &lt;p&gt;Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
+         * All DOM event listeners are removed from this element. If {@link Ext#enableNestedListenerRemoval Ext.enableNestedListenerRemoval} is
+         * &lt;code&gt;true&lt;/code&gt;, then DOM event listeners are also removed from all child nodes. The body node
+         * will be ignored if passed in.&lt;/p&gt;
+         * @param {HTMLElement} node The node to remove
+         * @method
          */
-        num : function(v, defaultValue){
-            v = Number(Ext.isEmpty(v) || Ext.isArray(v) || typeof v == 'boolean' || (typeof v == 'string' && v.trim().length == 0) ? NaN : v);
-            return isNaN(v) ? defaultValue : v;
+        removeNode : isIE6 || isIE7 ? function() {
+            var d;
+            return function(n){
+                if(n &amp;&amp; n.tagName != 'BODY'){
+                    (Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n) : Ext.EventManager.removeAll(n);
+                    d = d || document.createElement('div');
+                    d.appendChild(n);
+                    d.innerHTML = '';
+                    delete Ext.cache[n.id];
+                }
+            };
+        }() : function(n) {
+            if (n &amp;&amp; n.parentNode &amp;&amp; n.tagName != 'BODY') {
+                (Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n) : Ext.EventManager.removeAll(n);
+                n.parentNode.removeChild(n);
+                delete Ext.cache[n.id];
+            }
         },
 
-        <div id="method-Ext-value"></div>/**
-         * <p>Utility method for returning a default value if the passed value is empty.</p>
-         * <p>The value is deemed to be empty if it is<div class="mdetail-params"><ul>
-         * <li>null</li>
-         * <li>undefined</li>
-         * <li>an empty array</li>
-         * <li>a zero length string (Unless the <tt>allowBlank</tt> parameter is <tt>true</tt>)</li>
-         * </ul></div>
-         * @param {Mixed} value The value to test
-         * @param {Mixed} defaultValue The value to return if the original value is empty
+        isStrict: isStrict,
+
+        isIEQuirks: isIE &amp;&amp; !isStrict,
+
+<span id='Ext-property-isOpera'>        /**
+</span>         * True if the detected browser is Opera.
+         * @type Boolean
+         */
+        isOpera : isOpera,
+
+<span id='Ext-property-isOpera10_5'>        /**
+</span>         * True if the detected browser is Opera 10.5x.
+         * @type Boolean
+         */
+        isOpera10_5 : isOpera10_5,
+
+<span id='Ext-property-isWebKit'>        /**
+</span>         * True if the detected browser uses WebKit.
+         * @type Boolean
+         */
+        isWebKit : isWebKit,
+
+<span id='Ext-property-isChrome'>        /**
+</span>         * True if the detected browser is Chrome.
+         * @type Boolean
+         */
+        isChrome : isChrome,
+
+<span id='Ext-property-isSafari'>        /**
+</span>         * True if the detected browser is Safari.
+         * @type Boolean
+         */
+        isSafari : isSafari,
+
+<span id='Ext-property-isSafari3'>        /**
+</span>         * True if the detected browser is Safari 3.x.
+         * @type Boolean
+         */
+        isSafari3 : isSafari3,
+
+<span id='Ext-property-isSafari4'>        /**
+</span>         * True if the detected browser is Safari 4.x.
+         * @type Boolean
+         */
+        isSafari4 : isSafari4,
+
+<span id='Ext-property-isSafari5'>        /**
+</span>         * True if the detected browser is Safari 5.x.
+         * @type Boolean
+         */
+        isSafari5 : isSafari5,
+
+<span id='Ext-property-isSafari2'>        /**
+</span>         * True if the detected browser is Safari 2.x.
+         * @type Boolean
+         */
+        isSafari2 : isSafari2,
+
+<span id='Ext-property-isIE'>        /**
+</span>         * True if the detected browser is Internet Explorer.
+         * @type Boolean
+         */
+        isIE : isIE,
+
+<span id='Ext-property-isIE6'>        /**
+</span>         * True if the detected browser is Internet Explorer 6.x.
+         * @type Boolean
+         */
+        isIE6 : isIE6,
+
+<span id='Ext-property-isIE7'>        /**
+</span>         * True if the detected browser is Internet Explorer 7.x.
+         * @type Boolean
+         */
+        isIE7 : isIE7,
+
+<span id='Ext-property-isIE8'>        /**
+</span>         * True if the detected browser is Internet Explorer 8.x.
+         * @type Boolean
+         */
+        isIE8 : isIE8,
+
+<span id='Ext-property-isIE9'>        /**
+</span>         * True if the detected browser is Internet Explorer 9.x.
+         * @type Boolean
+         */
+        isIE9 : isIE9,
+
+<span id='Ext-property-isGecko'>        /**
+</span>         * True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
+         * @type Boolean
+         */
+        isGecko : isGecko,
+
+<span id='Ext-property-isGecko3'>        /**
+</span>         * True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).
+         * @type Boolean
+         */
+        isGecko3 : isGecko3,
+
+<span id='Ext-property-isGecko4'>        /**
+</span>         * True if the detected browser uses a Gecko 2.0+ layout engine (e.g. Firefox 4.x).
+         * @type Boolean
+         */
+        isGecko4 : isGecko4,
+
+<span id='Ext-property-isGecko5'>        /**
+</span>         * True if the detected browser uses a Gecko 5.0+ layout engine (e.g. Firefox 5.x).
+         * @type Boolean
+         */
+        isGecko5 : isGecko5,
+
+<span id='Ext-property-isFF3_0'>        /**
+</span>         * True if the detected browser uses FireFox 3.0
+         * @type Boolean
+         */
+        isFF3_0 : isFF3_0,
+
+<span id='Ext-property-isFF3_5'>        /**
+</span>         * True if the detected browser uses FireFox 3.5
+         * @type Boolean
+         */
+        isFF3_5 : isFF3_5,
+
+<span id='Ext-property-isFF3_6'>        /**
+</span>         * True if the detected browser uses FireFox 3.6
+         * @type Boolean
+         */
+        isFF3_6 : isFF3_6,
+
+<span id='Ext-property-isFF4'>        /**
+</span>         * True if the detected browser uses FireFox 4
+         * @type Boolean
+         */
+        isFF4 : 4 &lt;= firefoxVersion &amp;&amp; firefoxVersion &lt; 5,
+
+<span id='Ext-property-isFF5'>        /**
+</span>         * True if the detected browser uses FireFox 5
+         * @type Boolean
+         */
+        isFF5 : 5 &lt;= firefoxVersion &amp;&amp; firefoxVersion &lt; 6,
+
+<span id='Ext-property-isLinux'>        /**
+</span>         * True if the detected platform is Linux.
+         * @type Boolean
+         */
+        isLinux : isLinux,
+
+<span id='Ext-property-isWindows'>        /**
+</span>         * True if the detected platform is Windows.
+         * @type Boolean
+         */
+        isWindows : isWindows,
+
+<span id='Ext-property-isMac'>        /**
+</span>         * True if the detected platform is Mac OS.
+         * @type Boolean
+         */
+        isMac : isMac,
+
+<span id='Ext-property-chromeVersion'>        /**
+</span>         * The current version of Chrome (0 if the browser is not Chrome).
+         * @type Number
+         */
+        chromeVersion: chromeVersion,
+
+<span id='Ext-property-firefoxVersion'>        /**
+</span>         * The current version of Firefox (0 if the browser is not Firefox).
+         * @type Number
+         */
+        firefoxVersion: firefoxVersion,
+
+<span id='Ext-property-ieVersion'>        /**
+</span>         * The current version of IE (0 if the browser is not IE). This does not account
+         * for the documentMode of the current page, which is factored into {@link #isIE7},
+         * {@link #isIE8} and {@link #isIE9}. Thus this is not always true:
+         *
+         *      Ext.isIE8 == (Ext.ieVersion == 8)
+         *
+         * @type Number
+         * @markdown
+         */
+        ieVersion: ieVersion,
+
+<span id='Ext-property-operaVersion'>        /**
+</span>         * The current version of Opera (0 if the browser is not Opera).
+         * @type Number
+         */
+        operaVersion: operaVersion,
+
+<span id='Ext-property-safariVersion'>        /**
+</span>         * The current version of Safari (0 if the browser is not Safari).
+         * @type Number
+         */
+        safariVersion: safariVersion,
+
+<span id='Ext-property-webKitVersion'>        /**
+</span>         * The current version of WebKit (0 if the browser does not use WebKit).
+         * @type Number
+         */
+        webKitVersion: webKitVersion,
+
+<span id='Ext-property-isSecure'>        /**
+</span>         * True if the page is running over SSL
+         * @type Boolean
+         */
+        isSecure: isSecure,
+
+<span id='Ext-property-BLANK_IMAGE_URL'>        /**
+</span>         * URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images.
+         * In older versions of IE, this defaults to &quot;http://sencha.com/s.gif&quot; and you should change this to a URL on your server.
+         * For other browsers it uses an inline data URL.
+         * @type String
+         */
+        BLANK_IMAGE_URL : (isIE6 || isIE7) ? '/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+
+<span id='Ext-method-value'>        /**
+</span>         * &lt;p&gt;Utility method for returning a default value if the passed value is empty.&lt;/p&gt;
+         * &lt;p&gt;The value is deemed to be empty if it is&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * &lt;li&gt;null&lt;/li&gt;
+         * &lt;li&gt;undefined&lt;/li&gt;
+         * &lt;li&gt;an empty array&lt;/li&gt;
+         * &lt;li&gt;a zero length string (Unless the &lt;tt&gt;allowBlank&lt;/tt&gt; parameter is &lt;tt&gt;true&lt;/tt&gt;)&lt;/li&gt;
+         * &lt;/ul&gt;&lt;/div&gt;
+         * @param {Object} value The value to test
+         * @param {Object} defaultValue The value to return if the original value is empty
          * @param {Boolean} allowBlank (optional) true to allow zero length strings to qualify as non-empty (defaults to false)
-         * @return {Mixed} value, if non-empty, else defaultValue
+         * @return {Object} value, if non-empty, else defaultValue
+         * @deprecated 4.0.0 Use {@link Ext#valueFrom} instead
          */
         value : function(v, defaultValue, allowBlank){
             return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
         },
 
-        <div id="method-Ext-escapeRe"></div>/**
-         * Escapes the passed string for use in a regular expression
+<span id='Ext-method-escapeRe'>        /**
+</span>         * Escapes the passed string for use in a regular expression
          * @param {String} str
          * @return {String}
+         * @deprecated 4.0.0 Use {@link Ext.String#escapeRegex} instead
          */
         escapeRe : function(s) {
-            return s.replace(/([-.*+?^${}()|[\]\/\\])/g, "\\$1");
-        },
-
-        sequence : function(o, name, fn, scope){
-            o[name] = o[name].createSequence(fn, scope);
+            return s.replace(/([-.*+?^${}()|[\]\/\\])/g, &quot;\\$1&quot;);
         },
 
-        <div id="method-Ext-addBehaviors"></div>/**
-         * Applies event listeners to elements by selectors when the document is ready.
-         * The event name is specified with an <tt>&#64;</tt> suffix.
-         * <pre><code>
+<span id='Ext-method-addBehaviors'>        /**
+</span>         * Applies event listeners to elements by selectors when the document is ready.
+         * The event name is specified with an &lt;tt&gt;&amp;#64;&lt;/tt&gt; suffix.
+         * &lt;pre&gt;&lt;code&gt;
 Ext.addBehaviors({
     // add a listener for click on all anchors in element with id foo
-    '#foo a&#64;click' : function(e, t){
+    '#foo a&amp;#64;click' : function(e, t){
         // do something
     },
 
-    // add the same listener to multiple selectors (separated by comma BEFORE the &#64;)
-    '#foo a, #bar span.some-class&#64;mouseover' : function(){
+    // add the same listener to multiple selectors (separated by comma BEFORE the &amp;#64;)
+    '#foo a, #bar span.some-class&amp;#64;mouseover' : function(){
         // do something
     }
 });
-         * </code></pre>
+         * &lt;/code&gt;&lt;/pre&gt;
          * @param {Object} obj The list of behaviors to apply
          */
         addBehaviors : function(o){
@@ -141,269 +846,192 @@ Ext.addBehaviors({
             }
         },
 
-        <div id="method-Ext-getScrollBarWidth"></div>/**
-         * Utility method for getting the width of the browser scrollbar. This can differ depending on
+<span id='Ext-method-getScrollbarSize'>        /**
+</span>         * Returns the size of the browser scrollbars. This can differ depending on
          * operating system settings, such as the theme or font size.
          * @param {Boolean} force (optional) true to force a recalculation of the value.
-         * @return {Number} The width of the scrollbar.
+         * @return {Object} An object containing the width of a vertical scrollbar and the
+         * height of a horizontal scrollbar.
          */
-        getScrollBarWidth: function(force){
+        getScrollbarSize: function (force) {
             if(!Ext.isReady){
                 return 0;
             }
 
-            if(force === true || scrollWidth === null){
+            if(force === true || scrollbarSize === null){
+                // BrowserBug: IE9
+                // When IE9 positions an element offscreen via offsets, the offsetWidth is
+                // inaccurately reported. For IE9 only, we render on screen before removing.
+                var cssClass = Ext.isIE9 ? '' : Ext.baseCSSPrefix + 'hide-offsets',
                     // Append our div, do our calculation and then remove it
-                var div = Ext.getBody().createChild('<div class="x-hide-offsets" style="width:100px;height:50px;overflow:hidden;"><div style="height:200px;"></div></div>'),
-                    child = div.child('div', true);
-                var w1 = child.offsetWidth;
+                    div = Ext.getBody().createChild('&lt;div class=&quot;' + cssClass + '&quot; style=&quot;width:100px;height:50px;overflow:hidden;&quot;&gt;&lt;div style=&quot;height:200px;&quot;&gt;&lt;/div&gt;&lt;/div&gt;'),
+                    child = div.child('div', true),
+                    w1 = child.offsetWidth;
+
                 div.setStyle('overflow', (Ext.isWebKit || Ext.isGecko) ? 'auto' : 'scroll');
-                var w2 = child.offsetWidth;
+
+                var w2 = child.offsetWidth, width = w1 - w2;
                 div.remove();
-                // Need to add 2 to ensure we leave enough space
-                scrollWidth = w1 - w2 + 2;
+
+                // We assume width == height for now. TODO: is this always true?
+                scrollbarSize = { width: width, height: width };
             }
-            return scrollWidth;
-        },
 
+            return scrollbarSize;
+        },
 
-        // deprecated
-        combine : function(){
-            var as = arguments, l = as.length, r = [];
-            for(var i = 0; i < l; i++){
-                var a = as[i];
-                if(Ext.isArray(a)){
-                    r = r.concat(a);
-                }else if(a.length !== undefined && !a.substr){
-                    r = r.concat(Array.prototype.slice.call(a, 0));
-                }else{
-                    r.push(a);
-                }
-            }
-            return r;
+<span id='Ext-method-getScrollBarWidth'>        /**
+</span>         * Utility method for getting the width of the browser's vertical scrollbar. This
+         * can differ depending on operating system settings, such as the theme or font size.
+         *
+         * This method is deprected in favor of {@link #getScrollbarSize}.
+         *
+         * @param {Boolean} force (optional) true to force a recalculation of the value.
+         * @return {Number} The width of a vertical scrollbar.
+         * @deprecated
+         */
+        getScrollBarWidth: function(force){
+            var size = Ext.getScrollbarSize(force);
+            return size.width + 2; // legacy fudge factor
         },
 
-        <div id="method-Ext-copyTo"></div>/**
-         * Copies a set of named properties fom the source object to the destination object.
-         * <p>example:<pre><code>
-ImageComponent = Ext.extend(Ext.BoxComponent, {
-    initComponent: function() {
-        this.autoEl = { tag: 'img' };
-        MyComponent.superclass.initComponent.apply(this, arguments);
-        this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
-    }
-});
-         * </code></pre>
+<span id='Ext-method-copyTo'>        /**
+</span>         * Copies a set of named properties fom the source object to the destination object.
+         *
+         * Example:
+         *
+         *     ImageComponent = Ext.extend(Ext.Component, {
+         *         initComponent: function() {
+         *             this.autoEl = { tag: 'img' };
+         *             MyComponent.superclass.initComponent.apply(this, arguments);
+         *             this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
+         *         }
+         *     });
+         *
+         * Important note: To borrow class prototype methods, use {@link Ext.Base#borrow} instead.
+         *
          * @param {Object} dest The destination object.
          * @param {Object} source The source object.
-         * @param {Array/String} names Either an Array of property names, or a comma-delimited list
+         * @param {String/String[]} names Either an Array of property names, or a comma-delimited list
          * of property names to copy.
+         * @param {Boolean} usePrototypeKeys (Optional) Defaults to false. Pass true to copy keys off of the prototype as well as the instance.
          * @return {Object} The modified object.
-        */
-        copyTo : function(dest, source, names){
+         */
+        copyTo : function(dest, source, names, usePrototypeKeys){
             if(typeof names == 'string'){
                 names = names.split(/[,;\s]/);
             }
             Ext.each(names, function(name){
-                if(source.hasOwnProperty(name)){
+                if(usePrototypeKeys || source.hasOwnProperty(name)){
                     dest[name] = source[name];
                 }
             }, this);
             return dest;
         },
 
-        <div id="method-Ext-destroy"></div>/**
-         * Attempts to destroy any objects passed to it by removing all event listeners, removing them from the
-         * DOM (if applicable) and calling their destroy functions (if available).  This method is primarily
-         * intended for arguments of type {@link Ext.Element} and {@link Ext.Component}, but any subclass of
-         * {@link Ext.util.Observable} can be passed in.  Any number of elements and/or components can be
-         * passed into this function in a single call as separate arguments.
-         * @param {Mixed} arg1 An {@link Ext.Element}, {@link Ext.Component}, or an Array of either of these to destroy
-         * @param {Mixed} arg2 (optional)
-         * @param {Mixed} etc... (optional)
-         */
-        destroy : function(){
-            Ext.each(arguments, function(arg){
-                if(arg){
-                    if(Ext.isArray(arg)){
-                        this.destroy.apply(this, arg);
-                    }else if(typeof arg.destroy == 'function'){
-                        arg.destroy();
-                    }else if(arg.dom){
-                        arg.remove();
-                    }
-                }
-            }, this);
-        },
-
-        <div id="method-Ext-destroyMembers"></div>/**
-         * Attempts to destroy and then remove a set of named properties of the passed object.
+<span id='Ext-method-destroyMembers'>        /**
+</span>         * Attempts to destroy and then remove a set of named properties of the passed object.
          * @param {Object} o The object (most likely a Component) who's properties you wish to destroy.
-         * @param {Mixed} arg1 The name of the property to destroy and remove from the object.
-         * @param {Mixed} etc... More property names to destroy and remove.
+         * @param {String...} args One or more names of the properties to destroy and remove from the object.
          */
-        destroyMembers : function(o, arg1, arg2, etc){
-            for(var i = 1, a = arguments, len = a.length; i < len; i++) {
+        destroyMembers : function(o){
+            for (var i = 1, a = arguments, len = a.length; i &lt; len; i++) {
                 Ext.destroy(o[a[i]]);
                 delete o[a[i]];
             }
         },
 
-        <div id="method-Ext-clean"></div>/**
-         * Creates a copy of the passed Array with falsy values removed.
-         * @param {Array/NodeList} arr The Array from which to remove falsy values.
-         * @return {Array} The new, compressed Array.
-         */
-        clean : function(arr){
-            var ret = [];
-            Ext.each(arr, function(v){
-                if(!!v){
-                    ret.push(v);
-                }
-            });
-            return ret;
-        },
-
-        <div id="method-Ext-unique"></div>/**
-         * Creates a copy of the passed Array, filtered to contain only unique values.
-         * @param {Array} arr The Array to filter
-         * @return {Array} The new Array containing unique values.
-         */
-        unique : function(arr){
-            var ret = [],
-                collect = {};
-
-            Ext.each(arr, function(v) {
-                if(!collect[v]){
-                    ret.push(v);
-                }
-                collect[v] = true;
-            });
-            return ret;
-        },
-
-        <div id="method-Ext-flatten"></div>/**
-         * Recursively flattens into 1-d Array. Injects Arrays inline.
-         * @param {Array} arr The array to flatten
-         * @return {Array} The new, flattened array.
-         */
-        flatten : function(arr){
-            var worker = [];
-            function rFlatten(a) {
-                Ext.each(a, function(v) {
-                    if(Ext.isArray(v)){
-                        rFlatten(v);
-                    }else{
-                        worker.push(v);
-                    }
-                });
-                return worker;
-            }
-            return rFlatten(arr);
-        },
-
-        <div id="method-Ext-min"></div>/**
-         * Returns the minimum value in the Array.
-         * @param {Array|NodeList} arr The Array from which to select the minimum value.
-         * @param {Function} comp (optional) a function to perform the comparision which determines minimization.
-         *                   If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
-         * @return {Object} The minimum value in the Array.
-         */
-        min : function(arr, comp){
-            var ret = arr[0];
-            comp = comp || function(a,b){ return a < b ? -1 : 1; };
-            Ext.each(arr, function(v) {
-                ret = comp(ret, v) == -1 ? ret : v;
-            });
-            return ret;
-        },
-
-        <div id="method-Ext-max"></div>/**
-         * Returns the maximum value in the Array
-         * @param {Array|NodeList} arr The Array from which to select the maximum value.
-         * @param {Function} comp (optional) a function to perform the comparision which determines maximization.
-         *                   If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
-         * @return {Object} The maximum value in the Array.
-         */
-        max : function(arr, comp){
-            var ret = arr[0];
-            comp = comp || function(a,b){ return a > b ? 1 : -1; };
-            Ext.each(arr, function(v) {
-                ret = comp(ret, v) == 1 ? ret : v;
-            });
-            return ret;
-        },
-
-        <div id="method-Ext-mean"></div>/**
-         * Calculates the mean of the Array
-         * @param {Array} arr The Array to calculate the mean value of.
-         * @return {Number} The mean.
+<span id='Ext-property-log'>        /**
+</span>         * Logs a message. If a console is present it will be used. On Opera, the method
+         * &quot;opera.postError&quot; is called. In other cases, the message is logged to an array
+         * &quot;Ext.log.out&quot;. An attached debugger can watch this array and view the log. The
+         * log buffer is limited to a maximum of &quot;Ext.log.max&quot; entries (defaults to 250).
+         * The `Ext.log.out` array can also be written to a popup window by entering the
+         * following in the URL bar (a &quot;bookmarklet&quot;):
+         *
+         *    javascript:void(Ext.log.show());
+         *
+         * If additional parameters are passed, they are joined and appended to the message.
+         * A technique for tracing entry and exit of a function is this:
+         *
+         *      function foo () {
+         *          Ext.log({ indent: 1 }, '&gt;&gt; foo');
+         *
+         *          // log statements in here or methods called from here will be indented
+         *          // by one step
+         *
+         *          Ext.log({ outdent: 1 }, '&lt;&lt; foo');
+         *      }
+         *
+         * This method does nothing in a release build.
+         *
+         * @param {String/Object} message The message to log or an options object with any
+         * of the following properties:
+         *
+         *  - `msg`: The message to log (required).
+         *  - `level`: One of: &quot;error&quot;, &quot;warn&quot;, &quot;info&quot; or &quot;log&quot; (the default is &quot;log&quot;).
+         *  - `dump`: An object to dump to the log as part of the message.
+         *  - `stack`: True to include a stack trace in the log.
+         *  - `indent`: Cause subsequent log statements to be indented one step.
+         *  - `outdent`: Cause this and following statements to be one step less indented.
+         * @markdown
          */
-        mean : function(arr){
-           return arr.length > 0 ? Ext.sum(arr) / arr.length : undefined;
-        },
-
-        <div id="method-Ext-sum"></div>/**
-         * Calculates the sum of the Array
-         * @param {Array} arr The Array to calculate the sum value of.
-         * @return {Number} The sum.
-         */
-        sum : function(arr){
-           var ret = 0;
-           Ext.each(arr, function(v) {
-               ret += v;
-           });
-           return ret;
-        },
+        log :
+            //&lt;debug&gt;
+            log ||
+            //&lt;/debug&gt;
+            Ext.emptyFn,
 
-        <div id="method-Ext-partition"></div>/**
-         * Partitions the set into two sets: a true set and a false set.
+<span id='Ext-method-partition'>        /**
+</span>         * Partitions the set into two sets: a true set and a false set.
          * Example:
          * Example2:
-         * <pre><code>
+         * &lt;pre&gt;&lt;code&gt;
 // Example 1:
 Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
 
 // Example 2:
 Ext.partition(
-    Ext.query("p"),
+    Ext.query(&quot;p&quot;),
     function(val){
-        return val.className == "class1"
+        return val.className == &quot;class1&quot;
     }
 );
-// true are those paragraph elements with a className of "class1",
+// true are those paragraph elements with a className of &quot;class1&quot;,
 // false set are those that do not have that className.
-         * </code></pre>
-         * @param {Array|NodeList} arr The array to partition
+         * &lt;/code&gt;&lt;/pre&gt;
+         * @param {Array/NodeList} arr The array to partition
          * @param {Function} truth (optional) a function to determine truth.  If this is omitted the element
-         *                   itself must be able to be evaluated for its truthfulness.
-         * @return {Array} [true<Array>,false<Array>]
+         * itself must be able to be evaluated for its truthfulness.
+         * @return {Array} [array of truish values, array of falsy values]
+         * @deprecated 4.0.0 Will be removed in the next major version
          */
         partition : function(arr, truth){
             var ret = [[],[]];
             Ext.each(arr, function(v, i, a) {
-                ret[ (truth && truth(v, i, a)) || (!truth && v) ? 0 : 1].push(v);
+                ret[ (truth &amp;&amp; truth(v, i, a)) || (!truth &amp;&amp; v) ? 0 : 1].push(v);
             });
             return ret;
         },
 
-        <div id="method-Ext-invoke"></div>/**
-         * Invokes a method on each item in an Array.
-         * <pre><code>
+<span id='Ext-method-invoke'>        /**
+</span>         * Invokes a method on each item in an Array.
+         * &lt;pre&gt;&lt;code&gt;
 // Example:
-Ext.invoke(Ext.query("p"), "getAttribute", "id");
-// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
-         * </code></pre>
-         * @param {Array|NodeList} arr The Array of items to invoke the method on.
+Ext.invoke(Ext.query(&quot;p&quot;), &quot;getAttribute&quot;, &quot;id&quot;);
+// [el1.getAttribute(&quot;id&quot;), el2.getAttribute(&quot;id&quot;), ..., elN.getAttribute(&quot;id&quot;)]
+         * &lt;/code&gt;&lt;/pre&gt;
+         * @param {Array/NodeList} arr The Array of items to invoke the method on.
          * @param {String} methodName The method name to invoke.
-         * @param {...*} args Arguments to send into the method invocation.
+         * @param {Object...} args Arguments to send into the method invocation.
          * @return {Array} The results of invoking the method on each item in the array.
+         * @deprecated 4.0.0 Will be removed in the next major version
          */
         invoke : function(arr, methodName){
             var ret = [],
                 args = Array.prototype.slice.call(arguments, 2);
             Ext.each(arr, function(v,i) {
-                if (v && typeof v[methodName] == 'function') {
+                if (v &amp;&amp; typeof v[methodName] == 'function') {
                     ret.push(v[methodName].apply(v, args));
                 } else {
                     ret.push(undefined);
@@ -412,56 +1040,39 @@ Ext.invoke(Ext.query("p"), "getAttribute", "id");
             return ret;
         },
 
-        <div id="method-Ext-pluck"></div>/**
-         * Plucks the value of a property from each item in the Array
-         * <pre><code>
-// Example:
-Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
-         * </code></pre>
-         * @param {Array|NodeList} arr The Array of items to pluck the value from.
-         * @param {String} prop The property name to pluck from each element.
-         * @return {Array} The value from each item in the Array.
-         */
-        pluck : function(arr, prop){
-            var ret = [];
-            Ext.each(arr, function(v) {
-                ret.push( v[prop] );
-            });
-            return ret;
-        },
-
-        <div id="method-Ext-zip"></div>/**
-         * <p>Zips N sets together.</p>
-         * <pre><code>
+<span id='Ext-method-zip'>        /**
+</span>         * &lt;p&gt;Zips N sets together.&lt;/p&gt;
+         * &lt;pre&gt;&lt;code&gt;
 // Example 1:
 Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
 // Example 2:
 Ext.zip(
-    [ "+", "-", "+"],
+    [ &quot;+&quot;, &quot;-&quot;, &quot;+&quot;],
     [  12,  10,  22],
     [  43,  15,  96],
     function(a, b, c){
-        return "$" + a + "" + b + "." + c
+        return &quot;$&quot; + a + &quot;&quot; + b + &quot;.&quot; + c
     }
-); // ["$+12.43", "$-10.15", "$+22.96"]
-         * </code></pre>
-         * @param {Arrays|NodeLists} arr This argument may be repeated. Array(s) to contribute values.
+); // [&quot;$+12.43&quot;, &quot;$-10.15&quot;, &quot;$+22.96&quot;]
+         * &lt;/code&gt;&lt;/pre&gt;
+         * @param {Array/NodeList...} arr This argument may be repeated. Array(s) to contribute values.
          * @param {Function} zipper (optional) The last item in the argument list. This will drive how the items are zipped together.
          * @return {Array} The zipped set.
+         * @deprecated 4.0.0 Will be removed in the next major version
          */
         zip : function(){
             var parts = Ext.partition(arguments, function( val ){ return typeof val != 'function'; }),
                 arrs = parts[0],
                 fn = parts[1][0],
-                len = Ext.max(Ext.pluck(arrs, "length")),
+                len = Ext.max(Ext.pluck(arrs, &quot;length&quot;)),
                 ret = [];
 
-            for (var i = 0; i < len; i++) {
+            for (var i = 0; i &lt; len; i++) {
                 ret[i] = [];
                 if(fn){
                     ret[i] = fn.apply(fn, Ext.pluck(arrs, i));
                 }else{
-                    for (var j = 0, aLen = arrs.length; j < aLen; j++){
+                    for (var j = 0, aLen = arrs.length; j &lt; aLen; j++){
                         ret[i].push( arrs[j][i] );
                     }
                 }
@@ -469,231 +1080,51 @@ Ext.zip(
             return ret;
         },
 
-        <div id="method-Ext-getCmp"></div>/**
-         * This is shorthand reference to {@link Ext.ComponentMgr#get}.
-         * Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
-         * @param {String} id The component {@link Ext.Component#id id}
-         * @return Ext.Component The Component, <tt>undefined</tt> if not found, or <tt>null</tt> if a
-         * Class was found.
-        */
-        getCmp : function(id){
-            return Ext.ComponentMgr.get(id);
-        },
-
-        <div id="prop-Ext-useShims"></div>/**
-         * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
-         * you may want to set this to true.
-         * @type Boolean
-         */
-        useShims: E.isIE6 || (E.isMac && E.isGecko2),
-
-        // inpired by a similar function in mootools library
-        <div id="method-Ext-type"></div>/**
-         * Returns the type of object that is passed in. If the object passed in is null or undefined it
-         * return false otherwise it returns one of the following values:<div class="mdetail-params"><ul>
-         * <li><b>string</b>: If the object passed is a string</li>
-         * <li><b>number</b>: If the object passed is a number</li>
-         * <li><b>boolean</b>: If the object passed is a boolean value</li>
-         * <li><b>date</b>: If the object passed is a Date object</li>
-         * <li><b>function</b>: If the object passed is a function reference</li>
-         * <li><b>object</b>: If the object passed is an object</li>
-         * <li><b>array</b>: If the object passed is an array</li>
-         * <li><b>regexp</b>: If the object passed is a regular expression</li>
-         * <li><b>element</b>: If the object passed is a DOM Element</li>
-         * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
-         * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
-         * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
-         * </ul></div>
-         * @param {Mixed} object
-         * @return {String}
+<span id='Ext-method-toSentence'>        /**
+</span>         * Turns an array into a sentence, joined by a specified connector - e.g.:
+         * Ext.toSentence(['Adama', 'Tigh', 'Roslin']); //'Adama, Tigh and Roslin'
+         * Ext.toSentence(['Adama', 'Tigh', 'Roslin'], 'or'); //'Adama, Tigh or Roslin'
+         * @param {String[]} items The array to create a sentence from
+         * @param {String} connector The string to use to connect the last two words. Usually 'and' or 'or' - defaults to 'and'.
+         * @return {String} The sentence string
+         * @deprecated 4.0.0 Will be removed in the next major version
          */
-        type : function(o){
-            if(o === undefined || o === null){
-                return false;
-            }
-            if(o.htmlElement){
-                return 'element';
-            }
-            var t = typeof o;
-            if(t == 'object' && o.nodeName) {
-                switch(o.nodeType) {
-                    case 1: return 'element';
-                    case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
-                }
-            }
-            if(t == 'object' || t == 'function') {
-                switch(o.constructor) {
-                    case Array: return 'array';
-                    case RegExp: return 'regexp';
-                    case Date: return 'date';
-                }
-                if(typeof o.length == 'number' && typeof o.item == 'function') {
-                    return 'nodelist';
-                }
-            }
-            return t;
-        },
+        toSentence: function(items, connector) {
+            var length = items.length;
 
-        intercept : function(o, name, fn, scope){
-            o[name] = o[name].createInterceptor(fn, scope);
-        },
+            if (length &lt;= 1) {
+                return items[0];
+            } else {
+                var head = items.slice(0, length - 1),
+                    tail = items[length - 1];
 
-        // internal
-        callback : function(cb, scope, args, delay){
-            if(typeof cb == 'function'){
-                if(delay){
-                    cb.defer(delay, scope, args || []);
-                }else{
-                    cb.apply(scope, args || []);
-                }
+                return Ext.util.Format.format(&quot;{0} {1} {2}&quot;, head.join(&quot;, &quot;), connector || 'and', tail);
             }
-        }
-    };
-}());
-
-/**
- * @class Function
- * These functions are available on every Function object (any JavaScript function).
- */
-Ext.apply(Function.prototype, {
-    <div id="method-Function-createSequence"></div>/**
-     * Create a combined function call sequence of the original function + the passed function.
-     * The resulting function returns the results of the original function.
-     * The passed fcn is called with the parameters of the original function. Example usage:
-     * <pre><code>
-var sayHi = function(name){
-    alert('Hi, ' + name);
-}
-
-sayHi('Fred'); // alerts "Hi, Fred"
-
-var sayGoodbye = sayHi.createSequence(function(name){
-    alert('Bye, ' + name);
-});
-
-sayGoodbye('Fred'); // both alerts show
-</code></pre>
-     * @param {Function} fcn The function to sequence
-     * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the passed function is executed.
-     * <b>If omitted, defaults to the scope in which the original function is called or the browser window.</b>
-     * @return {Function} The new function
-     */
-    createSequence : function(fcn, scope){
-        var method = this;
-        return (typeof fcn != 'function') ?
-                this :
-                function(){
-                    var retval = method.apply(this || window, arguments);
-                    fcn.apply(scope || this || window, arguments);
-                    return retval;
-                };
-    }
-});
-
-
-/**
- * @class String
- * These functions are available as static methods on the JavaScript String object.
- */
-Ext.applyIf(String, {
-
-    <div id="method-String-escape"></div>/**
-     * Escapes the passed string for ' and \
-     * @param {String} string The string to escape
-     * @return {String} The escaped string
-     * @static
-     */
-    escape : function(string) {
-        return string.replace(/('|\\)/g, "\\$1");
-    },
+        },
 
-    <div id="method-String-leftPad"></div>/**
-     * Pads the left side of a string with a specified character.  This is especially useful
-     * for normalizing number and date strings.  Example usage:
-     * <pre><code>
-var s = String.leftPad('123', 5, '0');
-// s now contains the string: '00123'
-     * </code></pre>
-     * @param {String} string The original string
-     * @param {Number} size The total length of the output string
-     * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
-     * @return {String} The padded string
-     * @static
-     */
-    leftPad : function (val, size, ch) {
-        var result = String(val);
-        if(!ch) {
-            ch = " ";
-        }
-        while (result.length < size) {
-            result = ch + result;
-        }
-        return result;
-    }
-});
+<span id='Ext-property-useShims'>        /**
+</span>         * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
+         * you may want to set this to true.
+         * @type Boolean
+         */
+        useShims: isIE6
+    });
+})();
 
-<div id="method-String-toggle"></div>/**
- * Utility function that allows you to easily switch a string between two alternating values.  The passed value
- * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
- * they are already different, the first value passed in is returned.  Note that this method returns the new value
- * but does not change the current string.
- * <pre><code>
-// alternate sort directions
-sort = sort.toggle('ASC', 'DESC');
-
-// instead of conditional logic:
-sort = (sort == 'ASC' ? 'DESC' : 'ASC');
-</code></pre>
- * @param {String} value The value to compare to the current string
- * @param {String} other The new value to use if the string already equals the first value passed in
- * @return {String} The new value
+<span id='Ext-method-application'>/**
+</span> * Loads Ext.app.Application class and starts it up with given configuration after the page is ready.
+ *
+ * See Ext.app.Application for details.
+ *
+ * @param {Object} config
  */
-String.prototype.toggle = function(value, other){
-    return this == value ? other : value;
-};
+Ext.application = function(config) {
+    Ext.require('Ext.app.Application');
 
-<div id="method-String-trim"></div>/**
- * Trims whitespace from either end of a string, leaving spaces within the string intact.  Example:
- * <pre><code>
-var s = '  foo bar  ';
-alert('-' + s + '-');         //alerts "- foo bar -"
-alert('-' + s.trim() + '-');  //alerts "-foo bar-"
-</code></pre>
- * @return {String} The trimmed string
- */
-String.prototype.trim = function(){
-    var re = /^\s+|\s+$/g;
-    return function(){ return this.replace(re, ""); };
-}();
-
-// here to prevent dependency on Date.js
-<div id="method-Date-getElapsed"></div>/**
- Returns the number of milliseconds between this date and date
- @param {Date} date (optional) Defaults to now
- @return {Number} The diff in milliseconds
- @member Date getElapsed
- */
-Date.prototype.getElapsed = function(date) {
-    return Math.abs((date || new Date()).getTime()-this.getTime());
+    Ext.onReady(function() {
+        Ext.create('Ext.app.Application', config);
+    });
 };
-
-
-<div id="cls-Number"></div>/**
- * @class Number
- */
-Ext.applyIf(Number.prototype, {
-    <div id="method-Number-constrain"></div>/**
-     * Checks whether or not the current number is within a desired range.  If the number is already within the
-     * range it is returned, otherwise the min or max value is returned depending on which side of the range is
-     * exceeded.  Note that this method returns the constrained value but does not change the current number.
-     * @param {Number} min The minimum number in the range
-     * @param {Number} max The maximum number in the range
-     * @return {Number} The constrained value if outside the range, otherwise the current value
-     */
-    constrain : function(min, max){
-        return Math.min(Math.max(this, min), max);
-    }
-});
-</pre>    
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>