表单时是web中常见的元素，Ext中的表单也是特别丰富的，接下来我们一块看看表单的相关内容。
还是先看一下代码和效果：
Ext.onReady(function(){
var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel
title:'用户登录',
width:300,
//height:250,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的
url:'login.aspx',//提交地址
method:'post',//提交方法
defaults:{ //在这里同一定义item中属性，否则需要各个指明
xtype:'textfield',
labelAlign:'left',
labelWidth:80,
width:100
},
items:[
{
fieldLabel:'用户名',
xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替
name:'userName',
id:'userName'
//width:100
},
{
fieldLabel:'密码',
//xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替
inputType:'password',
name:'userPwd',
id:'userPwd'
//width:100
}
],
buttonAlign:'center',//按钮对其方式
buttons:[
{
text:'确定'
},
{
text:'取消',
handler:function(){//点击取消按钮的操作事件
fp.hide();
}
}
]
});
});
FormPanel也比较好用，但是我认为我们有必要就上面xtype和inputType说几点。
大家其实很多时候会发现，在Ext组件中（对于所有容器组件[这里就是可以有子组件的组件]）items里面基本上有两种存在形式，一种就是像上面一样我们直接以Json的形式进行配置；另一种就是既然items中是一个个item，我们可以定义一个对象放到里面，例如假设在一个panel中还有一个子panel，我们就可以直接var pn=new Ext.Panel({…});然后放到items中。上面的话我再强调一下，它不仅仅针对FormPanel，而是对于所有容器组件都是这样。不妨看一个例子，我觉得大家经常看到这样的代码：
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
new Ext.Panel({title:'子panel1',html:'子panel1内容'}),
new Ext.Panel({title:'子panel2',html:'子panel2内容'})
]
});
以至于很多初学者认为像上面的代码不能够写成下面的形式：
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{…}，
{…}
]
});
其实这是对于xtype不太了解的原因。Ext中xtype和Class（类）是一一对应的，所以既然上面items中是panel对象，那么就有对应的xtype，事实上我们可以知道它对应"panel"，那么既然是这样，上面的代码当然可以写成第第一种存在形式：
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{xtype:'panel',title:'子panel1',html:'子panel1内容'},
{xtype:'panel',title:'子panel2',html:'子panel2内容'}
]
});
事实上从本质上来讲上面两种情况是一样的，只是表现形式不同而已，那么对于上面的代码如何用第二种方式呢，你会问，像{ fieldLabel:'用户名', xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替name:'userName',id:'userName' //width:100 }这样的代码是什么对象呢？其实它对应的是"Ext.form.TextField"。这里放上一张对应表：
| xtype |
类 |
| box |
Ext.BoxComponent |
| button |
Ext.Button |
| colorpalette |
Ext.ColorPalette |
| component |
Ext.Component |
| container |
Ext.Container |
| cycle |
Ext.CycleButton |
| dataview |
Ext.DataView |
| datepicker |
Ext.DatePicker |
| editor |
Ext.Editor |
| editorgrid |
Ext.grid.EditorGridPanel |
| grid |
Ext.grid.GridPanel |
| paging |
Ext.PagingToolbar |
| panel |
Ext.Panel |
| progress |
Ext.ProgressBar |
| propertygrid |
Ext.grid.PropertyGrid |
| slider |
Ext.Slider |
| splitbutton |
Ext.SplitButton |
| statusbar |
Ext.StatusBar |
| tabpanel |
Ext.TabPanel |
| treepanel |
Ext.tree.TreePanel |
| viewport |
Ext.Viewport |
| window |
Ext.Window |
| toolbar |
Ext.Toolbar |
| tbbutton |
Ext.Toolbar.Button |
| tbfill |
Ext.Toolbar.Fill |
| tbitem |
Ext.Toolbar.Item |
| tbseparator |
Ext.Toolbar.Separator |
| tbspacer |
Ext.Toolbar.Spacer |
| tbsplit |
Ext.Toolbar.SplitButton |
| tbtext |
Ext.Toolbar.TextItem |
| form |
Ext.FormPanel |
| checkbox |
Ext.form.Checkbox |
| combo |
Ext.form.ComboBox |
| datefield |
Ext.form.DateField |
| field |
Ext.form.Field |
| fieldset |
Ext.form.FieldSet |
| hidden |
Ext.form.Hidden |
| htmleditor |
Ext.form.HtmlEditor |
| label |
Ext.form.Label |
| numberfield |
Ext.form.NumberField |
| radio |
Ext.form.Radio |
| textarea |
Ext.form.TextArea |
| textfield |
Ext.form.TextField |
| timefield |
Ext.form.TimeField |
| trigger |
Ext.form.TriggerField |
好了，说了那么多xtype，inputType还没有说呢。我们说xtype和class是对应的，当然表单中xtype和class都有inputType属性，而且最为有意思的是对于form中的元素inputType的取值范围是一样的，什么意思呢？我们还看例子（我们直接对上面的代码精简好了，这个例子中我们就用class形式好了）：
var fp=new Ext.form.FormPanel({
title:'用户登录',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[
new Ext.form.Radio({
boxLabel:'男',
name:'sex',
id:'male'
}),
new Ext.form.Radio({
boxLabel:'女',
name:'sex',
id:'sex_female'
})
]
});
上面这个例子很简单（不太好看，因为到这里还没有说到form中相关控件，所以没有在布局上花功夫），也很容易理解，就是Radio控件吗。但是我修改过inputType之后呢：
var fp=new Ext.form.FormPanel({
title:'用户登录',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[
new Ext.form.Radio({
boxLabel:'男',
inputType:'textfield',
name:'sex',
id:'male'
}),
new Ext.form.Radio({
boxLabel:'女',
inputType:'file',
name:'sex',
id:'sex_female'
})
]
});
可以说上面的代码如果对于初学者来说肯定想不到一个radio变成了textfield，另一个变成了file。不是创建的Radio对象吗？怎么成了其他的控件，这个就是Ext中inputType的特殊之处。
好了，就先到这里吧！
