Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Sorter.html
index fdfa7f2..1ac2ef3 100644 (file)
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-util.Sorter'>/**
-</span> * @class Ext.util.Sorter
- * @extends Object
- * Represents a single sorter that can be applied to a Store
+<!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>
+  <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(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-util-Sorter'>/**
+</span> * Represents a single sorter that can be applied to a Store. The sorter is used
+ * to compare two values against each other for the purpose of ordering them. Ordering
+ * is achieved by specifying either:
+ *
+ * - {@link #property A sorting property}
+ * - {@link #sorterFn A sorting function}
+ *
+ * As a contrived example, we can specify a custom sorter that sorts by rank:
+ *
+ *     Ext.define('Person', {
+ *         extend: 'Ext.data.Model',
+ *         fields: ['name', 'rank']
+ *     });
+ *
+ *     Ext.create('Ext.data.Store', {
+ *         model: 'Person',
+ *         proxy: 'memory',
+ *         sorters: [{
+ *             sorterFn: function(o1, o2){
+ *                 var getRank = function(o){
+ *                     var name = o.get('rank');
+ *                     if (name === 'first') {
+ *                         return 1;
+ *                     } else if (name === 'second') {
+ *                         return 2;
+ *                     } else {
+ *                         return 3;
+ *                     }
+ *                 },
+ *                 rank1 = getRank(o1),
+ *                 rank2 = getRank(o2);
+ *
+ *                 if (rank1 === rank2) {
+ *                     return 0;
+ *                 }
+ *
+ *                 return rank1 &lt; rank2 ? -1 : 1;
+ *             }
+ *         }],
+ *         data: [{
+ *             name: 'Person1',
+ *             rank: 'second'
+ *         }, {
+ *             name: 'Person2',
+ *             rank: 'third'
+ *         }, {
+ *             name: 'Person3',
+ *             rank: 'first'
+ *         }]
+ *     });
  */
 Ext.define('Ext.util.Sorter', {
 
-<span id='Ext-util.Sorter-cfg-property'>    /**
-</span>     * @cfg {String} property The property to sort by. Required unless {@link #sorter} is provided
+<span id='Ext-util-Sorter-cfg-property'>    /**
+</span>     * @cfg {String} property
+     * The property to sort by. Required unless {@link #sorterFn} is provided. The property is extracted from the object
+     * directly and compared for sorting using the built in comparison operators.
      */
     
-<span id='Ext-util.Sorter-cfg-sorterFn'>    /**
-</span>     * @cfg {Function} sorterFn A specific sorter function to execute. Can be passed instead of {@link #property}
+<span id='Ext-util-Sorter-cfg-sorterFn'>    /**
+</span>     * @cfg {Function} sorterFn
+     * A specific sorter function to execute. Can be passed instead of {@link #property}. This sorter function allows
+     * for any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The
+     * function should return:
+     *
+     *   - -1 if o1 is &quot;less than&quot; o2
+     *   - 0 if o1 is &quot;equal&quot; to o2
+     *   - 1 if o1 is &quot;greater than&quot; o2
      */
     
-<span id='Ext-util.Sorter-cfg-root'>    /**
-</span>     * @cfg {String} root Optional root property. This is mostly useful when sorting a Store, in which case we set the
-     * root to 'data' to make the filter pull the {@link #property} out of the data object of each item
+<span id='Ext-util-Sorter-cfg-root'>    /**
+</span>     * @cfg {String} root
+     * Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to
+     * make the filter pull the {@link #property} out of the data object of each item
      */
     
-<span id='Ext-util.Sorter-cfg-transform'>    /**
-</span>     * @cfg {Function} transform A function that will be run on each value before
-     * it is compared in the sorter. The function will receive a single argument,
-     * the value.
+<span id='Ext-util-Sorter-cfg-transform'>    /**
+</span>     * @cfg {Function} transform
+     * A function that will be run on each value before it is compared in the sorter. The function will receive a single
+     * argument, the value.
      */
     
-<span id='Ext-util.Sorter-cfg-direction'>    /**
-</span>     * @cfg {String} direction The direction to sort by. Defaults to ASC
+<span id='Ext-util-Sorter-cfg-direction'>    /**
+</span>     * @cfg {String} direction
+     * The direction to sort by.
      */
     direction: &quot;ASC&quot;,
     
@@ -35,7 +110,7 @@ Ext.define('Ext.util.Sorter', {
         Ext.apply(me, config);
         
         //&lt;debug&gt;
-        if (me.property == undefined &amp;&amp; me.sorterFn == undefined) {
+        if (me.property === undefined &amp;&amp; me.sorterFn === undefined) {
             Ext.Error.raise(&quot;A Sorter requires either a property or a sorter function&quot;);
         }
         //&lt;/debug&gt;
@@ -43,7 +118,7 @@ Ext.define('Ext.util.Sorter', {
         me.updateSortFunction();
     },
     
-<span id='Ext-util.Sorter-method-createSortFunction'>    /**
+<span id='Ext-util-Sorter-method-createSortFunction'>    /**
 </span>     * @private
      * Creates and returns a function which sorts an array by the given property and direction
      * @return {Function} A function which sorts by the property/direction combination provided
@@ -61,7 +136,7 @@ Ext.define('Ext.util.Sorter', {
         };
     },
     
-<span id='Ext-util.Sorter-method-defaultSorterFn'>    /**
+<span id='Ext-util-Sorter-method-defaultSorterFn'>    /**
 </span>     * @private
      * Basic default sorter function that just compares the defined property of each object
      */
@@ -79,31 +154,45 @@ Ext.define('Ext.util.Sorter', {
         return v1 &gt; v2 ? 1 : (v1 &lt; v2 ? -1 : 0);
     },
     
-<span id='Ext-util.Sorter-method-getRoot'>    /**
+<span id='Ext-util-Sorter-method-getRoot'>    /**
 </span>     * @private
      * Returns the root property of the given item, based on the configured {@link #root} property
      * @param {Object} item The item
      * @return {Object} The root property of the object
      */
     getRoot: function(item) {
-        return this.root == undefined ? item : item[this.root];
+        return this.root === undefined ? item : item[this.root];
     },
     
-    // @TODO: Add docs for these three methods
+<span id='Ext-util-Sorter-method-setDirection'>    /**
+</span>     * Set the sorting direction for this sorter.
+     * @param {String} direction The direction to sort in. Should be either 'ASC' or 'DESC'.
+     */
     setDirection: function(direction) {
         var me = this;
         me.direction = direction;
         me.updateSortFunction();
     },
     
+<span id='Ext-util-Sorter-method-toggle'>    /**
+</span>     * Toggles the sorting direction for this sorter.
+     */
     toggle: function() {
         var me = this;
         me.direction = Ext.String.toggle(me.direction, &quot;ASC&quot;, &quot;DESC&quot;);
         me.updateSortFunction();
     },
     
-    updateSortFunction: function() {
+<span id='Ext-util-Sorter-method-updateSortFunction'>    /**
+</span>     * Update the sort function for this sorter.
+     * @param {Function} [fn] A new sorter function for this sorter. If not specified it will use the default
+     * sorting function.
+     */
+    updateSortFunction: function(fn) {
         var me = this;
-        me.sort = me.createSortFunction(me.sorterFn || me.defaultSorterFn);
+        fn = fn || me.sorterFn || me.defaultSorterFn;
+        me.sort = me.createSortFunction(fn);
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>