zoukankan      html  css  js  c++  java
  • Ext.widgetsform(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField

    Ext.form.BasicForm
    对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式
    var myForm = new Ext.form.BasicForm("form-el-id", {
            onSubmit: Ext.emptyFn,
            submit: function() {
                this.getEl().dom.submit();
            }
        });

    方法:
     BasicForm( Mixed el, Object config )
    其中config配置为
    {
     baseParams : Object,    //请求时的附加参数,格式为{id: '123', foo: 'bar'}
     errorReader : DataReader,    //提交时发生验证错误,这个dataReader将会被使用
     fileUpload : Boolean,    //支持文件上传
     method : String,    //GET或者POST
     reader : DataReader,    //load时使用的数据读取器
     timeout : Number,    //超时时间
     trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值
     url : String    //form要提交的url地址
    }

    add( Field field1, [Field field2], [Field etc] ) : BasicForm
    增加字段field1,field2,etc


    applyIfToFields( Object values ) : BasicForm
    applyToFields( Object values ) : BasicForm
    用传入的values呼叫Ext.applyIf/apply 方法

    clearInvalid() : BasicForm
    清除当前basicform中所有的非法信息

    doAction( String/Object actionName, [Object options] ) : BasicForm
    执行预定义的动作actionName,actionName类似"submit","load",也可以是自定义的动作的名字或一个Ext.form.Action的实例,options类似如下对象{
    url               :String,
    method            :String,          
    params            :String/Object,  
    success           :Function,
    failure           :Function,
    clientValidation  :Boolean        
    }

    findField( String id ) : Field
    在当前form中查找id/dataindex/name等于传入的id的field对象

    getEl() : Ext.Element
    得到当前form对象的element对象


    getValues( Boolean asString ) : Object
    得到当前form的fields {name:value,name:values}json对象,如果有同名多值,value将是一个数组

    isDirty() : Boolean
    从初始载入后,是否有field被修改过

    isValid() : Boolean
    客户端验证成功?

    load( Object options ) : BasicForm
    等效于doAction('load',options);

    loadRecord( Record record ) : BasicForm
    从一个record对象取值到当前basicform

    markInvalid( Array/Object errors ) : BasicForm
    标志非法,[{id:'fieldId', msg:'The message'},...]这样格式的数组或者{id: msg, id2: msg2}格式的对象

    remove( Field field ) : BasicForm
    从basicform中移除field

    render() : BasicForm
    在basicForm的fields中寻找,利用id属性检查他们,然后用id属性呼叫applyTo方法

    reset() : BasicForm
    重置所有值

    setValues( Array/Object values ) : BasicForm
    设置值,参见getValues

    submit( Object options ) : BasicForm
    提交表单

    updateRecord( Record record ) : BasicForm
    利用当前更新record对象,参见loadRecord

    事件:
    actioncomplete : ( Form this, Action action )
    actionfailed : ( Form this, Action action )
    beforeaction : ( Form this, Action action )


    Ext.form.Field
    有了form之后,我们当然还需要field
    方法:
    Field( Object config )
    其中config设置为{
        autoCreate : String/Object,    //一个{tag: "input", type: "text", size: "20", autocomplete: "off"}这样的对象,或者选                    择true,就是前面所说的那个固定内置对象
        clearCls : String,        //,默认x-form-clear-left
        cls : String,            //默认样式
        disabled : Boolean,       
        fieldClass : String        //x-form-field
        fieldLabel : String       
        focusClass : String        //x-form-focus
        hideLabel : Boolean        //隐藏前导标签
        inputType : String        //input type="???"
        invalidClass : String        //x-form-invalid
        invalidText : String       
        itemCls :String
        labelSeparator : String        //分隔符
        msgFx : String
        msgTarget : String
        name : String
        readOnly : Boolean
        tabIndex : Number
        validateOnBlur : Boolean    //true
        validationDelay : Number    //250
        validationEvent : String/Boolean    //KeyUP
        value : Mixed
    }

    构造很麻烦的,但还好我们一般不会直接使用field

    clearInvalid() : void
    清除非法信息

    getName() : String
    getRawValue() : Mixed
    getValue() : Mixed
    isDirty() : void
    isValid( Boolean preventMark ) : Boolean
    markInvalid( String msg ) : void
    reset() : void
    setRawValue( Mixed value ) : void
    setValue( Mixed value ) : void
    validate() : Boolean

    都很简单也略过了
    事件
    blur : ( Ext.form.Field this )
    change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
    focus : ( Ext.form.Field this )
    invalid : ( Ext.form.Field this, String msg )
    specialkey : ( Ext.form.Field this, Ext.EventObject e )
    valid : ( Ext.form.Field this )

    Ext.form.Checkbox
    继承自Field, 复选框

     Checkbox( Object config )
     构造,其中config{
        autoCreate : String/Object,
        boxLabel : String,
        checked : Boolean,
        fieldClass : String,//x-form-field
        focusClass : String,
     }

    getValue() : Boolean
    initComponent() : void
    setValue( Boolean/String checked ) : void

    事件
    check : ( Ext.form.Checkbox this, Boolean checked )

    Ext.form.Radio
    继承自Ext.form.Checkbox,单选框
    多了一个方法
    getGroupValue() : String
    如果单选框是一组radio 的一部分,取当前选中的值

    Ext.form.Hidden
    继承自Field,隐藏字段,无新特性


    Ext.form.HtmlEditor
    继承自Field,这个htmleditor功能太简单了,什么人能扩充一下就好了

    config定义{
    createLinkText : String    //
    defaultLinkValue : String    // http://
    enableAlignments : Boolean
    enableColors : Boolean
    enableFont : Boolean
    enableFontSize : Boolean
    enableFormat : Boolean
    enableLinks : Boolean
    enableLists : Boolean
    enableSourceEdit : Boolean
    fontFamilies : Array    //这个当然要用汉字的字体组成的数组了
    }

    方法

    cleanHtml( String html ) : void
    createToolbar( HtmlEditor editor ) : void
    execCmd( String cmd, [String/Boolean value] ) : void
    getDocMarkup() : void
    getToolbar() : Ext.Toolbar
    insertAtCursor( String text ) : void
    pushValue() : void
    relayCmd( String cmd, [String/Boolean value] ) : void
    syncValue() : void
    toggleSourceEdit( [Boolean sourceEdit] ) : void
    updateToolbar() : void


    要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init();



    Ext.form.TextField
    config{
        allowBlank : Boolean    //允许为空
        blankText : String    //如果为空验证错误时的提示文字 ,默认This field is required
        disableKeyFilter : Boolean
        emptyClass : String
        emptyText : String
        grow : Boolean    // 自动生长?,如果需要,会加宽当前input type="text"
        growMax : Number
        growMin : Number
        maskRe : RegExp    //仅允许输入与maskRe匹配的按键
        maxLength : Number
        maxLengthText : String    //超出最大长度时提示文本
        minLength : Number
        minLengthText : String    //不够最小长度时提示信息
        regex : RegExp        //正则匹配
        regexText : String    //提示
        selectOnFocus : Boolean
        validator : Function    //自定义验证方法,接受当前字段的值,如果合法,返回真,反之返回自定义信息
        vtype : String    //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证
        vtypeText : String//如果不是,则提示
    }

    方法:
    TextField( Object config )
    构造

    autoSize() : void
    自动尺寸

    reset() : void
    重置

    selectText( [Number start], [Number end] ) : void
    选择文本

    validateValue( Mixed value ) : Boolean
    验证值

  • 相关阅读:
    spring framework体系结构及模块jar依赖关系
    Spring的核心jar包
    Spring AOP的理解和使用
    Spring特点与工作原理
    接口和抽象类的区别
    Java重载和重写的区别
    Jdk1.8中的HashMap实现原理
    Java集合中List,Set以及Map等集合体系详解
    Spring面试题整理
    ActiveMQ入门操作示例
  • 原文地址:https://www.cnblogs.com/meetrice/p/1206062.html
Copyright © 2011-2022 走看看