Extjs Form用法详解.doc
文本预览下载声明
Extjs Form用法详解（适用于Extjs5）
Extjs Form是一个比较常用的控件，主要用来显示和编辑数据的，今天这篇文章将介绍Extjs Form控件的详细用法，包括创建Form、添加子项、加载和更新数据、验证等。
本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！
本文由齐飞（youring2@）原创，并发布在/article/extjs-form-in-detail，转载请注明出处！推荐更多Extjs教程、Extjs5教程
Form和Form Basic
Extjs Form和Form Basic是两个东西，Form提供界面的展示，而Form Basic则提供数据的处理、验证等功能。每一个Form Panel在创建的时候，都会绑定一个Form Basic，我们可以通过方法getForm来获取：
form.getForm()
在API方面，Form的config中没有显示Form Basic的config，但是Form Basic的config在Form的config中完全有效，也就是说，当我们使用Extjs Form的时候，不仅仅要查看Form的API文档，还要浏览相关的Form Basic的文档。
创建Extjs Form控件
var form = Ext.create(Ext.form.Panel, {
width: 500,
height: 300,
margin: 20,
title: Form,
renderTo: Ext.getBody(),
collapsible: true, //可折叠
autoScroll: true, //自动创建滚动条
defaultType: textfield,
defaults: {
anchor: 100%,
},
fieldDefaults: {
labelWidth: 80,
labelAlign: left,
flex: 1,
margin: 5
},
items: [
{
xtype: container,
layout: hbox,
items: [
{ xtype: textfield, name: name, fieldLabel: 姓名, allowBlank: false },
{ xtype: numberfield, name: age, fieldLabel: 年龄, decimalPrecision: 0, vtype: age }
]
},
{
xtype: container,
layout: hbox,
items: [
{ xtype: textfield, name: phone, fieldLabel: 电话, allowBlank: false, emptyText: 电话或手机号码 },
{ xtype: textfield, name: phone, fieldLabel: 邮箱, allowBlank: false, emptyText: Email地址, vtype: email }
]
},
{
xtype: textareafield,
name: remark,
fieldLabel: 备注,
height: 50
}
],
buttons: [
{ xtype: button, text: 保存 }
]
});
以上代码将创建一个Form表单，效果如下：
Extjs Form布局
在Extjs Form中，默认的布局方式是layout: anchor，具体的Extjs 布局可以参考我的Extjs 布局系统详解这篇文章。
anchor默认每行只显示一个控件，如果我们要在一行中显示多个，需要将这些控件放在一个container中，并设置container的layout为hbox。
?
Extjs Form加载数
显示全部