ExtJs之FormPanel篇

表单时是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的特殊之处。