Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name:"name", type:'string'},
{name:"age", type:"int"},
{name:"hobby", type:"string"}
],
validations: [
{type: 'presence', field: 'name', message: 'You have to enter a name, silly'},
{type: 'presence', field: 'age', message: 'You must specify an age'},
{type: 'presence', field: 'hobby', message: 'You must enter a hobby'},
{type: 'length', field: 'hobby', min:5, message: 'You must specify a hobby with more than 4 characters'}
]
})
Ext.define('Form', {
extend: 'Ext.form.Panel',
alias: 'widget.peopleform',
bodyPadding: 10,
border: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
defaults: {
width: 250,
labelWidth: 70
},
autoShow: true,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'numberfield',
name: 'age',
fieldLabel: 'Age',
value: 20
},
{
xtype: 'textfield',
name: 'hobby',
fieldLabel: 'Hobby'
}
]
});
me.callParent(arguments);
}
})
Ext.override(Ext.form.Basic, {
loadRecord: function(record) {
this._record = record;
this.setModelValidations(record.validations);
return this.setValues(record.data);
},
setModelValidations: function(validations) {
var fields = this.getFields(), i;
for(i=0;i<validations.length;i++) {
var fieldMatch = this.findField(validations[i].field);
if(fieldMatch) {
fieldMatch.setModelFieldValidation(validations[i])
}
}
}
})
Ext.override(Ext.form.field.Base, {
setModelFieldValidation: function(validation) {
this.modelValidations = Ext.isArray(this.modelValidations) ? this.modelValidations : [];
this.modelValidations.push(validation);
},
getModelErrors: function(value) {
var errors = Ext.create('Ext.data.Errors'),
validations = this.modelValidations,
validators = Ext.data.validations,
length, validation, field, valid, type, i;
if (validations) {
length = validations.length;
for (i = 0; i < length; i++) {
validation = validations[i];
field = validation.field || validation.name;
type = validation.type;
valid = validators[type](validation, value);
if (!valid) {
errors.add({
field : field,
message: validation.message || validators[type + 'Message']
});
}
}
}
return errors;
},
validateValue: function(value) {
var me = this,
errors = me.getErrors(value),
modelErrors = me.getModelErrors(value),
isValid = Ext.isEmpty(errors) && modelErrors.isValid();
if (!me.preventMark) {
if (isValid) {
me.clearInvalid();
}
else {
if(!modelErrors.isValid()) { modelErrors.each(function() { errors.push(this.message); }) }
me.markInvalid(errors);
}
}
return isValid;
}
})
var window = Ext.create('Ext.window.Window', {
title: 'Test Validations',
items: [{xtype:'peopleform'}],
width:400,
autoShow:true,
bbar: [{
text: 'Save',
handler: function(btn,e,opts) {
var form = btn.up('window').down('form').getForm();
var record = form.getRecord();
if(!form.isValid()) {
Ext.Msg.alert('Attention','You need to fix some errors!');
return false;
}
else {
record.set(form.getValues())
}
}
}],
listeners: {
render: function(window) {
window.down('form').getForm().loadRecord(Ext.create('Person'));
}
}
})
External resources loaded into this fiddle: