создание определенных ячеек недоступного для редактирования ExtJS GridPanel
У меня в настоящее время есть GridPanel с Ext.ux. Плагин RowEditor. Четыре поля существуют в редакторе строки: порт, IP-адрес, подсеть и DHCP. Если поле DHCP (флажок) выбранной строки проверяется, я должен сделать другие три поля недоступными для редактирования.
Я пытался выполнить этот код, когда beforeedit событие инициировано, но напрасно... Я только нашел способы сделать весь столбец недоступным для редактирования. Мой код до сих пор:
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.
}
}
Сообщите мне, необходимо ли какое-либо разъяснение.
Любая справка, потенциально расширяющая RowEditor для выполнения целевую функциональность, значительно ценилась бы также!
4 ответа
Вы можете добавить в RowEditor. js в функцию startEditing вызов функции isCellEditable
//.... RowEditor.js
startEditing: function(rowIndex, doFocus){
//.... search for the starting of the below loop into the source code
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
// *** here add a call to isCellEditable *** //
f.setDisabled(!cm.isCellEditable(i, rowIndex));
// ***************************************** //
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
//....
Затем переопределить isCellEditable вашей модели столбцов и отключить поле на основе вашего условия:
YYY.getColumnModel().isCellEditable = function(colIndex, rowIndex){
if (grid.getStore().getAt(rowIndex).get('dhcp')) {
// you can do more check base on colIndex
// only to disabled the one you want
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
просто установите для столбца в вашей columnModel / columns значение editable: false для полей, которые нельзя редактировать.
columns: [
{ header: "Ticker", width: 60, editable:false },
{ header: "Company Name", width: 150, id: 'company'},
{ header: "Market Cap."},
{ header: "$ Sales", renderer: money},
{ header: "Employees", resizable: false}
]Как указано в документации:
Если слушатель возвращает false , редактор не будет активирован.
Итак ...
this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});
checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
return false;
}
}
Простого возврата false будет достаточно, чтобы отменить возможность редактирования.
Попался.
Интересная идея - немного хлопотно реализовать, но возможно.
Вам нужно подойти к этому с двух сторон:
1) начинается редактирование
2) флажок установлен / не установлен
Для первой части, я думаю, вы могли бы использовать почти тот же код, что и у меня выше, удалите «return false» и используйте ссылку на rowEditor для циклического перебора коллекции элементов, отключив (вызовите для них метод disable) поля, которые не являются вашим полем флажка.
Вторая часть - добавить обработчик к флажку, который будет делать то же самое.
Я столкнулся с той же проблемой. Вместо того, чтобы использовать GridPanel с плагином Ext.ux.RowEditor, я использовал Ext.grid.EditorGridPanel. В этом случае вы можете указать редактор для каждого из трех других полей (порт, IP-адрес и подсеть) в модели столбца с помощью обработчика события beforeshow следующим образом:
editor: new Ext.form.TextArea({
height:80,
allowBlank: false,
listeners:{
beforeshow: function(column) {
if (column.gridEditor.record.get('dhcp')) {
column.gridEditor.cancelEdit();
}
}
}
})