/**
+ * @class Ext.grid.property.Grid
* @extends Ext.grid.Panel
+ *
* A specialized grid implementation intended to mimic the traditional property grid as typically seen in
* development IDEs. Each row in the grid represents a property of some object, and the data is stored
* as a set of name/value pairs in {@link Ext.grid.property.Property Properties}. Example usage:
- * <pre><code>
-var grid = new Ext.grid.property.Grid({
- title: 'Properties Grid',
- width: 300,
- renderTo: 'grid-ct',
- source: {
- "(name)": "My Object",
- "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
- "Available": false,
- "Version": .01,
- "Description": "A test object"
- }
-});
-</code></pre>
- * @constructor
- * @param {Object} config The grid config object
+ *
+ * @example
+ * Ext.create('Ext.grid.property.Grid', {
+ * title: 'Properties Grid',
+ * width: 300,
+ * renderTo: Ext.getBody(),
+ * source: {
+ * "(name)": "My Object",
+ * "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
+ * "Available": false,
+ * "Version": .01,
+ * "Description": "A test object"
+ * }
+ * });
*/
Ext.define('Ext.grid.property.Grid', {
extend: 'Ext.grid.Panel',
+ alias: 'widget.propertygrid',
+
alternateClassName: 'Ext.grid.PropertyGrid',
uses: [
@@ -38,16 +56,16 @@ Ext.define('Ext.grid.property.Grid', {
'Ext.form.field.Number'
],
- /**
+ /**
* @cfg {Object} propertyNames An object containing custom property name/display name pairs.
* If specified, the display name will be shown in the name column instead of the property name.
*/
- /**
+ /**
* @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
*/
- /**
+ /**
* @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
* the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing
* of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
@@ -74,11 +92,11 @@ var grid = new Ext.grid.property.Grid({
</code></pre>
*/
- /**
+ /**
* @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
*/
- /**
+ /**
* @cfg {Object} customRenderers An object containing name/value pairs of custom renderer type definitions that allow
* the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering
* of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
@@ -102,20 +120,25 @@ var grid = Ext.create('Ext.grid.property.Grid', {
</code></pre>
*/
- /**
+ /**
* @cfg {String} valueField
* Optional. The name of the field from the property store to use as the value field name. Defaults to <code>'value'</code>
* This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
*/
valueField: 'value',
- /**
+ /**
* @cfg {String} nameField
* Optional. The name of the field from the property store to use as the property field name. Defaults to <code>'name'</code>
* This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
*/
nameField: 'name',
+ /**
+ * @cfg {Number} nameColumnWidth
+ * Optional. Specify the width for the name column. The value column will take any remaining space. Defaults to <tt>115</tt>.
+ */
+
// private config overrides
enableColumnMove: false,
columnLines: true,
@@ -138,7 +161,7 @@ var grid = Ext.create('Ext.grid.property.Grid', {
// Inject a startEdit which always edits the value column
startEdit: function(record, column) {
// Maintainer: Do not change this 'this' to 'me'! It is the CellEditing object's own scope.
- Ext.grid.plugin.CellEditing.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField));
+ return this.self.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField));
}
}));
@@ -147,8 +170,8 @@ var grid = Ext.create('Ext.grid.property.Grid', {
onCellSelect: function(position) {
if (position.column != 1) {
position.column = 1;
- Ext.selection.CellModel.prototype.onCellSelect.call(this, position);
}
+ return this.self.prototype.onCellSelect.call(this, position);
}
};
me.customRenderers = me.customRenderers || {};
@@ -163,25 +186,25 @@ var grid = Ext.create('Ext.grid.property.Grid', {
me.columns = Ext.create('Ext.grid.property.HeaderContainer', me, me.store);
me.addEvents(
- /**
+ /**
* @event beforepropertychange
* Fires before a property value changes. Handlers can return false to cancel the property change
- * (this will internally call {@link Ext.data.Record#reject} on the property's record).
+ * (this will internally call {@link Ext.data.Model#reject} on the property's record).
* @param {Object} source The source data object for the grid (corresponds to the same object passed in
* as the {@link #source} config property).
* @param {String} recordId The record's id in the data store
- * @param {Mixed} value The current edited property value
- * @param {Mixed} oldValue The original property value prior to editing
+ * @param {Object} value The current edited property value
+ * @param {Object} oldValue The original property value prior to editing
*/
'beforepropertychange',
- /**
+ /**
* @event propertychange
* Fires after a property value has changed.
* @param {Object} source The source data object for the grid (corresponds to the same object passed in
* as the {@link #source} config property).
* @param {String} recordId The record's id in the data store
- * @param {Mixed} value The current edited property value
- * @param {Mixed} oldValue The original property value prior to editing
+ * @param {Object} value The current edited property value
+ * @param {Object} oldValue The original property value prior to editing
*/
'propertychange'
);
@@ -202,7 +225,7 @@ var grid = Ext.create('Ext.grid.property.Grid', {
};
// Track changes to the data so we can fire our events.
- this.store.on('update', me.onUpdate, me);
+ me.store.on('update', me.onUpdate, me);
},
// private
@@ -213,12 +236,12 @@ var grid = Ext.create('Ext.grid.property.Grid', {
if (operation == Ext.data.Model.EDIT) {
v = record.get(me.valueField);
oldValue = record.modified.value;
- if (me.fireEvent('beforepropertychange', me.source, record.id, v, oldValue) !== false) {
+ if (me.fireEvent('beforepropertychange', me.source, record.getId(), v, oldValue) !== false) {
if (me.source) {
- me.source[record.id] = v;
+ me.source[record.getId()] = v;
}
record.commit();
- me.fireEvent('propertychange', me.source, record.id, v, oldValue);
+ me.fireEvent('propertychange', me.source, record.getId(), v, oldValue);
} else {
record.reject();
}
@@ -232,7 +255,7 @@ var grid = Ext.create('Ext.grid.property.Grid', {
} else if (direction == 'right') {
direction = 'down';
}
- var pos = Ext.view.Table.prototype.walkCells.call(this, pos, direction, e, preventWrap, verifierFn, scope);
+ pos = Ext.view.Table.prototype.walkCells.call(this, pos, direction, e, preventWrap, verifierFn, scope);
if (!pos.column) {
pos.column = 1;
}
@@ -243,7 +266,7 @@ var grid = Ext.create('Ext.grid.property.Grid', {
// returns the correct editor type for the property type, or a custom one keyed by the property name
getCellEditor : function(record, column) {
var me = this,
- propName = record.get(me.nameField),
+ propName = record.get(me.nameField),
val = record.get(me.valueField),
editor = me.customEditors[propName];
@@ -281,11 +304,13 @@ var grid = Ext.create('Ext.grid.property.Grid', {
destroyEditors: function (editors) {
for (var ed in editors) {
- Ext.destroy(editors[ed]);
+ if (editors.hasOwnProperty(ed)) {
+ Ext.destroy(editors[ed]);
+ }
}
},
- /**
+ /**
* Sets the source data object containing the property data. The data object can contain one or more name/value
* pairs representing all of the properties of an object to display in the grid, and this data will automatically
* be loaded into the grid's {@link #store}. The values should be supplied in the proper data type if needed,
@@ -307,7 +332,7 @@ grid.setSource({
this.propStore.setSource(source);
},
- /**
+ /**
* Gets the source data object containing the property data. See {@link #setSource} for details regarding the
* format of the data object.
* @return {Object} The data object
@@ -316,17 +341,17 @@ grid.setSource({
return this.propStore.getSource();
},
- /**
+ /**
* Sets the value of a property.
* @param {String} prop The name of the property to set
- * @param {Mixed} value The value to test
+ * @param {Object} value The value to test
* @param {Boolean} create (Optional) True to create the property if it doesn't already exist. Defaults to <tt>false</tt>.
*/
setProperty: function(prop, value, create) {
this.propStore.setValue(prop, value, create);
},
- /**
+ /**
* Removes a property from the grid.
* @param {String} prop The name of the property to remove
*/
@@ -334,20 +359,22 @@ grid.setSource({
this.propStore.remove(prop);
}
- /**
+ /**
* @cfg store
* @hide
*/
- /**
+ /**
* @cfg colModel
* @hide
*/
- /**
+ /**
* @cfg cm
* @hide
*/
- /**
+ /**
* @cfg columns
* @hide
*/
-});