roweditor and grid seteditable

[yd290276]

Hello all,
i've got a problem with roweditor when i want to programmatically set a column editable or not.
I've got a simple grid with two columns 'id' and 'description'. Column 'id' is not editable for existing rows and 'description' is always editable.

My case is that when i want to add a new row (says with an 'add' button), i want to set the column 'id' editable ONLY at this time.

So i use grid method 'setEditable' with argument 'true' to allow user to input data in 'id' column. In addition i call roweditor 'initFields' (or refreshFields closely the same) to reinit fields.

The problem is that when i click 'add' button the first time, all is ok and i can input data in the two fields. But when i save or cancel and want to edit an existing row, i see three fields :
> A display field : the data of column 'id' that is set to uneditable
> An input field : the field to input data for column 'id' that i previously set as editable
> An input field : the field to input data for column 'description' that is always editable

After debugging, i saw that roweditor 'initFields' method use this.removeAll(false), so the input fields are never removed from DOM.
I tried to modify this method by line :

initFields: function(){
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
this.removeAll(true);
if(this.displayFields){
Ext.each(this.displayFields, function(){
this.destroy();
});
this.displayFields = [];
}

But it appears that if i do this, DOM elements are removed but the column editor property is not removed and editor is still known as 'rendered'. So the following code in roweditor 'initFields' method throw an error :

for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var c = cm.getColumnAt(i),
ed = c.getEditor();
if(!ed){
if(c.displayEditor){
ed = c.displayEditor;
} else{
ed = new Ext.form.DisplayField({html:'&nbsp;',style:{minHeight:'1px'}});
if(!this.displayFields)
this.displayFields = [];
this.displayFields.push(ed);
}
} else if(ed.rendered){
this.getLayout().configureItem(ed);
}

Does someone has any idea of how to toggle the column editable property ? Note that as an alternative i could show a popup window to enter new data instead of editing data in a new row in the grid. But i don't want to use this alternative.

As a quick and dirty, my current solution is :
> Modify roweditor 'initFields' method and call 'this.removeAll(true)'
> Reconfigure my columnmodel each time i need (i know when my code calls 'initFields')

But i think there should be a better way to accomplish this.
Thanks for your help !

[yd290276]

Hello again,
after some minutes i found a quick and dirty workaround, i just put this new lines of code in the roweditor 'initFields' method :

initFields : function() {
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
this.removeAll(false);
if (this.displayFields) {
Ext.each(this.displayFields, function() {
this.destroy();
});
this.displayFields = [];
}
for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
var c = cm.getColumnAt(i), ed = c.getEditor();

/* modif. Yann : begin */
if (c.editor && c.editable == false)
c.editor.hide();
if (c.editor && c.editable == true)
c.editor.show();
/* modif. Yann : end */
...

This permits to dynamically show or hide editor for column 'id' wether editable is set to true or false without having to destroy editors (see code in bold above).

I think the best would be to add an event in 'setEditable' method of grid column class, and then connect roweditor on this event to automatically call 'initFields' method to show/hide editors (DOM input fields).

Don't know if it's a very good workaround, give your opinion !

Thanks !

[yd290276]

last but not least, this workaround work like a charm but it has destroy the 'columnMove' method. So it's not more possible to move columns, so the fields looks un ordered because in the DOM container there is 3 <div> (two input text and a display field) but in the roweditor there are only 2 items.

I don't need column reordering by user, so i will disable this functionnality for the moment.
If someone knows how to make column moving works...

Thanks !

[lellume]

Hi yd290276,
i have the same problem. Can you show me how did you solve it?
Thank you

Best regards