docs/source/PropertyGrid.html

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