extjs form model vilidations
Ext.override(Ext.form.field.Base, {
bindToModel : false,
getErrors: function() {
var errors = this.callOverridden(arguments),
record = this.up('form').getRecord(),
modelValidations,
fieldValidations;
if (!this.bindToModel || !record) return errors;
modelValidations = record.validate();
if (modelValidations.isValid()) {
return errors;
}
fieldValidations = modelValidations.getByField(this.name);
fieldValidationsLength = fieldValidations.length;
if (fieldValidationsLength > 0) {
for (var j = 0; j < fieldValidationsLength; j++) {
errors.push(fieldValidations[j].message);
}
}
return errors;
},
onChange: function() {
var form = this.up('form').getForm(),
record = form.getRecord();
if (this.bindToModel && record) {
form.updateRecord(record);
}
this.callOverridden(arguments);
}
});
Ext.define('Workgroup', {
extend: 'Ext.data.Model',
fields: [
'name',
{name: 'startDate', type: 'date'},
{name: 'endDate', type: 'date'}
],
validations: [
{type: 'presence', name: 'name', message: 'Name is required.'},
{type: 'length', name: 'name', min: 3, message: 'Names must be at least 3 characters in length.'},
{type: 'presence', name: 'startDate', message: 'Start Date is required.'}
]
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Work Group',
width: 340,
bodyPadding: 5,
renderTo: Ext.getBody(),
fieldDefaults: {
anchor: '100%',
bindToModel: true
},
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start Date'
}
],
buttons: [
{
text: 'Check',
handler: function() {
console.log('Record data: ', workgroup.data);
console.log('Form record data: ', formPanel.getRecord().data);
console.log('Valid: ', formPanel.getForm().isValid());
}
}
]
});
var workgroup = Ext.create('Workgroup', {
name: 'R12345'
});
formPanel.loadRecord(workgroup);2:this.callOverridden(arguments); 원시 프로그램 호출 방법
삼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form <-> Model bind</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
<script type="text/javascript" src=\'#\'" //extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>
<script>
Ext.override(Ext.form.Basic, {
loadRecord: function(record) {
var me = this;
me._validationRecord = record.copy();
me.callOverridden(arguments);
me.mon( record, 'changed', me.onRecordChanged, me );
},
onRecordChanged: function(){
this.loadRecord( this.getRecord() );
}
});
Ext.override(Ext.form.field.Base, {
getErrors: function() {
var me = this,
errors = me.callOverridden(arguments),
record = me.up('form').getForm()._validationRecord,
modelValidations,
fieldValidations;
if (!me.bindToModel || !record) return errors;
modelValidations = record.validate();
if (modelValidations.isValid()) {
return errors;
}
fieldValidations = modelValidations.getByField(me.name);
fieldValidationsLength = fieldValidations.length;
if (fieldValidationsLength > 0) {
for (var j = 0; j < fieldValidationsLength; j++) {
errors.push(fieldValidations[j].message);
}
}
return errors;
},
onChange: function() {
var me = this,
form = me.up('form').getForm(),
record = form._validationRecord;
if (me.bindToModel && record && (me.name in record.data)) {
record.beginEdit();
record.set(me.name, me.getValue());
record.endEdit();
}
this.callOverridden(arguments);
}
});
Ext.define('Workgroup', {
extend: 'Ext.data.Model',
fields: [
'name',
{name: 'startDate', type: 'date'},
{name: 'endDate', type: 'date'}
],
validations: [
{type: 'presence', name: 'name', message: 'Name is required.'},
{type: 'length', name: 'name', min: 3, message: 'Names must be at least 3 characters in length.'},
{type: 'presence', name: 'startDate', message: 'Start Date is required.'}
],
afterEdit: function() {
var me = this;
if(me.dirty){
me.fireEvent('changed', me);
}
this.callParent(arguments);
}
});
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Work Group',
width: 340,
bodyPadding: 5,
renderTo: Ext.getBody(),
fieldDefaults: {
anchor: '100%',
bindToModel: true
},
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start Date'
}
],
buttons: [
{
text: 'Check',
handler: function() {
console.log('Record data: ', workgroup.data);
console.log('Form record data: ', formPanel.getRecord().data);
console.log('Form validation record data: ', formPanel.getForm()._validationRecord.data);
console.log('Valid: ', formPanel.getForm().isValid());
}
}
]
});
var workgroup = Ext.create('Workgroup', {
name: 'R12345'
});
formPanel.loadRecord(workgroup);
workgroup.set('name', 'New Name');
});
</script>
</head>
<body></body>
</html>사:
errors.isValid(); //false
errors.length; //2
errors.getByField('name'); // [{field: 'name', error: 'must be present'}]
errors.getByField('title'); // [{field: 'title', error: 'is too short'}]오:
/**
* Persists the values in this form into the passed {@link Ext.data.Model} object in a beginEdit/endEdit block.
* @param {Ext.data.Record} record The record to edit
* @return {Ext.form.Basic} this
*/
updateRecord: function(record) {
//record.beginEdit();
var fields = record.fields,
values = this.getValues(),
name,
obj = {};
fields.each(function(f) {
name = f.name;
if (name in values) {
obj[name] = values[name];
}
});
record.set(obj);
//record.endEdit();
return this;
},육:
var errors = myModel.validate();
errors.isValid(); //false
errors.length; //2
errors.getByField('name'); // [{field: 'name', error: 'must be present'}]
errors.getByField('title'); // [{field: 'title', error: 'is too short'}]이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Formik을 사용하여 React JS에서 여러 양식을 업데이트하는 방법은 무엇입니까?유효성 검사와 함께 양식 제출을 처리하기 위해 Yup과 함께 Formik을 사용하고 있습니다. 저는 create form으로 성공적으로 지원했습니다. 그러나 업데이트 양식에서 다음과 같은 문제에 직면하고 있습니다. ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
