src/widgets/list/Sorter.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.list.Sorter\r
   9  * @extends Ext.util.Observable\r
  10  * <p>Supporting Class for Ext.list.ListView</p>\r
  11  * @constructor\r
  12  * @param {Object} config\r
  13  */\r
  14 Ext.list.Sorter = Ext.extend(Ext.util.Observable, {\r
  15     /**\r
  16      * @cfg {Array} sortClasses\r
  17      * The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>)\r
  18      */\r
  19     sortClasses : ["sort-asc", "sort-desc"],\r
  20 \r
  21     constructor: function(config){\r
  22         Ext.apply(this, config);\r
  23         Ext.list.Sorter.superclass.constructor.call(this);\r
  24     },\r
  25 \r
  26     init : function(listView){\r
  27         this.view = listView;\r
  28         listView.on('render', this.initEvents, this);\r
  29     },\r
  30 \r
  31     initEvents : function(view){\r
  32         view.mon(view.innerHd, 'click', this.onHdClick, this);\r
  33         view.innerHd.setStyle('cursor', 'pointer');\r
  34         view.mon(view.store, 'datachanged', this.updateSortState, this);\r
  35         this.updateSortState.defer(10, this, [view.store]);\r
  36     },\r
  37 \r
  38     updateSortState : function(store){\r
  39         var state = store.getSortState();\r
  40         if(!state){\r
  41             return;\r
  42         }\r
  43         this.sortState = state;\r
  44         var cs = this.view.columns, sortColumn = -1;\r
  45         for(var i = 0, len = cs.length; i < len; i++){\r
  46             if(cs[i].dataIndex == state.field){\r
  47                 sortColumn = i;\r
  48                 break;\r
  49             }\r
  50         }\r
  51         if(sortColumn != -1){\r
  52             var sortDir = state.direction;\r
  53             this.updateSortIcon(sortColumn, sortDir);\r
  54         }\r
  55     },\r
  56 \r
  57     updateSortIcon : function(col, dir){\r
  58         var sc = this.sortClasses;\r
  59         var hds = this.view.innerHd.select('em').removeClass(sc);\r
  60         hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);\r
  61     },\r
  62 \r
  63     onHdClick : function(e){\r
  64         var hd = e.getTarget('em', 3);\r
  65         if(hd && !this.view.disableHeaders){\r
  66             var index = this.view.findHeaderIndex(hd);\r
  67             this.view.store.sort(this.view.columns[index].dataIndex);\r
  68         }\r
  69     }\r
  70 });\r
  71 \r
  72 // Backwards compatibility alias\r
  73 Ext.ListView.Sorter = Ext.list.Sorter;