pkgs/pkg-grid-property-debug.js

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