Button in PropertyGrid as Value

[Samir76]

I'm struggling with unordinary task. I would like to add Button on PropertyGrid (I know it is not officialy supported). Name is ordianry string, "Show me data" and value of that string would be button which, "onClick" would show modal dialog or some action. The problem is, that when PropertyGrid is rendered, rows and coloumns don't have "id", that could be called with getEl() method, that Button could be assigned. Any ideas, how to put Button on value coloumn of PropertyGrid!?

[jonn]

Did you have any joy on this? This is exactly what I want to do, have a button in the value area of the propertygrid that has a function upon clicking it.
Can anyone help one this?

[jonn]

Easy fix, just apply a customEditor. Couldn't see it for looking :)

[keztrel]

had the same problem. To get it work I wrote a tiny Class which extends Ext.Button and implements the required methods for Ext.Editor.

Button Class:


Ext.EditButton = function(config) {
Ext.Button.superclass.constructor.call(this);
if (config) {
Ext.apply(this, config);
if (config.listeners) Ext.apply(this,{listeners: config.listeners});
}
}

Ext.extend(Ext.EditButton, Ext.Button, {
setValue: function(value) {
//in my case "...", so i just call the setText method
this.setText(value);
},
setSize: function (w, h) {
//could be used to set the buttons width and height
return true;
},
getValue: function() {
return this.getText();
},
isValid: function() {
//validation here, if required
return true;
}

});


PropertyGrid:


var pgridData = new Ext.grid.PropertyGrid({
closable: false,
autoHeight: true,
source: {
'Show me data': '...'
},
customEditors: {
'Show me data': new Ext.grid.GridEditor(new Ext.EditButton({
text: '...',
onClick: function(){
//do something
alert('clicked');
}
}))
}
});