source/widgets/grid/PropertyGrid.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.grid.PropertyRecord\r
  11  * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the\r
  12  * {@link Ext.grid.PropertyGrid}.  Typically, PropertyRecords do not need to be created directly as they can be\r
  13  * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}\r
  14  * config property or by calling {@link Ext.grid.PropertyGrid#setSource}.  However, if the need arises, these records\r
  15  * can also be created explicitly as shwon below.  Example usage:\r
  16  * <pre><code>\r
  17 var rec = new Ext.grid.PropertyRecord({\r
  18     name: 'Birthday',\r
  19     value: new Date(Date.parse('05/26/1972'))\r
  20 });\r
  21 // Add record to an already populated grid\r
  22 grid.store.addSorted(rec);\r
  23 </code></pre>\r
  24  * @constructor\r
  25  * @param {Object} config A data object in the format: {name: [name], value: [value]}.  The specified value's type\r
  26  * will be read automatically by the grid to determine the type of editor to use when displaying it.\r
  27  */\r
  28 Ext.grid.PropertyRecord = Ext.data.Record.create([\r
  29     {name:'name',type:'string'}, 'value'\r
  30 ]);\r
  31 \r
  32 /**\r
  33  * @class Ext.grid.PropertyStore\r
  34  * @extends Ext.util.Observable\r
  35  * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping\r
  36  * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format\r
  37  * required for compatibility with the underlying store. Generally this class should not need to be used directly --\r
  38  * the grid's data should be accessed from the underlying store via the {@link #store} property.\r
  39  * @constructor\r
  40  * @param {Ext.grid.Grid} grid The grid this store will be bound to\r
  41  * @param {Object} source The source data config object\r
  42  */\r
  43 Ext.grid.PropertyStore = function(grid, source){\r
  44     this.grid = grid;\r
  45     this.store = new Ext.data.Store({\r
  46         recordType : Ext.grid.PropertyRecord\r
  47     });\r
  48     this.store.on('update', this.onUpdate,  this);\r
  49     if(source){\r
  50         this.setSource(source);\r
  51     }\r
  52     Ext.grid.PropertyStore.superclass.constructor.call(this);\r
  53 };\r
  54 Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {\r
  55     // protected - should only be called by the grid.  Use grid.setSource instead.\r
  56     setSource : function(o){\r
  57         this.source = o;\r
  58         this.store.removeAll();\r
  59         var data = [];\r
  60         for(var k in o){\r
  61             if(this.isEditableValue(o[k])){\r
  62                 data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));\r
  63             }\r
  64         }\r
  65         this.store.loadRecords({records: data}, {}, true);\r
  66     },\r
  67 \r
  68     // private\r
  69     onUpdate : function(ds, record, type){\r
  70         if(type == Ext.data.Record.EDIT){\r
  71             var v = record.data['value'];\r
  72             var oldValue = record.modified['value'];\r
  73             if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){\r
  74                 this.source[record.id] = v;\r
  75                 record.commit();\r
  76                 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);\r
  77             }else{\r
  78                 record.reject();\r
  79             }\r
  80         }\r
  81     },\r
  82 \r
  83     // private\r
  84     getProperty : function(row){\r
  85        return this.store.getAt(row);\r
  86     },\r
  87 \r
  88     // private\r
  89     isEditableValue: function(val){\r
  90         if(Ext.isDate(val)){\r
  91             return true;\r
  92         }else if(typeof val == 'object' || typeof val == 'function'){\r
  93             return false;\r
  94         }\r
  95         return true;\r
  96     },\r
  97 \r
  98     // private\r
  99     setValue : function(prop, value){\r
 100         this.source[prop] = value;\r
 101         this.store.getById(prop).set('value', value);\r
 102     },\r
 103 \r
 104     // protected - should only be called by the grid.  Use grid.getSource instead.\r
 105     getSource : function(){\r
 106         return this.source;\r
 107     }\r
 108 });\r
 109 \r
 110 /**\r
 111  * @class Ext.grid.PropertyColumnModel\r
 112  * @extends Ext.grid.ColumnModel\r
 113  * A custom column model for the {@link Ext.grid.PropertyGrid}.  Generally it should not need to be used directly.\r
 114  * @constructor\r
 115  * @param {Ext.grid.Grid} grid The grid this store will be bound to\r
 116  * @param {Object} source The source data config object\r
 117  */\r
 118 Ext.grid.PropertyColumnModel = function(grid, store){\r
 119     this.grid = grid;\r
 120     var g = Ext.grid;\r
 121     g.PropertyColumnModel.superclass.constructor.call(this, [\r
 122         {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},\r
 123         {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}\r
 124     ]);\r
 125     this.store = store;\r
 126     this.bselect = Ext.DomHelper.append(document.body, {\r
 127         tag: 'select', cls: 'x-grid-editor x-hide-display', children: [\r
 128             {tag: 'option', value: 'true', html: 'true'},\r
 129             {tag: 'option', value: 'false', html: 'false'}\r
 130         ]\r
 131     });\r
 132     var f = Ext.form;\r
 133 \r
 134     var bfield = new f.Field({\r
 135         el:this.bselect,\r
 136         bselect : this.bselect,\r
 137         autoShow: true,\r
 138         getValue : function(){\r
 139             return this.bselect.value == 'true';\r
 140         }\r
 141     });\r
 142     this.editors = {\r
 143         'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),\r
 144         'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),\r
 145         'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),\r
 146         'boolean' : new g.GridEditor(bfield)\r
 147     };\r
 148     this.renderCellDelegate = this.renderCell.createDelegate(this);\r
 149     this.renderPropDelegate = this.renderProp.createDelegate(this);\r
 150 };\r
 151 \r
 152 Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {\r
 153     // private - strings used for locale support\r
 154     nameText : 'Name',\r
 155     valueText : 'Value',\r
 156     dateFormat : 'm/j/Y',\r
 157 \r
 158     // private\r
 159     renderDate : function(dateVal){\r
 160         return dateVal.dateFormat(this.dateFormat);\r
 161     },\r
 162 \r
 163     // private\r
 164     renderBool : function(bVal){\r
 165         return bVal ? 'true' : 'false';\r
 166     },\r
 167 \r
 168     // private\r
 169     isCellEditable : function(colIndex, rowIndex){\r
 170         return colIndex == 1;\r
 171     },\r
 172 \r
 173     // private\r
 174     getRenderer : function(col){\r
 175         return col == 1 ?\r
 176             this.renderCellDelegate : this.renderPropDelegate;\r
 177     },\r
 178 \r
 179     // private\r
 180     renderProp : function(v){\r
 181         return this.getPropertyName(v);\r
 182     },\r
 183 \r
 184     // private\r
 185     renderCell : function(val){\r
 186         var rv = val;\r
 187         if(Ext.isDate(val)){\r
 188             rv = this.renderDate(val);\r
 189         }else if(typeof val == 'boolean'){\r
 190             rv = this.renderBool(val);\r
 191         }\r
 192         return Ext.util.Format.htmlEncode(rv);\r
 193     },\r
 194 \r
 195     // private\r
 196     getPropertyName : function(name){\r
 197         var pn = this.grid.propertyNames;\r
 198         return pn && pn[name] ? pn[name] : name;\r
 199     },\r
 200 \r
 201     // private\r
 202     getCellEditor : function(colIndex, rowIndex){\r
 203         var p = this.store.getProperty(rowIndex);\r
 204         var n = p.data['name'], val = p.data['value'];\r
 205         if(this.grid.customEditors[n]){\r
 206             return this.grid.customEditors[n];\r
 207         }\r
 208         if(Ext.isDate(val)){\r
 209             return this.editors['date'];\r
 210         }else if(typeof val == 'number'){\r
 211             return this.editors['number'];\r
 212         }else if(typeof val == 'boolean'){\r
 213             return this.editors['boolean'];\r
 214         }else{\r
 215             return this.editors['string'];\r
 216         }\r
 217     }\r
 218 });\r
 219 \r
 220 /**\r
 221  * @class Ext.grid.PropertyGrid\r
 222  * @extends Ext.grid.EditorGridPanel\r
 223  * A specialized grid implementation intended to mimic the traditional property grid as typically seen in\r
 224  * development IDEs.  Each row in the grid represents a property of some object, and the data is stored\r
 225  * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage:\r
 226  * <pre><code>\r
 227 var grid = new Ext.grid.PropertyGrid({\r
 228     title: 'Properties Grid',\r
 229     autoHeight: true,\r
 230     width: 300,\r
 231     renderTo: 'grid-ct',\r
 232     source: {\r
 233         "(name)": "My Object",\r
 234         "Created": new Date(Date.parse('10/15/2006')),\r
 235         "Available": false,\r
 236         "Version": .01,\r
 237         "Description": "A test object"\r
 238     }\r
 239 });\r
 240 </pre></code>\r
 241  * @constructor\r
 242  * @param {Object} config The grid config object\r
 243  */\r
 244 Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {\r
 245     /**\r
 246     * @cfg {Object} propertyNames An object containing property name/display name pairs.\r
 247     * If specified, the display name will be shown in the name column instead of the property name.\r
 248     */\r
 249     /**\r
 250     * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).\r
 251     */\r
 252     /**\r
 253     * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow\r
 254     * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing\r
 255     * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\r
 256     * associated with a custom input control by specifying a custom editor.  The name of the editor\r
 257     * type should correspond with the name of the property that will use the editor.  Example usage:\r
 258     * <pre><code>\r
 259 var grid = new Ext.grid.PropertyGrid({\r
 260     ...\r
 261     customEditors: {\r
 262         'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))\r
 263     },\r
 264     source: {\r
 265         'Start Time': '10:00 AM'\r
 266     }\r
 267 });\r
 268 </code></pre>\r
 269     */\r
 270 \r
 271     // private config overrides\r
 272     enableColumnMove:false,\r
 273     stripeRows:false,\r
 274     trackMouseOver: false,\r
 275     clicksToEdit:1,\r
 276     enableHdMenu : false,\r
 277     viewConfig : {\r
 278         forceFit:true\r
 279     },\r
 280 \r
 281     // private\r
 282     initComponent : function(){\r
 283         this.customEditors = this.customEditors || {};\r
 284         this.lastEditRow = null;\r
 285         var store = new Ext.grid.PropertyStore(this);\r
 286         this.propStore = store;\r
 287         var cm = new Ext.grid.PropertyColumnModel(this, store);\r
 288         store.store.sort('name', 'ASC');\r
 289         this.addEvents(\r
 290             /**\r
 291              * @event beforepropertychange\r
 292              * Fires before a property value changes.  Handlers can return false to cancel the property change\r
 293              * (this will internally call {@link Ext.data.Record#reject} on the property's record).\r
 294              * @param {Object} source The source data object for the grid (corresponds to the same object passed in\r
 295              * as the {@link #source} config property).\r
 296              * @param {String} recordId The record's id in the data store\r
 297              * @param {Mixed} value The current edited property value\r
 298              * @param {Mixed} oldValue The original property value prior to editing\r
 299              */\r
 300             'beforepropertychange',\r
 301             /**\r
 302              * @event propertychange\r
 303              * Fires after a property value has changed.\r
 304              * @param {Object} source The source data object for the grid (corresponds to the same object passed in\r
 305              * as the {@link #source} config property).\r
 306              * @param {String} recordId The record's id in the data store\r
 307              * @param {Mixed} value The current edited property value\r
 308              * @param {Mixed} oldValue The original property value prior to editing\r
 309              */\r
 310             'propertychange'\r
 311         );\r
 312         this.cm = cm;\r
 313         this.ds = store.store;\r
 314         Ext.grid.PropertyGrid.superclass.initComponent.call(this);\r
 315 \r
 316         this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){\r
 317             if(colIndex === 0){\r
 318                 this.startEditing.defer(200, this, [rowIndex, 1]);\r
 319                 return false;\r
 320             }\r
 321         }, this);\r
 322     },\r
 323 \r
 324     // private\r
 325     onRender : function(){\r
 326         Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);\r
 327 \r
 328         this.getGridEl().addClass('x-props-grid');\r
 329     },\r
 330 \r
 331     // private\r
 332     afterRender: function(){\r
 333         Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);\r
 334         if(this.source){\r
 335             this.setSource(this.source);\r
 336         }\r
 337     },\r
 338 \r
 339     /**\r
 340      * Sets the source data object containing the property data.  The data object can contain one or more name/value\r
 341      * pairs representing all of the properties of an object to display in the grid, and this data will automatically\r
 342      * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,\r
 343      * otherwise string type will be assumed.  If the grid already contains data, this method will replace any\r
 344      * existing data.  See also the {@link #source} config value.  Example usage:\r
 345      * <pre><code>\r
 346 grid.setSource({\r
 347     "(name)": "My Object",\r
 348     "Created": new Date(Date.parse('10/15/2006')),  // date type\r
 349     "Available": false,  // boolean type\r
 350     "Version": .01,      // decimal type\r
 351     "Description": "A test object"\r
 352 });\r
 353 </code></pre>\r
 354      * @param {Object} source The data object\r
 355      */\r
 356     setSource : function(source){\r
 357         this.propStore.setSource(source);\r
 358     },\r
 359 \r
 360     /**\r
 361      * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the\r
 362      * format of the data object.\r
 363      * @return {Object} The data object\r
 364      */\r
 365     getSource : function(){\r
 366         return this.propStore.getSource();\r
 367     }\r
 368 });\r
 369 Ext.reg("propertygrid", Ext.grid.PropertyGrid);\r