← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/extjs/package/grid/edit-grid-debug.js

  • 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/extjs/package/grid/edit-grid-debug.js
 
1
/*
 
2
 * Ext JS Library 3.0 RC2
 
3
 * Copyright(c) 2006-2009, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
 
 
10
Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
 
11
    
 
12
    clicksToEdit: 2,
 
13
    
 
14
    
 
15
    forceValidation: false,
 
16
 
 
17
    // private
 
18
    isEditor : true,
 
19
    // private
 
20
    detectEdit: false,
 
21
 
 
22
        
 
23
        autoEncode : false,
 
24
 
 
25
        
 
26
    // private
 
27
    trackMouseOver: false, // causes very odd FF errors
 
28
 
 
29
    // private
 
30
    initComponent : function(){
 
31
        Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
 
32
 
 
33
        if(!this.selModel){
 
34
            
 
35
            this.selModel = new Ext.grid.CellSelectionModel();
 
36
        }
 
37
 
 
38
        this.activeEditor = null;
 
39
 
 
40
            this.addEvents(
 
41
            
 
42
            "beforeedit",
 
43
            
 
44
            "afteredit",
 
45
            
 
46
            "validateedit"
 
47
        );
 
48
    },
 
49
 
 
50
    // private
 
51
    initEvents : function(){
 
52
        Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
 
53
 
 
54
        this.on("bodyscroll", this.stopEditing, this, [true]);
 
55
        this.on("columnresize", this.stopEditing, this, [true]);
 
56
 
 
57
        if(this.clicksToEdit == 1){
 
58
            this.on("cellclick", this.onCellDblClick, this);
 
59
        }else {
 
60
            if(this.clicksToEdit == 'auto' && this.view.mainBody){
 
61
                this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
 
62
            }
 
63
            this.on("celldblclick", this.onCellDblClick, this);
 
64
        }
 
65
    },
 
66
 
 
67
    // private
 
68
    onCellDblClick : function(g, row, col){
 
69
        this.startEditing(row, col);
 
70
    },
 
71
 
 
72
    // private
 
73
    onAutoEditClick : function(e, t){
 
74
        if(e.button !== 0){
 
75
            return;
 
76
        }
 
77
        var row = this.view.findRowIndex(t);
 
78
        var col = this.view.findCellIndex(t);
 
79
        if(row !== false && col !== false){
 
80
            this.stopEditing();
 
81
            if(this.selModel.getSelectedCell){ // cell sm
 
82
                var sc = this.selModel.getSelectedCell();
 
83
                if(sc && sc.cell[0] === row && sc.cell[1] === col){
 
84
                    this.startEditing(row, col);
 
85
                }
 
86
            }else{
 
87
                if(this.selModel.isSelected(row)){
 
88
                    this.startEditing(row, col);
 
89
                }
 
90
            }
 
91
        }
 
92
    },
 
93
 
 
94
    // private
 
95
    onEditComplete : function(ed, value, startValue){
 
96
        this.editing = false;
 
97
        this.activeEditor = null;
 
98
        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
 
99
                var r = ed.record;
 
100
        var field = this.colModel.getDataIndex(ed.col);
 
101
        value = this.postEditValue(value, startValue, r, field);
 
102
        if(this.forceValidation === true || String(value) !== String(startValue)){
 
103
            var e = {
 
104
                grid: this,
 
105
                record: r,
 
106
                field: field,
 
107
                originalValue: startValue,
 
108
                value: value,
 
109
                row: ed.row,
 
110
                column: ed.col,
 
111
                cancel:false
 
112
            };
 
113
            if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
 
114
                r.set(field, e.value);
 
115
                delete e.cancel;
 
116
                this.fireEvent("afteredit", e);
 
117
            }
 
118
        }
 
119
        this.view.focusCell(ed.row, ed.col);
 
120
    },
 
121
 
 
122
    
 
123
    startEditing : function(row, col){
 
124
        this.stopEditing();
 
125
        if(this.colModel.isCellEditable(col, row)){
 
126
            this.view.ensureVisible(row, col, true);
 
127
            var r = this.store.getAt(row);
 
128
            var field = this.colModel.getDataIndex(col);
 
129
            var e = {
 
130
                grid: this,
 
131
                record: r,
 
132
                field: field,
 
133
                value: r.data[field],
 
134
                row: row,
 
135
                column: col,
 
136
                cancel:false
 
137
            };
 
138
            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
 
139
                this.editing = true;
 
140
                var ed = this.colModel.getCellEditor(col, row);
 
141
                if(!ed){
 
142
                    return;
 
143
                }
 
144
                if(!ed.rendered){
 
145
                    ed.render(this.view.getEditorParent(ed));
 
146
                }
 
147
                (function(){ // complex but required for focus issues in safari, ie and opera
 
148
                    ed.row = row;
 
149
                    ed.col = col;
 
150
                    ed.record = r;
 
151
                    ed.on("complete", this.onEditComplete, this, {single: true});
 
152
                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
 
153
                    
 
154
                    this.activeEditor = ed;
 
155
                    var v = this.preEditValue(r, field);
 
156
                    ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
 
157
                }).defer(50, this);
 
158
            }
 
159
        }
 
160
    },
 
161
 
 
162
    // private
 
163
    preEditValue : function(r, field){
 
164
        var value = r.data[field];
 
165
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
 
166
    },
 
167
 
 
168
    // private
 
169
        postEditValue : function(value, originalValue, r, field){
 
170
                return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
 
171
        },
 
172
 
 
173
    
 
174
    stopEditing : function(cancel){
 
175
        if(this.activeEditor){
 
176
            this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
 
177
        }
 
178
        this.activeEditor = null;
 
179
    }
 
180
});
 
181
Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
 
182
// private
 
183
// This is a support class used internally by the Grid components
 
184
Ext.grid.GridEditor = function(field, config){
 
185
    Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
 
186
    field.monitorTab = false;
 
187
};
 
188
 
 
189
Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
 
190
    alignment: "tl-tl",
 
191
    autoSize: "width",
 
192
    hideEl : false,
 
193
    cls: "x-small-editor x-grid-editor",
 
194
    shim:false,
 
195
    shadow:false
 
196
});
 
197
 
 
198
Ext.grid.PropertyRecord = Ext.data.Record.create([
 
199
    {name:'name',type:'string'}, 'value'
 
200
]);
 
201
 
 
202
 
 
203
Ext.grid.PropertyStore = function(grid, source){
 
204
    this.grid = grid;
 
205
    this.store = new Ext.data.Store({
 
206
        recordType : Ext.grid.PropertyRecord
 
207
    });
 
208
    this.store.on('update', this.onUpdate,  this);
 
209
    if(source){
 
210
        this.setSource(source);
 
211
    }
 
212
    Ext.grid.PropertyStore.superclass.constructor.call(this);
 
213
};
 
214
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
 
215
    // protected - should only be called by the grid.  Use grid.setSource instead.
 
216
    setSource : function(o){
 
217
        this.source = o;
 
218
        this.store.removeAll();
 
219
        var data = [];
 
220
        for(var k in o){
 
221
            if(this.isEditableValue(o[k])){
 
222
                data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
 
223
            }
 
224
        }
 
225
        this.store.loadRecords({records: data}, {}, true);
 
226
    },
 
227
 
 
228
    // private
 
229
    onUpdate : function(ds, record, type){
 
230
        if(type == Ext.data.Record.EDIT){
 
231
            var v = record.data['value'];
 
232
            var oldValue = record.modified['value'];
 
233
            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
 
234
                this.source[record.id] = v;
 
235
                record.commit();
 
236
                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
 
237
            }else{
 
238
                record.reject();
 
239
            }
 
240
        }
 
241
    },
 
242
 
 
243
    // private
 
244
    getProperty : function(row){
 
245
       return this.store.getAt(row);
 
246
    },
 
247
 
 
248
    // private
 
249
    isEditableValue: function(val){
 
250
        if(Ext.isDate(val)){
 
251
            return true;
 
252
        }else if(typeof val == 'object' || typeof val == 'function'){
 
253
            return false;
 
254
        }
 
255
        return true;
 
256
    },
 
257
 
 
258
    // private
 
259
    setValue : function(prop, value){
 
260
        this.source[prop] = value;
 
261
        this.store.getById(prop).set('value', value);
 
262
    },
 
263
 
 
264
    // protected - should only be called by the grid.  Use grid.getSource instead.
 
265
    getSource : function(){
 
266
        return this.source;
 
267
    }
 
268
});
 
269
 
 
270
 
 
271
Ext.grid.PropertyColumnModel = function(grid, store){
 
272
    this.grid = grid;
 
273
    var g = Ext.grid;
 
274
    g.PropertyColumnModel.superclass.constructor.call(this, [
 
275
        {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
 
276
        {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
 
277
    ]);
 
278
    this.store = store;
 
279
    this.bselect = Ext.DomHelper.append(document.body, {
 
280
        tag: 'select', cls: 'x-grid-editor x-hide-display', children: [
 
281
            {tag: 'option', value: 'true', html: 'true'},
 
282
            {tag: 'option', value: 'false', html: 'false'}
 
283
        ]
 
284
    });
 
285
    var f = Ext.form;
 
286
 
 
287
    var bfield = new f.Field({
 
288
        el:this.bselect,
 
289
        bselect : this.bselect,
 
290
        autoShow: true,
 
291
        getValue : function(){
 
292
            return this.bselect.value == 'true';
 
293
        }
 
294
    });
 
295
    this.editors = {
 
296
        'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
 
297
        'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
 
298
        'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
 
299
        'boolean' : new g.GridEditor(bfield)
 
300
    };
 
301
    this.renderCellDelegate = this.renderCell.createDelegate(this);
 
302
    this.renderPropDelegate = this.renderProp.createDelegate(this);
 
303
};
 
304
 
 
305
Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
 
306
    // private - strings used for locale support
 
307
    nameText : 'Name',
 
308
    valueText : 'Value',
 
309
    dateFormat : 'm/j/Y',
 
310
 
 
311
    // private
 
312
    renderDate : function(dateVal){
 
313
        return dateVal.dateFormat(this.dateFormat);
 
314
    },
 
315
 
 
316
    // private
 
317
    renderBool : function(bVal){
 
318
        return bVal ? 'true' : 'false';
 
319
    },
 
320
 
 
321
    // private
 
322
    isCellEditable : function(colIndex, rowIndex){
 
323
        return colIndex == 1;
 
324
    },
 
325
 
 
326
    // private
 
327
    getRenderer : function(col){
 
328
        return col == 1 ?
 
329
            this.renderCellDelegate : this.renderPropDelegate;
 
330
    },
 
331
 
 
332
    // private
 
333
    renderProp : function(v){
 
334
        return this.getPropertyName(v);
 
335
    },
 
336
 
 
337
    // private
 
338
    renderCell : function(val){
 
339
        var rv = val;
 
340
        if(Ext.isDate(val)){
 
341
            rv = this.renderDate(val);
 
342
        }else if(typeof val == 'boolean'){
 
343
            rv = this.renderBool(val);
 
344
        }
 
345
        return Ext.util.Format.htmlEncode(rv);
 
346
    },
 
347
 
 
348
    // private
 
349
    getPropertyName : function(name){
 
350
        var pn = this.grid.propertyNames;
 
351
        return pn && pn[name] ? pn[name] : name;
 
352
    },
 
353
 
 
354
    // private
 
355
    getCellEditor : function(colIndex, rowIndex){
 
356
        var p = this.store.getProperty(rowIndex);
 
357
        var n = p.data['name'], val = p.data['value'];
 
358
        if(this.grid.customEditors[n]){
 
359
            return this.grid.customEditors[n];
 
360
        }
 
361
        if(Ext.isDate(val)){
 
362
            return this.editors['date'];
 
363
        }else if(typeof val == 'number'){
 
364
            return this.editors['number'];
 
365
        }else if(typeof val == 'boolean'){
 
366
            return this.editors['boolean'];
 
367
        }else{
 
368
            return this.editors['string'];
 
369
        }
 
370
    },
 
371
    
 
372
    // inherit docs
 
373
    destroy : function(){
 
374
        Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
 
375
        for(var ed in this.editors){
 
376
            Ext.destroy(ed);
 
377
        }
 
378
    }
 
379
});
 
380
 
 
381
 
 
382
Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
 
383
    
 
384
    
 
385
    
 
386
 
 
387
    // private config overrides
 
388
    enableColumnMove:false,
 
389
    stripeRows:false,
 
390
    trackMouseOver: false,
 
391
    clicksToEdit:1,
 
392
    enableHdMenu : false,
 
393
    viewConfig : {
 
394
        forceFit:true
 
395
    },
 
396
 
 
397
    // private
 
398
    initComponent : function(){
 
399
        this.customEditors = this.customEditors || {};
 
400
        this.lastEditRow = null;
 
401
        var store = new Ext.grid.PropertyStore(this);
 
402
        this.propStore = store;
 
403
        var cm = new Ext.grid.PropertyColumnModel(this, store);
 
404
        store.store.sort('name', 'ASC');
 
405
        this.addEvents(
 
406
            
 
407
            'beforepropertychange',
 
408
            
 
409
            'propertychange'
 
410
        );
 
411
        this.cm = cm;
 
412
        this.ds = store.store;
 
413
        Ext.grid.PropertyGrid.superclass.initComponent.call(this);
 
414
 
 
415
                this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
 
416
            if(colIndex === 0){
 
417
                this.startEditing.defer(200, this, [rowIndex, 1]);
 
418
                return false;
 
419
            }
 
420
        }, this);
 
421
    },
 
422
 
 
423
    // private
 
424
    onRender : function(){
 
425
        Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
 
426
 
 
427
        this.getGridEl().addClass('x-props-grid');
 
428
    },
 
429
 
 
430
    // private
 
431
    afterRender: function(){
 
432
        Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
 
433
        if(this.source){
 
434
            this.setSource(this.source);
 
435
        }
 
436
    },
 
437
 
 
438
    
 
439
    setSource : function(source){
 
440
        this.propStore.setSource(source);
 
441
    },
 
442
 
 
443
    
 
444
    getSource : function(){
 
445
        return this.propStore.getSource();
 
446
    }
 
447
});
 
448
Ext.reg("propertygrid", Ext.grid.PropertyGrid);
 
449