+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.grid.PropertyRecord\r
- * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the\r
- * {@link Ext.grid.PropertyGrid}. Typically, PropertyRecords do not need to be created directly as they can be\r
- * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}\r
- * config property or by calling {@link Ext.grid.PropertyGrid#setSource}. However, if the need arises, these records\r
- * can also be created explicitly as shwon below. Example usage:\r
- * <pre><code>\r
-var rec = new Ext.grid.PropertyRecord({\r
- name: 'Birthday',\r
- value: new Date(Date.parse('05/26/1972'))\r
-});\r
-// Add record to an already populated grid\r
-grid.store.addSorted(rec);\r
-</code></pre>\r
- * @constructor\r
- * @param {Object} config A data object in the format: {name: [name], value: [value]}. The specified value's type\r
- * will be read automatically by the grid to determine the type of editor to use when displaying it.\r
- */\r
-Ext.grid.PropertyRecord = Ext.data.Record.create([\r
- {name:'name',type:'string'}, 'value'\r
-]);\r
-\r
-/**\r
- * @class Ext.grid.PropertyStore\r
- * @extends Ext.util.Observable\r
- * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping\r
- * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format\r
- * required for compatibility with the underlying store. Generally this class should not need to be used directly --\r
- * the grid's data should be accessed from the underlying store via the {@link #store} property.\r
- * @constructor\r
- * @param {Ext.grid.Grid} grid The grid this store will be bound to\r
- * @param {Object} source The source data config object\r
- */\r
-Ext.grid.PropertyStore = function(grid, source){\r
- this.grid = grid;\r
- this.store = new Ext.data.Store({\r
- recordType : Ext.grid.PropertyRecord\r
- });\r
- this.store.on('update', this.onUpdate, this);\r
- if(source){\r
- this.setSource(source);\r
- }\r
- Ext.grid.PropertyStore.superclass.constructor.call(this);\r
-};\r
-Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {\r
- // protected - should only be called by the grid. Use grid.setSource instead.\r
- setSource : function(o){\r
- this.source = o;\r
- this.store.removeAll();\r
- var data = [];\r
- for(var k in o){\r
- if(this.isEditableValue(o[k])){\r
- data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));\r
- }\r
- }\r
- this.store.loadRecords({records: data}, {}, true);\r
- },\r
-\r
- // private\r
- onUpdate : function(ds, record, type){\r
- if(type == Ext.data.Record.EDIT){\r
- var v = record.data['value'];\r
- var oldValue = record.modified['value'];\r
- if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){\r
- this.source[record.id] = v;\r
- record.commit();\r
- this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);\r
- }else{\r
- record.reject();\r
- }\r
- }\r
- },\r
-\r
- // private\r
- getProperty : function(row){\r
- return this.store.getAt(row);\r
- },\r
-\r
- // private\r
- isEditableValue: function(val){\r
- if(Ext.isDate(val)){\r
- return true;\r
- }else if(typeof val == 'object' || typeof val == 'function'){\r
- return false;\r
- }\r
- return true;\r
- },\r
-\r
- // private\r
- setValue : function(prop, value){\r
- this.source[prop] = value;\r
- this.store.getById(prop).set('value', value);\r
- },\r
-\r
- // protected - should only be called by the grid. Use grid.getSource instead.\r
- getSource : function(){\r
- return this.source;\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.PropertyColumnModel\r
- * @extends Ext.grid.ColumnModel\r
- * A custom column model for the {@link Ext.grid.PropertyGrid}. Generally it should not need to be used directly.\r
- * @constructor\r
- * @param {Ext.grid.Grid} grid The grid this store will be bound to\r
- * @param {Object} source The source data config object\r
- */\r
-Ext.grid.PropertyColumnModel = function(grid, store){\r
- this.grid = grid;\r
- var g = Ext.grid;\r
- g.PropertyColumnModel.superclass.constructor.call(this, [\r
- {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},\r
- {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}\r
- ]);\r
- this.store = store;\r
- this.bselect = Ext.DomHelper.append(document.body, {\r
- tag: 'select', cls: 'x-grid-editor x-hide-display', children: [\r
- {tag: 'option', value: 'true', html: 'true'},\r
- {tag: 'option', value: 'false', html: 'false'}\r
- ]\r
- });\r
- var f = Ext.form;\r
-\r
- var bfield = new f.Field({\r
- el:this.bselect,\r
- bselect : this.bselect,\r
- autoShow: true,\r
- getValue : function(){\r
- return this.bselect.value == 'true';\r
- }\r
- });\r
- this.editors = {\r
- 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),\r
- 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),\r
- 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),\r
- 'boolean' : new g.GridEditor(bfield)\r
- };\r
- this.renderCellDelegate = this.renderCell.createDelegate(this);\r
- this.renderPropDelegate = this.renderProp.createDelegate(this);\r
-};\r
-\r
-Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {\r
- // private - strings used for locale support\r
- nameText : 'Name',\r
- valueText : 'Value',\r
- dateFormat : 'm/j/Y',\r
-\r
- // private\r
- renderDate : function(dateVal){\r
- return dateVal.dateFormat(this.dateFormat);\r
- },\r
-\r
- // private\r
- renderBool : function(bVal){\r
- return bVal ? 'true' : 'false';\r
- },\r
-\r
- // private\r
- isCellEditable : function(colIndex, rowIndex){\r
- return colIndex == 1;\r
- },\r
-\r
- // private\r
- getRenderer : function(col){\r
- return col == 1 ?\r
- this.renderCellDelegate : this.renderPropDelegate;\r
- },\r
-\r
- // private\r
- renderProp : function(v){\r
- return this.getPropertyName(v);\r
- },\r
-\r
- // private\r
- renderCell : function(val){\r
- var rv = val;\r
- if(Ext.isDate(val)){\r
- rv = this.renderDate(val);\r
- }else if(typeof val == 'boolean'){\r
- rv = this.renderBool(val);\r
- }\r
- return Ext.util.Format.htmlEncode(rv);\r
- },\r
-\r
- // private\r
- getPropertyName : function(name){\r
- var pn = this.grid.propertyNames;\r
- return pn && pn[name] ? pn[name] : name;\r
- },\r
-\r
- // private\r
- getCellEditor : function(colIndex, rowIndex){\r
- var p = this.store.getProperty(rowIndex);\r
- var n = p.data['name'], val = p.data['value'];\r
- if(this.grid.customEditors[n]){\r
- return this.grid.customEditors[n];\r
- }\r
- if(Ext.isDate(val)){\r
- return this.editors['date'];\r
- }else if(typeof val == 'number'){\r
- return this.editors['number'];\r
- }else if(typeof val == 'boolean'){\r
- return this.editors['boolean'];\r
- }else{\r
- return this.editors['string'];\r
- }\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.PropertyGrid\r
- * @extends Ext.grid.EditorGridPanel\r
- * A specialized grid implementation intended to mimic the traditional property grid as typically seen in\r
- * development IDEs. Each row in the grid represents a property of some object, and the data is stored\r
- * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s. Example usage:\r
- * <pre><code>\r
-var grid = new Ext.grid.PropertyGrid({\r
- title: 'Properties Grid',\r
- autoHeight: true,\r
- width: 300,\r
- renderTo: 'grid-ct',\r
- source: {\r
- "(name)": "My Object",\r
- "Created": new Date(Date.parse('10/15/2006')),\r
- "Available": false,\r
- "Version": .01,\r
- "Description": "A test object"\r
- }\r
-});\r
-</pre></code>\r
- * @constructor\r
- * @param {Object} config The grid config object\r
- */\r
-Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {\r
- /**\r
- * @cfg {Object} propertyNames An object containing property name/display name pairs.\r
- * If specified, the display name will be shown in the name column instead of the property name.\r
- */\r
- /**\r
- * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).\r
- */\r
- /**\r
- * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow\r
- * the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing\r
- * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\r
- * associated with a custom input control by specifying a custom editor. The name of the editor\r
- * type should correspond with the name of the property that will use the editor. Example usage:\r
- * <pre><code>\r
-var grid = new Ext.grid.PropertyGrid({\r
- ...\r
- customEditors: {\r
- 'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))\r
- },\r
- source: {\r
- 'Start Time': '10:00 AM'\r
- }\r
-});\r
-</code></pre>\r
- */\r
-\r
- // private config overrides\r
- enableColumnMove:false,\r
- stripeRows:false,\r
- trackMouseOver: false,\r
- clicksToEdit:1,\r
- enableHdMenu : false,\r
- viewConfig : {\r
- forceFit:true\r
- },\r
-\r
- // private\r
- initComponent : function(){\r
- this.customEditors = this.customEditors || {};\r
- this.lastEditRow = null;\r
- var store = new Ext.grid.PropertyStore(this);\r
- this.propStore = store;\r
- var cm = new Ext.grid.PropertyColumnModel(this, store);\r
- store.store.sort('name', 'ASC');\r
- this.addEvents(\r
- /**\r
- * @event beforepropertychange\r
- * Fires before a property value changes. Handlers can return false to cancel the property change\r
- * (this will internally call {@link Ext.data.Record#reject} on the property's record).\r
- * @param {Object} source The source data object for the grid (corresponds to the same object passed in\r
- * as the {@link #source} config property).\r
- * @param {String} recordId The record's id in the data store\r
- * @param {Mixed} value The current edited property value\r
- * @param {Mixed} oldValue The original property value prior to editing\r
- */\r
- 'beforepropertychange',\r
- /**\r
- * @event propertychange\r
- * Fires after a property value has changed.\r
- * @param {Object} source The source data object for the grid (corresponds to the same object passed in\r
- * as the {@link #source} config property).\r
- * @param {String} recordId The record's id in the data store\r
- * @param {Mixed} value The current edited property value\r
- * @param {Mixed} oldValue The original property value prior to editing\r
- */\r
- 'propertychange'\r
- );\r
- this.cm = cm;\r
- this.ds = store.store;\r
- Ext.grid.PropertyGrid.superclass.initComponent.call(this);\r
-\r
- this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){\r
- if(colIndex === 0){\r
- this.startEditing.defer(200, this, [rowIndex, 1]);\r
- return false;\r
- }\r
- }, this);\r
- },\r
-\r
- // private\r
- onRender : function(){\r
- Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);\r
-\r
- this.getGridEl().addClass('x-props-grid');\r
- },\r
-\r
- // private\r
- afterRender: function(){\r
- Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);\r
- if(this.source){\r
- this.setSource(this.source);\r
- }\r
- },\r
-\r
- /**\r
- * Sets the source data object containing the property data. The data object can contain one or more name/value\r
- * pairs representing all of the properties of an object to display in the grid, and this data will automatically\r
- * be loaded into the grid's {@link #store}. The values should be supplied in the proper data type if needed,\r
- * otherwise string type will be assumed. If the grid already contains data, this method will replace any\r
- * existing data. See also the {@link #source} config value. Example usage:\r
- * <pre><code>\r
-grid.setSource({\r
- "(name)": "My Object",\r
- "Created": new Date(Date.parse('10/15/2006')), // date type\r
- "Available": false, // boolean type\r
- "Version": .01, // decimal type\r
- "Description": "A test object"\r
-});\r
-</code></pre>\r
- * @param {Object} source The data object\r
- */\r
- setSource : function(source){\r
- this.propStore.setSource(source);\r
- },\r
-\r
- /**\r
- * Gets the source data object containing the property data. See {@link #setSource} for details regarding the\r
- * format of the data object.\r
- * @return {Object} The data object\r
- */\r
- getSource : function(){\r
- return this.propStore.getSource();\r
- }\r
-});\r
-Ext.reg("propertygrid", Ext.grid.PropertyGrid);\r
git.ithinksw.org / extjs.git / blobdiff