docs/source/CheckboxModel.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-selection-CheckboxModel'>/**
  19 </span> * @class Ext.selection.CheckboxModel
  20  * @extends Ext.selection.RowModel
  21  *
  22  * A selection model that renders a column of checkboxes that can be toggled to
  23  * select or deselect rows. The default mode for this selection model is MULTI.
  24  *
  25  * The selection model will inject a header for the checkboxes in the first view
  26  * and according to the 'injectCheckbox' configuration.
  27  */
  28 Ext.define('Ext.selection.CheckboxModel', {
  29     alias: 'selection.checkboxmodel',
  30     extend: 'Ext.selection.RowModel',
  31
  32 <span id='Ext-selection-CheckboxModel-cfg-mode'>    /**
  33 </span>     * @cfg {String} mode
  34      * Modes of selection.
  35      * Valid values are SINGLE, SIMPLE, and MULTI. Defaults to 'MULTI'
  36      */
  37     mode: 'MULTI',
  38
  39 <span id='Ext-selection-CheckboxModel-cfg-injectCheckbox'>    /**
  40 </span>     * @cfg {Number/Boolean/String} injectCheckbox
  41      * Instructs the SelectionModel whether or not to inject the checkbox header
  42      * automatically or not. (Note: By not placing the checkbox in manually, the
  43      * grid view will need to be rendered 2x on initial render.)
  44      * Supported values are a Number index, false and the strings 'first' and 'last'.
  45      */
  46     injectCheckbox: 0,
  47
  48 <span id='Ext-selection-CheckboxModel-cfg-checkOnly'>    /**
  49 </span>     * @cfg {Boolean} checkOnly &lt;tt&gt;true&lt;/tt&gt; if rows can only be selected by clicking on the
  50      * checkbox column.
  51      */
  52     checkOnly: false,
  53
  54     headerWidth: 24,
  55
  56     // private
  57     checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
  58
  59     bindComponent: function(view) {
  60         var me = this;
  61
  62         me.sortable = false;
  63         me.callParent(arguments);
  64         if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
  65             // if we have a locked header, only hook up to the first
  66             view.headerCt.on('headerclick', me.onHeaderClick, me);
  67             me.addCheckbox(true);
  68             me.mon(view.ownerCt, 'reconfigure', me.addCheckbox, me);
  69         }
  70     },
  71
  72     hasLockedHeader: function(){
  73         var hasLocked = false;
  74         Ext.each(this.views, function(view){
  75             if (view.headerCt.lockedCt) {
  76                 hasLocked = true;
  77                 return false;
  78             }
  79         });
  80         return hasLocked;
  81     },
  82
  83 <span id='Ext-selection-CheckboxModel-method-addCheckbox'>    /**
  84 </span>     * Add the header checkbox to the header row
  85      * @private
  86      * @param {Boolean} initial True if we're binding for the first time.
  87      */
  88     addCheckbox: function(initial){
  89         var me = this,
  90             checkbox = me.injectCheckbox,
  91             view = me.views[0],
  92             headerCt = view.headerCt;
  93
  94         if (checkbox !== false) {
  95             if (checkbox == 'first') {
  96                 checkbox = 0;
  97             } else if (checkbox == 'last') {
  98                 checkbox = headerCt.getColumnCount();
  99             }
 100             headerCt.add(checkbox,  me.getHeaderConfig());
 101         }
 102
 103         if (initial !== true) {
 104             view.refresh();
 105         }
 106     },
 107
 108 <span id='Ext-selection-CheckboxModel-method-toggleUiHeader'>    /**
 109 </span>     * Toggle the ui header between checked and unchecked state.
 110      * @param {Boolean} isChecked
 111      * @private
 112      */
 113     toggleUiHeader: function(isChecked) {
 114         var view     = this.views[0],
 115             headerCt = view.headerCt,
 116             checkHd  = headerCt.child('gridcolumn[isCheckerHd]');
 117
 118         if (checkHd) {
 119             if (isChecked) {
 120                 checkHd.el.addCls(this.checkerOnCls);
 121             } else {
 122                 checkHd.el.removeCls(this.checkerOnCls);
 123             }
 124         }
 125     },
 126
 127 <span id='Ext-selection-CheckboxModel-method-onHeaderClick'>    /**
 128 </span>     * Toggle between selecting all and deselecting all when clicking on
 129      * a checkbox header.
 130      */
 131     onHeaderClick: function(headerCt, header, e) {
 132         if (header.isCheckerHd) {
 133             e.stopEvent();
 134             var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
 135             if (isChecked) {
 136                 // We have to supress the event or it will scrollTo the change
 137                 this.deselectAll(true);
 138             } else {
 139                 // We have to supress the event or it will scrollTo the change
 140                 this.selectAll(true);
 141             }
 142         }
 143     },
 144
 145 <span id='Ext-selection-CheckboxModel-method-getHeaderConfig'>    /**
 146 </span>     * Retrieve a configuration to be used in a HeaderContainer.
 147      * This should be used when injectCheckbox is set to false.
 148      */
 149     getHeaderConfig: function() {
 150         var me = this;
 151
 152         return {
 153             isCheckerHd: true,
 154             text : '&amp;#160;',
 155             width: me.headerWidth,
 156             sortable: false,
 157             draggable: false,
 158             resizable: false,
 159             hideable: false,
 160             menuDisabled: true,
 161             dataIndex: '',
 162             cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
 163             renderer: Ext.Function.bind(me.renderer, me),
 164             locked: me.hasLockedHeader()
 165         };
 166     },
 167
 168 <span id='Ext-selection-CheckboxModel-method-renderer'>    /**
 169 </span>     * Generates the HTML to be rendered in the injected checkbox column for each row.
 170      * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
 171      * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
 172      */
 173     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
 174         metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
 175         return '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'grid-row-checker&quot;&gt;&amp;#160;&lt;/div&gt;';
 176     },
 177
 178     // override
 179     onRowMouseDown: function(view, record, item, index, e) {
 180         view.el.focus();
 181         var me = this,
 182             checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
 183
 184         if (!me.allowRightMouseSelection(e)) {
 185             return;
 186         }
 187
 188         // checkOnly set, but we didn't click on a checker.
 189         if (me.checkOnly &amp;&amp; !checker) {
 190             return;
 191         }
 192
 193         if (checker) {
 194             var mode = me.getSelectionMode();
 195             // dont change the mode if its single otherwise
 196             // we would get multiple selection
 197             if (mode !== 'SINGLE') {
 198                 me.setSelectionMode('SIMPLE');
 199             }
 200             me.selectWithEvent(record, e);
 201             me.setSelectionMode(mode);
 202         } else {
 203             me.selectWithEvent(record, e);
 204         }
 205     },
 206
 207 <span id='Ext-selection-CheckboxModel-method-onSelectChange'>    /**
 208 </span>     * Synchronize header checker value as selection changes.
 209      * @private
 210      */
 211     onSelectChange: function() {
 212         this.callParent(arguments);
 213
 214         // check to see if all records are selected
 215         var hdSelectStatus = this.selected.getCount() === this.store.getCount();
 216         this.toggleUiHeader(hdSelectStatus);
 217     }
 218 });
 219 </pre>
 220 </body>
 221 </html>