Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / MixedCollection.html
index 613d466..df9f664 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
+  <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.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-util-MixedCollection'>/**
+</span> * @class Ext.util.MixedCollection
+ * &lt;p&gt;
+ * Represents a collection of a set of key and value pairs. Each key in the MixedCollection
+ * must be unique, the same key cannot exist twice. This collection is ordered, items in the
+ * collection can be accessed by index  or via the key. Newly added items are added to
+ * the end of the collection. This class is similar to {@link Ext.util.HashMap} however it
+ * is heavier and provides more functionality. Sample usage:
+ * &lt;pre&gt;&lt;code&gt;
+var coll = new Ext.util.MixedCollection();
+coll.add('key1', 'val1');
+coll.add('key2', 'val2');
+coll.add('key3', 'val3');
+
+console.log(coll.get('key1')); // prints 'val1'
+console.log(coll.indexOfKey('key3')); // prints 2
+ * &lt;/code&gt;&lt;/pre&gt;
+ *
+ * &lt;p&gt;
+ * The MixedCollection also has support for sorting and filtering of the values in the collection.
+ * &lt;pre&gt;&lt;code&gt;
+var coll = new Ext.util.MixedCollection();
+coll.add('key1', 100);
+coll.add('key2', -100);
+coll.add('key3', 17);
+coll.add('key4', 0);
+var biggerThanZero = coll.filterBy(function(value){
+    return value &gt; 0;
+});
+console.log(biggerThanZero.getCount()); // prints 2
+ * &lt;/code&gt;&lt;/pre&gt;
+ * &lt;/p&gt;
  */
-<div id="cls-Ext.util.MixedCollection"></div>/**\r
- * @class Ext.util.MixedCollection\r
- * @extends Ext.util.Observable\r
- * A Collection class that maintains both numeric indexes and keys and exposes events.\r
- * @constructor\r
- * @param {Boolean} allowFunctions Specify <tt>true</tt> if the {@link #addAll}\r
- * function should add function references to the collection. Defaults to\r
- * <tt>false</tt>.\r
- * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection\r
- * and return the key value for that item.  This is used when available to look up the key on items that\r
- * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is\r
- * equivalent to providing an implementation for the {@link #getKey} method.\r
- */\r
-Ext.util.MixedCollection = function(allowFunctions, keyFn){\r
-    this.items = [];\r
-    this.map = {};\r
-    this.keys = [];\r
-    this.length = 0;\r
-    this.addEvents(\r
-        <div id="event-Ext.util.MixedCollection-clear"></div>/**\r
-         * @event clear\r
-         * Fires when the collection is cleared.\r
-         */\r
-        'clear',\r
-        <div id="event-Ext.util.MixedCollection-add"></div>/**\r
-         * @event add\r
-         * Fires when an item is added to the collection.\r
-         * @param {Number} index The index at which the item was added.\r
-         * @param {Object} o The item added.\r
-         * @param {String} key The key associated with the added item.\r
-         */\r
-        'add',\r
-        <div id="event-Ext.util.MixedCollection-replace"></div>/**\r
-         * @event replace\r
-         * Fires when an item is replaced in the collection.\r
-         * @param {String} key he key associated with the new added.\r
-         * @param {Object} old The item being replaced.\r
-         * @param {Object} new The new item.\r
-         */\r
-        'replace',\r
-        <div id="event-Ext.util.MixedCollection-remove"></div>/**\r
-         * @event remove\r
-         * Fires when an item is removed from the collection.\r
-         * @param {Object} o The item being removed.\r
-         * @param {String} key (optional) The key associated with the removed item.\r
-         */\r
-        'remove',\r
-        'sort'\r
-    );\r
-    this.allowFunctions = allowFunctions === true;\r
-    if(keyFn){\r
-        this.getKey = keyFn;\r
-    }\r
-    Ext.util.MixedCollection.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, {\r
-\r
-    <div id="cfg-Ext.util.MixedCollection-allowFunctions"></div>/**\r
-     * @cfg {Boolean} allowFunctions Specify <tt>true</tt> if the {@link #addAll}\r
-     * function should add function references to the collection. Defaults to\r
-     * <tt>false</tt>.\r
-     */\r
-    allowFunctions : false,\r
-\r
-    <div id="method-Ext.util.MixedCollection-add"></div>/**\r
-     * Adds an item to the collection. Fires the {@link #add} event when complete.\r
-     * @param {String} key <p>The key to associate with the item, or the new item.</p>\r
-     * <p>If a {@link #getKey} implementation was specified for this MixedCollection,\r
-     * or if the key of the stored items is in a property called <tt><b>id</b></tt>,\r
-     * the MixedCollection will be able to <i>derive</i> the key for the new item.\r
-     * In this case just pass the new item in this parameter.</p>\r
-     * @param {Object} o The item to add.\r
-     * @return {Object} The item added.\r
-     */\r
-    add : function(key, o){\r
-        if(arguments.length == 1){\r
-            o = arguments[0];\r
-            key = this.getKey(o);\r
-        }\r
-        if(typeof key != 'undefined' && key !== null){\r
-            var old = this.map[key];\r
-            if(typeof old != 'undefined'){\r
-                return this.replace(key, o);\r
-            }\r
-            this.map[key] = o;\r
-        }\r
-        this.length++;\r
-        this.items.push(o);\r
-        this.keys.push(key);\r
-        this.fireEvent('add', this.length-1, o, key);\r
-        return o;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-getKey"></div>/**\r
-      * MixedCollection has a generic way to fetch keys if you implement getKey.  The default implementation\r
-      * simply returns <b><code>item.id</code></b> but you can provide your own implementation\r
-      * to return a different value as in the following examples:<pre><code>\r
-// normal way\r
-var mc = new Ext.util.MixedCollection();\r
-mc.add(someEl.dom.id, someEl);\r
-mc.add(otherEl.dom.id, otherEl);\r
-//and so on\r
-\r
-// using getKey\r
-var mc = new Ext.util.MixedCollection();\r
-mc.getKey = function(el){\r
-   return el.dom.id;\r
-};\r
-mc.add(someEl);\r
-mc.add(otherEl);\r
-\r
-// or via the constructor\r
-var mc = new Ext.util.MixedCollection(false, function(el){\r
-   return el.dom.id;\r
-});\r
-mc.add(someEl);\r
-mc.add(otherEl);\r
-     * </code></pre>\r
-     * @param {Object} item The item for which to find the key.\r
-     * @return {Object} The key for the passed item.\r
-     */\r
-    getKey : function(o){\r
-         return o.id;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-replace"></div>/**\r
-     * Replaces an item in the collection. Fires the {@link #replace} event when complete.\r
-     * @param {String} key <p>The key associated with the item to replace, or the replacement item.</p>\r
-     * <p>If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key\r
-     * of your stored items is in a property called <tt><b>id</b></tt>, then the MixedCollection\r
-     * will be able to <i>derive</i> the key of the replacement item. If you want to replace an item\r
-     * with one having the same key value, then just pass the replacement item in this parameter.</p>\r
-     * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate\r
-     * with that key.\r
-     * @return {Object}  The new item.\r
-     */\r
-    replace : function(key, o){\r
-        if(arguments.length == 1){\r
-            o = arguments[0];\r
-            key = this.getKey(o);\r
-        }\r
-        var old = this.map[key];\r
-        if(typeof key == 'undefined' || key === null || typeof old == 'undefined'){\r
-             return this.add(key, o);\r
-        }\r
-        var index = this.indexOfKey(key);\r
-        this.items[index] = o;\r
-        this.map[key] = o;\r
-        this.fireEvent('replace', key, old, o);\r
-        return o;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-addAll"></div>/**\r
-     * Adds all elements of an Array or an Object to the collection.\r
-     * @param {Object/Array} objs An Object containing properties which will be added\r
-     * to the collection, or an Array of values, each of which are added to the collection.\r
-     * Functions references will be added to the collection if <code>{@link #allowFunctions}</code>\r
-     * has been set to <tt>true</tt>.\r
-     */\r
-    addAll : function(objs){\r
-        if(arguments.length > 1 || Ext.isArray(objs)){\r
-            var args = arguments.length > 1 ? arguments : objs;\r
-            for(var i = 0, len = args.length; i < len; i++){\r
-                this.add(args[i]);\r
-            }\r
-        }else{\r
-            for(var key in objs){\r
-                if(this.allowFunctions || typeof objs[key] != 'function'){\r
-                    this.add(key, objs[key]);\r
-                }\r
-            }\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-each"></div>/**\r
-     * Executes the specified function once for every item in the collection, passing the following arguments:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b>item</b> : Mixed<p class="sub-desc">The collection item</p></li>\r
-     * <li><b>index</b> : Number<p class="sub-desc">The item's index</p></li>\r
-     * <li><b>length</b> : Number<p class="sub-desc">The total number of items in the collection</p></li>\r
-     * </ul></div>\r
-     * The function should return a boolean value. Returning false from the function will stop the iteration.\r
-     * @param {Function} fn The function to execute for each item.\r
-     * @param {Object} scope (optional) The scope in which to execute the function.\r
-     */\r
-    each : function(fn, scope){\r
-        var items = [].concat(this.items); // each safe for removal\r
-        for(var i = 0, len = items.length; i < len; i++){\r
-            if(fn.call(scope || items[i], items[i], i, len) === false){\r
-                break;\r
-            }\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-eachKey"></div>/**\r
-     * Executes the specified function once for every key in the collection, passing each\r
-     * key, and its associated item as the first two parameters.\r
-     * @param {Function} fn The function to execute for each item.\r
-     * @param {Object} scope (optional) The scope in which to execute the function.\r
-     */\r
-    eachKey : function(fn, scope){\r
-        for(var i = 0, len = this.keys.length; i < len; i++){\r
-            fn.call(scope || window, this.keys[i], this.items[i], i, len);\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-find"></div>/**\r
-     * Returns the first item in the collection which elicits a true return value from the\r
-     * passed selection function.\r
-     * @param {Function} fn The selection function to execute for each item.\r
-     * @param {Object} scope (optional) The scope in which to execute the function.\r
-     * @return {Object} The first item in the collection which returned true from the selection function.\r
-     */\r
-    find : function(fn, scope){\r
-        for(var i = 0, len = this.items.length; i < len; i++){\r
-            if(fn.call(scope || window, this.items[i], this.keys[i])){\r
-                return this.items[i];\r
-            }\r
-        }\r
-        return null;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-insert"></div>/**\r
-     * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete.\r
-     * @param {Number} index The index to insert the item at.\r
-     * @param {String} key The key to associate with the new item, or the item itself.\r
-     * @param {Object} o (optional) If the second parameter was a key, the new item.\r
-     * @return {Object} The item inserted.\r
-     */\r
-    insert : function(index, key, o){\r
-        if(arguments.length == 2){\r
-            o = arguments[1];\r
-            key = this.getKey(o);\r
-        }\r
-        if(this.containsKey(key)){\r
-            this.suspendEvents();\r
-            this.removeKey(key);\r
-            this.resumeEvents();\r
-        }\r
-        if(index >= this.length){\r
-            return this.add(key, o);\r
-        }\r
-        this.length++;\r
-        this.items.splice(index, 0, o);\r
-        if(typeof key != 'undefined' && key !== null){\r
-            this.map[key] = o;\r
-        }\r
-        this.keys.splice(index, 0, key);\r
-        this.fireEvent('add', index, o, key);\r
-        return o;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-remove"></div>/**\r
-     * Remove an item from the collection.\r
-     * @param {Object} o The item to remove.\r
-     * @return {Object} The item removed or false if no item was removed.\r
-     */\r
-    remove : function(o){\r
-        return this.removeAt(this.indexOf(o));\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-removeAt"></div>/**\r
-     * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete.\r
-     * @param {Number} index The index within the collection of the item to remove.\r
-     * @return {Object} The item removed or false if no item was removed.\r
-     */\r
-    removeAt : function(index){\r
-        if(index < this.length && index >= 0){\r
-            this.length--;\r
-            var o = this.items[index];\r
-            this.items.splice(index, 1);\r
-            var key = this.keys[index];\r
-            if(typeof key != 'undefined'){\r
-                delete this.map[key];\r
-            }\r
-            this.keys.splice(index, 1);\r
-            this.fireEvent('remove', o, key);\r
-            return o;\r
-        }\r
-        return false;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-removeKey"></div>/**\r
-     * Removed an item associated with the passed key fom the collection.\r
-     * @param {String} key The key of the item to remove.\r
-     * @return {Object} The item removed or false if no item was removed.\r
-     */\r
-    removeKey : function(key){\r
-        return this.removeAt(this.indexOfKey(key));\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-getCount"></div>/**\r
-     * Returns the number of items in the collection.\r
-     * @return {Number} the number of items in the collection.\r
-     */\r
-    getCount : function(){\r
-        return this.length;\r
-    },\r
-    \r
-    <div id="method-Ext.util.MixedCollection-indexOf"></div>/**\r
-     * Returns index within the collection of the passed Object.\r
-     * @param {Object} o The item to find the index of.\r
-     * @return {Number} index of the item. Returns -1 if not found.\r
-     */\r
-    indexOf : function(o){\r
-        return this.items.indexOf(o);\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-indexOfKey"></div>/**\r
-     * Returns index within the collection of the passed key.\r
-     * @param {String} key The key to find the index of.\r
-     * @return {Number} index of the key.\r
-     */\r
-    indexOfKey : function(key){\r
-        return this.keys.indexOf(key);\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-item"></div>/**\r
-     * Returns the item associated with the passed key OR index.\r
-     * Key has priority over index.  This is the equivalent\r
-     * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}.\r
-     * @param {String/Number} key The key or index of the item.\r
-     * @return {Object} If the item is found, returns the item.  If the item was not found, returns <tt>undefined</tt>.\r
-     * If an item was found, but is a Class, returns <tt>null</tt>.\r
-     */\r
-    item : function(key){\r
-        var mk = this.map[key],\r
-            item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined;\r
-        return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype!\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-itemAt"></div>/**\r
-     * Returns the item at the specified index.\r
-     * @param {Number} index The index of the item.\r
-     * @return {Object} The item at the specified index.\r
-     */\r
-    itemAt : function(index){\r
-        return this.items[index];\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-key"></div>/**\r
-     * Returns the item associated with the passed key.\r
-     * @param {String/Number} key The key of the item.\r
-     * @return {Object} The item associated with the passed key.\r
-     */\r
-    key : function(key){\r
-        return this.map[key];\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-contains"></div>/**\r
-     * Returns true if the collection contains the passed Object as an item.\r
-     * @param {Object} o  The Object to look for in the collection.\r
-     * @return {Boolean} True if the collection contains the Object as an item.\r
-     */\r
-    contains : function(o){\r
-        return this.indexOf(o) != -1;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-containsKey"></div>/**\r
-     * Returns true if the collection contains the passed Object as a key.\r
-     * @param {String} key The key to look for in the collection.\r
-     * @return {Boolean} True if the collection contains the Object as a key.\r
-     */\r
-    containsKey : function(key){\r
-        return typeof this.map[key] != 'undefined';\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-clear"></div>/**\r
-     * Removes all items from the collection.  Fires the {@link #clear} event when complete.\r
-     */\r
-    clear : function(){\r
-        this.length = 0;\r
-        this.items = [];\r
-        this.keys = [];\r
-        this.map = {};\r
-        this.fireEvent('clear');\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-first"></div>/**\r
-     * Returns the first item in the collection.\r
-     * @return {Object} the first item in the collection..\r
-     */\r
-    first : function(){\r
-        return this.items[0];\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-last"></div>/**\r
-     * Returns the last item in the collection.\r
-     * @return {Object} the last item in the collection..\r
-     */\r
-    last : function(){\r
-        return this.items[this.length-1];\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * @param {String} property Property to sort by ('key', 'value', or 'index')\r
-     * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.\r
-     * @param {Function} fn (optional) Comparison function that defines the sort order.\r
-     * Defaults to sorting by numeric value.  \r
-     */\r
-    _sort : function(property, dir, fn){\r
-        var i,\r
-            len,\r
-            dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,\r
-            c = [], k = this.keys, items = this.items;\r
-            \r
-        fn = fn || function(a, b){\r
-            return a-b;\r
-        };\r
-        for(i = 0, len = items.length; i < len; i++){\r
-            c[c.length] = {key: k[i], value: items[i], index: i};\r
-        }\r
-        c.sort(function(a, b){\r
-            var v = fn(a[property], b[property]) * dsc;\r
-            if(v === 0){\r
-                v = (a.index < b.index ? -1 : 1);\r
-            }\r
-            return v;\r
-        });\r
-        for(i = 0, len = c.length; i < len; i++){\r
-            items[i] = c[i].value;\r
-            k[i] = c[i].key;\r
-        }\r
-        this.fireEvent('sort', this);\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-sort"></div>/**\r
-     * Sorts this collection by <b>item</b> value with the passed comparison function.\r
-     * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.\r
-     * @param {Function} fn (optional) Comparison function that defines the sort order.\r
-     * Defaults to sorting by numeric value.  \r
-     */\r
-    sort : function(dir, fn){\r
-        this._sort('value', dir, fn);\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-keySort"></div>/**\r
-     * Sorts this collection by <b>key</b>s.\r
-     * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.\r
-     * @param {Function} fn (optional) Comparison function that defines the sort order.\r
-     * Defaults to sorting by case insensitive string.  \r
-     */\r
-    keySort : function(dir, fn){\r
-        this._sort('key', dir, fn || function(a, b){\r
-            var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();\r
-            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);\r
-        });\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-getRange"></div>/**\r
-     * Returns a range of items in this collection\r
-     * @param {Number} startIndex (optional) The starting index. Defaults to 0.\r
-     * @param {Number} endIndex (optional) The ending index. Defaults to the last item.\r
-     * @return {Array} An array of items\r
-     */\r
-    getRange : function(start, end){\r
-        var items = this.items;\r
-        if(items.length < 1){\r
-            return [];\r
-        }\r
-        start = start || 0;\r
-        end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1);\r
-        var i, r = [];\r
-        if(start <= end){\r
-            for(i = start; i <= end; i++) {\r
-                r[r.length] = items[i];\r
-            }\r
-        }else{\r
-            for(i = start; i >= end; i--) {\r
-                r[r.length] = items[i];\r
-            }\r
-        }\r
-        return r;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-filter"></div>/**\r
-     * Filter the <i>objects</i> in this collection by a specific property.\r
-     * Returns a new collection that has been filtered.\r
-     * @param {String} property A property on your objects\r
-     * @param {String/RegExp} value Either string that the property values\r
-     * should start with or a RegExp to test against the property\r
-     * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning\r
-     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False).\r
-     * @return {MixedCollection} The new filtered collection\r
-     */\r
-    filter : function(property, value, anyMatch, caseSensitive){\r
-        if(Ext.isEmpty(value, false)){\r
-            return this.clone();\r
-        }\r
-        value = this.createValueMatcher(value, anyMatch, caseSensitive);\r
-        return this.filterBy(function(o){\r
-            return o && value.test(o[property]);\r
-        });\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-filterBy"></div>/**\r
-     * Filter by a function. Returns a <i>new</i> collection that has been filtered.\r
-     * The passed function will be called with each object in the collection.\r
-     * If the function returns true, the value is included otherwise it is filtered.\r
-     * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)\r
-     * @param {Object} scope (optional) The scope of the function (defaults to this)\r
-     * @return {MixedCollection} The new filtered collection\r
-     */\r
-    filterBy : function(fn, scope){\r
-        var r = new Ext.util.MixedCollection();\r
-        r.getKey = this.getKey;\r
-        var k = this.keys, it = this.items;\r
-        for(var i = 0, len = it.length; i < len; i++){\r
-            if(fn.call(scope||this, it[i], k[i])){\r
-                r.add(k[i], it[i]);\r
-            }\r
-        }\r
-        return r;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-findIndex"></div>/**\r
-     * Finds the index of the first matching object in this collection by a specific property/value.\r
-     * @param {String} property The name of a property on your objects.\r
-     * @param {String/RegExp} value A string that the property values\r
-     * should start with or a RegExp to test against the property.\r
-     * @param {Number} start (optional) The index to start searching at (defaults to 0).\r
-     * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning.\r
-     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison.\r
-     * @return {Number} The matched index or -1\r
-     */\r
-    findIndex : function(property, value, start, anyMatch, caseSensitive){\r
-        if(Ext.isEmpty(value, false)){\r
-            return -1;\r
-        }\r
-        value = this.createValueMatcher(value, anyMatch, caseSensitive);\r
-        return this.findIndexBy(function(o){\r
-            return o && value.test(o[property]);\r
-        }, null, start);\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-findIndexBy"></div>/**\r
-     * Find the index of the first matching object in this collection by a function.\r
-     * If the function returns <i>true</i> it is considered a match.\r
-     * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key).\r
-     * @param {Object} scope (optional) The scope of the function (defaults to this).\r
-     * @param {Number} start (optional) The index to start searching at (defaults to 0).\r
-     * @return {Number} The matched index or -1\r
-     */\r
-    findIndexBy : function(fn, scope, start){\r
-        var k = this.keys, it = this.items;\r
-        for(var i = (start||0), len = it.length; i < len; i++){\r
-            if(fn.call(scope||this, it[i], k[i])){\r
-                return i;\r
-            }\r
-        }\r
-        return -1;\r
-    },\r
-\r
-    // private\r
-    createValueMatcher : function(value, anyMatch, caseSensitive){\r
-        if(!value.exec){ // not a regex\r
-            value = String(value);\r
-            value = new RegExp((anyMatch === true ? '' : '^') + Ext.escapeRe(value), caseSensitive ? '' : 'i');\r
-        }\r
-        return value;\r
-    },\r
-\r
-    <div id="method-Ext.util.MixedCollection-clone"></div>/**\r
-     * Creates a shallow copy of this collection\r
-     * @return {MixedCollection}\r
-     */\r
-    clone : function(){\r
-        var r = new Ext.util.MixedCollection();\r
-        var k = this.keys, it = this.items;\r
-        for(var i = 0, len = it.length; i < len; i++){\r
-            r.add(k[i], it[i]);\r
-        }\r
-        r.getKey = this.getKey;\r
-        return r;\r
-    }\r
-});\r
-<div id="method-Ext.util.MixedCollection-get"></div>/**\r
- * This method calls {@link #item item()}.\r
- * Returns the item associated with the passed key OR index. Key has priority\r
- * over index.  This is the equivalent of calling {@link #key} first, then if\r
- * nothing matched calling {@link #itemAt}.\r
- * @param {String/Number} key The key or index of the item.\r
- * @return {Object} If the item is found, returns the item.  If the item was\r
- * not found, returns <tt>undefined</tt>. If an item was found, but is a Class,\r
- * returns <tt>null</tt>.\r
- */\r
-Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;</pre>
+Ext.define('Ext.util.MixedCollection', {
+    extend: 'Ext.util.AbstractMixedCollection',
+    mixins: {
+        sortable: 'Ext.util.Sortable'
+    },
+
+<span id='Ext-util-MixedCollection-method-constructor'>    /**
+</span>     * Creates new MixedCollection.
+     * @param {Boolean} allowFunctions Specify &lt;tt&gt;true&lt;/tt&gt; if the {@link #addAll}
+     * function should add function references to the collection. Defaults to
+     * &lt;tt&gt;false&lt;/tt&gt;.
+     * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
+     * and return the key value for that item.  This is used when available to look up the key on items that
+     * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
+     * equivalent to providing an implementation for the {@link #getKey} method.
+     */
+    constructor: function() {
+        var me = this;
+        me.callParent(arguments);
+        me.addEvents('sort');
+        me.mixins.sortable.initSortable.call(me);
+    },
+
+    doSort: function(sorterFn) {
+        this.sortBy(sorterFn);
+    },
+
+<span id='Ext-util-MixedCollection-method-_sort'>    /**
+</span>     * @private
+     * Performs the actual sorting based on a direction and a sorting function. Internally,
+     * this creates a temporary array of all items in the MixedCollection, sorts it and then writes
+     * the sorted array data back into this.items and this.keys
+     * @param {String} property Property to sort by ('key', 'value', or 'index')
+     * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.
+     * @param {Function} fn (optional) Comparison function that defines the sort order.
+     * Defaults to sorting by numeric value.
+     */
+    _sort : function(property, dir, fn){
+        var me = this,
+            i, len,
+            dsc   = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
+
+            //this is a temporary array used to apply the sorting function
+            c     = [],
+            keys  = me.keys,
+            items = me.items;
+
+        //default to a simple sorter function if one is not provided
+        fn = fn || function(a, b) {
+            return a - b;
+        };
+
+        //copy all the items into a temporary array, which we will sort
+        for(i = 0, len = items.length; i &lt; len; i++){
+            c[c.length] = {
+                key  : keys[i],
+                value: items[i],
+                index: i
+            };
+        }
+
+        //sort the temporary array
+        Ext.Array.sort(c, function(a, b){
+            var v = fn(a[property], b[property]) * dsc;
+            if(v === 0){
+                v = (a.index &lt; b.index ? -1 : 1);
+            }
+            return v;
+        });
+
+        //copy the temporary array back into the main this.items and this.keys objects
+        for(i = 0, len = c.length; i &lt; len; i++){
+            items[i] = c[i].value;
+            keys[i]  = c[i].key;
+        }
+
+        me.fireEvent('sort', me);
+    },
+
+<span id='Ext-util-MixedCollection-method-sortBy'>    /**
+</span>     * Sorts the collection by a single sorter function
+     * @param {Function} sorterFn The function to sort by
+     */
+    sortBy: function(sorterFn) {
+        var me     = this,
+            items  = me.items,
+            keys   = me.keys,
+            length = items.length,
+            temp   = [],
+            i;
+
+        //first we create a copy of the items array so that we can sort it
+        for (i = 0; i &lt; length; i++) {
+            temp[i] = {
+                key  : keys[i],
+                value: items[i],
+                index: i
+            };
+        }
+
+        Ext.Array.sort(temp, function(a, b) {
+            var v = sorterFn(a.value, b.value);
+            if (v === 0) {
+                v = (a.index &lt; b.index ? -1 : 1);
+            }
+
+            return v;
+        });
+
+        //copy the temporary array back into the main this.items and this.keys objects
+        for (i = 0; i &lt; length; i++) {
+            items[i] = temp[i].value;
+            keys[i]  = temp[i].key;
+        }
+        
+        me.fireEvent('sort', me, items, keys);
+    },
+
+<span id='Ext-util-MixedCollection-method-reorder'>    /**
+</span>     * Reorders each of the items based on a mapping from old index to new index. Internally this
+     * just translates into a sort. The 'sort' event is fired whenever reordering has occured.
+     * @param {Object} mapping Mapping from old item index to new item index
+     */
+    reorder: function(mapping) {
+        var me = this,
+            items = me.items,
+            index = 0,
+            length = items.length,
+            order = [],
+            remaining = [],
+            oldIndex;
+
+        me.suspendEvents();
+
+        //object of {oldPosition: newPosition} reversed to {newPosition: oldPosition}
+        for (oldIndex in mapping) {
+            order[mapping[oldIndex]] = items[oldIndex];
+        }
+
+        for (index = 0; index &lt; length; index++) {
+            if (mapping[index] == undefined) {
+                remaining.push(items[index]);
+            }
+        }
+
+        for (index = 0; index &lt; length; index++) {
+            if (order[index] == undefined) {
+                order[index] = remaining.shift();
+            }
+        }
+
+        me.clear();
+        me.addAll(order);
+
+        me.resumeEvents();
+        me.fireEvent('sort', me);
+    },
+
+<span id='Ext-util-MixedCollection-method-sortByKey'>    /**
+</span>     * Sorts this collection by &lt;b&gt;key&lt;/b&gt;s.
+     * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
+     * @param {Function} fn (optional) Comparison function that defines the sort order.
+     * Defaults to sorting by case insensitive string.
+     */
+    sortByKey : function(dir, fn){
+        this._sort('key', dir, fn || function(a, b){
+            var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
+            return v1 &gt; v2 ? 1 : (v1 &lt; v2 ? -1 : 0);
+        });
+    }
+});
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>