docs/source/Grid.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-grid-property-Grid-method-constructor'><span id='Ext-grid-property-Grid'>/**
  19 </span></span> * @class Ext.grid.property.Grid
  20  * @extends Ext.grid.Panel
  21  * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
  22  * development IDEs.  Each row in the grid represents a property of some object, and the data is stored
  23  * as a set of name/value pairs in {@link Ext.grid.property.Property Properties}.  Example usage:
  24  * &lt;pre&gt;&lt;code&gt;
  25 var grid = new Ext.grid.property.Grid({
  26     title: 'Properties Grid',
  27     width: 300,
  28     renderTo: 'grid-ct',
  29     source: {
  30         &quot;(name)&quot;: &quot;My Object&quot;,
  31         &quot;Created&quot;: Ext.Date.parse('10/15/2006', 'm/d/Y'),
  32         &quot;Available&quot;: false,
  33         &quot;Version&quot;: .01,
  34         &quot;Description&quot;: &quot;A test object&quot;
  35     }
  36 });
  37 &lt;/code&gt;&lt;/pre&gt;
  38  * @constructor
  39  * @param {Object} config The grid config object
  40  * @xtype propertygrid
  41  */
  42 Ext.define('Ext.grid.property.Grid', {
  43
  44     extend: 'Ext.grid.Panel',
  45
  46     alias: 'widget.propertygrid',
  47
  48     alternateClassName: 'Ext.grid.PropertyGrid',
  49
  50     uses: [
  51        'Ext.grid.plugin.CellEditing',
  52        'Ext.grid.property.Store',
  53        'Ext.grid.property.HeaderContainer',
  54        'Ext.XTemplate',
  55        'Ext.grid.CellEditor',
  56        'Ext.form.field.Date',
  57        'Ext.form.field.Text',
  58        'Ext.form.field.Number'
  59     ],
  60
  61 <span id='Ext-grid-property-Grid-cfg-propertyNames'>   /**
  62 </span>    * @cfg {Object} propertyNames An object containing custom property name/display name pairs.
  63     * If specified, the display name will be shown in the name column instead of the property name.
  64     */
  65
  66 <span id='Ext-grid-property-Grid-cfg-source'>    /**
  67 </span>    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
  68     */
  69
  70 <span id='Ext-grid-property-Grid-cfg-customEditors'>    /**
  71 </span>    * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
  72     * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing
  73     * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
  74     * associated with a custom input control by specifying a custom editor.  The name of the editor
  75     * type should correspond with the name of the property that will use the editor.  Example usage:
  76     * &lt;pre&gt;&lt;code&gt;
  77 var grid = new Ext.grid.property.Grid({
  78
  79     // Custom editors for certain property names
  80     customEditors: {
  81         evtStart: Ext.create('Ext.form.TimeField' {selectOnFocus:true})
  82     },
  83
  84     // Displayed name for property names in the source
  85     propertyNames: {
  86         evtStart: 'Start Time'
  87     },
  88
  89     // Data object containing properties to edit
  90     source: {
  91         evtStart: '10:00 AM'
  92     }
  93 });
  94 &lt;/code&gt;&lt;/pre&gt;
  95     */
  96
  97 <span id='Ext-grid-property-Grid-cfg-source'>    /**
  98 </span>    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
  99     */
 100
 101 <span id='Ext-grid-property-Grid-cfg-customRenderers'>    /**
 102 </span>    * @cfg {Object} customRenderers An object containing name/value pairs of custom renderer type definitions that allow
 103     * the grid to support custom rendering of fields.  By default, the grid supports strongly-typed rendering
 104     * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
 105     * associated with the type of the value.  The name of the renderer type should correspond with the name of the property
 106     * that it will render.  Example usage:
 107     * &lt;pre&gt;&lt;code&gt;
 108 var grid = Ext.create('Ext.grid.property.Grid', {
 109     customRenderers: {
 110         Available: function(v){
 111             if (v) {
 112                 return '&lt;span style=&quot;color: green;&quot;&gt;Yes&lt;/span&gt;';
 113             } else {
 114                 return '&lt;span style=&quot;color: red;&quot;&gt;No&lt;/span&gt;';
 115             }
 116         }
 117     },
 118     source: {
 119         Available: true
 120     }
 121 });
 122 &lt;/code&gt;&lt;/pre&gt;
 123     */
 124
 125 <span id='Ext-grid-property-Grid-cfg-valueField'>    /**
 126 </span>     * @cfg {String} valueField
 127      * Optional. The name of the field from the property store to use as the value field name. Defaults to &lt;code&gt;'value'&lt;/code&gt;
 128      * This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
 129      */
 130     valueField: 'value',
 131
 132 <span id='Ext-grid-property-Grid-cfg-nameField'>    /**
 133 </span>     * @cfg {String} nameField
 134      * Optional. The name of the field from the property store to use as the property field name. Defaults to &lt;code&gt;'name'&lt;/code&gt;
 135      * This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
 136      */
 137     nameField: 'name',
 138
 139     // private config overrides
 140     enableColumnMove: false,
 141     columnLines: true,
 142     stripeRows: false,
 143     trackMouseOver: false,
 144     clicksToEdit: 1,
 145     enableHdMenu: false,
 146
 147     // private
 148     initComponent : function(){
 149         var me = this;
 150
 151         me.addCls(Ext.baseCSSPrefix + 'property-grid');
 152         me.plugins = me.plugins || [];
 153
 154         // Enable cell editing. Inject a custom startEdit which always edits column 1 regardless of which column was clicked.
 155         me.plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
 156             clicksToEdit: me.clicksToEdit,
 157
 158             // Inject a startEdit which always edits the value column
 159             startEdit: function(record, column) {
 160                 // Maintainer: Do not change this 'this' to 'me'! It is the CellEditing object's own scope.
 161                 Ext.grid.plugin.CellEditing.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField));
 162             }
 163         }));
 164
 165         me.selModel = {
 166             selType: 'cellmodel',
 167             onCellSelect: function(position) {
 168                 if (position.column != 1) {
 169                     position.column = 1;
 170                     Ext.selection.CellModel.prototype.onCellSelect.call(this, position);
 171                 }
 172             }
 173         };
 174         me.customRenderers = me.customRenderers || {};
 175         me.customEditors = me.customEditors || {};
 176
 177         // Create a property.Store from the source object unless configured with a store
 178         if (!me.store) {
 179             me.propStore = me.store = Ext.create('Ext.grid.property.Store', me, me.source);
 180         }
 181
 182         me.store.sort('name', 'ASC');
 183         me.columns = Ext.create('Ext.grid.property.HeaderContainer', me, me.store);
 184
 185         me.addEvents(
 186 <span id='Ext-grid-property-Grid-event-beforepropertychange'>            /**
 187 </span>             * @event beforepropertychange
 188              * Fires before a property value changes.  Handlers can return false to cancel the property change
 189              * (this will internally call {@link Ext.data.Record#reject} on the property's record).
 190              * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 191              * as the {@link #source} config property).
 192              * @param {String} recordId The record's id in the data store
 193              * @param {Mixed} value The current edited property value
 194              * @param {Mixed} oldValue The original property value prior to editing
 195              */
 196             'beforepropertychange',
 197 <span id='Ext-grid-property-Grid-event-propertychange'>            /**
 198 </span>             * @event propertychange
 199              * Fires after a property value has changed.
 200              * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 201              * as the {@link #source} config property).
 202              * @param {String} recordId The record's id in the data store
 203              * @param {Mixed} value The current edited property value
 204              * @param {Mixed} oldValue The original property value prior to editing
 205              */
 206             'propertychange'
 207         );
 208         me.callParent();
 209
 210         // Inject a custom implementation of walkCells which only goes up or down
 211         me.getView().walkCells = this.walkCells;
 212
 213         // Set up our default editor set for the 4 atomic data types
 214         me.editors = {
 215             'date'    : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date',   {selectOnFocus: true})}),
 216             'string'  : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text',   {selectOnFocus: true})}),
 217             'number'  : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
 218             'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
 219                 editable: false,
 220                 store: [[ true, me.headerCt.trueText ], [false, me.headerCt.falseText ]]
 221             })})
 222         };
 223
 224         // Track changes to the data so we can fire our events.
 225         this.store.on('update', me.onUpdate, me);
 226     },
 227
 228     // private
 229     onUpdate : function(store, record, operation) {
 230         var me = this,
 231             v, oldValue;
 232
 233         if (operation == Ext.data.Model.EDIT) {
 234             v = record.get(me.valueField);
 235             oldValue = record.modified.value;
 236             if (me.fireEvent('beforepropertychange', me.source, record.getId(), v, oldValue) !== false) {
 237                 if (me.source) {
 238                     me.source[record.getId()] = v;
 239                 }
 240                 record.commit();
 241                 me.fireEvent('propertychange', me.source, record.getId(), v, oldValue);
 242             } else {
 243                 record.reject();
 244             }
 245         }
 246     },
 247
 248     // Custom implementation of walkCells which only goes up and down.
 249     walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) {
 250         if (direction == 'left') {
 251             direction = 'up';
 252         } else if (direction == 'right') {
 253             direction = 'down';
 254         }
 255         pos = Ext.view.Table.prototype.walkCells.call(this, pos, direction, e, preventWrap, verifierFn, scope);
 256         if (!pos.column) {
 257             pos.column = 1;
 258         }
 259         return pos;
 260     },
 261
 262     // private
 263     // returns the correct editor type for the property type, or a custom one keyed by the property name
 264     getCellEditor : function(record, column) {
 265         var me = this,
 266             propName = record.get(me.nameField),
 267             val = record.get(me.valueField),
 268             editor = me.customEditors[propName];
 269
 270         // A custom editor was found. If not already wrapped with a CellEditor, wrap it, and stash it back
 271         // If it's not even a Field, just a config object, instantiate it before wrapping it.
 272         if (editor) {
 273             if (!(editor instanceof Ext.grid.CellEditor)) {
 274                 if (!(editor instanceof Ext.form.field.Base)) {
 275                     editor = Ext.ComponentManager.create(editor, 'textfield');
 276                 }
 277                 editor = me.customEditors[propName] = Ext.create('Ext.grid.CellEditor', { field: editor });
 278             }
 279         } else if (Ext.isDate(val)) {
 280             editor = me.editors.date;
 281         } else if (Ext.isNumber(val)) {
 282             editor = me.editors.number;
 283         } else if (Ext.isBoolean(val)) {
 284             editor = me.editors['boolean'];
 285         } else {
 286             editor = me.editors.string;
 287         }
 288
 289         // Give the editor a unique ID because the CellEditing plugin caches them
 290         editor.editorId = propName;
 291         return editor;
 292     },
 293
 294     beforeDestroy: function() {
 295         var me = this;
 296         me.callParent();
 297         me.destroyEditors(me.editors);
 298         me.destroyEditors(me.customEditors);
 299         delete me.source;
 300     },
 301
 302     destroyEditors: function (editors) {
 303         for (var ed in editors) {
 304             if (editors.hasOwnProperty(ed)) {
 305                 Ext.destroy(editors[ed]);
 306             }
 307         }
 308     },
 309
 310 <span id='Ext-grid-property-Grid-method-setSource'>    /**
 311 </span>     * Sets the source data object containing the property data.  The data object can contain one or more name/value
 312      * pairs representing all of the properties of an object to display in the grid, and this data will automatically
 313      * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,
 314      * otherwise string type will be assumed.  If the grid already contains data, this method will replace any
 315      * existing data.  See also the {@link #source} config value.  Example usage:
 316      * &lt;pre&gt;&lt;code&gt;
 317 grid.setSource({
 318     &quot;(name)&quot;: &quot;My Object&quot;,
 319     &quot;Created&quot;: Ext.Date.parse('10/15/2006', 'm/d/Y'),  // date type
 320     &quot;Available&quot;: false,  // boolean type
 321     &quot;Version&quot;: .01,      // decimal type
 322     &quot;Description&quot;: &quot;A test object&quot;
 323 });
 324 &lt;/code&gt;&lt;/pre&gt;
 325      * @param {Object} source The data object
 326      */
 327     setSource: function(source) {
 328         this.source = source;
 329         this.propStore.setSource(source);
 330     },
 331
 332 <span id='Ext-grid-property-Grid-method-getSource'>    /**
 333 </span>     * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the
 334      * format of the data object.
 335      * @return {Object} The data object
 336      */
 337     getSource: function() {
 338         return this.propStore.getSource();
 339     },
 340
 341 <span id='Ext-grid-property-Grid-method-setProperty'>    /**
 342 </span>     * Sets the value of a property.
 343      * @param {String} prop The name of the property to set
 344      * @param {Mixed} value The value to test
 345      * @param {Boolean} create (Optional) True to create the property if it doesn't already exist. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 346      */
 347     setProperty: function(prop, value, create) {
 348         this.propStore.setValue(prop, value, create);
 349     },
 350
 351 <span id='Ext-grid-property-Grid-method-removeProperty'>    /**
 352 </span>     * Removes a property from the grid.
 353      * @param {String} prop The name of the property to remove
 354      */
 355     removeProperty: function(prop) {
 356         this.propStore.remove(prop);
 357     }
 358
 359 <span id='Ext-grid-property-Grid-cfg-store'>    /**
 360 </span>     * @cfg store
 361      * @hide
 362      */
 363 <span id='Ext-grid-property-Grid-cfg-colModel'>    /**
 364 </span>     * @cfg colModel
 365      * @hide
 366      */
 367 <span id='Ext-grid-property-Grid-cfg-cm'>    /**
 368 </span>     * @cfg cm
 369      * @hide
 370      */
 371 <span id='Ext-grid-property-Grid-cfg-columns'>    /**
 372 </span>     * @cfg columns
 373      * @hide
 374      */
 375 });</pre>
 376 </body>
 377 </html>