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
验证值

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 )

示例:

//定义一个变量
var sel;


Ext.onReady(
function
(){
       
// simple array store

        Ext.exampledata.provinces = [[ ' ', '全部 '], [ 'BJ ', '北京 '], [ 'SH ', '上海 ']];
       
var store = new
Ext.data.SimpleStore({
            fields: [
'code ', 'label '
],
            data : Ext.exampledata.provinces
        });
       
//initialize a combobox object

        combo = new Ext.form.ComboBox({
            store: store,                  
//datasource

            valueField: 'code ',
            displayField:
'label ',           //display field

            typeAhead: true,                //自动将第一个搜索到的选项补全输入               
              mode: 'local ',
            triggerAction:
'all '
,
            emptyText:
'全部 '
,
            selectOnFocus:
true
,
            resizable:
true
,
            forceSelection:
true

        });
        combo.applyTo(
'province '
);


//使用comboboxselect事件,提交的时候,提交sel就好了

combo.on('select',myFun);

function
myFun(c,r,i)
{
   sel
= r.get('code'
);
}

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中解释

////----------------------------------------------------------------------------------------------------------

综合实例:

http://hi.baidu.com/capchin/blog/item/36af27940620ca1ad31b701c.html

posted on 2008-10-20 17:14  北极々冰雪  阅读(1332)  评论(0编辑  收藏  举报