Я использую ExtJs Grid с плагином CellEditing. Он работает отлично, за исключением того, что недопустимые значения теряются, когда он не проходит проверку, которую я на него наложил.
Например, если у меня есть редактируемое текстовое поле в сетке, которое не допускает значений более 10 символов, и пользователь вводит «olympicssucks», проверка завершится ошибкой, и вокруг текстового поля появится красный прямоугольник. Когда пользователь щелкнет за пределами поля, значение "olympicssucks" будет потеряно.
Я хочу, чтобы сетка по-прежнему сохраняла недопустимые данные и сохраняла вокруг них красную рамку.
Другой (возможно, более понятный) пример: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html Попробуйте изменить значение первой ячейки: "Язык гадюки" и сделать его пустым. . Обратите внимание на красное поле и сообщение о проверке. Теперь нажмите из коробки. Неудачная проверка вернет ячейке первоначальное значение, язык гадюки.
tl;dr: Мой вопрос, переформулированный, заключается в том, что я хочу сохранить недопустимое значение, но при этом иметь проверку, отображающую красную рамку вокруг него. . Я уверен, что это возможно, но как это сделать?
Что я пробовал:
- Я изучил Ext.Editor, и он кажется многообещающим, поскольку у него есть свойство конфигурации с именем revertInvalid, которое делает точно то, что я хочу. К сожалению, плагин CellEditing не использует Ext.Editor. Я попытался указать Ext.Editor в поле Editor столбца сетки, но это привело к нередактируемому тексту.
- Я пробовал размещать revertInvalid везде, где мог, но это всегда было слишком далеко.
Код:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var grid = {
xtype: 'grid', store: dataStore, plugins: [cellEditing],
columns: [
{
text: 'Items', dataIndex: 'items', flex: 1, sortable : false,
editor: {
xtype: 'textfield',
validator: function(value) { //custom validator to return false when value is empty and other conditions}
},
//...
],
tbar: [{
xtype: 'button', text: 'Add ' + type,
handler: function() {
dataStore.insert(0, {items: 'New ' + type});
cellEditing.startEditByPosition({row: 0, column: 0});
}
}]
}