Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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>