如何在Ext框架中的Store对象中,验证并处理当用户提交两个相等数值时显示错误,而当数值不同时提交并且成功的情况?
时间: 2024-11-05 15:33:51 浏览: 5
JavaScript的Ext JS框架中的GridPanel组件使用指南
在Ext JS中,为了实现在Store对象提交时验证用户输入并处理相等数值的错误情况,你需要结合Model、Validator以及Form的验证机制。以下是步骤:
1. **创建Model**:
定义一个简单的Model,包含你要比较的字段,假设这两个字段叫`field1`和`field2`。
```javascript
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1'},
{name: 'field2'}
]
});
```
2. **定义Validator**:
创建一个自定义的Validator,用于检查`field1`和`field2`是否相等。
```javascript
Ext.define('EqualFieldsValidator', {
extend: 'Ext.validator.ValidationChain',
validate: function(values, record) {
var field1 = values.get('field1'),
field2 = values.get('field2');
if (field1 === field2) {
return this.fail('两个字段的值不能相等');
} else {
return this.pass();
}
}
});
```
3. **应用Validator到Store**:
在Store实例中设置Validator,并监听`beforevalidation`事件来应用你的验证规则。
```javascript
var myStore = Ext.create('Ext.data.Store', {
model: 'MyModel',
listeners: {
beforevalidation: {
fn: function(store, operation, options) {
operation.chain.add(new EqualFieldsValidator());
},
single: true
}
}
});
```
4. **Form提交**:
使用Ext.form.FormPanel来构建表单,当用户提交时,会自动触发Store的验证。
```javascript
var form = Ext.create('Ext.form.Panel', {
store: myStore,
items: [
{xtype: 'fieldset', items: [{name: 'field1'}, {name: 'field2'}]}
],
buttons: [{
text: '提交',
handler: function() {
form.submit({
success: function(form, action) {
// 提交成功回调
},
failure: function(form, action) {
// 显示错误信息
var errors = action.getErrorMessages();
console.error('错误:', errors);
}
});
}
}]
});
```
当用户试图提交两个相等的数值时,会收到错误信息;只有当数值不同时才会成功提交。
阅读全文