具有CellEditing的ExtJs 4 GridPanel:输入的数据在验证失败时丢失

app*_*pie 5 javascript validation editing gridpanel extjs4

我正在使用带有CellEditing插件的ExtJs Grid.它完美地工作,除了当我对其施加的验证失败时失去无效值.

例如,如果我在网格中有一个不允许超过10个字符的值的可编辑文本字段,并且用户输入" olympicssucks ",则验证将失败,并且文本字段周围将出现一个红色框.当用户点击该字段时,值" olympicssucks "将丢失.

我希望网格仍然保存无效数据,并保持周围的红色框.

另一个(可能更清楚)示例: http ://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html尝试编辑第一个单元格值:" Adder's-Tongue "并将其设为空.请注意红色框和验证消息.现在点击开箱即可.失败的验证将恢复细胞恢复到原来的价值,Adder's舌.


tl; dr:我的问题,重申,是我想保留无效值,但仍然有验证显示它周围的红色框.我确信它可能,但它是如何完成的?

我尝试过的:

  1. 我查看了Ext.Editor,它似乎很有希望,因为它有一个名为revertInvalid的配置属性,它完全符合我的要求.不幸的是,似乎CellEditing插件似乎没有使用Ext.Editor.我已经尝试将Ext.Editor提供到网格列的编辑器字段中,但这会生成不可编辑的文本.
  2. 我尝试过无处不在的地方放置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});                           
                }
           }]
    }
Run Code Online (Sandbox Code Playgroud)

app*_*pie 0

很可能 Sencha 尚未完全开发revertInvalid字段,并且其简单的功能尚未发挥作用。对于那些寻找解决方法的人来说,您可能必须修改网格单元本身的 CSS 才能将其自定义标记为无效。