最愛(ài)Java

基本輸入控件Ext.form.Field
    Ext.form.Field是所有表單輸入控件的基類，其他的輸入控件都是基于它擴(kuò)展的來(lái)的。其定義了輸入控件通用的屬性和功能函數(shù)，這些通用的屬性和功能函數(shù)大致分為3大類：頁(yè)面顯示樣式、控件參數(shù)配置和數(shù)據(jù)有效性校驗(yàn)。
    頁(yè)面顯示樣式：clearCls, cls, fieldClass, focusClass, itemCls, invalidClass, labelStyle等屬性，他們分貝用來(lái)定義不同狀態(tài)下輸入框采用的樣式。
    控件參數(shù)配置：autoCreate, disabled, fieldLabel, hideLabel, inputType, labelSeparator, name, readOnly, tabIndex, value等屬性。
   數(shù)據(jù)有效性檢驗(yàn)：invalidText, msgFx, msgTarget, validateOnBlue, validateDelay, validateEvent等屬性。

    下列示例展現(xiàn)了空間可以使用的校驗(yàn)顯示方式：


下拉輸入框Ext.form.TriggerField
    Ext.form.TriggerField是ComboBox, DateField和TimeField的父類，它既可以通過(guò)手工錄入數(shù)據(jù)，也可以通過(guò)選擇錄入數(shù)據(jù)。為了顯示下拉選擇的功能，需要覆寫(xiě)它的onTriggerClick()函數(shù)以實(shí)現(xiàn)彈出窗口。


使用表單提交數(shù)據(jù)

 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('錯(cuò)誤','操作失敗!');
23                    }
24                });
25            }
26        }]
27    })
28});

    在Ext.lib.Ajax中，判斷究竟是調(diào)用success還是failure的條件與業(yè)務(wù)無(wú)關(guān)。如果Http響應(yīng)成功，就執(zhí)行success;如果出現(xiàn)404或500錯(cuò)誤，就執(zhí)行failure。
    form中的success和failure則是與業(yè)務(wù)相關(guān)的，只有后臺(tái)響應(yīng)為true或響應(yīng)的JSON中包含success:true時(shí)，才執(zhí)行success()函數(shù)。不過(guò)，這樣一來(lái)failure()函數(shù)就復(fù)雜了，如何判斷是連接失敗，還是業(yè)務(wù)上出現(xiàn)問(wèn)題呢？為了區(qū)分它們，EXT默認(rèn)規(guī)定：如果響應(yīng)的JSON中success不是true，并且響應(yīng)的JSON中包含errors:{}，那么就認(rèn)為是業(yè)務(wù)錯(cuò)誤；如果不包含errors:{}，就認(rèn)為是連接失敗。當(dāng)業(yè)務(wù)錯(cuò)誤時(shí)，用this.failureType=Ext.form.Action.SERVER_INVALID;標(biāo)記，可以通過(guò)action.failureType進(jìn)行判斷。

使用HTML原始的提交形式


單純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)

表單布局----默認(rèn)的平鋪布局


    Form中的標(biāo)簽?zāi)J(rèn)使用左對(duì)齊的方式，一共有l(wèi)eft, top, right三個(gè)值可以選，我們可以通過(guò)配置labelAlign : 'right'使得右對(duì)齊。標(biāo)簽文字的寬度也可以設(shè)置，labelWidth : 60。如果標(biāo)簽過(guò)長(zhǎng)，文字會(huì)自動(dòng)換行。按鈕位置也可以設(shè)置，有l(wèi)eft, center, right3種選擇，默認(rèn)是right。

表單布局----平行分列布局

    先使用layout : 'column'來(lái)說(shuō)明下面要使用的是列布局，然后在items指定的每列中使用columnWidth指定每列所占總寬度的百分比。
    如果使用了分列布局，就不能在表單中直接使用defaultType指定默認(rèn)的xtype了，否則會(huì)影響布局結(jié)果。每一列中也必須手動(dòng)指定使用layout : 'form'，這樣才能在每列中正常顯示輸入框和對(duì)應(yīng)標(biāo)簽。layout : 'form'其實(shí)就是FormPanel默認(rèn)使用的布局方式，即自上而下一次排列。


表單布局----在布局中使用fieldset


自定義布局：在表單中加入圖片

1items:[
2    {fieldLabel:'三個(gè)字'},
3    {fieldLabel:'三個(gè)字'},
4    {fieldLabel:'三個(gè)字'},
5    {xtype:'panel',html:'<center><img src="user_female.png"/></center>'}
6]

復(fù)選框和單選框

 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參數(shù)，如：


2)其次，給form添加一個(gè)field，并為它設(shè)置inputType : 'file'，如：