PDA

View Full Version : making certain cells of an ExtJS GridPanel un-editable



synchronicity
16 Feb 2010, 1:53 PM
I currently have a GridPanel with the Ext.ux.RowEditor plugin. Four fields exist in the row editor: port, ip address, subnet and DHCP. If the DHCP field (checkbox) of the selected row is checked, I need to make the other three fields un-editable (for the current row in question only).



I've attempted to complete this task when the beforeedit event is fired, but to no avail... I've only found ways to make the entire column un-editable. My code so far:



this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
// this function makes the entire column un-editable:
this.getColumnModel().setEditable(2, false);

// I want to make only the other three fields of the current row
// uneditable.
}
} Please let me know if any clarification is needed.

realjax
16 Feb 2010, 2:55 PM
I don't get it I think.. you have a row with four columns of which you want 3 to be set un-editable. You succeeded in setting one column un-editable.. so what's the problem? just set the other two as well

synchronicity
16 Feb 2010, 3:26 PM
I don't get it I think.. you have a row with four columns of which you want 3 to be set un-editable. You succeeded in setting one column un-editable.. so what's the problem? just set the other two as well

I succeeded in making the entire column un-editable when i just want to make the fields of the row being edited un-editable. Is that the only way?

VinylFox
16 Feb 2010, 3:40 PM
As the docs state:


If the listener returns <tt>false</tt> the editor will not be activated.

So...


this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
// this function makes the entire column un-editable:
return false;

// I want to make only the other three fields of the current row
// uneditable.
}
}

synchronicity
16 Feb 2010, 4:18 PM
As the docs state:



So...


this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
// this function makes the entire column un-editable:
return false;

// I want to make only the other three fields of the current row
// uneditable.
}
}

This is very close to what I want to do. The only problem is I need one of the fields in the row to remain editable - the checkbox field.
I have four fields in the grid, one of which is a checkbox. All of the fields are usually editable, but if the checkbox field is checked, I need to make the other three un-editable (but still allow the checkbox field to be editable). If the checkbox field is once again checked, three aforementioned fields should be made editable again.

Please let me know if any clarification is needed, thanks for your help

VinylFox
17 Feb 2010, 5:59 AM
Gotcha.

Interesting idea - a bit of a hassle to implement, but possible.

You need to approach this from two directions:

1 ) edit starts

2 ) checkbox is checked/unchecked

For the first part, I think you could use almost the same code I have above, remove the 'return false' and use the reference to the rowEditor to loop through the items collection, disabling (call the disable method on them) the fields that are not your checkbox field.

The second part of this is to add a handler to the checkbox which would do the same thing.

synchronicity
19 Feb 2010, 3:08 PM
Gotcha.

Interesting idea - a bit of a hassle to implement, but possible.

You need to approach this from two directions:

1 ) edit starts

2 ) checkbox is checked/unchecked

For the first part, I think you could use almost the same code I have above, remove the 'return false' and use the reference to the rowEditor to loop through the items collection, disabling (call the disable method on them) the fields that are not your checkbox field.

The second part of this is to add a handler to the checkbox which would do the same thing.

This is exactly what I need to do! However, I'm unsure of how to retrieve the items collection (and haven't been able to find it in the documentation so far...). Which function/object should I use to grab the items collection? Thanks!