docs/source/CheckboxSelectionModel.html

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