-<!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'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-selection-CheckboxModel'>/**
</span> * @class Ext.selection.CheckboxModel
* @extends Ext.selection.RowModel
*
* and according to the 'injectCheckbox' configuration.
*/
Ext.define('Ext.selection.CheckboxModel', {
+ alias: 'selection.checkboxmodel',
extend: 'Ext.selection.RowModel',
-<span id='Ext-selection.CheckboxModel-cfg-mode'> /**
+<span id='Ext-selection-CheckboxModel-cfg-mode'> /**
</span> * @cfg {String} mode
* Modes of selection.
* Valid values are SINGLE, SIMPLE, and MULTI. Defaults to 'MULTI'
*/
mode: 'MULTI',
-<span id='Ext-selection.CheckboxModel-cfg-injectCheckbox'> /**
-</span> * @cfg {Mixed} injectCheckbox
+<span id='Ext-selection-CheckboxModel-cfg-injectCheckbox'> /**
+</span> * @cfg {Number/Boolean/String} injectCheckbox
* Instructs the SelectionModel whether or not to inject the checkbox header
* automatically or not. (Note: By not placing the checkbox in manually, the
* grid view will need to be rendered 2x on initial render.)
* Supported values are a Number index, false and the strings 'first' and 'last'.
- * Default is 0.
*/
injectCheckbox: 0,
-<span id='Ext-selection.CheckboxModel-cfg-checkOnly'> /**
+<span id='Ext-selection-CheckboxModel-cfg-checkOnly'> /**
</span> * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
- * checkbox column (defaults to <tt>false</tt>).
+ * checkbox column.
*/
checkOnly: false,
+ headerWidth: 24,
+
// private
checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
- bindComponent: function() {
- this.sortable = false;
- this.callParent(arguments);
+ bindComponent: function(view) {
+ var me = this;
- var view = this.views[0],
+ me.sortable = false;
+ me.callParent(arguments);
+ if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
+ // if we have a locked header, only hook up to the first
+ view.headerCt.on('headerclick', me.onHeaderClick, me);
+ me.addCheckbox(true);
+ me.mon(view.ownerCt, 'reconfigure', me.addCheckbox, me);
+ }
+ },
+
+ hasLockedHeader: function(){
+ var hasLocked = false;
+ Ext.each(this.views, function(view){
+ if (view.headerCt.lockedCt) {
+ hasLocked = true;
+ return false;
+ }
+ });
+ return hasLocked;
+ },
+
+<span id='Ext-selection-CheckboxModel-method-addCheckbox'> /**
+</span> * Add the header checkbox to the header row
+ * @private
+ * @param {Boolean} initial True if we're binding for the first time.
+ */
+ addCheckbox: function(initial){
+ var me = this,
+ checkbox = me.injectCheckbox,
+ view = me.views[0],
headerCt = view.headerCt;
- if (this.injectCheckbox !== false) {
- if (this.injectCheckbox == 'first') {
- this.injectCheckbox = 0;
- } else if (this.injectCheckbox == 'last') {
- this.injectCheckbox = headerCt.getColumnCount();
+ if (checkbox !== false) {
+ if (checkbox == 'first') {
+ checkbox = 0;
+ } else if (checkbox == 'last') {
+ checkbox = headerCt.getColumnCount();
}
- headerCt.add(this.injectCheckbox, this.getHeaderConfig());
+ headerCt.add(checkbox, me.getHeaderConfig());
+ }
+
+ if (initial !== true) {
+ view.refresh();
}
- headerCt.on('headerclick', this.onHeaderClick, this);
},
-<span id='Ext-selection.CheckboxModel-method-toggleUiHeader'> /**
+<span id='Ext-selection-CheckboxModel-method-toggleUiHeader'> /**
</span> * Toggle the ui header between checked and unchecked state.
* @param {Boolean} isChecked
* @private
}
},
-<span id='Ext-selection.CheckboxModel-method-onHeaderClick'> /**
+<span id='Ext-selection-CheckboxModel-method-onHeaderClick'> /**
</span> * Toggle between selecting all and deselecting all when clicking on
* a checkbox header.
*/
}
},
-<span id='Ext-selection.CheckboxModel-method-getHeaderConfig'> /**
+<span id='Ext-selection-CheckboxModel-method-getHeaderConfig'> /**
</span> * Retrieve a configuration to be used in a HeaderContainer.
* This should be used when injectCheckbox is set to false.
*/
getHeaderConfig: function() {
+ var me = this;
+
return {
isCheckerHd: true,
text : '&#160;',
- width: 24,
+ width: me.headerWidth,
sortable: false,
- fixed: true,
+ draggable: false,
+ resizable: false,
hideable: false,
menuDisabled: true,
dataIndex: '',
cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
- renderer: Ext.Function.bind(this.renderer, this)
+ renderer: Ext.Function.bind(me.renderer, me),
+ locked: me.hasLockedHeader()
};
},
-<span id='Ext-selection.CheckboxModel-method-renderer'> /**
+<span id='Ext-selection-CheckboxModel-method-renderer'> /**
</span> * Generates the HTML to be rendered in the injected checkbox column for each row.
* Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
* See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
view.el.focus();
var me = this,
checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
+
+ if (!me.allowRightMouseSelection(e)) {
+ return;
+ }
// checkOnly set, but we didn't click on a checker.
if (me.checkOnly && !checker) {
}
},
-<span id='Ext-selection.CheckboxModel-method-onSelectChange'> /**
+<span id='Ext-selection-CheckboxModel-method-onSelectChange'> /**
</span> * Synchronize header checker value as selection changes.
* @private
*/
- onSelectChange: function(record, isSelected) {
- this.callParent([record, isSelected]);
+ onSelectChange: function() {
+ this.callParent(arguments);
+
// check to see if all records are selected
var hdSelectStatus = this.selected.getCount() === this.store.getCount();
this.toggleUiHeader(hdSelectStatus);
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff