PageRenderTime 29ms CodeModel.GetById 21ms app.highlight 5ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/CheckboxModel.html

https://bitbucket.org/srogerf/javascript
HTML | 249 lines | 221 code | 28 blank | 0 comment | 0 complexity | 341e7596203df8278c12b5db3d468583 MD5 | raw file
  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> * A selection model that renders a column of checkboxes that can be toggled to
 20 * select or deselect rows. The default mode for this selection model is MULTI.
 21 *
 22 * The selection model will inject a header for the checkboxes in the first view
 23 * and according to the 'injectCheckbox' configuration.
 24 */
 25Ext.define('Ext.selection.CheckboxModel', {
 26    alias: 'selection.checkboxmodel',
 27    extend: 'Ext.selection.RowModel',
 28
 29<span id='Ext-selection-CheckboxModel-cfg-mode'>    /**
 30</span>     * @cfg {String} mode
 31     * Modes of selection.
 32     * Valid values are SINGLE, SIMPLE, and MULTI.
 33     */
 34    mode: 'MULTI',
 35
 36<span id='Ext-selection-CheckboxModel-cfg-injectCheckbox'>    /**
 37</span>     * @cfg {Number/Boolean/String} injectCheckbox
 38     * Instructs the SelectionModel whether or not to inject the checkbox header
 39     * automatically or not. (Note: By not placing the checkbox in manually, the
 40     * grid view will need to be rendered 2x on initial render.)
 41     * Supported values are a Number index, false and the strings 'first' and 'last'.
 42     */
 43    injectCheckbox: 0,
 44
 45<span id='Ext-selection-CheckboxModel-cfg-checkOnly'>    /**
 46</span>     * @cfg {Boolean} checkOnly
 47     * True if rows can only be selected by clicking on the checkbox column.
 48     */
 49    checkOnly: false,
 50    
 51<span id='Ext-selection-CheckboxModel-cfg-showHeaderCheckbox'>    /**
 52</span>     * @cfg {Boolean} showHeaderCheckbox
 53     * False to not display the header checkbox at the top of the column.
 54     */
 55    showHeaderCheckbox: true,
 56
 57    headerWidth: 24,
 58
 59    // private
 60    checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
 61
 62    bindComponent: function(view) {
 63        var me = this;
 64
 65        me.sortable = false;
 66        me.callParent(arguments);
 67        if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
 68            // if we have a locked header, only hook up to the first
 69            view.headerCt.on('headerclick', me.onHeaderClick, me);
 70            me.addCheckbox(true);
 71            me.mon(view.ownerCt, 'reconfigure', me.onReconfigure, me);
 72        }
 73    },
 74
 75    hasLockedHeader: function(){
 76        var views     = this.views,
 77            vLen      = views.length,
 78            v;
 79
 80        for (v = 0; v &lt; vLen; v++) {
 81            if (views[v].headerCt.lockedCt) {
 82                return true;
 83            }
 84        }
 85        return false;
 86    },
 87
 88<span id='Ext-selection-CheckboxModel-method-addCheckbox'>    /**
 89</span>     * Add the header checkbox to the header row
 90     * @private
 91     * @param {Boolean} initial True if we're binding for the first time.
 92     */
 93    addCheckbox: function(initial){
 94        var me = this,
 95            checkbox = me.injectCheckbox,
 96            view = me.views[0],
 97            headerCt = view.headerCt;
 98
 99        if (checkbox !== false) {
100            if (checkbox == 'first') {
101                checkbox = 0;
102            } else if (checkbox == 'last') {
103                checkbox = headerCt.getColumnCount();
104            }
105            headerCt.add(checkbox,  me.getHeaderConfig());
106        }
107
108        if (initial !== true) {
109            view.refresh();
110        }
111    },
112
113<span id='Ext-selection-CheckboxModel-method-onReconfigure'>    /**
114</span>     * Handles the grid's reconfigure event.  Adds the checkbox header if the columns have been reconfigured.
115     * @private
116     * @param {Ext.panel.Table} grid
117     * @param {Ext.data.Store} store
118     * @param {Object[]} columns
119     */
120    onReconfigure: function(grid, store, columns) {
121        if(columns) {
122            this.addCheckbox();
123        }
124    },
125
126<span id='Ext-selection-CheckboxModel-method-toggleUiHeader'>    /**
127</span>     * Toggle the ui header between checked and unchecked state.
128     * @param {Boolean} isChecked
129     * @private
130     */
131    toggleUiHeader: function(isChecked) {
132        var view     = this.views[0],
133            headerCt = view.headerCt,
134            checkHd  = headerCt.child('gridcolumn[isCheckerHd]');
135
136        if (checkHd) {
137            if (isChecked) {
138                checkHd.el.addCls(this.checkerOnCls);
139            } else {
140                checkHd.el.removeCls(this.checkerOnCls);
141            }
142        }
143    },
144
145<span id='Ext-selection-CheckboxModel-method-onHeaderClick'>    /**
146</span>     * Toggle between selecting all and deselecting all when clicking on
147     * a checkbox header.
148     */
149    onHeaderClick: function(headerCt, header, e) {
150        if (header.isCheckerHd) {
151            e.stopEvent();
152            var me = this,
153                isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
154                
155            // Prevent focus changes on the view, since we're selecting/deselecting all records
156            me.preventFocus = true;
157            if (isChecked) {
158                me.deselectAll();
159            } else {
160                me.selectAll();
161            }
162            delete me.preventFocus;
163        }
164    },
165
166<span id='Ext-selection-CheckboxModel-method-getHeaderConfig'>    /**
167</span>     * Retrieve a configuration to be used in a HeaderContainer.
168     * This should be used when injectCheckbox is set to false.
169     */
170    getHeaderConfig: function() {
171        var me = this,
172            showCheck = me.showHeaderCheckbox !== false;
173
174        return {
175            isCheckerHd: showCheck,
176            text : '&amp;#160;',
177            width: me.headerWidth,
178            sortable: false,
179            draggable: false,
180            resizable: false,
181            hideable: false,
182            menuDisabled: true,
183            dataIndex: '',
184            cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
185            renderer: Ext.Function.bind(me.renderer, me),
186            editRenderer: me.editRenderer || me.renderEmpty,
187            locked: me.hasLockedHeader()
188        };
189    },
190    
191    renderEmpty: function(){
192        return '&amp;#160;';    
193    },
194
195<span id='Ext-selection-CheckboxModel-method-renderer'>    /**
196</span>     * Generates the HTML to be rendered in the injected checkbox column for each row.
197     * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
198     * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
199     */
200    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
201        var baseCSSPrefix = Ext.baseCSSPrefix;
202        metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
203        return '&lt;div class=&quot;' + baseCSSPrefix + 'grid-row-checker&quot;&gt;&amp;#160;&lt;/div&gt;';
204    },
205
206    // override
207    onRowMouseDown: function(view, record, item, index, e) {
208        view.el.focus();
209        var me = this,
210            checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
211            
212        if (!me.allowRightMouseSelection(e)) {
213            return;
214        }
215
216        // checkOnly set, but we didn't click on a checker.
217        if (me.checkOnly &amp;&amp; !checker) {
218            return;
219        }
220
221        if (checker) {
222            var mode = me.getSelectionMode();
223            // dont change the mode if its single otherwise
224            // we would get multiple selection
225            if (mode !== 'SINGLE') {
226                me.setSelectionMode('SIMPLE');
227            }
228            me.selectWithEvent(record, e);
229            me.setSelectionMode(mode);
230        } else {
231            me.selectWithEvent(record, e);
232        }
233    },
234
235<span id='Ext-selection-CheckboxModel-method-onSelectChange'>    /**
236</span>     * Synchronize header checker value as selection changes.
237     * @private
238     */
239    onSelectChange: function() {
240        this.callParent(arguments);
241
242        // check to see if all records are selected
243        var hdSelectStatus = this.selected.getCount() === this.store.getCount();
244        this.toggleUiHeader(hdSelectStatus);
245    }
246});
247</pre>
248</body>
249</html>