基本输入控件Ext.form.Field
Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于它扩展的来的。其定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性校验。
页面显示样式：clearCls, cls, fieldClass, focusClass, itemCls, invalidClass, labelStyle等属性，他们分贝用来定义不同状态下输入框采用的样式。
控件参数配置：autoCreate, disabled, fieldLabel, hideLabel, inputType, labelSeparator, name, readOnly, tabIndex, value等属性。
数据有效性检验：invalidText, msgFx, msgTarget, validateOnBlue, validateDelay, validateEvent等属性。
下列示例展现了空间可以使用的校验显示方式：
1
Ext.QuickTips.init();
2
3
var field1 = new Ext.form.Field(
{
4
fieldLabel:'qtip',
5 msgTarget:'qtip'
6
});
7var field2 = new Ext.form.Field({
8 fieldLabel:'title',
9 msgTarget:'title'
10});
11var field3 = new Ext.form.Field({
12 fieldLabel:'side',
13 msgTarget:'side'
14});
15var field4 = new Ext.form.Field({
16 fieldLabel:'under',
17 msgTarget:'under'
18});
19
20var form = new Ext.form.FormPanel({
21 title:'form',
22 items:[field1,field2,field3,field4],
23 renderTo:'form'
24});
25
26field1.markInvalid();
27field2.markInvalid();
28field3.markInvalid();
29field4.markInvalid();
30
下拉输入框Ext.form.TriggerField
Ext.form.TriggerField是ComboBox, DateField和TimeField的父类，它既可以通过手工录入数据，也可以通过选择录入数据。为了显示下拉选择的功能，需要覆写它的onTriggerClick()函数以实现弹出窗口。
1var triggerField = new Ext.form.TriggerField({
2 fieldLabel:'选择',
3 name:'name',
4
onSelect:function(record){},
5 onTriggerClick:function(){
6 if (this.menu == null) {
7 this.menu = selectMenu; //selectMenu是一个预先创建的一个Ext.menu.Menu实例，实例中可以放按钮，表格等控件。
8
}
9 this.menu.show(this.el,"tl-bl?"); //tl-bl?标示弹出的菜单的左上角或左下角与Ext.form.TriggerField对齐
10 }
11});
使用表单提交数据
1Ext.onReady(function(){
2 var form = new Ext.form.FormPanel({
3 defaultType:'textfield',
4 labelAlign:'right',
5 title:'form',
6 labelWidth:50,
7 frame:true,
8 width:220,
9 url:'04_01.jsp',
10 items:[{
11 fieldLabel:'文本框',
12 name:'text'
13 }],
14 buttons:[{
15 text:'按钮',
16 handler:function(){
17 form.getForm().submit({
18 success:function(form,action){
19 Ext.Msg.alert('信息',action.result.msg);
20 },
21 failure:function(){
22 Ext.Msg.alert('错误','操作失败!');
23 }
24 });
25 }
26 }]
27 })
28});
在Ext.lib.Ajax中，判断究竟是调用success还是failure的条件与业务无关。如果Http响应成功，就执行success;如果出现404或500错误，就执行failure。
form中的success和failure则是与业务相关的，只有后台响应为true或响应的JSON中包含success:true时，才执行success()函数。不过，这样一来failure()函数就复杂了，如何判断是连接失败，还是业务上出现问题呢？为了区分它们，EXT默认规定：如果响应的JSON中success不是true，并且响应的JSON中包含errors:{}，那么就认为是业务错误；如果不包含errors:{}，就认为是连接失败。当业务错误时，用this.failureType=Ext.form.Action.SERVER_INVALID;标记，可以通过action.failureType进行判断。
使用HTML原始的提交形式
1handler:function(){
2 form.getForm().getEl().dom.action = '04_01.jsp';
3 form.getForm().getEl().com.submit();
4}
单纯Ajax
1Ext.lib.Ajax.request(
2 'POST',
3 '04_01.jsp',
4 {
5 success:function(response){
6 var result = Ext.decode(response.responseText);
7 Ext.Msg.alert('信息',result.msg);
8 },
9 failure:function(){}
10 }
11)
表单布局----默认的平铺布局
1items:{
2 {fieldLabel:'俩字'},
3 {fieldLabel:'三个字'},
4 {fieldLabel:'四个汉字'},
5}
Form中的标签默认使用左对齐的方式，一共有left, top, right三个值可以选，我们可以通过配置labelAlign : 'right'使得右对齐。标签文字的宽度也可以设置，labelWidth : 60。如果标签过长，文字会自动换行。按钮位置也可以设置，有left, center, right3种选择，默认是right。
表单布局----平行分列布局
先使用layout : 'column'来说明下面要使用的是列布局，然后在items指定的每列中使用columnWidth指定每列所占总宽度的百分比。
如果使用了分列布局，就不能在表单中直接使用defaultType指定默认的xtype了，否则会影响布局结果。每一列中也必须手动指定使用layout : 'form'，这样才能在每列中正常显示输入框和对应标签。layout : 'form'其实就是FormPanel默认使用的布局方式，即自上而下一次排列。
1 items:[{
2 layout:'column',
3 items:[{
4 columnWidth:.33,
5 layout : 'form',
6 items:[{xtype:'textfield',fieldLabel:'俩字'}]
7 },{
8 columnWidth:.33,
9 layout : 'form',
10 items:[{xtype:'textfield',fieldLabel:'三个字'}]
11 },{
12 columnWidth:.33,
13 layout : 'form',
14 items:[{xtype:'textfield',fieldLabel:'四个字'}]
15 }]
16 }],
表单布局----在布局中使用fieldset
1items:[{
2 layout:'column',
3 items:[{
4 columnWidth:.5,
5 layout : 'form',
6 xtype:'fieldset',
7 title:'俩字',
8 autoHeight:true,
9 defaultType:'textfield',
10 items:[{fieldLabel:'俩字'},{fieldLabel:'俩字'}]
11 },{
12 columnWidth:.5,
13 layout : 'form',
14 xtype:'fieldset',
15 title:'三个字',
16 autoHeight:true,
17 defaultType:'textfield',
18 items:[{fieldLabel:'三个字'},{fieldLabel:'三个字'},{fieldLabel:'三个字'}]
19 }]
20 },{
21 xtype:'fieldset',
22 title:'四个汉字',
23 autoHeight:true,
24 items:[{width:345,height:100,xtype:'textarea',fieldLabel:'四个字'}]
25}]
自定义布局：在表单中加入图片
1items:[
2 {fieldLabel:'三个字'},
3 {fieldLabel:'三个字'},
4 {fieldLabel:'三个字'},
5 {xtype:'panel',html:'<center><img src="user_female.png"/></center>'}
6]
复选框和单选框
1{
2 xtype:'fieldset',
3 title:'多选',
4 defaultType:'checkbox',
5 hideLabels:true,
6 items:[{boxLabel:'多选一',inputValue:'1',checked:true},{boxLabel:'多选二',inputValue:'2'},{boxLabel:'多选三',inputValue:'3'}]
7},{
8 xtype:'fieldset',
9 title:'单选',
10 defaultType:'radio',
11 hideLabels:true,
12 items:[{boxLabel:'单选一',name:'radio',inputValue:'1',checked:true},{boxLabel:'单选二',name:'radio',inputValue:'2'},{boxLabel:'单选三',name:'radio',inputValue:'3'}]
13}
文件上传
1）首先，给form添加fileUpload ：true参数，如：
1var form = new Ext.form.FormPanel({
2 labelAlign:'right',
3 title:'form',
4 labelWidth:50,
5 frame:true,
6 fielUpload:true,
7 url:'09_01.jsp',
8 width:280
9})
2)其次，给form添加一个field，并为它设置inputType : 'file'，如：
1items:[{
2 xtype:'textfield',
3 fieldLabel:'文本框',
4 name:'file',
5 inputType:'file'
6}]