[DONE]PropertyGrid extensions

[Condor]

In response to a few questions on PropertyGrid that I answered in the past I would like to request a few extensions to PropertyGrid:

1. It's possible to specify a custom editor, but in some cases (e.g. combobox with valueField) it should also be possible to specify a custom renderer.
2. It's not possible to add/update/remove a single property (apart from completely replacing the source).

I suggest the following changes:

Ext.override(Ext.grid.PropertyColumnModel, {
renderCell : function(val, meta, r){
var renderer = this.grid.customRenderers[r.get('name')];
if(renderer){
return renderer.apply(this, arguments);
}
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);
}
});
Ext.override(Ext.grid.PropertyGrid, {
initComponent : function(){
this.customRenderers = this.customRenderers || {};
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.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
if(colIndex === 0){
this.startEditing.defer(200, this, [rowIndex, 1]);
return false;
}
}, this);
},
setProperty: function(property, value){
this.propStore.source[property] = value;
var r = this.propStore.store.getById(property);
if(r){
r.set('value', value);
}else{
r = new Ext.grid.PropertyRecord({name: property, value: value}, property);
this.propStore.store.add(r);
}
},
removeProperty: function(property){
delete this.propStore.source[property];
var r = this.propStore.store.getById(property);
if(r){
this.propStore.store.remove(r);
}
}
});

[Stefan B]

+ 42, especially for the addition of renderers!

[mystix]

+ 42

the meaning of life? :-?

[Condor]

the meaning of life? :-?

No, the Answer to Life, the Universe, and Everything.

Unfortunately, it is impossible for both The Ultimate Answer and The Ultimate Question to be known in the same universe as they will cancel each other out and take the Universe with them to be replaced by something even more bizarre.

[mystix]

No, the Answer to Life, the Universe, and Everything.

Unfortunately, it is impossible for both The Ultimate Answer and The Ultimate Question to be known in the same universe as they will cancel each other out and take the Universe with them to be replaced by something even more bizarre.

*LOL*

the only other interesting thing was the "We apologise for the inconvenience" bit. :))

[Stefan B]

Seems I was able to make my point regarding the impact of the feature on mankind B)

[AndreTheDiminutive]

Has this been added to the 3.0 build?

[josh803316]

How would I use the customRender to show a checkbox in the property grid before the property grid checkbox field is clicked. I know for a grid I need to return something like this in a custom renderer
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>'; but I wasn't sure how to do this for a check box in a property grid


customRenderers: {
Privileged: function(value){
// STUMPED HERE
},
}
,customEditors: {
'Privileged': new Ext.grid.GridEditor(new Ext.form.Checkbox({
name: 'bPrivileged',
checked: false,
inputValue: 0
})
),

[josh803316]

I was able to get it to display the checkbox with the following (from the grid FAQ) but the desired affect doesn't quite work. The user has to click the checkbox twice to change it and when the field becomes active the position of the checkbox shifts slightly......I'm not sure how to fix these...


Privileged: function(v, p, record){
var editor = this.getCellEditor(0, 4);
var cell = editor.field;
// Check for 'false' string
if (v === 'false') {
v = null;
}
p.css += ' x-grid3-check-col-td';

return '<div class="x-grid3-check-col' +
(v?'-on':'') +
' x-grid3-cc-' +
this.id +
'"> </div>';

},

[evant]

Support for adding/removing properties and custom editors has been added to SVN.