src/widgets/grid/CheckboxSelectionModel.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.grid.CheckboxSelectionModel
   9  * @extends Ext.grid.RowSelectionModel
  10  * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
  11  * @constructor
  12  * @param {Object} config The configuration options
  13  */
  14 Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
  15
  16     /**
  17      * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
  18      * checkbox column (defaults to <tt>false</tt>).
  19      */
  20     /**
  21      * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the
  22      * checkbox column.  Defaults to:<pre><code>
  23      * '&lt;div class="x-grid3-hd-checker">&#38;#160;&lt;/div>'</tt>
  24      * </code></pre>
  25      * The default CSS class of <tt>'x-grid3-hd-checker'</tt> displays a checkbox in the header
  26      * and provides support for automatic check all/none behavior on header click. This string
  27      * can be replaced by any valid HTML fragment, including a simple text string (e.g.,
  28      * <tt>'Select Rows'</tt>), but the automatic check all/none behavior will only work if the
  29      * <tt>'x-grid3-hd-checker'</tt> class is supplied.
  30      */
  31     header : '<div class="x-grid3-hd-checker">&#160;</div>',
  32     /**
  33      * @cfg {Number} width The default width in pixels of the checkbox column (defaults to <tt>20</tt>).
  34      */
  35     width : 20,
  36     /**
  37      * @cfg {Boolean} sortable <tt>true</tt> if the checkbox column is sortable (defaults to
  38      * <tt>false</tt>).
  39      */
  40     sortable : false,
  41
  42     // private
  43     menuDisabled : true,
  44     fixed : true,
  45     hideable: false,
  46     dataIndex : '',
  47     id : 'checker',
  48
  49     constructor : function(){
  50         Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);
  51
  52         if(this.checkOnly){
  53             this.handleMouseDown = Ext.emptyFn;
  54         }
  55     },
  56
  57     // private
  58     initEvents : function(){
  59         Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
  60         this.grid.on('render', function(){
  61             var view = this.grid.getView();
  62             view.mainBody.on('mousedown', this.onMouseDown, this);
  63             Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
  64
  65         }, this);
  66     },
  67
  68     // If handleMouseDown was called from another event (enableDragDrop), set a flag so
  69     // onMouseDown does not process it a second time
  70     handleMouseDown : function() {
  71         Ext.grid.CheckboxSelectionModel.superclass.handleMouseDown.apply(this, arguments);
  72         this.mouseHandled = true;
  73     },
  74
  75     // private
  76     onMouseDown : function(e, t){
  77         if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
  78             e.stopEvent();
  79             var row = e.getTarget('.x-grid3-row');
  80
  81             // mouseHandled flag check for a duplicate selection (handleMouseDown) call
  82             if(!this.mouseHandled && row){
  83                 var index = row.rowIndex;
  84                 if(this.isSelected(index)){
  85                     this.deselectRow(index);
  86                 }else{
  87                     this.selectRow(index, true);
  88                     this.grid.getView().focusRow(index);
  89                 }
  90             }
  91         }
  92         this.mouseHandled = false;
  93     },
  94
  95     // private
  96     onHdMouseDown : function(e, t){
  97         if(t.className == 'x-grid3-hd-checker'){
  98             e.stopEvent();
  99             var hd = Ext.fly(t.parentNode);
 100             var isChecked = hd.hasClass('x-grid3-hd-checker-on');
 101             if(isChecked){
 102                 hd.removeClass('x-grid3-hd-checker-on');
 103                 this.clearSelections();
 104             }else{
 105                 hd.addClass('x-grid3-hd-checker-on');
 106                 this.selectAll();
 107             }
 108         }
 109     },
 110
 111     // private
 112     renderer : function(v, p, record){
 113         return '<div class="x-grid3-row-checker">&#160;</div>';
 114     }
 115 });