docs/source/PropertyGrid.html

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