Ext.form.field.Field

Hierarchy

Ext.Base
Ext.form.field.Field

Mixed into

Files

这个mixin为逻辑行为及表单项状态提供通用的接口,包括:

  • 获取和设置表单项值的方法
  • 追踪值和有效性变化的事件和方法
  • 触发校验的方法

NOTE: 当实现自定义表单项时,大多数情况下会继承Ext.form.field.Base组件类而不是直接使用这个mixin 因为BaseField包含额外的逻辑用于生成实际的DOM,其中包括label and error message的显示和 一个表单项输入,此外还有绑定表单项获取和设置表单项值的方法。

如果想直接实现这个mixin并不想继承Ext.form.field.Base,那么大多数情况下重写以下自定义实现方法:getValue, setValue, and getErrors。其他也许也需要重写但是大多数情况他们的基类实现应当已经足够了。 还有需要在组件初始化的过程中确认initField被调用了。

Defined By

Config options

Ext.form.field.Field
: Boolean

True 禁用表单项。禁用的表单项将不会被submitted.

Defaults to: false

Overrides: Ext.AbstractComponent.disabled

Ext.form.field.Field
: String

表单项名称。当使用form submit()方法其中包含这个表单项时,name作为参数名称。
为了在表单提交时不包括这个字段,设置submitValue为false

Ext.form.field.Field
: Boolean

即使表单项启用了,设置为false将防止当前表单项被submitted

Defaults to: true

Ext.form.field.Field
: Boolean

无论合适检测到表单项的值变化了,指定这个表单项是否立马验证。 如果验证导致表单项有效性的变化,一个validitychange事件将会被触发。 这允许当用户在输入时,这个表单项立马对内容的的有效性给出即时的反馈。

当设置成false,反馈不会立马得到。如果clientValidation配置项Ext.form.Basic.doAction启用了,或者这个表单项或表单手动验证了 则这个表单提交前无论怎样都会被验证。

也可参见 Ext.form.field.Base.checkChangeEvents 来控制表单项的值是检测变化的

Defaults to: true

Ext.form.field.Field
value : Object

表单项的初始化值

表单项的初始化值

Defined By

Properties

扩展事件

Defaults to: []

Ext.form.field.Field
: Boolean

标记这个组件是一个Field。通常是true。

Defaults to: true

Ext.form.field.Field
originalValue : Object

配置在value上的表单项的原始值,如果表单的trackResetOnLoad 设置为true,载入表单上次加载操作的值。

配置在value上的表单项的原始值,如果表单的trackResetOnLoad 设置为true,载入表单上次加载操作的值。

本身 获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 ...

本身

获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 参见 statics 详细对比

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // 依赖 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard' 雪豹

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
Ext.form.field.Field
: Numberprivate

Defaults to: 0

Methods

Defined By

Instance Methods

( Object config )private

添加配置

Parameters

Parameters

( Object name, Object member )private

Parameters

( Object xtype )private

添加 Xtype

Parameters

Ext.form.field.Field
( Object fn )

用于对修改进行分组的工具方法,使得其在一个单一的事务中触发值变化以防止过多的触发change事件. 对于表单项有子表单项,并且子表单项作为一组更新时则非常有用。不想容器表单项对于每一个其子表单项的变化 都去检查其变化状态。

Parameters

  • fn : Object

    包含事务代码的函数

( Array/Arguments ) : Objectdeprecatedprotected
调用原来的方法,这是以前的override重写 Ext.define('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); ...

调用原来的方法,这是以前的override重写

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callOverridden();

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

This method has been deprecated since 4.1

版本 使用 callParent 代替.

Parameters

  • : Array/Arguments

    参数的参数,数组或'参数'对象 来自当前方法,例如: this.callOverridden(arguments)

Returns

  • Object

    返回调用重写方法的结果。

( Array/Arguments args ) : Objectprotected

所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

这可以用来重写如下:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // 调用原来的My.Derived构造
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // 现在提示 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

然后,它也可以重写静态方法。

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // 现在提示 40

Parameters

  • args : Array/Arguments

    这个参数, 通过当前方法得到数组或者 arguments 对象, 例如: this.callParent(arguments)

Returns

  • Object

    返回调用父类的方法的结果。

Ext.form.field.Field
( )
检查表单项自从上次检查后,其值是否变化了 如果值已经改变,将做一下一些操作: 触发change event 如果validateOnChange配置项启用执行校验, 如果有效性改变了并触发validitychange event ...

检查表单项自从上次检查后,其值是否变化了 如果值已经改变,将做一下一些操作:

  1. 触发change event
  2. 如果validateOnChange配置项启用执行校验, 如果有效性改变了并触发validitychange event
  3. 检查表单项的dirty state,如果变化了并触发dirtychange event
Ext.form.field.Field
( )

检查表单项的isDirty状态并且如果自从上次检查后改变了触发dirtychange事件

Ext.form.field.Field
( )

清除对于表单项的无效样式/信息。使用这个mixin的组件应当实现这个方法以清除已存在的错误信息。 Clear any invalid styles/messages for this field. Components using this mixin should implement this method to update the components rendering to clear any existing messages.

Note:这个方法不会引起表单项的validate or isValid方法返回true 如果值确实通过校验。简单的清除表单项的错误也不会允许表单通过Ext.form.action.Submit.clientValidation提交

( Object config )private

拓展

Parameters

Ext.form.field.Field
( ) : HTMLElement
仅当实例的isFileUpload方法返回true才有用。返回file input DOM元素的引用。这个input将会附加到表单的提交表单上 并且不返回任何值,因此这个方法是创建一个file input 的别名。 ...

仅当实例的isFileUpload方法返回true才有用。返回file input DOM元素的引用。这个input将会附加到表单的提交表单上 并且不返回任何值,因此这个方法是创建一个file input 的别名。 Only relevant if the instance's isFileUpload method returns true. Returns a reference to the file input DOM element holding the user's selected file. The input will be appended into the submission form and will not be returned, so this method should also create a replacement.

Returns

  • HTMLElement
( Object name )private

得到配置项

Parameters

Ext.form.field.Field
( Object value ) : String[]

运行表单项的校验器并返回校验失败的错误信息。 校验时在内部调用,一般不会手动调用

每一个子类应当重写或者扩大返回的值以实现自己的错误信息。 Runs this field's validators and returns an array of error messages for any validation failures. This is called internally during validation and would not usually need to be used manually.

Each subclass should override or augment the return value to provide their own errors.

Parameters

  • value : Object

    校验错误使用的值(默认为当前表单项的值)

Returns

  • String[]

    对于表单项校验产生的所有错误信息;如果无错误信息返回空数组

得到初始化配置项

Parameters

Ext.form.field.Field
( ) : Object
当Ext.form.Basic.updateRecord调用时,返回表单项保存到Ext.data.Model实例的值.一般来说这个对象为一 个简单的名值对,名字为表单项的name,值为当前数据值。更多高级的表单项实现返回多个名值对。 ...

Ext.form.Basic.updateRecord调用时,返回表单项保存到Ext.data.Model实例的值.一般来说这个对象为一 个简单的名值对,名字为表单项的name,值为当前数据值。更多高级的表单项实现返回多个名值对。 返回的值将会保存到Model中相应的表单项名称里。

注意这个方法返回的值不能确保成功校验了validated. Note that the values returned from this method are not guaranteed to have been successfully validated.

Returns

  • Object

    提交参数名字与值的映射。每一个值都应为一个字符串或者如果这个参数名含有多个值应当是一个字符串数组。 如果提交没有参数也可以返回null

Ext.form.field.Field
( )
返回表单项的name属性。当在form submit()中包含 表单项的值时用作参数名称。 ...

返回表单项的name属性。当在form submit()中包含 表单项的值时用作参数名称。

Ext.form.field.Field
( ) : Object
返回包括在标准表单提交中的参数。一般来说将是一个简单的名值对对象,名称为这个表单项的name, 值为当前字符化的值。更多高级表单项的实现会返回多个名值对 注意从这个方法返回的值不能确保是成功通过校验了的validated. ...

返回包括在标准表单提交中的参数。一般来说将是一个简单的名值对对象,名称为这个表单项的name, 值为当前字符化的值。更多高级表单项的实现会返回多个名值对

注意从这个方法返回的值不能确保是成功通过校验了的validated.

Returns

  • Object

    提交参数名字与值的映射。每一个值都应为一个字符串或者如果这个参数名含有多个值应当是一个字符串数组。 如果提交没有参数也可以返回null

Ext.form.field.Field
( ) : Object

返回表单项的当前数据值。返回的值类型与特定的表单项有关(例如. 对于Ext.form.field.Date返回Date 对象)

Returns

( Object config )private

根据名称判断配置项是否存在

Parameters

( Object config ) : Objectprotected
这个类的初始化配置。典型例子: Ext.define('My.awesome.Class', { // 这是默认配置 config: { name: 'Awesome', isAwes...

这个类的初始化配置。典型例子:

Ext.define('My.awesome.Class', {
    // 这是默认配置
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome' 超级棒

Parameters

Returns

  • Object

    mixins 混入原型 键-值对

Ext.form.field.Field
( )

初始化这个Field mixin的当前实例。使用这个mixin的组件在他们自己初始化的过程中将会调用这个方法

Ext.form.field.Field
( )

基于初始化配置初始化这个表单项的值

Ext.form.field.Field
( ) : Boolean

如果表单项的值不同于originalValue返回true。 如果表单项禁用了则返回false。

注意 如果其表单form 配置了trackResetOnLoad 则当值通过Ext.form.Basic.setValues载入的时候,

Returns

  • Boolean

    True 如果表单项的值不同于originalValue(并且没有被禁用) false otherwise.

Ext.form.field.Field
( Object value1, Object value2 ) : Boolean

返回2个表单项values是否逻辑相等。表单项实现也许会重写这个方法用于给特定的表单项数据类型提供自定义的逻辑比较。

Parameters

  • value1 : Object

    第1比较的值

  • value2 : Object

    第2个比较的值

Returns

  • Boolean

    True如果值相等,false如果不等

Ext.form.field.Field
( Object value1, Object value2 ) : Booleanprivate

返回2个值是否逻辑相等。 与isEqual类似,然而null和undefined值将会视为空字符串。

Parameters

  • value1 : Object

    第1个比较的值

  • value2 : Object

    第2个比较的值

Returns

  • Boolean

    True如果值相等,false如果不等

Ext.form.field.Field
( ) : Boolean
返回这个表单项是否为file upload表单项。如果返回true,表单对于通过AJAX提交表单时 会使用特殊的技术。详情参见Ext.form.Basic.hasUpload。如果返回true,extractFileInput实现会用...

返回这个表单项是否为file upload表单项。如果返回true,表单对于通过AJAX提交表单时 会使用特殊的技术。详情参见Ext.form.Basic.hasUpload。如果返回true,extractFileInput实现会用于 提取相应的file 输入元素。 Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for submitting the form via AJAX. See Ext.form.Basic.hasUpload for details. If this returns true, the extractFileInput method must also be implemented to return the corresponding file input element.

Returns

Ext.form.field.Field
( ) : Boolean
通过validating表单项的当前值,返回当前表单项是否有效 validitychange不会触发。如果你想触发事件,则使用validate方法。 ...

通过validating表单项的当前值,返回当前表单项是否有效 validitychange不会触发。如果你想触发事件,则使用validate方法。 Note:disabled表单项总是视为有效的。

子类实现建议这个方法不要有其他的副作用,如触发信息错误显示

Returns

  • Boolean

    True 如果值有效, 否则 false

Ext.form.field.Field
( String/String[] errors )

关联一个或多个错误信息到这个表单项上。使用这个mixin的组件应当实现这个方法用于更新组件的渲染以显示信息。

Note: 如果值确实通过校验了,这个方法不会引起表单项的validate或者isValid方法的调用以返回false。 简单的标记表单项为无效不会阻止通过Ext.form.action.Submit.clientValidation的提交

Parameters

( Object name, Object mixinClass )private

内部使用混入预处理器(mixins pre-processor)

Parameters

Ext.form.field.Field
( Object newVal, Object oldVal )private

当表单项值变化调用此函数。如果validateOnChange启用,执行校验并激活脏数据检查。

Parameters

( Object names, Object callback, Object scope )private

更新配置项

Parameters

Ext.form.field.Field
( Boolean isDirty )private

当表单项脏状态改变时调用

Parameters

( Object fn, Object scope )private

扩展事件

Parameters

Ext.form.field.Field
( )

重置表单项的当前值为最初加载的值并清除验证信息。 查看{@linkExt.form.Basic}.trackResetOnLoad

Ext.form.field.Field
( )
重置表单项的originalValue属性以匹配当前的value。如果表单的 trackResetOnLoad 设置为true,将由 Ext.form.Basic.setValues调用 ...

重置表单项的originalValue属性以匹配当前的value。如果表单的 trackResetOnLoad 设置为true,将由 Ext.form.Basic.setValues调用

( Object config, Object applyIfNotSet )private

设置配置项

Parameters

Ext.form.field.Field
( Object value ) : Ext.form.field.Field

设置数据值到这个表单项上并且运行变化检测和验证。

Parameters

Returns

获取从该对象被实例化的类的引用。 请注意不同于 self, this.statics()是独立的作用域,无论this是否运行,总是返回其中的调用类。

Ext.define('My.Cat', {
    statics: {
        totalCreated: 0,
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        var statics = this.statics();

        alert(statics.speciesName);     // 总是等于'Cat',无论'this'是什么,
                                        // 相当于:My.Cat.speciesName

        alert(this.self.speciesName);   // 依赖 'this'

        statics.totalCreated++;
    },

    clone: function() {
        var cloned = new this.self;                      // 依赖 'this'

        cloned.groupName = this.statics().speciesName;   // 相当于: My.Cat.speciesName

        return cloned;
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',

    statics: {
        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
    },

    constructor: function() {
        this.callParent();
    }
});

var cat = new My.Cat();                 // alerts 'Cat', 然后提示 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3

Returns

配置扩展

Ext.form.field.Field
( ) : Boolean
通过validating表单项的当前值,返回当前表单项是否有效 自从上次验证后如果这个有效性有变化触发validitychange事件 Note:disabled表单项总是视为有效的。 ...

通过validating表单项的当前值,返回当前表单项是否有效 自从上次验证后如果这个有效性有变化触发validitychange事件 Note:disabled表单项总是视为有效的。

子类实现允许这个方法有其他的副作用,如触发信息错误显示 想要验证实现没有副作用,使用isValid.

Returns

  • Boolean

    rue 如果值有效, 否则 false

Defined By

Static Methods

( Object members )static

方法/属性添加到这个类的原型。

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Parameters

添加/重写这个类的静态属性。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Parameters

Returns

( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
这个类的原型借用另一个类的成员 Ext.define('Bank', { money: '$$$', printMoney: function() { alert('$$$$$$$'); } ...

这个类的原型借用另一个类的成员

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Parameters

Returns

创建这个类的新实例。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

所有参数传递至类的构造。

Returns

创建现有的原型方法的别名。例如: Ext.define('My.cool.Class', { method1: function() { ... ...

创建现有的原型方法的别名。例如:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Parameters

以字符串格式,获取当前类的名称。

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Returns

( Object members ) : Ext.Basedeprecatedstatic

重写这个类的成员。通过callParent重写的方法可以调用。

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫!"
                          // alerts "I'm a cat!我是一只猫!"
                          // alerts "Meeeeoooowwww"

在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

以上完成了相同的结果,但可以由Ext.Loader重写, 其目标类和生成过程中,可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。

This method has been deprecated since 4.1.0

使用 Ext.define 代替

Parameters

  • members : Object

    添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。

Returns

Defined By

Events

Ext.form.field.Field
( Ext.form.field.Field this, Object newValue, Object oldValue, Object eOpts )

Fires when the value of a field is changed via the setValue method.

Parameters

Ext.form.field.Field
( Ext.form.field.Field this, Boolean isDirty, Object eOpts )

Fires when a change in the field's isDirty state is detected.

Parameters

Ext.form.field.Field
( Ext.form.field.Field this, Boolean isValid, Object eOpts )

Fires when a change in the field's validity is detected.

Parameters