Upgrade to ExtJS 4.0.2 - Released 06/09/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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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 {Mixed} 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      * Default is 0.
46      */
47     injectCheckbox: 0,
48
49 <span id='Ext-selection-CheckboxModel-cfg-checkOnly'>    /**
50 </span>     * @cfg {Boolean} checkOnly &lt;tt&gt;true&lt;/tt&gt; if rows can only be selected by clicking on the
51      * checkbox column (defaults to &lt;tt&gt;false&lt;/tt&gt;).
52      */
53     checkOnly: false,
54
55     // private
56     checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
57
58     bindComponent: function() {
59         this.sortable = false;
60         this.callParent(arguments);
61
62         var view     = this.views[0],
63             headerCt = view.headerCt;
64
65         if (this.injectCheckbox !== false) {
66             if (this.injectCheckbox == 'first') {
67                 this.injectCheckbox = 0;
68             } else if (this.injectCheckbox == 'last') {
69                 this.injectCheckbox = headerCt.getColumnCount();
70             }
71             headerCt.add(this.injectCheckbox,  this.getHeaderConfig());
72         }
73         headerCt.on('headerclick', this.onHeaderClick, this);
74     },
75
76 <span id='Ext-selection-CheckboxModel-method-toggleUiHeader'>    /**
77 </span>     * Toggle the ui header between checked and unchecked state.
78      * @param {Boolean} isChecked
79      * @private
80      */
81     toggleUiHeader: function(isChecked) {
82         var view     = this.views[0],
83             headerCt = view.headerCt,
84             checkHd  = headerCt.child('gridcolumn[isCheckerHd]');
85
86         if (checkHd) {
87             if (isChecked) {
88                 checkHd.el.addCls(this.checkerOnCls);
89             } else {
90                 checkHd.el.removeCls(this.checkerOnCls);
91             }
92         }
93     },
94
95 <span id='Ext-selection-CheckboxModel-method-onHeaderClick'>    /**
96 </span>     * Toggle between selecting all and deselecting all when clicking on
97      * a checkbox header.
98      */
99     onHeaderClick: function(headerCt, header, e) {
100         if (header.isCheckerHd) {
101             e.stopEvent();
102             var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
103             if (isChecked) {
104                 // We have to supress the event or it will scrollTo the change
105                 this.deselectAll(true);
106             } else {
107                 // We have to supress the event or it will scrollTo the change
108                 this.selectAll(true);
109             }
110         }
111     },
112
113 <span id='Ext-selection-CheckboxModel-method-getHeaderConfig'>    /**
114 </span>     * Retrieve a configuration to be used in a HeaderContainer.
115      * This should be used when injectCheckbox is set to false.
116      */
117     getHeaderConfig: function() {
118         return {
119             isCheckerHd: true,
120             text : '&amp;#160;',
121             width: 24,
122             sortable: false,
123             fixed: true,
124             hideable: false,
125             menuDisabled: true,
126             dataIndex: '',
127             cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
128             renderer: Ext.Function.bind(this.renderer, this)
129         };
130     },
131
132 <span id='Ext-selection-CheckboxModel-method-renderer'>    /**
133 </span>     * Generates the HTML to be rendered in the injected checkbox column for each row.
134      * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
135      * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
136      */
137     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
138         metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
139         return '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'grid-row-checker&quot;&gt;&amp;#160;&lt;/div&gt;';
140     },
141
142     // override
143     onRowMouseDown: function(view, record, item, index, e) {
144         view.el.focus();
145         var me = this,
146             checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
147
148         // checkOnly set, but we didn't click on a checker.
149         if (me.checkOnly &amp;&amp; !checker) {
150             return;
151         }
152
153         if (checker) {
154             var mode = me.getSelectionMode();
155             // dont change the mode if its single otherwise
156             // we would get multiple selection
157             if (mode !== 'SINGLE') {
158                 me.setSelectionMode('SIMPLE');
159             }
160             me.selectWithEvent(record, e);
161             me.setSelectionMode(mode);
162         } else {
163             me.selectWithEvent(record, e);
164         }
165     },
166
167 <span id='Ext-selection-CheckboxModel-method-onSelectChange'>    /**
168 </span>     * Synchronize header checker value as selection changes.
169      * @private
170      */
171     onSelectChange: function() {
172         this.callParent(arguments);
173
174         // check to see if all records are selected
175         var hdSelectStatus = this.selected.getCount() === this.store.getCount();
176         this.toggleUiHeader(hdSelectStatus);
177     }
178 });
179 </pre>
180 </body>
181 </html>