pkgs/pkg-grid-property-debug.js

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