ExtJS学习笔记3:载入提交和验证表单

Posted llguanli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ExtJS学习笔记3:载入提交和验证表单相关的知识,希望对你有一定的参考价值。

载入数据

1.比較好用的设置form数据的方法:

formPanel.getForm().setValues([{id: ‘FirstName‘, value: ‘Joe‘}]);

当中id值为form中field的name属性值。value为要赋的值

2.通过对象赋值:

Ext.define(‘Request‘, {
extend: ‘Ext.data.Model‘,
fields: [
‘FirstName‘,
‘LastName‘,
‘EmailAddress‘,
‘TelNumberCode‘,
‘TelNumber‘,
‘RequestDetails‘,
‘RequestType‘
]
});
var requestModel = Ext.create(‘Request‘, requestData);
formPanel.getForm().loadRecord(requestModel);

3.也能够通过load方法,从server载入数据:

formPanel.getForm().load({
url: ‘requestDetails.json‘
});


提交表单

最简单的办法就是调用submit,提交到指定url

var submitForm = function(){
formPanel.getForm().submit({
url: ‘submit.url‘
});
};
var formPanel = Ext.create(‘Ext.form.Panel‘, {
...
buttons: [{
text: ‘Submit Form‘,
handler: submitForm
}],
items: [
...
]
});


也能够从form获取对象。调用ajax post方式提交:

var record = formPanel.getForm().getRecord();

验证表单


通过vtype验证:

{
xtype: ‘textfield‘,
fieldLabel: ‘Email Address‘,
name: ‘EmailAddress‘,
labelAlign: ‘top‘,
cls: ‘field-margin‘,
columnWidth: 0.6,
<strong>vtype: ‘email‘</strong>
}










以上是关于ExtJS学习笔记3:载入提交和验证表单的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS 4 使用模型代理提交表单

flask学习笔记(-Web 表单)

ExtJS 4.2.1 - 表单自定义字段验证

后盾网-CI框架学习笔记

AngularJS的学习笔记

后盾网-CI框架实例教程-马振宇 - 学习笔记