3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.selection.CheckboxModel
17 * @extends Ext.selection.RowModel
19 * 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.
22 * The selection model will inject a header for the checkboxes in the first view
23 * and according to the 'injectCheckbox' configuration.
25 Ext.define('Ext.selection.CheckboxModel', {
26 alias: 'selection.checkboxmodel',
27 extend: 'Ext.selection.RowModel',
32 * Valid values are SINGLE, SIMPLE, and MULTI. Defaults to 'MULTI'
37 * @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'.
46 * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
54 checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
56 bindComponent: function(view) {
60 me.callParent(arguments);
61 if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
62 // if we have a locked header, only hook up to the first
63 view.headerCt.on('headerclick', me.onHeaderClick, me);
65 me.mon(view.ownerCt, 'reconfigure', me.addCheckbox, me);
69 hasLockedHeader: function(){
70 var hasLocked = false;
71 Ext.each(this.views, function(view){
72 if (view.headerCt.lockedCt) {
81 * Add the header checkbox to the header row
83 * @param {Boolean} initial True if we're binding for the first time.
85 addCheckbox: function(initial){
87 checkbox = me.injectCheckbox,
89 headerCt = view.headerCt;
91 if (checkbox !== false) {
92 if (checkbox == 'first') {
94 } else if (checkbox == 'last') {
95 checkbox = headerCt.getColumnCount();
97 headerCt.add(checkbox, me.getHeaderConfig());
100 if (initial !== true) {
106 * Toggle the ui header between checked and unchecked state.
107 * @param {Boolean} isChecked
110 toggleUiHeader: function(isChecked) {
111 var view = this.views[0],
112 headerCt = view.headerCt,
113 checkHd = headerCt.child('gridcolumn[isCheckerHd]');
117 checkHd.el.addCls(this.checkerOnCls);
119 checkHd.el.removeCls(this.checkerOnCls);
125 * Toggle between selecting all and deselecting all when clicking on
128 onHeaderClick: function(headerCt, header, e) {
129 if (header.isCheckerHd) {
131 var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
133 // We have to supress the event or it will scrollTo the change
134 this.deselectAll(true);
136 // We have to supress the event or it will scrollTo the change
137 this.selectAll(true);
143 * Retrieve a configuration to be used in a HeaderContainer.
144 * This should be used when injectCheckbox is set to false.
146 getHeaderConfig: function() {
152 width: me.headerWidth,
159 cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
160 renderer: Ext.Function.bind(me.renderer, me),
161 locked: me.hasLockedHeader()
166 * Generates the HTML to be rendered in the injected checkbox column for each row.
167 * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
168 * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
170 renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
171 metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
172 return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
176 onRowMouseDown: function(view, record, item, index, e) {
179 checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
181 if (!me.allowRightMouseSelection(e)) {
185 // checkOnly set, but we didn't click on a checker.
186 if (me.checkOnly && !checker) {
191 var mode = me.getSelectionMode();
192 // dont change the mode if its single otherwise
193 // we would get multiple selection
194 if (mode !== 'SINGLE') {
195 me.setSelectionMode('SIMPLE');
197 me.selectWithEvent(record, e);
198 me.setSelectionMode(mode);
200 me.selectWithEvent(record, e);
205 * Synchronize header checker value as selection changes.
208 onSelectChange: function() {
209 this.callParent(arguments);
211 // check to see if all records are selected
212 var hdSelectStatus = this.selected.getCount() === this.store.getCount();
213 this.toggleUiHeader(hdSelectStatus);