CheckColumn.html
4.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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-ux-CheckColumn'>/**
</span> * @class Ext.ux.CheckColumn
* @extends Ext.grid.column.Column
* A Header subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.
*
* Example usage:
*
* // create the grid
* var grid = Ext.create('Ext.grid.Panel', {
* ...
* columns: [{
* text: 'Foo',
* ...
* },{
* xtype: 'checkcolumn',
* text: 'Indoor?',
* dataIndex: 'indoor',
* width: 55
* }]
* ...
* });
*
* In addition to toggling a Boolean value within the record data, this
* class adds or removes a css class <tt>'x-grid-checked'</tt> on the td
* based on whether or not it is checked to alter the background image used
* for a column.
*/
Ext.define('Ext.ux.CheckColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.checkcolumn',
<span id='Ext-ux-CheckColumn-cfg-stopSelection'> /**
</span> * @cfg {Boolean} [stopSelection=true]
* Prevent grid selection upon mousedown.
*/
stopSelection: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
constructor: function() {
this.addEvents(
<span id='Ext-ux-CheckColumn-event-beforecheckchange'> /**
</span> * @event beforecheckchange
* Fires when before checked state of a row changes.
* The change may be vetoed by returning `false` from a listener.
* @param {Ext.ux.CheckColumn} this CheckColumn
* @param {Number} rowIndex The row index
* @param {Boolean} checked True if the box is to be checked
*/
'beforecheckchange',
<span id='Ext-ux-CheckColumn-event-checkchange'> /**
</span> * @event checkchange
* Fires when the checked state of a row changes
* @param {Ext.ux.CheckColumn} this CheckColumn
* @param {Number} rowIndex The row index
* @param {Boolean} checked True if the box is now checked
*/
'checkchange'
);
this.callParent(arguments);
},
<span id='Ext-ux-CheckColumn-method-processEvent'> /**
</span> * @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
var me = this,
key = type === 'keydown' && e.getKey(),
mousedown = type == 'mousedown';
if (mousedown || (key == e.ENTER || key == e.SPACE)) {
var dataIndex = me.dataIndex,
checked = !record.get(dataIndex);
// Allow apps to hook beforecheckchange
if (me.fireEvent('beforecheckchange', me, recordIndex, checked) !== false) {
record.set(dataIndex, checked);
me.fireEvent('checkchange', me, recordIndex, checked);
// Mousedown on the now nonexistent cell causes the view to blur, so stop it continuing.
if (mousedown) {
e.stopEvent();
}
// Selection will not proceed after this because of the DOM update caused by the record modification
// Invoke the SelectionModel unless configured not to do so
if (!me.stopSelection) {
view.selModel.selectByPosition({
row: recordIndex,
column: cellIndex
});
}
// Prevent the view from propagating the event to the selection model - we have done that job.
return false;
} else {
// Prevent the view from propagating the event to the selection model if configured to do so.
return !me.stopSelection;
}
} else {
return me.callParent(arguments);
}
},
// Note: class names are not placed on the prototype bc renderer scope
// is not in the header.
renderer : function(value){
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'];
if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
}
return '<div class="' + cls.join(' ') + '">&#160;</div>';
}
});
</pre>
</body>
</html>