[轉載]EXT核心API詳解Ext.widgets(十六)-form(下)

Ext.form.NumberField
繼承自Ext.form.TextField,因爲Ext.form.TextField雖然強大,但寫起來的確還是有點麻煩,後面的類都繼承自Ext.form.TextField,沒有自定義的方法,屬性和事件

config定義爲{
    allowDecimals : Boolean    //true
    allowNegative : Boolean    //true
    baseChars : String    //'0123456789'
    decimalPrecision : Number    //精度,默認值2
    decimalSeparator : String    //小數分隔符
    fieldClass : String    //默認樣式爲x-form-field x-form-num-field
    maxText : String
    maxValue : Number    //默認Number.MAX_VALUE
    minText : String
    minValue : Number    //默認Number.NEGATIVE_INFINITY
    nanText : String    //NaN時顯示?
}

Ext.form.TextArea

config{
    autoCreate : String/Object    //{tag: "textarea", style. "width:100px;height:60px;", autocomplete: "off"}
    growMax : Number    //1000
    growMin : Number    //60
    preventScrollbars : Boolean    //如果爲真等於設置overflow: hidden,默認爲false
}

Ext.form.TriggerField
這個類只要text旁邊加了個下拉按鈕,要自己實現onTriggerClick
config{
    autoCreate : String/Object,    //{tag: "input", type: "text", size: "16", autocomplete: "off"}
    hideTrigger : Boolean        //隱藏trigger,就是右邊的那個下拉選擇框
    triggerClass : String

}
事件
onTriggerClick( EventObject e ) : void


Ext.form.DateField
繼承自TriggerField,用於日期選擇

config{
    altFormats : String        //轉換用戶輸入到日期時的格式,默認'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'
    autoCreate : String/Object    //{tag: "input", type: "text", size: "10", autocomplete: "off"}
    disabledDates : Array        //禁止選擇的日期:例 ["^03","04/../2006","09/16/2003"],不讓選3月,2006年4月,2003年9月16
    disabledDatesText : String    //不讓選總得給個理由吧
    disabledDays : Array    //不讓選星期幾,例[0,6],不讓選週六,週日
    disabledDaysText : String    //週日要休息,這就是理由
    format : String    //顯示時的格式
    invalidText : String    //驗證非法時的提示
    maxText : String
    maxValue : Date/String
    minText : String
    minValue : Date/String
    triggerClass : String
}

方法,除了構造,多了兩個顧名思義的方法
DateField( Object config )
getValue() : Date
setValue( String/Date date ) : void



Ext.form.ComboBox
config{
    allQuery : String        //''
    autoCreate : Boolean/Object    //{tag: "input", type: "text", size: "24", autocomplete: "off"}
    displayField : String    //顯示字段
    editable : Boolean        //true當然就是combobox了,如果不可編輯就是一個select了
    forceSelection : Boolean
    handleHeight : Number    //如果resiable爲真時,設置
    hiddenName : String
    lazyInit : Boolean    //除非得到焦點纔開始初始化列表,默認爲真
    lazyRender : Boolean    //除非請求,纔開始輸出,默認爲假
    listAlign : String    //對齊方式,參見Ext.Element.alignTo,默認爲'tl-bl'
    listClass : String
    listWidth : Number
    loadingText : String    //僅當mode = 'remote'時調用數據時顯示的文本
    maxHeight : Number        //300
    minChars : Number        //最少輸入多少個字開始響應,遠程時默認爲4,本地爲0,如果不可編輯則此值無效
    minListWidth : Number
    mode : String    //可選值local/remote之一,從本地還是遠程取數據
    pageSize : Number    //在遠程模式下,如果此值大於0會在底部顯示一個翻頁工具條
    queryDelay : Number    //查詢延時,遠程默認爲500,本地10
    queryParam : String    //查詢參數,默認爲query
    resizable : Boolean
    selectOnFocus : Boolean
    selectedClass : String
    shadow : Boolean/String    //True或"sides"爲默認風格, "frame" for 4-way shadow, and "drop" for bottom-right
    store : Ext.data.Store
    title : String
    transform. Mixed    //對應一個select元素,可以將select轉爲combobox對象
    triggerAction : String    //點擊按鈕時的動作.默認爲query
    triggerClass : String
    typeAhead : Boolean        //false
    typeAheadDelay : Number    //250
    valueField : String
    valueNotFoundText : String    //值不存在時的提示信息
}

屬性
view : Ext.DataView

方法
ComboBox( Object config )
構造

clearValue() : void
清除所有文本/值對

collapse() : void
expand() : void
收起/展開下拉列表

doQuery( String query, Boolean forceAll ) : void
執行查詢

getValue() : String
選擇當前字段的值

isExpanded() : void
下拉列表是展開的?

select( Number index, Boolean scrollIntoView ) : void
選中第index列表項

selectByValue( String value, Boolean scrollIntoView ) : Boolean
選中值爲value的列表項

setEditable( Boolean value ) : void
設editable屬性爲value

setValue( String value ) : void
設置當前值爲

事件
beforequery : ( Object queryEvent )
beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
collapse : ( Ext.form.ComboBox combo )
expand : ( Ext.form.ComboBox combo )
select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )


Ext.form.TimeField
繼承自combobox,用於選擇時間
config{
    altFormats : String    //
    format : String
    increment : Number    //時間增長間隔,默認15
    invalidText : String
    maxText : String
    maxValue : Date/String
    minText : String
    minValue : Date/String
}

總 的來說Ext.form對input type='text' select 這樣的輸入標籤都有對應的類,並對有些標籤做了簡單的擴展,當然很重要的一點,漂亮多了,vtype屬性也方便了處理,建議有興趣的同胞對 Ext.form.VTypes和Ext.form.HtmlEditor做一些擴展
form中還有兩個類,比如下例中的FormPanel和FieldSet,
都繼承自panel,所以會放在panel中解釋

綜合示例
   

Ext.QuickTips.init();
  
    var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉燈'] ];
    var reader = new Ext.data.ArrayReader(
   {id: 0},
   [
    {name: 'value'},       
    {name: 'key'}  
    ]);
  
    var store=new Ext.data.Store({
      reader:reader
   });
   store.loadData(arr);
  
    var htmleditor=new Ext.form.HtmlEditor({
        fieldLabel:'htmleditor',
        width:450,
        fontFamilies:['宋體','隸書'],
        name:'editor',
        id:'editor'
    });
       var form. = new Ext.FormPanel({
        labelWidth: 75,
        url:'post.php',
        frame.:true,
        width: 800,
        defaultType: 'textfield',
        items: [
            new Ext.form.Checkbox({     //checkbox
                fieldLabel:'checkbox',
                name:'cb',
                checked:true,
                boxLabel:'checkbox'
            }),
            new Ext.form.FieldSet({ //radio
                border:false,
                title:'radio',
                items:[
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:true,
                        boxLabel:'radio 1'
                    }),
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:true,
                        boxLabel:'radio 2'
                    })
                ]
             }),
            new Ext.form.Hidden({   //hidden
                name:'hidden'
            }),
          
            htmleditor,
            new Ext.form.TextField({ //text
                fieldLabel:'text',
                name:'text',
                grow:true,
                allowBlank:false,
                blankText : "這個字段最好不要爲空",
                maskRe:/[a-zA-z]/gi
            }),
            new Ext.form.NumberField({ //NumberField
                allowNegative:true,
                fieldLabel:'number',
                  name:'number'
            }),
            new Ext.form.TextArea({    //TextArea
                fieldLabel:'textarea',
                name:'textarea'
            }),
            new Ext.form.TriggerField({ //TriggerField
                fieldLabel:'TriggerField',
                name:'TriggerField'
            }),
            new Ext.form.ComboBox({ //select
                fieldLabel:'select',
                editable:false,
                triggerAction: 'all',
                valueField:'value',
                displayField:'key',
                mode: 'local',
                store:store
            }),
            new Ext.form.ComboBox({ //combobox
                fieldLabel:'ComboBox',
                displayField:'key',
                mode: 'local',
                store:store
            }),
            new Ext.form.DateField({ //DateField
                fieldLabel:'DateField',
                format:'Y-m-d',
                disabledDays:[0,6]
            }),
            new Ext.form.TimeField({//TimeField
                fieldLabel:'TimeField',
                mode: 'local',
                increment:60
              
            })
            ]
        });
form.render(document.body);

htmleditor.setRawValue("<h1>hello world</h1>");
htmleditor.syncValue();