/hippo/src/main/webapp/ext/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>
 15var 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
 20grid.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 */
 26Ext.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 */
 41Ext.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};
 52Ext.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 */
114Ext.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
144Ext.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>
228var 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 */
245Ext.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>
260var 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>
347grid.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});
370Ext.reg("propertygrid", Ext.grid.PropertyGrid);