1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-selection.CheckboxModel'>/**
2 </span> * @class Ext.selection.CheckboxModel
3 * @extends Ext.selection.RowModel
5 * A selection model that renders a column of checkboxes that can be toggled to
6 * select or deselect rows. The default mode for this selection model is MULTI.
8 * The selection model will inject a header for the checkboxes in the first view
9 * and according to the 'injectCheckbox' configuration.
11 Ext.define('Ext.selection.CheckboxModel', {
12 extend: 'Ext.selection.RowModel',
14 <span id='Ext-selection.CheckboxModel-cfg-mode'> /**
15 </span> * @cfg {String} mode
17 * Valid values are SINGLE, SIMPLE, and MULTI. Defaults to 'MULTI'
21 <span id='Ext-selection.CheckboxModel-cfg-injectCheckbox'> /**
22 </span> * @cfg {Mixed} injectCheckbox
23 * Instructs the SelectionModel whether or not to inject the checkbox header
24 * automatically or not. (Note: By not placing the checkbox in manually, the
25 * grid view will need to be rendered 2x on initial render.)
26 * Supported values are a Number index, false and the strings 'first' and 'last'.
31 <span id='Ext-selection.CheckboxModel-cfg-checkOnly'> /**
32 </span> * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
33 * checkbox column (defaults to <tt>false</tt>).
38 checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
40 bindComponent: function() {
41 this.sortable = false;
42 this.callParent(arguments);
44 var view = this.views[0],
45 headerCt = view.headerCt;
47 if (this.injectCheckbox !== false) {
48 if (this.injectCheckbox == 'first') {
49 this.injectCheckbox = 0;
50 } else if (this.injectCheckbox == 'last') {
51 this.injectCheckbox = headerCt.getColumnCount();
53 headerCt.add(this.injectCheckbox, this.getHeaderConfig());
55 headerCt.on('headerclick', this.onHeaderClick, this);
58 <span id='Ext-selection.CheckboxModel-method-toggleUiHeader'> /**
59 </span> * Toggle the ui header between checked and unchecked state.
60 * @param {Boolean} isChecked
63 toggleUiHeader: function(isChecked) {
64 var view = this.views[0],
65 headerCt = view.headerCt,
66 checkHd = headerCt.child('gridcolumn[isCheckerHd]');
70 checkHd.el.addCls(this.checkerOnCls);
72 checkHd.el.removeCls(this.checkerOnCls);
77 <span id='Ext-selection.CheckboxModel-method-onHeaderClick'> /**
78 </span> * Toggle between selecting all and deselecting all when clicking on
81 onHeaderClick: function(headerCt, header, e) {
82 if (header.isCheckerHd) {
84 var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
86 // We have to supress the event or it will scrollTo the change
87 this.deselectAll(true);
89 // We have to supress the event or it will scrollTo the change
95 <span id='Ext-selection.CheckboxModel-method-getHeaderConfig'> /**
96 </span> * Retrieve a configuration to be used in a HeaderContainer.
97 * This should be used when injectCheckbox is set to false.
99 getHeaderConfig: function() {
109 cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
110 renderer: Ext.Function.bind(this.renderer, this)
114 <span id='Ext-selection.CheckboxModel-method-renderer'> /**
115 </span> * Generates the HTML to be rendered in the injected checkbox column for each row.
116 * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
117 * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
119 renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
120 metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
121 return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker">&#160;</div>';
125 onRowMouseDown: function(view, record, item, index, e) {
128 checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
130 // checkOnly set, but we didn't click on a checker.
131 if (me.checkOnly && !checker) {
136 var mode = me.getSelectionMode();
137 // dont change the mode if its single otherwise
138 // we would get multiple selection
139 if (mode !== 'SINGLE') {
140 me.setSelectionMode('SIMPLE');
142 me.selectWithEvent(record, e);
143 me.setSelectionMode(mode);
145 me.selectWithEvent(record, e);
149 <span id='Ext-selection.CheckboxModel-method-onSelectChange'> /**
150 </span> * Synchronize header checker value as selection changes.
153 onSelectChange: function(record, isSelected) {
154 this.callParent([record, isSelected]);
155 // check to see if all records are selected
156 var hdSelectStatus = this.selected.getCount() === this.store.getCount();
157 this.toggleUiHeader(hdSelectStatus);
160 </pre></pre></body></html>