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的特殊之处。

好了，就先到这里吧！