Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Ext-more.html
index bc19778..630b892 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../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>
@@ -48,8 +48,6 @@ Ext.apply(Ext, {
     userAgent: navigator.userAgent.toLowerCase(),
     cache: {},
     idSeed: 1000,
-    BLANK_IMAGE_URL : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
-    isStrict: document.compatMode == &quot;CSS1Compat&quot;,
     windowId: 'ext-window',
     documentId: 'ext-document',
 
@@ -60,48 +58,56 @@ Ext.apply(Ext, {
     isReady: false,
 
 <span id='Ext-property-enableGarbageCollector'>    /**
-</span>     * True to automatically uncache orphaned Ext.core.Elements periodically (defaults to true)
+</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 (defaults to true).
+</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 {Mixed} el (optional) The element to generate an id for
+     * @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 = this.documentId;
+            el.id = me.documentId;
         }
         else if (el === window) {
-            el.id = this.windowId;
+            el.id = me.windowId;
         }
         if (!el.id) {
-            el.id = (prefix || &quot;ext-gen&quot;) + (++Ext.idSeed);
+            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.core.Element}.
-     * @return Ext.core.Element The document body
+</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.core.Element}.
-     * @return Ext.core.Element The document head
+</span>     * Returns the current document head as an {@link Ext.Element}.
+     * @return Ext.Element The document head
      * @method
      */
     getHead: function() {
@@ -117,8 +123,8 @@ Ext.apply(Ext, {
     }(),
 
 <span id='Ext-method-getDoc'>    /**
-</span>     * Returns the current HTML document object as an {@link Ext.core.Element}.
-     * @return Ext.core.Element The document
+</span>     * Returns the current HTML document object as an {@link Ext.Element}.
+     * @return Ext.Element The document
      */
     getDoc: function() {
         return Ext.get(document);
@@ -146,12 +152,11 @@ Ext.apply(Ext, {
 <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.core.Element} and {@link Ext.Component}, but any subclass of
+     * 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.core.Element}, {@link Ext.Component}, or an Array of either of these to destroy
-     * @param {Mixed} arg2 (optional)
-     * @param {Mixed} etc... (optional)
+     * @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,
@@ -175,6 +180,12 @@ Ext.apply(Ext, {
 
 <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
@@ -237,9 +248,30 @@ window.undefined = window.undefined;
  * @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/),
@@ -249,6 +281,7 @@ window.undefined = window.undefined;
         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),
@@ -257,28 +290,170 @@ window.undefined = window.undefined;
         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/),
-        scrollWidth = null,
-        webKitVersion = isWebKit &amp;&amp; (/webkit\/(\d+\.\d+)/.exec(Ext.userAgent));
+        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) {}
 
-    Ext.setVersion('extjs', '4.0.0');
+    //&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
          */
-        SSL_SECURE_URL : Ext.isSecure &amp;&amp; isIE ? 'javascript:&quot;&quot;' : 'about:blank',
+        SSL_SECURE_URL : isSecure &amp;&amp; isIE ? 'javascript:&quot;&quot;' : 'about:blank',
 
 <span id='Ext-property-enableFx'>        /**
 </span>         * True if the {@link Ext.fx.Anim} Class is available
@@ -311,7 +486,7 @@ window.undefined = window.undefined;
         USE_NATIVE_JSON : false,
 
 <span id='Ext-method-getDom'>        /**
-</span>         * Return the dom node for the passed String (id), dom node, or Ext.core.Element.
+</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:
@@ -322,7 +497,7 @@ var elDom = Ext.getDom('elId');
 var elDom1 = Ext.getDom(elDom);
 
 // If we don&amp;#39;t know if we are working with an
-// Ext.core.Element or a dom node use Ext.getDom
+// Ext.Element or a dom node use Ext.getDom
 function(el){
     var dom = Ext.getDom(el);
     // do something with the dom node
@@ -330,7 +505,7 @@ function(el){
          * &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 {Mixed} el
+         * @param {String/HTMLElement/Ext.Element} el
          * @return HTMLElement
          */
         getDom : function(el, strict) {
@@ -386,6 +561,10 @@ function(el){
             }
         },
 
+        isStrict: isStrict,
+
+        isIEQuirks: isIE &amp;&amp; !isStrict,
+
 <span id='Ext-property-isOpera'>        /**
 </span>         * True if the detected browser is Opera.
          * @type Boolean
@@ -428,6 +607,12 @@ function(el){
          */
         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
@@ -482,24 +667,42 @@ function(el){
          */
         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
@@ -518,11 +721,53 @@ function(el){
          */
         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 (-1 if the browser does not use WebKit).
-         * @type Float
+</span>         * The current version of WebKit (0 if the browser does not use WebKit).
+         * @type Number
          */
-        webKitVersion: webKitVersion ? parseFloat(webKitVersion[1]) : -1,
+        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.
@@ -530,7 +775,7 @@ function(el){
          * For other browsers it uses an inline data URL.
          * @type String
          */
-        BLANK_IMAGE_URL : (isIE6 || isIE7) ? 'http:/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+        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;
@@ -540,11 +785,11 @@ function(el){
          * &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 {Mixed} value The value to test
-         * @param {Mixed} defaultValue The value to return if the original value is empty
+         * @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
-         * @deprecated 4.0.0 Use {Ext#valueFrom} instead
+         * @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;
@@ -601,54 +846,77 @@ Ext.addBehaviors({
             }
         },
 
-<span id='Ext-method-getScrollBarWidth'>        /**
-</span>         * 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';
+                var cssClass = Ext.isIE9 ? '' : Ext.baseCSSPrefix + 'hide-offsets',
                     // Append our div, do our calculation and then remove it
-                var 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);
-                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;
+        },
+
+<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
         },
 
 <span id='Ext-method-copyTo'>        /**
 </span>         * Copies a set of named properties fom the source object to the destination object.
-         * &lt;p&gt;example:&lt;pre&gt;&lt;code&gt;
-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');
-    }
-});
-         * &lt;/code&gt;&lt;/pre&gt;
+         *
+         * 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, usePrototypeKeys){
             if(typeof names == 'string'){
                 names = names.split(/[,;\s]/);
@@ -664,137 +932,55 @@ ImageComponent = Ext.extend(Ext.Component, {
 <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){
+        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]];
             }
         },
 
-<span id='Ext-method-log'>        /**
+<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 100).
+         * 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
+         * @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
          */
-        log : function (message) {
+        log :
             //&lt;debug&gt;
-            var options, dump,
-                con = Ext.global.console,
-                log = Ext.log,
-                level = 'log',
-                stack,
-                members,
-                member;
-
-            if (!Ext.isString(message)) {
-                options = message;
-                message = options.msg || '';
-                level = options.level || level;
-                dump = options.dump;
-                stack = options.stack;
-
-                if (dump &amp;&amp; !(con &amp;&amp; con.dir)) {
-                    members = [];
-
-                    // Cannot use Ext.encode since it can recurse endlessly (if we're lucky)
-                    // ...and the data could be prettier!
-                    Ext.Object.each(dump, 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) {
-                        message += ' \nData: {\n  ' + members.join(',\n  ') + '\n}';
-                    }
-                    dump = null;
-                }
-            }
-
-            if (arguments.length &gt; 1) {
-                message += Array.prototype.slice.call(arguments, 1).join('');
-            }
-
-            // 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 {
-                // w/o console, all messages are equal, so munge the level into the message:
-                if (level != 'log') {
-                    message = level.toUpperCase() + ': ' + message;
-                }
-
-                if (Ext.isOpera) {
-                    opera.postError(message);
-                } else {
-                    var out = log.out || (log.out = []),
-                        max = log.max || (log.max = 100);
-
-                    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
-                        out.splice(0, out.length - 3 * Math.floor(max / 4)); // keep newest 75%
-                    }
-
-                    out.push(message);
-                }
-            }
-
-            // Mostly informational, but the Ext.Error notifier uses them:
-            var counters = log.counters ||
-                          (log.counters = { error: 0, warn: 0, info: 0, log: 0 });
-
-            ++counters[level];
+            log ||
             //&lt;/debug&gt;
-        },
+            Ext.emptyFn,
 
 <span id='Ext-method-partition'>        /**
 </span>         * Partitions the set into two sets: a true set and a false set.
@@ -814,10 +1000,10 @@ Ext.partition(
 // true are those paragraph elements with a className of &quot;class1&quot;,
 // false set are those that do not have that className.
          * &lt;/code&gt;&lt;/pre&gt;
-         * @param {Array|NodeList} arr The array to partition
+         * @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&lt;Array&gt;,false&lt;Array&gt;]
+         * 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){
@@ -835,9 +1021,9 @@ Ext.partition(
 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 {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
          */
@@ -869,7 +1055,7 @@ Ext.zip(
     }
 ); // [&quot;$+12.43&quot;, &quot;$-10.15&quot;, &quot;$+22.96&quot;]
          * &lt;/code&gt;&lt;/pre&gt;
-         * @param {Arrays|NodeLists} arr This argument may be repeated. Array(s) to contribute values.
+         * @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
@@ -898,7 +1084,7 @@ Ext.zip(
 </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 {Array} items The array to create a sentence from
+         * @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
@@ -926,9 +1112,11 @@ Ext.zip(
 })();
 
 <span id='Ext-method-application'>/**
-</span> * TBD
+</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
- * @method
  */
 Ext.application = function(config) {
     Ext.require('Ext.app.Application');