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

具有CellEditing的ExtJs 4 GridPanel:输入的数据在验证失败时丢失，这个问题涉及到了前端开发和数据验证。在ExtJs 4中，GridPanel是一个常用的组件，而CellEditing是GridPanel的一个插件，用于实现单元格编辑功能。

当用户在GridPanel中编辑单元格时，可能会输入不符合预期的数据，例如输入了不正确的格式或超出了范围等。为了避免这种情况，可以在数据验证失败时采取一定的措施，例如恢复原始数据或提示用户重新输入。

在ExtJs 4中，可以通过监听CellEditing的beforeedit事件来实现数据验证。在事件处理函数中，可以对用户输入的数据进行验证，如果验证失败，可以使用record.reject()方法恢复原始数据，或者使用Ext.Msg.alert()方法提示用户重新输入。

以下是一个示例代码：

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
        beforeedit: function(editor, e, eOpts) {
            // 在这里进行数据验证
            if (e.value === '') {
                Ext.Msg.alert('错误', '输入不能为空');
                return false;
            }
            if (isNaN(e.value)) {
                Ext.Msg.alert('错误', '输入必须是数字');
                return false;
            }
            if (e.value < 0 || e.value > 100) {
                Ext.Msg.alert('错误', '输入必须在0到100之间');
                return false;
            }
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    plugins: [cellEditing],
    // ...
});

在这个示例中，我们使用了CellEditing的beforeedit事件来进行数据验证，如果验证失败，则使用Ext.Msg.alert()方法提示用户重新输入。

总之，在使用具有CellEditing的ExtJs 4 GridPanel时，需要注意进行数据验证，以确保用户输入的数据符合预期的格式和范围。