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>
}
时间: 2024-10-13 00:24:43

ExtJS学习笔记3:载入、提交和验证表单的相关文章

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', 'TelNumberCo

Dojo学习笔记(十三):Dojo表单控件——TextBox及其变体

dijit/form/TextBox :一个基本的文本框 dijit/form/SimpleTextarea :大量文字输入,一个基本的textarea dijit/form/Textarea :一个扩展dijit/form/SimpleTextarea动态增加或减少其高度 dijit/form/NumberTextBox或dijit/form/NumberSpinner:输入是数字,确保输入一个文本框,dijit/form/NumberSpinner提供扩展dijit/form/NumberT

Bootstrap学习笔记(3)--表格和表单

Bootstrap表格  表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; .table-border会为所有的表格添加边框; .table-condensed让表格更加紧凑; tr,td,th类 .active让某一行单元格或者行处于激活状态; .success表示成功的样式; .warning表示警告的样式; .danger表示危险的样式; .info表示信息的样式;   表单类:   创

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

ExtJs学习笔记(1)---ExtJs安装及其使用

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明.文档.范例和其他文件.其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到. Adapter:支持把Ext和其他代码库一同使用的文件 build:用于自定义构建ext-all.js的文件 docs:文档中心(仅当运行在服务器上时能够正常访问) examples:大量令人印象深刻富有洞察力的范例 resources:Ext依赖的文件,例如CSS和图片 source:ext的所有代码 在

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http:

[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标

本文地址: 本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/articl

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww