Alternate names
Ext.form.VTypesHierarchy
Ext.BaseExt.form.field.VTypesFiles
这是一个单例(singleton)对象,它包含了一个常用的字段验证的函数集合并且提供一种可以创建重用的字段验证机制 下面字典校验函数是可以直接使用的:
VTypes 可以使用vtype
配置项直接用到Text Field
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Email Address',
name: 'email',
vtype: 'email' // 应用email校验规则
});
创建自定义VTypes:
// 自定义Vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.field.VTypes, {
// vtype 校验函数
time: function(val, field) {
return timeTest.test(val);
},
// vtype文本属性:当验证函数返回false显示的出错文本
timeText: 'Not a valid time. Must be in the format "12:34 PM".',
// vtype Mask 属性: 按键过滤器
timeMask: /[\d\s:amp]/i
});
上述例子中time
函数是个校验器,当表单项验证的时候会运行,
timeText
是出错文本,timeMask
用于限制输入到表单项的字符
注意Text
和Mask
作为校验函数必须以相同的名称开头。
使用自定义校验器同使用内建的校验器一样 - 仅使用校验函数的名字而已,就像在Text Field中
配置vtype
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Departure Time',
name: 'departureTime',
vtype: 'time' // applies custom time validation rules to this field
});
另一个自定义校验器的例子:
//自定义Vtype:'IPAddress'
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});
有一点很重要的要记住使用Ext.apply()意味着自定义校验函数作为属性被添加到Ext.form.field.VTypes
单例对象
如Text
和Mask
字段。
扩展事件
Defaults to: []
当alpha校验函数返回false时显示的出错文本 默认为: 'This field should only contain letters and _'
Defaults to: "This field should only contain letters and _"
应用到alphanumeric输入的按键过滤器。默认为: /[a-z0-9_]/i
Defaults to: /[a-z0-9_]/i
当alphanumeric校验函数返回false时显示的出错文本 默认为: 'This field should only contain letters, numbers and _'
Defaults to: "This field should only contain letters, numbers and _"
应用到email输入的按键过滤器。参见email方法以获取更加复杂的email验证信息。 默认为/[a-z0-9_.-@]/i
Defaults to: /[a-z0-9_\.\-@\+]/i
当校验函数返回false时显示的出错文本 默认是: 'This field should be an e-mail address in the format "user@example.com"'
Defaults to: "This field should be an e-mail address in the format "user@example.com""
本身
获取当前类的引用,此对象被实例化。不同于 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'
成员
调用原来的方法,这是以前的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 代替.
参数的参数,数组或'参数'对象
来自当前方法,例如: this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"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
这个参数, 通过当前方法得到数组或者 arguments
对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
函数用于校验email地址。记住这是一个非常基本的校验 - 如果想要一个更复杂的schema虽然这个函数可以被重写,但是完成每一个email RFC规则的校验是非常复杂的并超越了这个类的范围。 可以查看Wikipedia article on email addresses]1的校验章节获取更多的信息。这里的实现是用于 校验以下emails:
barney@example.de
barney.rubble@example.com
barney-rubble@example.coop
barney+rubble@example.com
email地址
true 如果正则测试通过, 否则false.
这个类的初始化配置。典型例子:
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' 超级棒
配置
mixins 混入原型 键-值对
获取从该对象被实例化的类的引用。 请注意不同于 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
配置扩展