source/widgets/grid/CheckboxSelectionModel.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.grid.CheckboxSelectionModel\r
  11  * @extends Ext.grid.RowSelectionModel\r
  12  * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.\r
  13  * @constructor\r
  14  * @param {Object} config The configuration options\r
  15  */\r
  16 Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {\r
  17     /**\r
  18      * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the checkbox column\r
  19      * (defaults to '&lt;div class="x-grid3-hd-checker">&#160;&lt;/div>').  The default CSS class of 'x-grid3-hd-checker'\r
  20      * displays a checkbox in the header and provides support for automatic check all/none behavior on header click.\r
  21      * This string can be replaced by any valid HTML fragment, including a simple text string (e.g., 'Select Rows'), but\r
  22      * the automatic check all/none behavior will only work if the 'x-grid3-hd-checker' class is supplied.\r
  23      */\r
  24     header: '<div class="x-grid3-hd-checker">&#160;</div>',\r
  25     /**\r
  26      * @cfg {Number} width The default width in pixels of the checkbox column (defaults to 20).\r
  27      */\r
  28     width: 20,\r
  29     /**\r
  30      * @cfg {Boolean} sortable True if the checkbox column is sortable (defaults to false).\r
  31      */\r
  32     sortable: false,\r
  33 \r
  34     // private\r
  35     menuDisabled:true,\r
  36     fixed:true,\r
  37     dataIndex: '',\r
  38     id: 'checker',\r
  39 \r
  40     // private\r
  41     initEvents : function(){\r
  42         Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);\r
  43         this.grid.on('render', function(){\r
  44             var view = this.grid.getView();\r
  45             view.mainBody.on('mousedown', this.onMouseDown, this);\r
  46             Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);\r
  47 \r
  48         }, this);\r
  49     },\r
  50 \r
  51     // private\r
  52     onMouseDown : function(e, t){\r
  53         if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click\r
  54             e.stopEvent();\r
  55             var row = e.getTarget('.x-grid3-row');\r
  56             if(row){\r
  57                 var index = row.rowIndex;\r
  58                 if(this.isSelected(index)){\r
  59                     this.deselectRow(index);\r
  60                 }else{\r
  61                     this.selectRow(index, true);\r
  62                 }\r
  63             }\r
  64         }\r
  65     },\r
  66 \r
  67     // private\r
  68     onHdMouseDown : function(e, t){\r
  69         if(t.className == 'x-grid3-hd-checker'){\r
  70             e.stopEvent();\r
  71             var hd = Ext.fly(t.parentNode);\r
  72             var isChecked = hd.hasClass('x-grid3-hd-checker-on');\r
  73             if(isChecked){\r
  74                 hd.removeClass('x-grid3-hd-checker-on');\r
  75                 this.clearSelections();\r
  76             }else{\r
  77                 hd.addClass('x-grid3-hd-checker-on');\r
  78                 this.selectAll();\r
  79             }\r
  80         }\r
  81     },\r
  82 \r
  83     // private\r
  84     renderer : function(v, p, record){\r
  85         return '<div class="x-grid3-row-checker">&#160;</div>';\r
  86     }\r
  87 });