ExtJs之FormPanel篇

小花驢 2015-05-13

展開全文

表單時是web中常見的元素，Ext中的表單也是特別豐富的，接下來我們一塊看看表單的相關(guān)內(nèi)容。

還是先看一下代碼和效果：

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基本類型，也可以用其對應(yīng)的form元素代替
                name:'userName',
                id:'userName'
                //width:100
            },
            {
                fieldLabel:'密碼',
                //xtype:'textfield',//Ext基本類型，也可以用其對應(yīng)的form元素代替
                inputType:'password',
                name:'userPwd',
                id:'userPwd'
                //width:100
            }
        ],
        buttonAlign:'center',//按鈕對其方式
        buttons:[
            {
                text:'確定'
            },
            {
                text:'取消',
                handler:function(){//點擊取消按鈕的操作事件
                    fp.hide();
                }
            }
        ]
    });
});

FormPanel也比較好用，但是我認(rèn)為我們有必要就上面xtype和inputType說幾點。

大家其實很多時候會發(fā)現(xiàn)，在Ext組件中（對于所有容器組件[這里就是可以有子組件的組件]）items里面基本上有兩種存在形式，一種就是像上面一樣我們直接以Json的形式進(jìn)行配置；另一種就是既然items中是一個個item，我們可以定義一個對象放到里面，例如假設(shè)在一個panel中還有一個子panel，我們就可以直接var pn=new Ext.Panel({…});然后放到items中。上面的話我再強調(diào)一下，它不僅僅針對FormPanel，而是對于所有容器組件都是這樣。不妨看一個例子，我覺得大家經(jīng)?？吹竭@樣的代碼：

var panel=new Ext.Panel({
    renderTo:"divPanel",
    title:"我的面板",
    width:400,
    height:300,
    items:[
        new Ext.Panel({title:'子panel1',html:'子panel1內(nèi)容'}),
        new Ext.Panel({title:'子panel2',html:'子panel2內(nèi)容'})
    ]
});

以至于很多初學(xué)者認(rèn)為像上面的代碼不能夠?qū)懗上旅娴男问剑?/p>

var panel=new Ext.Panel({
    renderTo:"divPanel",
    title:"我的面板",
    width:400,
    height:300,
    items:[
        {…}，
        {…}
    ]
});

其實這是對于xtype不太了解的原因。Ext中xtype和Class（類）是一一對應(yīng)的，所以既然上面items中是panel對象，那么就有對應(yīng)的xtype，事實上我們可以知道它對應(yīng)"panel"，那么既然是這樣，上面的代碼當(dāng)然可以寫成第第一種存在形式：

var panel=new Ext.Panel({
    renderTo:"divPanel",
    title:"我的面板",
    width:400,
    height:300,
    items:[
        {xtype:'panel',title:'子panel1',html:'子panel1內(nèi)容'},
        {xtype:'panel',title:'子panel2',html:'子panel2內(nèi)容'}
    ]
});

事實上從本質(zhì)上來講上面兩種情況是一樣的，只是表現(xiàn)形式不同而已，那么對于上面的代碼如何用第二種方式呢，你會問，像{ fieldLabel:'用戶名', xtype:'textfield',//Ext基本類型，也可以用其對應(yīng)的form元素代替name:'userName',id:'userName' //width:100 }這樣的代碼是什么對象呢？其實它對應(yīng)的是"Ext.form.TextField"。這里放上一張對應(yīng)表：

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是對應(yīng)的，當(dāng)然表單中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中相關(guān)控件，所以沒有在布局上花功夫），也很容易理解，就是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'
        })
    ]                
});