X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/source/PropertyGrid.html diff --git a/docs/source/PropertyGrid.html b/docs/source/PropertyGrid.html index 925ae719..b5fac352 100644 --- a/docs/source/PropertyGrid.html +++ b/docs/source/PropertyGrid.html @@ -1,13 +1,14 @@ + The source code
/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
@@ -45,18 +46,20 @@ Ext.grid.PropertyRecord = Ext.data.Record.create([
  * @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;
@@ -92,16 +95,36 @@ Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
 
     // 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.
@@ -118,43 +141,45 @@ Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
  * @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.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);
-};
-
-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){
@@ -163,7 +188,7 @@ Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
 
     // private
     renderBool : function(bVal){
-        return bVal ? 'true' : 'false';
+        return this[bVal ? 'trueText' : 'falseText'];
     },
 
     // private
@@ -183,7 +208,11 @@ Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
     },
 
     // 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);
@@ -222,7 +251,7 @@ Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
     destroy : function(){
         Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
         for(var ed in this.editors){
-            Ext.destroy(ed);
+            Ext.destroy(this.editors[ed]);
         }
     }
 });
@@ -275,6 +304,33 @@ var grid = new Ext.grid.PropertyGrid({
         'Start Time': '10:00 AM'
     }
 });
+
+ */ +
/** + * @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 + * 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: + *

+var grid = new Ext.grid.PropertyGrid({
+    ...
+    customRenderers: {
+        Available: function(v){
+            if(v){
+                return 'Yes';
+            }else{
+                return 'No';
+            }
+        }
+    },
+    source: {
+        Available: true
+    }
+});
 
*/ @@ -290,6 +346,7 @@ var grid = new Ext.grid.PropertyGrid({ // private initComponent : function(){ + this.customRenderers = this.customRenderers || {}; this.customEditors = this.customEditors || {}; this.lastEditRow = null; var store = new Ext.grid.PropertyStore(this); @@ -374,9 +431,44 @@ grid.setSource({ */ getSource : function(){ 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 {Boolean} create (Optional) True to create the property if it doesn't already exist. Defaults to false. + */ + 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 + */ + removeProperty : function(prop){ + this.propStore.remove(prop); } + +
/** + * @cfg store + * @hide + */ +
/** + * @cfg colModel + * @hide + */ +
/** + * @cfg cm + * @hide + */ +
/** + * @cfg columns + * @hide + */ }); Ext.reg("propertygrid", Ext.grid.PropertyGrid); - + \ No newline at end of file