Roo.grid.PropertyRecord = Roo.data.Record.create([
{name:'name',type:'string'}, 'value'
]);
Roo.grid.PropertyStore = function(grid, source){
this.grid = grid;
this.store = new Roo.data.Store({
recordType : Roo.grid.PropertyRecord
});
this.store.on('update', this.onUpdate, this);
if(source){
this.setSource(source);
}
Roo.grid.PropertyStore.superclass.constructor.call(this);
};
Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
setSource : function(o){
this.source = o;
this.store.removeAll();
var data = [];
for(var k in o){
if(this.isEditableValue(o[k])){
data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
}
}
this.store.loadRecords({records: data}, {}, true);
},
onUpdate : function(ds, record, type){
if(type == Roo.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();
}
}
},
getProperty : function(row){
return this.store.getAt(row);
},
isEditableValue: function(val){
if(val && val instanceof Date){
return true;
}else if(typeof val == 'object' || typeof val == 'function'){
return false;
}
return true;
},
setValue : function(prop, value){
this.source[prop] = value;
this.store.getById(prop).set('value', value);
},
getSource : function(){
return this.source;
}
});
Roo.grid.PropertyColumnModel = function(grid, store){
this.grid = grid;
var g = Roo.grid;
g.PropertyColumnModel.superclass.constructor.call(this, [
{header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
{header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
]);
this.store = store;
this.bselect = Roo.DomHelper.append(document.body, {
tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
{tag: 'option', value: 'true', html: 'true'},
{tag: 'option', value: 'false', html: 'false'}
]
});
Roo.id(this.bselect);
var f = Roo.form;
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;'})),
'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
};
this.renderCellDelegate = this.renderCell.createDelegate(this);
this.renderPropDelegate = this.renderProp.createDelegate(this);
};
Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
nameText : 'Name',
valueText : 'Value',
dateFormat : 'm/j/Y',
renderDate : function(dateVal){
return dateVal.dateFormat(this.dateFormat);
},
renderBool : function(bVal){
return bVal ? 'true' : 'false';
},
isCellEditable : function(colIndex, rowIndex){
return colIndex == 1;
},
getRenderer : function(col){
return col == 1 ?
this.renderCellDelegate : this.renderPropDelegate;
},
renderProp : function(v){
return this.getPropertyName(v);
},
renderCell : function(val){
var rv = val;
if(val instanceof Date){
rv = this.renderDate(val);
}else if(typeof val == 'boolean'){
rv = this.renderBool(val);
}
return Roo.util.Format.htmlEncode(rv);
},
getPropertyName : function(name){
var pn = this.grid.propertyNames;
return pn && pn[name] ? pn[name] : name;
},
getCellEditor : function(colIndex, rowIndex){
var p = this.store.getProperty(rowIndex);
var n = p.data['name'], val = p.data['value'];
if(typeof(this.grid.customEditors[n]) == 'string'){
return this.editors[this.grid.customEditors[n]];
}
if(typeof(this.grid.customEditors[n]) != 'undefined'){
return this.grid.customEditors[n];
}
if(val instanceof Date){
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'];
}
}
});
Roo.grid.PropertyGrid = function(container, config){
config = config || {};
var store = new Roo.grid.PropertyStore(this);
this.store = store;
var cm = new Roo.grid.PropertyColumnModel(this, store);
store.store.sort('name', 'ASC');
Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
ds: store.store,
cm: cm,
enableColLock:false,
enableColumnMove:false,
stripeRows:false,
trackMouseOver: false,
clicksToEdit:1
}, config));
this.getGridEl().addClass('x-props-grid');
this.lastEditRow = null;
this.on('columnresize', this.onColumnResize, this);
this.addEvents({
"beforepropertychange": true,
"propertychange": true
});
this.customEditors = this.customEditors || {};
};
Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
render : function(){
Roo.grid.PropertyGrid.superclass.render.call(this);
this.autoSize.defer(100, this);
},
autoSize : function(){
Roo.grid.PropertyGrid.superclass.autoSize.call(this);
if(this.view){
this.view.fitColumns();
}
},
onColumnResize : function(){
this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
this.autoSize();
},
setSource : function(source){
this.store.setSource(source);
},
getSource : function(){
return this.store.getSource();
}
});