438 lines
12 KiB
JavaScript
438 lines
12 KiB
JavaScript
|
/*
|
||
|
|
* Ext JS Library 2.3.0
|
||
|
|
* Copyright(c) 2006-2009, Ext JS, LLC.
|
||
|
|
* licensing@extjs.com
|
||
|
|
*
|
||
|
|
* http://extjs.com/license
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
|
||
|
|
|
||
|
|
clicksToEdit: 2,
|
||
|
|
|
||
|
|
// private
|
||
|
|
isEditor : true,
|
||
|
|
// private
|
||
|
|
detectEdit: false,
|
||
|
|
|
||
|
|
|
||
|
|
autoEncode : false,
|
||
|
|
|
||
|
|
|
||
|
|
// private
|
||
|
|
trackMouseOver: false, // causes very odd FF errors
|
||
|
|
|
||
|
|
// private
|
||
|
|
initComponent : function(){
|
||
|
|
Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
|
||
|
|
|
||
|
|
if(!this.selModel){
|
||
|
|
|
||
|
|
this.selModel = new Ext.grid.CellSelectionModel();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.activeEditor = null;
|
||
|
|
|
||
|
|
this.addEvents(
|
||
|
|
|
||
|
|
"beforeedit",
|
||
|
|
|
||
|
|
"afteredit",
|
||
|
|
|
||
|
|
"validateedit"
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
initEvents : function(){
|
||
|
|
Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
|
||
|
|
|
||
|
|
this.on("bodyscroll", this.stopEditing, this, [true]);
|
||
|
|
this.on("columnresize", this.stopEditing, this, [true]);
|
||
|
|
|
||
|
|
if(this.clicksToEdit == 1){
|
||
|
|
this.on("cellclick", this.onCellDblClick, this);
|
||
|
|
}else {
|
||
|
|
if(this.clicksToEdit == 'auto' && this.view.mainBody){
|
||
|
|
this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
|
||
|
|
}
|
||
|
|
this.on("celldblclick", this.onCellDblClick, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onCellDblClick : function(g, row, col){
|
||
|
|
this.startEditing(row, col);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onAutoEditClick : function(e, t){
|
||
|
|
if(e.button !== 0){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var row = this.view.findRowIndex(t);
|
||
|
|
var col = this.view.findCellIndex(t);
|
||
|
|
if(row !== false && col !== false){
|
||
|
|
this.stopEditing();
|
||
|
|
if(this.selModel.getSelectedCell){ // cell sm
|
||
|
|
var sc = this.selModel.getSelectedCell();
|
||
|
|
if(sc && sc[0] === row && sc[1] === col){
|
||
|
|
this.startEditing(row, col);
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
if(this.selModel.isSelected(row)){
|
||
|
|
this.startEditing(row, col);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onEditComplete : function(ed, value, startValue){
|
||
|
|
this.editing = false;
|
||
|
|
this.activeEditor = null;
|
||
|
|
ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
|
||
|
|
var r = ed.record;
|
||
|
|
var field = this.colModel.getDataIndex(ed.col);
|
||
|
|
value = this.postEditValue(value, startValue, r, field);
|
||
|
|
if(String(value) !== String(startValue)){
|
||
|
|
var e = {
|
||
|
|
grid: this,
|
||
|
|
record: r,
|
||
|
|
field: field,
|
||
|
|
originalValue: startValue,
|
||
|
|
value: value,
|
||
|
|
row: ed.row,
|
||
|
|
column: ed.col,
|
||
|
|
cancel:false
|
||
|
|
};
|
||
|
|
if(this.fireEvent("validateedit", e) !== false && !e.cancel){
|
||
|
|
r.set(field, e.value);
|
||
|
|
delete e.cancel;
|
||
|
|
this.fireEvent("afteredit", e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.view.focusCell(ed.row, ed.col);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
startEditing : function(row, col){
|
||
|
|
this.stopEditing();
|
||
|
|
if(this.colModel.isCellEditable(col, row)){
|
||
|
|
this.view.ensureVisible(row, col, true);
|
||
|
|
var r = this.store.getAt(row);
|
||
|
|
var field = this.colModel.getDataIndex(col);
|
||
|
|
var e = {
|
||
|
|
grid: this,
|
||
|
|
record: r,
|
||
|
|
field: field,
|
||
|
|
value: r.data[field],
|
||
|
|
row: row,
|
||
|
|
column: col,
|
||
|
|
cancel:false
|
||
|
|
};
|
||
|
|
if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
|
||
|
|
this.editing = true;
|
||
|
|
var ed = this.colModel.getCellEditor(col, row);
|
||
|
|
if(!ed.rendered){
|
||
|
|
ed.render(this.view.getEditorParent(ed));
|
||
|
|
}
|
||
|
|
(function(){ // complex but required for focus issues in safari, ie and opera
|
||
|
|
ed.row = row;
|
||
|
|
ed.col = col;
|
||
|
|
ed.record = r;
|
||
|
|
ed.on("complete", this.onEditComplete, this, {single: true});
|
||
|
|
ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
|
||
|
|
|
||
|
|
this.activeEditor = ed;
|
||
|
|
var v = this.preEditValue(r, field);
|
||
|
|
ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
|
||
|
|
}).defer(50, this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
preEditValue : function(r, field){
|
||
|
|
var value = r.data[field];
|
||
|
|
return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
postEditValue : function(value, originalValue, r, field){
|
||
|
|
return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
stopEditing : function(cancel){
|
||
|
|
if(this.activeEditor){
|
||
|
|
this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
|
||
|
|
}
|
||
|
|
this.activeEditor = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
|
||
|
|
// private
|
||
|
|
// This is a support class used internally by the Grid components
|
||
|
|
Ext.grid.GridEditor = function(field, config){
|
||
|
|
Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
|
||
|
|
field.monitorTab = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
|
||
|
|
alignment: "tl-tl",
|
||
|
|
autoSize: "width",
|
||
|
|
hideEl : false,
|
||
|
|
cls: "x-small-editor x-grid-editor",
|
||
|
|
shim:false,
|
||
|
|
shadow:false
|
||
|
|
});
|
||
|
|
|
||
|
|
Ext.grid.PropertyRecord = Ext.data.Record.create([
|
||
|
|
{name:'name',type:'string'}, 'value'
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
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, {
|
||
|
|
// protected - should only be called by the grid. Use grid.setSource instead.
|
||
|
|
setSource : function(o){
|
||
|
|
this.source = o;
|
||
|
|
this.store.removeAll();
|
||
|
|
var data = [];
|
||
|
|
for(var k in o){
|
||
|
|
if(this.isEditableValue(o[k])){
|
||
|
|
data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.store.loadRecords({records: data}, {}, true);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onUpdate : function(ds, record, type){
|
||
|
|
if(type == Ext.data.Record.EDIT){
|
||
|
|
var v = record.data['value'];
|
||
|
|
var oldValue = record.modified['value'];
|
||
|
|
if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
|
||
|
|
this.source[record.id] = v;
|
||
|
|
record.commit();
|
||
|
|
this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
|
||
|
|
}else{
|
||
|
|
record.reject();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
getProperty : function(row){
|
||
|
|
return this.store.getAt(row);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
isEditableValue: function(val){
|
||
|
|
if(Ext.isDate(val)){
|
||
|
|
return true;
|
||
|
|
}else if(typeof val == 'object' || typeof val == 'function'){
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
setValue : function(prop, value){
|
||
|
|
this.source[prop] = value;
|
||
|
|
this.store.getById(prop).set('value', value);
|
||
|
|
},
|
||
|
|
|
||
|
|
// protected - should only be called by the grid. Use grid.getSource instead.
|
||
|
|
getSource : function(){
|
||
|
|
return this.source;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
Ext.grid.PropertyColumnModel = function(grid, store){
|
||
|
|
this.grid = grid;
|
||
|
|
var g = Ext.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 f = Ext.form;
|
||
|
|
|
||
|
|
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, {
|
||
|
|
// private - strings used for locale support
|
||
|
|
nameText : 'Name',
|
||
|
|
valueText : 'Value',
|
||
|
|
dateFormat : 'm/j/Y',
|
||
|
|
|
||
|
|
// private
|
||
|
|
renderDate : function(dateVal){
|
||
|
|
return dateVal.dateFormat(this.dateFormat);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
renderBool : function(bVal){
|
||
|
|
return bVal ? 'true' : 'false';
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
isCellEditable : function(colIndex, rowIndex){
|
||
|
|
return colIndex == 1;
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
getRenderer : function(col){
|
||
|
|
return col == 1 ?
|
||
|
|
this.renderCellDelegate : this.renderPropDelegate;
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
renderProp : function(v){
|
||
|
|
return this.getPropertyName(v);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
renderCell : function(val){
|
||
|
|
var rv = val;
|
||
|
|
if(Ext.isDate(val)){
|
||
|
|
rv = this.renderDate(val);
|
||
|
|
}else if(typeof val == 'boolean'){
|
||
|
|
rv = this.renderBool(val);
|
||
|
|
}
|
||
|
|
return Ext.util.Format.htmlEncode(rv);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
getPropertyName : function(name){
|
||
|
|
var pn = this.grid.propertyNames;
|
||
|
|
return pn && pn[name] ? pn[name] : name;
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
getCellEditor : function(colIndex, rowIndex){
|
||
|
|
var p = this.store.getProperty(rowIndex);
|
||
|
|
var n = p.data['name'], val = p.data['value'];
|
||
|
|
if(this.grid.customEditors[n]){
|
||
|
|
return this.grid.customEditors[n];
|
||
|
|
}
|
||
|
|
if(Ext.isDate(val)){
|
||
|
|
return this.editors['date'];
|
||
|
|
}else if(typeof val == 'number'){
|
||
|
|
return this.editors['number'];
|
||
|
|
}else if(typeof val == 'boolean'){
|
||
|
|
return this.editors['boolean'];
|
||
|
|
}else{
|
||
|
|
return this.editors['string'];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy : function(){
|
||
|
|
Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
|
||
|
|
for(var ed in this.editors){
|
||
|
|
Ext.destroy(ed);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// private config overrides
|
||
|
|
enableColumnMove:false,
|
||
|
|
stripeRows:false,
|
||
|
|
trackMouseOver: false,
|
||
|
|
clicksToEdit:1,
|
||
|
|
enableHdMenu : false,
|
||
|
|
viewConfig : {
|
||
|
|
forceFit:true
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
initComponent : function(){
|
||
|
|
this.customEditors = this.customEditors || {};
|
||
|
|
this.lastEditRow = null;
|
||
|
|
var store = new Ext.grid.PropertyStore(this);
|
||
|
|
this.propStore = store;
|
||
|
|
var cm = new Ext.grid.PropertyColumnModel(this, store);
|
||
|
|
store.store.sort('name', 'ASC');
|
||
|
|
this.addEvents(
|
||
|
|
|
||
|
|
'beforepropertychange',
|
||
|
|
|
||
|
|
'propertychange'
|
||
|
|
);
|
||
|
|
this.cm = cm;
|
||
|
|
this.ds = store.store;
|
||
|
|
Ext.grid.PropertyGrid.superclass.initComponent.call(this);
|
||
|
|
|
||
|
|
this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){
|
||
|
|
if(colIndex === 0){
|
||
|
|
this.startEditing.defer(200, this, [rowIndex, 1]);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onRender : function(){
|
||
|
|
Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
|
||
|
|
|
||
|
|
this.getGridEl().addClass('x-props-grid');
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
afterRender: function(){
|
||
|
|
Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
|
||
|
|
if(this.source){
|
||
|
|
this.setSource(this.source);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
setSource : function(source){
|
||
|
|
this.propStore.setSource(source);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
getSource : function(){
|
||
|
|
return this.propStore.getSource();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
Ext.reg("propertygrid", Ext.grid.PropertyGrid);
|
||
|
|
|