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