CellEditing プラグインで ExtJs Grid を使用しています。私が課した検証に失敗したときに無効な値が失われることを除いて、それは完全に機能します。
たとえば、グリッドに 10 文字を超える値を許可しない編集可能なテキスト フィールドがあり、ユーザーが「olympicssucks」と入力すると、検証は失敗し、テキスト フィールドの周りに赤いボックスが表示されます。ユーザーがフィールドの外をクリックすると、値「olympicssucks」が失われます。
グリッドに無効なデータを引き続き保存し、その周りに赤いボックスを保持したい.
別の (おそらくもっと明確な )例 : http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html . 赤いボックスと検証メッセージに注目してください。今すぐ箱から出してクリックしてください。検証に失敗すると、セルは元の値Adder's-Tongueに戻ります。
tl;dr: 繰り返しますが、私の質問は、無効な値を保持したいということですが、その周りに赤いボックスを表示する検証が必要です。可能だと確信していますが、どのように行われますか？
私が試したこと：
- 私は Ext.Editor を調べましたが、revertInvalidと呼ばれる構成プロパティがあり、まさに私が望むことを行うため、有望なようです。残念ながら、CellEditingプラグインはExt.Editorを使用していないようです。グリッド列のEditorフィールドにExt.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});
}
}]
}