← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/docs/source/PropertyGrid.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/docs/source/PropertyGrid.html
 
1
<html>
 
2
<head>
 
3
  <title>The source code</title>
 
4
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
 
5
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 
6
</head>
 
7
<body  onload="prettyPrint();">
 
8
    <pre class="prettyprint lang-js"><div id="cls-Ext.grid.PropertyRecord"></div>/**
 
9
 * @class Ext.grid.PropertyRecord
 
10
 * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the
 
11
 * {@link Ext.grid.PropertyGrid}.  Typically, PropertyRecords do not need to be created directly as they can be
 
12
 * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}
 
13
 * config property or by calling {@link Ext.grid.PropertyGrid#setSource}.  However, if the need arises, these records
 
14
 * can also be created explicitly as shwon below.  Example usage:
 
15
 * <pre><code>
 
16
var rec = new Ext.grid.PropertyRecord({
 
17
    name: 'Birthday',
 
18
    value: new Date(Date.parse('05/26/1972'))
 
19
});
 
20
// Add record to an already populated grid
 
21
grid.store.addSorted(rec);
 
22
</code></pre>
 
23
 * @constructor
 
24
 * @param {Object} config A data object in the format: {name: [name], value: [value]}.  The specified value's type
 
25
 * will be read automatically by the grid to determine the type of editor to use when displaying it.
 
26
 */
 
27
Ext.grid.PropertyRecord = Ext.data.Record.create([
 
28
    {name:'name',type:'string'}, 'value'
 
29
]);
 
30
 
 
31
<div id="cls-Ext.grid.PropertyStore"></div>/**
 
32
 * @class Ext.grid.PropertyStore
 
33
 * @extends Ext.util.Observable
 
34
 * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping
 
35
 * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
 
36
 * required for compatibility with the underlying store. Generally this class should not need to be used directly --
 
37
 * the grid's data should be accessed from the underlying store via the {@link #store} property.
 
38
 * @constructor
 
39
 * @param {Ext.grid.Grid} grid The grid this store will be bound to
 
40
 * @param {Object} source The source data config object
 
41
 */
 
42
Ext.grid.PropertyStore = function(grid, source){
 
43
    this.grid = grid;
 
44
    this.store = new Ext.data.Store({
 
45
        recordType : Ext.grid.PropertyRecord
 
46
    });
 
47
    this.store.on('update', this.onUpdate,  this);
 
48
    if(source){
 
49
        this.setSource(source);
 
50
    }
 
51
    Ext.grid.PropertyStore.superclass.constructor.call(this);
 
52
};
 
53
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
 
54
    // protected - should only be called by the grid.  Use grid.setSource instead.
 
55
    setSource : function(o){
 
56
        this.source = o;
 
57
        this.store.removeAll();
 
58
        var data = [];
 
59
        for(var k in o){
 
60
            if(this.isEditableValue(o[k])){
 
61
                data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
 
62
            }
 
63
        }
 
64
        this.store.loadRecords({records: data}, {}, true);
 
65
    },
 
66
 
 
67
    // private
 
68
    onUpdate : function(ds, record, type){
 
69
        if(type == Ext.data.Record.EDIT){
 
70
            var v = record.data.value;
 
71
            var oldValue = record.modified.value;
 
72
            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
 
73
                this.source[record.id] = v;
 
74
                record.commit();
 
75
                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
 
76
            }else{
 
77
                record.reject();
 
78
            }
 
79
        }
 
80
    },
 
81
 
 
82
    // private
 
83
    getProperty : function(row){
 
84
       return this.store.getAt(row);
 
85
    },
 
86
 
 
87
    // private
 
88
    isEditableValue: function(val){
 
89
        if(Ext.isDate(val)){
 
90
            return true;
 
91
        }
 
92
        return !(Ext.isObject(val) || Ext.isFunction(val));
 
93
    },
 
94
 
 
95
    // private
 
96
    setValue : function(prop, value){
 
97
        this.source[prop] = value;
 
98
        this.store.getById(prop).set('value', value);
 
99
    },
 
100
 
 
101
    // protected - should only be called by the grid.  Use grid.getSource instead.
 
102
    getSource : function(){
 
103
        return this.source;
 
104
    }
 
105
});
 
106
 
 
107
<div id="cls-Ext.grid.PropertyColumnModel"></div>/**
 
108
 * @class Ext.grid.PropertyColumnModel
 
109
 * @extends Ext.grid.ColumnModel
 
110
 * A custom column model for the {@link Ext.grid.PropertyGrid}.  Generally it should not need to be used directly.
 
111
 * @constructor
 
112
 * @param {Ext.grid.Grid} grid The grid this store will be bound to
 
113
 * @param {Object} source The source data config object
 
114
 */
 
115
Ext.grid.PropertyColumnModel = function(grid, store){
 
116
    var g = Ext.grid,
 
117
        f = Ext.form;
 
118
        
 
119
    this.grid = grid;
 
120
    g.PropertyColumnModel.superclass.constructor.call(this, [
 
121
        {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
 
122
        {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
 
123
    ]);
 
124
    this.store = store;
 
125
 
 
126
    var bfield = new f.Field({
 
127
        autoCreate: {tag: 'select', children: [
 
128
            {tag: 'option', value: 'true', html: 'true'},
 
129
            {tag: 'option', value: 'false', html: 'false'}
 
130
        ]},
 
131
        getValue : function(){
 
132
            return this.el.value == 'true';
 
133
        }
 
134
    });
 
135
    this.editors = {
 
136
        'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
 
137
        'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
 
138
        'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
 
139
        'boolean' : new g.GridEditor(bfield)
 
140
    };
 
141
    this.renderCellDelegate = this.renderCell.createDelegate(this);
 
142
    this.renderPropDelegate = this.renderProp.createDelegate(this);
 
143
};
 
144
 
 
145
Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
 
146
    // private - strings used for locale support
 
147
    nameText : 'Name',
 
148
    valueText : 'Value',
 
149
    dateFormat : 'm/j/Y',
 
150
 
 
151
    // private
 
152
    renderDate : function(dateVal){
 
153
        return dateVal.dateFormat(this.dateFormat);
 
154
    },
 
155
 
 
156
    // private
 
157
    renderBool : function(bVal){
 
158
        return bVal ? 'true' : 'false';
 
159
    },
 
160
 
 
161
    // private
 
162
    isCellEditable : function(colIndex, rowIndex){
 
163
        return colIndex == 1;
 
164
    },
 
165
 
 
166
    // private
 
167
    getRenderer : function(col){
 
168
        return col == 1 ?
 
169
            this.renderCellDelegate : this.renderPropDelegate;
 
170
    },
 
171
 
 
172
    // private
 
173
    renderProp : function(v){
 
174
        return this.getPropertyName(v);
 
175
    },
 
176
 
 
177
    // private
 
178
    renderCell : function(val){
 
179
        var rv = val;
 
180
        if(Ext.isDate(val)){
 
181
            rv = this.renderDate(val);
 
182
        }else if(typeof val == 'boolean'){
 
183
            rv = this.renderBool(val);
 
184
        }
 
185
        return Ext.util.Format.htmlEncode(rv);
 
186
    },
 
187
 
 
188
    // private
 
189
    getPropertyName : function(name){
 
190
        var pn = this.grid.propertyNames;
 
191
        return pn && pn[name] ? pn[name] : name;
 
192
    },
 
193
 
 
194
    // private
 
195
    getCellEditor : function(colIndex, rowIndex){
 
196
        var p = this.store.getProperty(rowIndex),
 
197
            n = p.data.name, 
 
198
            val = p.data.value;
 
199
        if(this.grid.customEditors[n]){
 
200
            return this.grid.customEditors[n];
 
201
        }
 
202
        if(Ext.isDate(val)){
 
203
            return this.editors.date;
 
204
        }else if(typeof val == 'number'){
 
205
            return this.editors.number;
 
206
        }else if(typeof val == 'boolean'){
 
207
            return this.editors['boolean'];
 
208
        }else{
 
209
            return this.editors.string;
 
210
        }
 
211
    },
 
212
 
 
213
    // inherit docs
 
214
    destroy : function(){
 
215
        Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
 
216
        for(var ed in this.editors){
 
217
            Ext.destroy(ed);
 
218
        }
 
219
    }
 
220
});
 
221
 
 
222
<div id="cls-Ext.grid.PropertyGrid"></div>/**
 
223
 * @class Ext.grid.PropertyGrid
 
224
 * @extends Ext.grid.EditorGridPanel
 
225
 * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
 
226
 * development IDEs.  Each row in the grid represents a property of some object, and the data is stored
 
227
 * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage:
 
228
 * <pre><code>
 
229
var grid = new Ext.grid.PropertyGrid({
 
230
    title: 'Properties Grid',
 
231
    autoHeight: true,
 
232
    width: 300,
 
233
    renderTo: 'grid-ct',
 
234
    source: {
 
235
        "(name)": "My Object",
 
236
        "Created": new Date(Date.parse('10/15/2006')),
 
237
        "Available": false,
 
238
        "Version": .01,
 
239
        "Description": "A test object"
 
240
    }
 
241
});
 
242
</code></pre>
 
243
 * @constructor
 
244
 * @param {Object} config The grid config object
 
245
 */
 
246
Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
 
247
    <div id="cfg-Ext.grid.PropertyGrid-propertyNames"></div>/**
 
248
    * @cfg {Object} propertyNames An object containing property name/display name pairs.
 
249
    * If specified, the display name will be shown in the name column instead of the property name.
 
250
    */
 
251
    <div id="cfg-Ext.grid.PropertyGrid-source"></div>/**
 
252
    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
 
253
    */
 
254
    <div id="cfg-Ext.grid.PropertyGrid-customEditors"></div>/**
 
255
    * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
 
256
    * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing
 
257
    * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
 
258
    * associated with a custom input control by specifying a custom editor.  The name of the editor
 
259
    * type should correspond with the name of the property that will use the editor.  Example usage:
 
260
    * <pre><code>
 
261
var grid = new Ext.grid.PropertyGrid({
 
262
    ...
 
263
    customEditors: {
 
264
        'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
 
265
    },
 
266
    source: {
 
267
        'Start Time': '10:00 AM'
 
268
    }
 
269
});
 
270
</code></pre>
 
271
    */
 
272
 
 
273
    // private config overrides
 
274
    enableColumnMove:false,
 
275
    stripeRows:false,
 
276
    trackMouseOver: false,
 
277
    clicksToEdit:1,
 
278
    enableHdMenu : false,
 
279
    viewConfig : {
 
280
        forceFit:true
 
281
    },
 
282
 
 
283
    // private
 
284
    initComponent : function(){
 
285
        this.customEditors = this.customEditors || {};
 
286
        this.lastEditRow = null;
 
287
        var store = new Ext.grid.PropertyStore(this);
 
288
        this.propStore = store;
 
289
        var cm = new Ext.grid.PropertyColumnModel(this, store);
 
290
        store.store.sort('name', 'ASC');
 
291
        this.addEvents(
 
292
            <div id="event-Ext.grid.PropertyGrid-beforepropertychange"></div>/**
 
293
             * @event beforepropertychange
 
294
             * Fires before a property value changes.  Handlers can return false to cancel the property change
 
295
             * (this will internally call {@link Ext.data.Record#reject} on the property's record).
 
296
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 
297
             * as the {@link #source} config property).
 
298
             * @param {String} recordId The record's id in the data store
 
299
             * @param {Mixed} value The current edited property value
 
300
             * @param {Mixed} oldValue The original property value prior to editing
 
301
             */
 
302
            'beforepropertychange',
 
303
            <div id="event-Ext.grid.PropertyGrid-propertychange"></div>/**
 
304
             * @event propertychange
 
305
             * Fires after a property value has changed.
 
306
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in
 
307
             * as the {@link #source} config property).
 
308
             * @param {String} recordId The record's id in the data store
 
309
             * @param {Mixed} value The current edited property value
 
310
             * @param {Mixed} oldValue The original property value prior to editing
 
311
             */
 
312
            'propertychange'
 
313
        );
 
314
        this.cm = cm;
 
315
        this.ds = store.store;
 
316
        Ext.grid.PropertyGrid.superclass.initComponent.call(this);
 
317
 
 
318
                this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
 
319
            if(colIndex === 0){
 
320
                this.startEditing.defer(200, this, [rowIndex, 1]);
 
321
                return false;
 
322
            }
 
323
        }, this);
 
324
    },
 
325
 
 
326
    // private
 
327
    onRender : function(){
 
328
        Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
 
329
 
 
330
        this.getGridEl().addClass('x-props-grid');
 
331
    },
 
332
 
 
333
    // private
 
334
    afterRender: function(){
 
335
        Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
 
336
        if(this.source){
 
337
            this.setSource(this.source);
 
338
        }
 
339
    },
 
340
 
 
341
    <div id="method-Ext.grid.PropertyGrid-setSource"></div>/**
 
342
     * Sets the source data object containing the property data.  The data object can contain one or more name/value
 
343
     * pairs representing all of the properties of an object to display in the grid, and this data will automatically
 
344
     * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,
 
345
     * otherwise string type will be assumed.  If the grid already contains data, this method will replace any
 
346
     * existing data.  See also the {@link #source} config value.  Example usage:
 
347
     * <pre><code>
 
348
grid.setSource({
 
349
    "(name)": "My Object",
 
350
    "Created": new Date(Date.parse('10/15/2006')),  // date type
 
351
    "Available": false,  // boolean type
 
352
    "Version": .01,      // decimal type
 
353
    "Description": "A test object"
 
354
});
 
355
</code></pre>
 
356
     * @param {Object} source The data object
 
357
     */
 
358
    setSource : function(source){
 
359
        this.propStore.setSource(source);
 
360
    },
 
361
 
 
362
    <div id="method-Ext.grid.PropertyGrid-getSource"></div>/**
 
363
     * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the
 
364
     * format of the data object.
 
365
     * @return {Object} The data object
 
366
     */
 
367
    getSource : function(){
 
368
        return this.propStore.getSource();
 
369
    }
 
370
});
 
371
Ext.reg("propertygrid", Ext.grid.PropertyGrid);
 
372
</pre>    
 
373
</body>
 
374
</html>
 
 
b'\\ No newline at end of file'