X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..76cb34406ceaf9681a76e13b531d7eafa483ad88:/examples/ux/CheckColumn.js

diff --git a/examples/ux/CheckColumn.js b/examples/ux/CheckColumn.js
new file mode 100644
index 00000000..e5827ba5
--- /dev/null
+++ b/examples/ux/CheckColumn.js
@@ -0,0 +1,80 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.CheckColumn
+ * @extends Object
+ * GridPanel plugin to add a column with check boxes to a grid.
+ * <p>Example usage:</p>
+ * <pre><code>
+// create the column
+var checkColumn = new Ext.grid.CheckColumn({
+   header: 'Indoor?',
+   dataIndex: 'indoor',
+   id: 'check',
+   width: 55
+});
+
+// add the column to the column model
+var cm = new Ext.grid.ColumnModel([{
+       header: 'Foo',
+       ...
+    },
+    checkColumn
+]);
+
+// create the grid
+var grid = new Ext.grid.EditorGridPanel({
+    ...
+    cm: cm,
+    plugins: [checkColumn], // include plugin
+    ...
+});
+ * </code></pre>
+ * In addition to storing a Boolean value within the record data, this
+ * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
+ * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
+ * a column.
+ */
+Ext.ux.grid.CheckColumn = function(config){
+    Ext.apply(this, config);
+    if(!this.id){
+        this.id = Ext.id();
+    }
+    this.renderer = this.renderer.createDelegate(this);
+};
+
+Ext.ux.grid.CheckColumn.prototype ={
+    init : function(grid){
+        this.grid = grid;
+        this.grid.on('render', function(){
+            var view = this.grid.getView();
+            view.mainBody.on('mousedown', this.onMouseDown, this);
+        }, this);
+    },
+
+    onMouseDown : function(e, t){
+        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
+            e.stopEvent();
+            var index = this.grid.getView().findRowIndex(t);
+            var record = this.grid.store.getAt(index);
+            record.set(this.dataIndex, !record.data[this.dataIndex]);
+        }
+    },
+
+    renderer : function(v, p, record){
+        p.css += ' x-grid3-check-col-td'; 
+        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
+    }
+};
+
+// register ptype
+Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
+
+// backwards compat
+Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
\ No newline at end of file