X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..e9397f91ede62d446aed37d23256e8938fc4c335:/examples/ux/CheckColumn.js diff --git a/examples/ux/CheckColumn.js b/examples/ux/CheckColumn.js new file mode 100644 index 00000000..5dd143ea --- /dev/null +++ b/examples/ux/CheckColumn.js @@ -0,0 +1,71 @@ +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +Ext.ns('Ext.ux.grid'); + +/** + * @class Ext.ux.grid.CheckColumn + * @extends Ext.grid.Column + *
A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.
+ *Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.
+ *Example usage:
+ *
+var cm = new Ext.grid.ColumnModel([{
+ header: 'Foo',
+ ...
+ },{
+ xtype: 'checkcolumn',
+ header: 'Indoor?',
+ dataIndex: 'indoor',
+ width: 55
+ }
+]);
+
+// create the grid
+var grid = new Ext.grid.EditorGridPanel({
+ ...
+ colModel: cm,
+ ...
+});
+ *
+ * In addition to toggling a Boolean value within the record data, this
+ * class toggles a css class between 'x-grid3-check-col' and
+ * 'x-grid3-check-col-on' to alter the background image used for
+ * a column.
+ */
+Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
+
+ /**
+ * @private
+ * Process and refire events routed from the GridView's processEvent method.
+ */
+ processEvent : function(name, e, grid, rowIndex, colIndex){
+ if (name == 'mousedown') {
+ var record = grid.store.getAt(rowIndex);
+ record.set(this.dataIndex, !record.data[this.dataIndex]);
+ return false; // Cancel row selection.
+ } else {
+ return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
+ }
+ },
+
+ renderer : function(v, p, record){
+ p.css += ' x-grid3-check-col-td';
+ return String.format('