Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / TreeSorter.html
1 <html>
2 <head>
3   <title>The source code</title>
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
6 </head>
7 <body  onload="prettyPrint();">
8     <pre class="prettyprint lang-js">/*!
9  * Ext JS Library 3.0.3
10  * Copyright(c) 2006-2009 Ext JS, LLC
11  * licensing@extjs.com
12  * http://www.extjs.com/license
13  */
14 <div id="cls-Ext.tree.TreeSorter"></div>/**\r
15  * @class Ext.tree.TreeSorter\r
16  * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the \r
17  * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).\r
18  * Example usage:<br />\r
19  * <pre><code>\r
20 new Ext.tree.TreeSorter(myTree, {\r
21     folderSort: true,\r
22     dir: "desc",\r
23     sortType: function(node) {\r
24         // sort by a custom, typed attribute:\r
25         return parseInt(node.id, 10);\r
26     }\r
27 });\r
28 </code></pre>\r
29  * @constructor\r
30  * @param {TreePanel} tree\r
31  * @param {Object} config\r
32  */\r
33 Ext.tree.TreeSorter = function(tree, config){\r
34     <div id="cfg-Ext.tree.TreeSorter-folderSort"></div>/**\r
35      * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)\r
36      */\r
37     <div id="cfg-Ext.tree.TreeSorter-property"></div>/** \r
38      * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this \r
39      * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.\r
40      */\r
41     <div id="cfg-Ext.tree.TreeSorter-dir"></div>/** \r
42      * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")\r
43      */\r
44     <div id="cfg-Ext.tree.TreeSorter-leafAttr"></div>/** \r
45      * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")\r
46      */\r
47     <div id="cfg-Ext.tree.TreeSorter-caseSensitive"></div>/** \r
48      * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)\r
49      */\r
50     <div id="cfg-Ext.tree.TreeSorter-sortType"></div>/** \r
51      * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function\r
52      * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return\r
53      * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when\r
54      * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for \r
55      * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.\r
56      */\r
57     \r
58     Ext.apply(this, config);\r
59     tree.on("beforechildrenrendered", this.doSort, this);\r
60     tree.on("append", this.updateSort, this);\r
61     tree.on("insert", this.updateSort, this);\r
62     tree.on("textchange", this.updateSortParent, this);\r
63     \r
64     var dsc = this.dir && this.dir.toLowerCase() == "desc";\r
65     var p = this.property || "text";\r
66     var sortType = this.sortType;\r
67     var fs = this.folderSort;\r
68     var cs = this.caseSensitive === true;\r
69     var leafAttr = this.leafAttr || 'leaf';\r
70 \r
71     this.sortFn = function(n1, n2){\r
72         if(fs){\r
73             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){\r
74                 return 1;\r
75             }\r
76             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){\r
77                 return -1;\r
78             }\r
79         }\r
80         var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());\r
81         var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());\r
82         if(v1 < v2){\r
83                         return dsc ? +1 : -1;\r
84                 }else if(v1 > v2){\r
85                         return dsc ? -1 : +1;\r
86         }else{\r
87                 return 0;\r
88         }\r
89     };\r
90 };\r
91 \r
92 Ext.tree.TreeSorter.prototype = {\r
93     doSort : function(node){\r
94         node.sort(this.sortFn);\r
95     },\r
96     \r
97     compareNodes : function(n1, n2){\r
98         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);\r
99     },\r
100     \r
101     updateSort : function(tree, node){\r
102         if(node.childrenRendered){\r
103             this.doSort.defer(1, this, [node]);\r
104         }\r
105     },\r
106     \r
107     updateSortParent : function(node){\r
108                 var p = node.parentNode;\r
109                 if(p && p.childrenRendered){\r
110             this.doSort.defer(1, this, [p]);\r
111         }\r
112     }\r
113 };</pre>
114 </body>
115 </html>