最愛Java

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

    下列示例展現了空間可以使用的校驗顯示方式：


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


使用表單提交數據

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

    在Ext.lib.Ajax中，判斷究竟是調用success還是failure的條件與業務無關。如果Http響應成功，就執行success;如果出現404或500錯誤，就執行failure。
    form中的success和failure則是與業務相關的，只有后臺響應為true或響應的JSON中包含success:true時，才執行success()函數。不過，這樣一來failure()函數就復雜了，如何判斷是連接失敗，還是業務上出現問題呢？為了區分它們，EXT默認規定：如果響應的JSON中success不是true，并且響應的JSON中包含errors:{}，那么就認為是業務錯誤；如果不包含errors:{}，就認為是連接失敗。當業務錯誤時，用this.failureType=Ext.form.Action.SERVER_INVALID;標記，可以通過action.failureType進行判斷。

使用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)

表單布局----默認的平鋪布局


    Form中的標簽默認使用左對齊的方式，一共有left, top, right三個值可以選，我們可以通過配置labelAlign : 'right'使得右對齊。標簽文字的寬度也可以設置，labelWidth : 60。如果標簽過長，文字會自動換行。按鈕位置也可以設置，有left, center, right3種選擇，默認是right。

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

    先使用layout : 'column'來說明下面要使用的是列布局，然后在items指定的每列中使用columnWidth指定每列所占總寬度的百分比。
    如果使用了分列布局，就不能在表單中直接使用defaultType指定默認的xtype了，否則會影響布局結果。每一列中也必須手動指定使用layout : 'form'，這樣才能在每列中正常顯示輸入框和對應標簽。layout : 'form'其實就是FormPanel默認使用的布局方式，即自上而下一次排列。


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


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

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

復選框和單選框

 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參數，如：


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