Sorter.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-util-Sorter'>/**
  19. </span> * Represents a single sorter that can be applied to a Store. The sorter is used
  20. * to compare two values against each other for the purpose of ordering them. Ordering
  21. * is achieved by specifying either:
  22. *
  23. * - {@link #property A sorting property}
  24. * - {@link #sorterFn A sorting function}
  25. *
  26. * As a contrived example, we can specify a custom sorter that sorts by rank:
  27. *
  28. * Ext.define('Person', {
  29. * extend: 'Ext.data.Model',
  30. * fields: ['name', 'rank']
  31. * });
  32. *
  33. * Ext.create('Ext.data.Store', {
  34. * model: 'Person',
  35. * proxy: 'memory',
  36. * sorters: [{
  37. * sorterFn: function(o1, o2){
  38. * var getRank = function(o){
  39. * var name = o.get('rank');
  40. * if (name === 'first') {
  41. * return 1;
  42. * } else if (name === 'second') {
  43. * return 2;
  44. * } else {
  45. * return 3;
  46. * }
  47. * },
  48. * rank1 = getRank(o1),
  49. * rank2 = getRank(o2);
  50. *
  51. * if (rank1 === rank2) {
  52. * return 0;
  53. * }
  54. *
  55. * return rank1 &lt; rank2 ? -1 : 1;
  56. * }
  57. * }],
  58. * data: [{
  59. * name: 'Person1',
  60. * rank: 'second'
  61. * }, {
  62. * name: 'Person2',
  63. * rank: 'third'
  64. * }, {
  65. * name: 'Person3',
  66. * rank: 'first'
  67. * }]
  68. * });
  69. */
  70. Ext.define('Ext.util.Sorter', {
  71. <span id='Ext-util-Sorter-cfg-property'> /**
  72. </span> * @cfg {String} property
  73. * The property to sort by. Required unless {@link #sorterFn} is provided. The property is extracted from the object
  74. * directly and compared for sorting using the built in comparison operators.
  75. */
  76. <span id='Ext-util-Sorter-cfg-sorterFn'> /**
  77. </span> * @cfg {Function} sorterFn
  78. * A specific sorter function to execute. Can be passed instead of {@link #property}. This sorter function allows
  79. * for any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The
  80. * function should return:
  81. *
  82. * - -1 if o1 is &quot;less than&quot; o2
  83. * - 0 if o1 is &quot;equal&quot; to o2
  84. * - 1 if o1 is &quot;greater than&quot; o2
  85. */
  86. <span id='Ext-util-Sorter-cfg-root'> /**
  87. </span> * @cfg {String} root
  88. * Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to
  89. * make the filter pull the {@link #property} out of the data object of each item
  90. */
  91. <span id='Ext-util-Sorter-cfg-transform'> /**
  92. </span> * @cfg {Function} transform
  93. * A function that will be run on each value before it is compared in the sorter. The function will receive a single
  94. * argument, the value.
  95. */
  96. <span id='Ext-util-Sorter-cfg-direction'> /**
  97. </span> * @cfg {String} direction
  98. * The direction to sort by.
  99. */
  100. direction: &quot;ASC&quot;,
  101. constructor: function(config) {
  102. var me = this;
  103. Ext.apply(me, config);
  104. //&lt;debug&gt;
  105. if (me.property === undefined &amp;&amp; me.sorterFn === undefined) {
  106. Ext.Error.raise(&quot;A Sorter requires either a property or a sorter function&quot;);
  107. }
  108. //&lt;/debug&gt;
  109. me.updateSortFunction();
  110. },
  111. <span id='Ext-util-Sorter-method-createSortFunction'> /**
  112. </span> * @private
  113. * Creates and returns a function which sorts an array by the given property and direction
  114. * @return {Function} A function which sorts by the property/direction combination provided
  115. */
  116. createSortFunction: function(sorterFn) {
  117. var me = this,
  118. property = me.property,
  119. direction = me.direction || &quot;ASC&quot;,
  120. modifier = direction.toUpperCase() == &quot;DESC&quot; ? -1 : 1;
  121. //create a comparison function. Takes 2 objects, returns 1 if object 1 is greater,
  122. //-1 if object 2 is greater or 0 if they are equal
  123. return function(o1, o2) {
  124. return modifier * sorterFn.call(me, o1, o2);
  125. };
  126. },
  127. <span id='Ext-util-Sorter-method-defaultSorterFn'> /**
  128. </span> * @private
  129. * Basic default sorter function that just compares the defined property of each object
  130. */
  131. defaultSorterFn: function(o1, o2) {
  132. var me = this,
  133. transform = me.transform,
  134. v1 = me.getRoot(o1)[me.property],
  135. v2 = me.getRoot(o2)[me.property];
  136. if (transform) {
  137. v1 = transform(v1);
  138. v2 = transform(v2);
  139. }
  140. return v1 &gt; v2 ? 1 : (v1 &lt; v2 ? -1 : 0);
  141. },
  142. <span id='Ext-util-Sorter-method-getRoot'> /**
  143. </span> * @private
  144. * Returns the root property of the given item, based on the configured {@link #root} property
  145. * @param {Object} item The item
  146. * @return {Object} The root property of the object
  147. */
  148. getRoot: function(item) {
  149. return this.root === undefined ? item : item[this.root];
  150. },
  151. <span id='Ext-util-Sorter-method-setDirection'> /**
  152. </span> * Set the sorting direction for this sorter.
  153. * @param {String} direction The direction to sort in. Should be either 'ASC' or 'DESC'.
  154. */
  155. setDirection: function(direction) {
  156. var me = this;
  157. me.direction = direction ? direction.toUpperCase() : direction;
  158. me.updateSortFunction();
  159. },
  160. <span id='Ext-util-Sorter-method-toggle'> /**
  161. </span> * Toggles the sorting direction for this sorter.
  162. */
  163. toggle: function() {
  164. var me = this;
  165. me.direction = Ext.String.toggle(me.direction, &quot;ASC&quot;, &quot;DESC&quot;);
  166. me.updateSortFunction();
  167. },
  168. <span id='Ext-util-Sorter-method-updateSortFunction'> /**
  169. </span> * Update the sort function for this sorter.
  170. * @param {Function} [fn] A new sorter function for this sorter. If not specified it will use the default
  171. * sorting function.
  172. */
  173. updateSortFunction: function(fn) {
  174. var me = this;
  175. fn = fn || me.sorterFn || me.defaultSorterFn;
  176. me.sort = me.createSortFunction(fn);
  177. }
  178. });</pre>
  179. </body>
  180. </html>