3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
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:
15 var rec = new Ext.grid.PropertyRecord({
17 value: new Date(Date.parse('05/26/1972'))
19 // Add record to an already populated grid
20 grid.store.addSorted(rec);
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.
26 Ext.grid.PropertyRecord = Ext.data.Record.create([
27 {name:'name',type:'string'}, 'value'
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.
38 * @param {Ext.grid.Grid} grid The grid this store will be bound to
39 * @param {Object} source The source data config object
41 Ext.grid.PropertyStore = Ext.extend(Ext.util.Observable, {
43 constructor : function(grid, source){
45 this.store = new Ext.data.Store({
46 recordType : Ext.grid.PropertyRecord
48 this.store.on('update', this.onUpdate, this);
50 this.setSource(source);
52 Ext.grid.PropertyStore.superclass.constructor.call(this);
55 // protected - should only be called by the grid. Use grid.setSource instead.
56 setSource : function(o){
58 this.store.removeAll();
61 if(this.isEditableValue(o[k])){
62 data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
65 this.store.loadRecords({records: data}, {}, true);
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;
76 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
84 getProperty : function(row){
85 return this.store.getAt(row);
89 isEditableValue: function(val){
90 return Ext.isPrimitive(val) || Ext.isDate(val);
94 setValue : function(prop, value, create){
95 var r = this.getRec(prop);
97 r.set('value', value);
98 this.source[prop] = value;
100 // only create if specified.
101 this.source[prop] = value;
102 r = new Ext.grid.PropertyRecord({name: prop, value: value}, prop);
109 remove : function(prop){
110 var r = this.getRec(prop);
112 this.store.remove(r);
113 delete this.source[prop];
118 getRec : function(prop){
119 return this.store.getById(prop);
122 // protected - should only be called by the grid. Use grid.getSource instead.
123 getSource : function(){
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.
133 * @param {Ext.grid.Grid} grid The grid this store will be bound to
134 * @param {Object} source The source data config object
136 Ext.grid.PropertyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
137 // private - strings used for locale support
140 dateFormat : 'm/j/Y',
144 constructor : function(grid, store){
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}
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}
160 getValue : function(){
161 return this.el.dom.value == 'true';
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, {
172 this.renderCellDelegate = this.renderCell.createDelegate(this);
173 this.renderPropDelegate = this.renderProp.createDelegate(this);
177 renderDate : function(dateVal){
178 return dateVal.dateFormat(this.dateFormat);
182 renderBool : function(bVal){
183 return this[bVal ? 'trueText' : 'falseText'];
187 isCellEditable : function(colIndex, rowIndex){
188 return colIndex == 1;
192 getRenderer : function(col){
194 this.renderCellDelegate : this.renderPropDelegate;
198 renderProp : function(v){
199 return this.getPropertyName(v);
203 renderCell : function(val, meta, rec){
204 var renderer = this.grid.customRenderers[rec.get('name')];
206 return renderer.apply(this, arguments);
210 rv = this.renderDate(val);
211 }else if(typeof val == 'boolean'){
212 rv = this.renderBool(val);
214 return Ext.util.Format.htmlEncode(rv);
218 getPropertyName : function(name){
219 var pn = this.grid.propertyNames;
220 return pn && pn[name] ? pn[name] : name;
224 getCellEditor : function(colIndex, rowIndex){
225 var p = this.store.getProperty(rowIndex),
228 if(this.grid.customEditors[n]){
229 return this.grid.customEditors[n];
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'];
238 return this.editors.string;
243 destroy : function(){
244 Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
245 for(var ed in this.editors){
246 Ext.destroy(this.editors[ed]);
252 * @class Ext.grid.PropertyGrid
253 * @extends Ext.grid.EditorGridPanel
254 * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
255 * development IDEs. Each row in the grid represents a property of some object, and the data is stored
256 * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s. Example usage:
258 var grid = new Ext.grid.PropertyGrid({
259 title: 'Properties Grid',
264 "(name)": "My Object",
265 "Created": new Date(Date.parse('10/15/2006')),
268 "Description": "A test object"
273 * @param {Object} config The grid config object
275 Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
277 * @cfg {Object} propertyNames An object containing property name/display name pairs.
278 * If specified, the display name will be shown in the name column instead of the property name.
281 * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
284 * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
285 * the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing
286 * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
287 * associated with a custom input control by specifying a custom editor. The name of the editor
288 * type should correspond with the name of the property that will use the editor. Example usage:
290 var grid = new Ext.grid.PropertyGrid({
293 'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
296 'Start Time': '10:00 AM'
302 * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
305 * @cfg {Object} customRenderers An object containing name/value pairs of custom renderer type definitions that allow
306 * the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering
307 * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
308 * associated with the type of the value. The name of the renderer type should correspond with the name of the property
309 * that it will render. Example usage:
311 var grid = new Ext.grid.PropertyGrid({
314 Available: function(v){
316 return '<span style="color: green;">Yes</span>';
318 return '<span style="color: red;">No</span>';
329 // private config overrides
330 enableColumnMove:false,
332 trackMouseOver: false,
334 enableHdMenu : false,
340 initComponent : function(){
341 this.customRenderers = this.customRenderers || {};
342 this.customEditors = this.customEditors || {};
343 this.lastEditRow = null;
344 var store = new Ext.grid.PropertyStore(this);
345 this.propStore = store;
346 var cm = new Ext.grid.PropertyColumnModel(this, store);
347 store.store.sort('name', 'ASC');
350 * @event beforepropertychange
351 * Fires before a property value changes. Handlers can return false to cancel the property change
352 * (this will internally call {@link Ext.data.Record#reject} on the property's record).
353 * @param {Object} source The source data object for the grid (corresponds to the same object passed in
354 * as the {@link #source} config property).
355 * @param {String} recordId The record's id in the data store
356 * @param {Mixed} value The current edited property value
357 * @param {Mixed} oldValue The original property value prior to editing
359 'beforepropertychange',
361 * @event propertychange
362 * Fires after a property value has changed.
363 * @param {Object} source The source data object for the grid (corresponds to the same object passed in
364 * as the {@link #source} config property).
365 * @param {String} recordId The record's id in the data store
366 * @param {Mixed} value The current edited property value
367 * @param {Mixed} oldValue The original property value prior to editing
372 this.ds = store.store;
373 Ext.grid.PropertyGrid.superclass.initComponent.call(this);
375 this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
377 this.startEditing.defer(200, this, [rowIndex, 1]);
384 onRender : function(){
385 Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
387 this.getGridEl().addClass('x-props-grid');
391 afterRender: function(){
392 Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
394 this.setSource(this.source);
399 * Sets the source data object containing the property data. The data object can contain one or more name/value
400 * pairs representing all of the properties of an object to display in the grid, and this data will automatically
401 * be loaded into the grid's {@link #store}. The values should be supplied in the proper data type if needed,
402 * otherwise string type will be assumed. If the grid already contains data, this method will replace any
403 * existing data. See also the {@link #source} config value. Example usage:
406 "(name)": "My Object",
407 "Created": new Date(Date.parse('10/15/2006')), // date type
408 "Available": false, // boolean type
409 "Version": .01, // decimal type
410 "Description": "A test object"
413 * @param {Object} source The data object
415 setSource : function(source){
416 this.propStore.setSource(source);
420 * Gets the source data object containing the property data. See {@link #setSource} for details regarding the
421 * format of the data object.
422 * @return {Object} The data object
424 getSource : function(){
425 return this.propStore.getSource();
429 * Sets the value of a property.
430 * @param {String} prop The name of the property to set
431 * @param {Mixed} value The value to test
432 * @param {Boolean} create (Optional) True to create the property if it doesn't already exist. Defaults to <tt>false</tt>.
434 setProperty : function(prop, value, create){
435 this.propStore.setValue(prop, value, create);
439 * Removes a property from the grid.
440 * @param {String} prop The name of the property to remove
442 removeProperty : function(prop){
443 this.propStore.remove(prop);
463 Ext.reg("propertygrid", Ext.grid.PropertyGrid);