<html>\r
<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
<title>The source code</title>\r
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
* @param {Ext.grid.Grid} grid The grid this store will be bound to
* @param {Object} source The source data config object
*/
-Ext.grid.PropertyStore = function(grid, source){
- this.grid = grid;
- this.store = new Ext.data.Store({
- recordType : Ext.grid.PropertyRecord
- });
- this.store.on('update', this.onUpdate, this);
- if(source){
- this.setSource(source);
- }
- Ext.grid.PropertyStore.superclass.constructor.call(this);
-};
-Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
+Ext.grid.PropertyStore = Ext.extend(Ext.util.Observable, {
+
+ constructor : function(grid, source){
+ this.grid = grid;
+ this.store = new Ext.data.Store({
+ recordType : Ext.grid.PropertyRecord
+ });
+ this.store.on('update', this.onUpdate, this);
+ if(source){
+ this.setSource(source);
+ }
+ Ext.grid.PropertyStore.superclass.constructor.call(this);
+ },
+
// protected - should only be called by the grid. Use grid.setSource instead.
setSource : function(o){
this.source = o;
// private
isEditableValue: function(val){
- if(Ext.isDate(val)){
- return true;
- }
- return !(Ext.isObject(val) || Ext.isFunction(val));
+ return Ext.isPrimitive(val) || Ext.isDate(val);
},
// private
- setValue : function(prop, value){
- this.source[prop] = value;
- this.store.getById(prop).set('value', value);
+ setValue : function(prop, value, create){
+ var r = this.getRec(prop);
+ if(r){
+ r.set('value', value);
+ this.source[prop] = value;
+ }else if(create){
+ // only create if specified.
+ this.source[prop] = value;
+ r = new Ext.grid.PropertyRecord({name: prop, value: value}, prop);
+ this.store.add(r);
+
+ }
+ },
+
+ // private
+ remove : function(prop){
+ var r = this.getRec(prop);
+ if(r){
+ this.store.remove(r);
+ delete this.source[prop];
+ }
+ },
+
+ // private
+ getRec : function(prop){
+ return this.store.getById(prop);
},
// protected - should only be called by the grid. Use grid.getSource instead.
* @param {Ext.grid.Grid} grid The grid this store will be bound to
* @param {Object} source The source data config object
*/
-Ext.grid.PropertyColumnModel = function(grid, store){
- var g = Ext.grid,
- f = Ext.form;
-
- this.grid = grid;
- g.PropertyColumnModel.superclass.constructor.call(this, [
- {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
- {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
- ]);
- this.store = store;
-
- var bfield = new f.Field({
- autoCreate: {tag: 'select', children: [
- {tag: 'option', value: 'true', html: 'true'},
- {tag: 'option', value: 'false', html: 'false'}
- ]},
- getValue : function(){
- return this.el.value == 'true';
- }
- });
- this.editors = {
- 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
- 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
- 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
- 'boolean' : new g.GridEditor(bfield)
- };
- this.renderCellDelegate = this.renderCell.createDelegate(this);
- this.renderPropDelegate = this.renderProp.createDelegate(this);
-};
-
-Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
+Ext.grid.PropertyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
// private - strings used for locale support
nameText : 'Name',
valueText : 'Value',
dateFormat : 'm/j/Y',
+ trueText: 'true',
+ falseText: 'false',
+
+ constructor : function(grid, store){
+ var g = Ext.grid,
+ f = Ext.form;
+
+ this.grid = grid;
+ g.PropertyColumnModel.superclass.constructor.call(this, [
+ {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
+ {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
+ ]);
+ this.store = store;
+
+ var bfield = new f.Field({
+ autoCreate: {tag: 'select', children: [
+ {tag: 'option', value: 'true', html: this.trueText},
+ {tag: 'option', value: 'false', html: this.falseText}
+ ]},
+ getValue : function(){
+ return this.el.dom.value == 'true';
+ }
+ });
+ this.editors = {
+ 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
+ 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
+ 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
+ 'boolean' : new g.GridEditor(bfield, {
+ autoSize: 'both'
+ })
+ };
+ this.renderCellDelegate = this.renderCell.createDelegate(this);
+ this.renderPropDelegate = this.renderProp.createDelegate(this);
+ },
// private
renderDate : function(dateVal){
// private
renderBool : function(bVal){
- return bVal ? 'true' : 'false';
+ return this[bVal ? 'trueText' : 'falseText'];
},
// private
},
// private
- renderCell : function(val){
+ renderCell : function(val, meta, rec){
+ var renderer = this.grid.customRenderers[rec.get('name')];
+ if(renderer){
+ return renderer.apply(this, arguments);
+ }
var rv = val;
if(Ext.isDate(val)){
rv = this.renderDate(val);
destroy : function(){
Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
for(var ed in this.editors){
- Ext.destroy(ed);
+ Ext.destroy(this.editors[ed]);
}
}
});
'Start Time': '10:00 AM'
}
});
+</code></pre>
+ */
+ <div id="cfg-Ext.grid.PropertyGrid-source"></div>/**
+ * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
+ */
+ <div id="cfg-Ext.grid.PropertyGrid-customRenderers"></div>/**
+ * @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
+ * associated with the type of the value. The name of the renderer type should correspond with the name of the property
+ * that it will render. Example usage:
+ * <pre><code>
+var grid = new Ext.grid.PropertyGrid({
+ ...
+ customRenderers: {
+ Available: function(v){
+ if(v){
+ return '<span style="color: green;">Yes</span>';
+ }else{
+ return '<span style="color: red;">No</span>';
+ }
+ }
+ },
+ source: {
+ Available: true
+ }
+});
</code></pre>
*/
// private
initComponent : function(){
+ this.customRenderers = this.customRenderers || {};
this.customEditors = this.customEditors || {};
this.lastEditRow = null;
var store = new Ext.grid.PropertyStore(this);
*/
getSource : function(){
return this.propStore.getSource();
+ },
+
+ <div id="method-Ext.grid.PropertyGrid-setProperty"></div>/**
+ * Sets the value of a property.
+ * @param {String} prop The name of the property to set
+ * @param {Mixed} 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);
+ },
+
+ <div id="method-Ext.grid.PropertyGrid-removeProperty"></div>/**
+ * Removes a property from the grid.
+ * @param {String} prop The name of the property to remove
+ */
+ removeProperty : function(prop){
+ this.propStore.remove(prop);
}
+
+ <div id="cfg-Ext.grid.PropertyGrid-null"></div>/**
+ * @cfg store
+ * @hide
+ */
+ <div id="cfg-Ext.grid.PropertyGrid-null"></div>/**
+ * @cfg colModel
+ * @hide
+ */
+ <div id="cfg-Ext.grid.PropertyGrid-null"></div>/**
+ * @cfg cm
+ * @hide
+ */
+ <div id="cfg-Ext.grid.PropertyGrid-null"></div>/**
+ * @cfg columns
+ * @hide
+ */
});
Ext.reg("propertygrid", Ext.grid.PropertyGrid);
</pre> \r
git.ithinksw.org / extjs.git / blobdiff