Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField

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();