pkgs/pkg-grid-property-debug.js

   1 /*!
   2  * Ext JS Library 3.0.0
   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.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     };
 140     this.renderCellDelegate = this.renderCell.createDelegate(this);
 141     this.renderPropDelegate = this.renderProp.createDelegate(this);
 142 };
 143
 144 Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
 145     // private - strings used for locale support
 146     nameText : 'Name',
 147     valueText : 'Value',
 148     dateFormat : 'm/j/Y',
 149
 150     // private
 151     renderDate : function(dateVal){
 152         return dateVal.dateFormat(this.dateFormat);
 153     },
 154
 155     // private
 156     renderBool : function(bVal){
 157         return bVal ? 'true' : 'false';
 158     },
 159
 160     // private
 161     isCellEditable : function(colIndex, rowIndex){
 162         return colIndex == 1;
 163     },
 164
 165     // private
 166     getRenderer : function(col){
 167         return col == 1 ?
 168             this.renderCellDelegate : this.renderPropDelegate;
 169     },
 170
 171     // private
 172     renderProp : function(v){
 173         return this.getPropertyName(v);
 174     },
 175
 176     // private
 177     renderCell : function(val){
 178         var rv = val;
 179         if(Ext.isDate(val)){
 180             rv = this.renderDate(val);
 181         }else if(typeof val == 'boolean'){
 182             rv = this.renderBool(val);
 183         }
 184         return Ext.util.Format.htmlEncode(rv);
 185     },
 186
 187     // private
 188     getPropertyName : function(name){
 189         var pn = this.grid.propertyNames;
 190         return pn && pn[name] ? pn[name] : name;
 191     },
 192
 193     // private
 194     getCellEditor : function(colIndex, rowIndex){
 195         var p = this.store.getProperty(rowIndex),
 196             n = p.data.name,
 197             val = p.data.value;
 198         if(this.grid.customEditors[n]){
 199             return this.grid.customEditors[n];
 200         }
 201         if(Ext.isDate(val)){
 202             return this.editors.date;
 203         }else if(typeof val == 'number'){
 204             return this.editors.number;
 205         }else if(typeof val == 'boolean'){
 206             return this.editors['boolean'];
 207         }else{
 208             return this.editors.string;
 209         }
 210     },
 211
 212     // inherit docs
 213     destroy : function(){
 214         Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
 215         for(var ed in this.editors){
 216             Ext.destroy(ed);
 217         }
 218     }
 219 });
 220
 221 /**
 222  * @class Ext.grid.PropertyGrid
 223  * @extends Ext.grid.EditorGridPanel
 224  * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
 225  * development IDEs.  Each row in the grid represents a property of some object, and the data is stored
 226  * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage:
 227  * <pre><code>
 228 var grid = new Ext.grid.PropertyGrid({
 229     title: 'Properties Grid',
 230     autoHeight: true,
 231     width: 300,
 232     renderTo: 'grid-ct',
 233     source: {
 234         "(name)": "My Object",
 235         "Created": new Date(Date.parse('10/15/2006')),
 236         "Available": false,
 237         "Version": .01,
 238         "Description": "A test object"
 239     }
 240 });
 241 </code></pre>
 242  * @constructor
 243  * @param {Object} config The grid config object
 244  */
 245 Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
 246     /**
 247     * @cfg {Object} propertyNames An object containing property name/display name pairs.
 248     * If specified, the display name will be shown in the name column instead of the property name.
 249     */
 250     /**
 251     * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
 252     */
 253     /**
 254     * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
 255     * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing
 256     * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
 257     * associated with a custom input control by specifying a custom editor.  The name of the editor
 258     * type should correspond with the name of the property that will use the editor.  Example usage:
 259     * <pre><code>
 260 var grid = new Ext.grid.PropertyGrid({
 261     ...
 262     customEditors: {
 263         'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
 264     },
 265     source: {
 266         'Start Time': '10:00 AM'
 267     }
 268 });
 269 </code></pre>
 270     */
 271
 272     // private config overrides
 273     enableColumnMove:false,
 274     stripeRows:false,
 275     trackMouseOver: false,
 276     clicksToEdit:1,
 277     enableHdMenu : false,
 278     viewConfig : {
 279         forceFit:true
 280     },
 281
 282     // private
 283     initComponent : function(){
 284         this.customEditors = this.customEditors || {};
 285         this.lastEditRow = null;
 286         var store = new Ext.grid.PropertyStore(this);
 287         this.propStore = store;
 288         var cm = new Ext.grid.PropertyColumnModel(this, store);
 289         store.store.sort('name', 'ASC');
 290         this.addEvents(
 291             /**
 292              * @event beforepropertychange
 293              * Fires before a property value changes.  Handlers can return false to cancel the property change
 294              * (this will internally call {@link Ext.data.Record#reject} on the property's record).
 295              * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 296              * as the {@link #source} config property).
 297              * @param {String} recordId The record's id in the data store
 298              * @param {Mixed} value The current edited property value
 299              * @param {Mixed} oldValue The original property value prior to editing
 300              */
 301             'beforepropertychange',
 302             /**
 303              * @event propertychange
 304              * Fires after a property value has changed.
 305              * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 306              * as the {@link #source} config property).
 307              * @param {String} recordId The record's id in the data store
 308              * @param {Mixed} value The current edited property value
 309              * @param {Mixed} oldValue The original property value prior to editing
 310              */
 311             'propertychange'
 312         );
 313         this.cm = cm;
 314         this.ds = store.store;
 315         Ext.grid.PropertyGrid.superclass.initComponent.call(this);
 316
 317                 this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
 318             if(colIndex === 0){
 319                 this.startEditing.defer(200, this, [rowIndex, 1]);
 320                 return false;
 321             }
 322         }, this);
 323     },
 324
 325     // private
 326     onRender : function(){
 327         Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
 328
 329         this.getGridEl().addClass('x-props-grid');
 330     },
 331
 332     // private
 333     afterRender: function(){
 334         Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
 335         if(this.source){
 336             this.setSource(this.source);
 337         }
 338     },
 339
 340     /**
 341      * Sets the source data object containing the property data.  The data object can contain one or more name/value
 342      * pairs representing all of the properties of an object to display in the grid, and this data will automatically
 343      * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,
 344      * otherwise string type will be assumed.  If the grid already contains data, this method will replace any
 345      * existing data.  See also the {@link #source} config value.  Example usage:
 346      * <pre><code>
 347 grid.setSource({
 348     "(name)": "My Object",
 349     "Created": new Date(Date.parse('10/15/2006')),  // date type
 350     "Available": false,  // boolean type
 351     "Version": .01,      // decimal type
 352     "Description": "A test object"
 353 });
 354 </code></pre>
 355      * @param {Object} source The data object
 356      */
 357     setSource : function(source){
 358         this.propStore.setSource(source);
 359     },
 360
 361     /**
 362      * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the
 363      * format of the data object.
 364      * @return {Object} The data object
 365      */
 366     getSource : function(){
 367         return this.propStore.getSource();
 368     }
 369 });
 370 Ext.reg("propertygrid", Ext.grid.PropertyGrid);