3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
10 * @class Ext.ux.tree.TreeGridSorter
11 * @extends Ext.tree.TreeSorter
12 * Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}. The TreeGridSorter automatically monitors events on the
13 * associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
14 * Example usage:<br />
16 new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
19 sortType: function(node) {
20 // sort by a custom, typed attribute:
21 return parseInt(node.id, 10);
26 * @param {TreeGrid} tree
27 * @param {Object} config
29 Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
31 * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
33 sortClasses : ['sort-asc', 'sort-desc'],
35 * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
37 sortAscText : 'Sort Ascending',
39 * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)
41 sortDescText : 'Sort Descending',
43 constructor : function(tree, config) {
44 if(!Ext.isObject(config)) {
46 property: tree.columns[0].dataIndex || 'text',
51 Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);
54 tree.on('headerclick', this.onHeaderClick, this);
55 tree.ddAppendOnly = true;
58 this.defaultSortFn = function(n1, n2){
60 var desc = me.dir && me.dir.toLowerCase() == 'desc',
61 prop = me.property || 'text',
62 sortType = me.sortType,
63 caseSensitive = me.caseSensitive === true,
64 leafAttr = me.leafAttr || 'leaf',
65 attr1 = n1.attributes,
66 attr2 = n2.attributes;
69 if(attr1[leafAttr] && !attr2[leafAttr]){
72 if(!attr1[leafAttr] && attr2[leafAttr]){
76 var prop1 = attr1[prop],
78 v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase());
79 v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase());
82 return desc ? +1 : -1;
84 return desc ? -1 : +1;
90 tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
91 tree.on('headermenuclick', this.onHeaderMenuClick, this);
94 onAfterTreeRender : function() {
96 this.tree.hmenu.insert(0,
97 {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
98 {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
101 this.updateSortIcon(0, 'asc');
104 onHeaderMenuClick : function(c, id, index) {
105 if(id === 'asc' || id === 'desc') {
106 this.onHeaderClick(c, null, index);
111 onHeaderClick : function(c, el, i) {
112 if(c && !this.tree.headersDisabled){
115 me.property = c.dataIndex;
116 me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
117 me.sortType = c.sortType;
118 me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
119 me.sortFn = c.sortFn || this.defaultSortFn;
121 this.tree.root.cascade(function(n) {
123 me.updateSort(me.tree, n);
127 this.updateSortIcon(i, c.dir);
132 updateSortIcon : function(col, dir){
133 var sc = this.sortClasses,
134 hds = this.tree.innerHd.select('td').removeClass(sc);
135 hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);