X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/grid/edit-grid.js

diff --git a/examples/grid/edit-grid.js b/examples/grid/edit-grid.js
index 50525d2e..68e6b636 100644
--- a/examples/grid/edit-grid.js
+++ b/examples/grid/edit-grid.js
@@ -1,23 +1,21 @@
-/*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- * 
- * http://extjs.com/license
- */
-
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 Ext.onReady(function(){
     Ext.QuickTips.init();
 
     function formatDate(value){
         return value ? value.dateFormat('M d, Y') : '';
-    };
+    }
     // shorthand alias
     var fm = Ext.form;
 
     // custom column plugin example
     var checkColumn = new Ext.grid.CheckColumn({
-       header: "Indoor?",
+       header: 'Indoor?',
        dataIndex: 'indoor',
        width: 55
     });
@@ -26,26 +24,27 @@ Ext.onReady(function(){
     // dataIndex maps the column to the specific data field in
     // the data store (created below)
     var cm = new Ext.grid.ColumnModel([{
-           id:'common',
-           header: "Common Name",
+           id: 'common',
+           header: 'Common Name',
            dataIndex: 'common',
            width: 220,
+           // use shorthand alias defined above
            editor: new fm.TextField({
                allowBlank: false
            })
         },{
-           header: "Light",
+           header: 'Light',
            dataIndex: 'light',
            width: 130,
-           editor: new Ext.form.ComboBox({
+           editor: new fm.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                transform:'light',
-               lazyRender:true,
+               lazyRender: true,
                listClass: 'x-combo-list-small'
             })
         },{
-           header: "Price",
+           header: 'Price',
            dataIndex: 'price',
            width: 70,
            align: 'right',
@@ -56,7 +55,7 @@ Ext.onReady(function(){
                maxValue: 100000
            })
         },{
-           header: "Available",
+           header: 'Available',
            dataIndex: 'availDate',
            width: 95,
            renderer: formatDate,
@@ -73,31 +72,32 @@ Ext.onReady(function(){
     // by default columns are sortable
     cm.defaultSortable = true;
 
-    // this could be inline, but we want to define the Plant record
-    // type so we can add records dynamically
-    var Plant = Ext.data.Record.create([
-           // the "name" below matches the tag name to read, except "availDate"
-           // which is mapped to the tag "availability"
-           {name: 'common', type: 'string'},
-           {name: 'botanical', type: 'string'},
-           {name: 'light'},
-           {name: 'price', type: 'float'},             // automatic date conversions
-           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
-           {name: 'indoor', type: 'bool'}
-      ]);
-
     // create the Data Store
     var store = new Ext.data.Store({
-        // load using HTTP
+        // load remote data using HTTP
         url: 'plants.xml',
 
-        // the return will be XML, so lets set up a reader
-        reader: new Ext.data.XmlReader({
-               // records will have a "plant" tag
-               record: 'plant'
-           }, Plant),
-
-        sortInfo:{field:'common', direction:'ASC'}
+        // specify a XmlReader (coincides with the XML format of the returned data)
+        reader: new Ext.data.XmlReader(
+            {
+                // records will have a 'plant' tag
+                record: 'plant'
+            },
+            // use an Array of field definition objects to implicitly create a Record constructor
+            [
+                // the 'name' below matches the tag name to read, except 'availDate'
+                // which is mapped to the tag 'availability'
+                {name: 'common', type: 'string'},
+                {name: 'botanical', type: 'string'},
+                {name: 'light'},
+                {name: 'price', type: 'float'},             
+                // dates can be automatically converted by specifying dateFormat
+                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
+                {name: 'indoor', type: 'bool'}
+            ]
+        ),
+
+        sortInfo: {field:'common', direction:'ASC'}
     });
 
     // create the editor grid
@@ -105,17 +105,18 @@ Ext.onReady(function(){
         store: store,
         cm: cm,
         renderTo: 'editor-grid',
-        width:600,
-        height:300,
-        autoExpandColumn:'common',
-        title:'Edit Plants?',
-        frame:true,
-        plugins:checkColumn,
-        clicksToEdit:1,
-
+        width: 600,
+        height: 300,
+        autoExpandColumn: 'common',
+        title: 'Edit Plants?',
+        frame: true,
+        plugins: checkColumn,
+        clicksToEdit: 1,
         tbar: [{
             text: 'Add Plant',
             handler : function(){
+                // access the Record constructor through the grid's store
+                var Plant = grid.getStore().recordType;
                 var p = new Plant({
                     common: 'New Plant 1',
                     light: 'Mostly Shade',
@@ -132,36 +133,4 @@ Ext.onReady(function(){
 
     // trigger the data store load
     store.load();
-});
-
-Ext.grid.CheckColumn = function(config){
-    Ext.apply(this, config);
-    if(!this.id){
-        this.id = Ext.id();
-    }
-    this.renderer = this.renderer.createDelegate(this);
-};
-
-Ext.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>';
-    }
-};
\ No newline at end of file
+});
\ No newline at end of file