Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / TreeSorter.html
diff --git a/docs/source/TreeSorter.html b/docs/source/TreeSorter.html
new file mode 100644 (file)
index 0000000..b2ab886
--- /dev/null
@@ -0,0 +1,109 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.tree.TreeSorter"></div>/**\r
+ * @class Ext.tree.TreeSorter\r
+ * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the \r
+ * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).\r
+ * Example usage:<br />\r
+ * <pre><code>\r
+new Ext.tree.TreeSorter(myTree, {\r
+    folderSort: true,\r
+    dir: "desc",\r
+    sortType: function(node) {\r
+        // sort by a custom, typed attribute:\r
+        return parseInt(node.id, 10);\r
+    }\r
+});\r
+</code></pre>\r
+ * @constructor\r
+ * @param {TreePanel} tree\r
+ * @param {Object} config\r
+ */\r
+Ext.tree.TreeSorter = function(tree, config){\r
+    <div id="cfg-Ext.tree.TreeSorter-folderSort"></div>/**\r
+     * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)\r
+     */\r
+    <div id="cfg-Ext.tree.TreeSorter-property"></div>/** \r
+     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this \r
+     * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.\r
+     */\r
+    <div id="cfg-Ext.tree.TreeSorter-dir"></div>/** \r
+     * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")\r
+     */\r
+    <div id="cfg-Ext.tree.TreeSorter-leafAttr"></div>/** \r
+     * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")\r
+     */\r
+    <div id="cfg-Ext.tree.TreeSorter-caseSensitive"></div>/** \r
+     * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)\r
+     */\r
+    <div id="cfg-Ext.tree.TreeSorter-sortType"></div>/** \r
+     * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function\r
+     * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return\r
+     * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when\r
+     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for \r
+     * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.\r
+     */\r
+    \r
+    Ext.apply(this, config);\r
+    tree.on("beforechildrenrendered", this.doSort, this);\r
+    tree.on("append", this.updateSort, this);\r
+    tree.on("insert", this.updateSort, this);\r
+    tree.on("textchange", this.updateSortParent, this);\r
+    \r
+    var dsc = this.dir && this.dir.toLowerCase() == "desc";\r
+    var p = this.property || "text";\r
+    var sortType = this.sortType;\r
+    var fs = this.folderSort;\r
+    var cs = this.caseSensitive === true;\r
+    var leafAttr = this.leafAttr || 'leaf';\r
+\r
+    this.sortFn = function(n1, n2){\r
+        if(fs){\r
+            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){\r
+                return 1;\r
+            }\r
+            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){\r
+                return -1;\r
+            }\r
+        }\r
+       var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());\r
+       var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());\r
+       if(v1 < v2){\r
+                       return dsc ? +1 : -1;\r
+               }else if(v1 > v2){\r
+                       return dsc ? -1 : +1;\r
+        }else{\r
+               return 0;\r
+        }\r
+    };\r
+};\r
+\r
+Ext.tree.TreeSorter.prototype = {\r
+    doSort : function(node){\r
+        node.sort(this.sortFn);\r
+    },\r
+    \r
+    compareNodes : function(n1, n2){\r
+        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);\r
+    },\r
+    \r
+    updateSort : function(tree, node){\r
+        if(node.childrenRendered){\r
+            this.doSort.defer(1, this, [node]);\r
+        }\r
+    },\r
+    \r
+    updateSortParent : function(node){\r
+               var p = node.parentNode;\r
+               if(p && p.childrenRendered){\r
+            this.doSort.defer(1, this, [p]);\r
+        }\r
+    }\r
+};</pre>    \r
+</body>\r
+</html>
\ No newline at end of file