Hierarchy
Ext.BaseExt.form.LabelableRequires
Mixed into
Files
一个混合类，允许组件被配置且装饰有标签和错误消息，作为表单字段的通用组件。 例如Ext.form.field.Base和Ext.form.FieldContainer用此组件让管理他们的Field布局。
注：此混合类主要是供内部包使用，大多数用户应该不需要直接使用它。 你更可能会想用导入了这个混合类的一个组件类，例如Ext.form.field.Base或Ext.form.FieldContainer。
使用这个混合类不使组在字段上有逻辑意义，这意味着它不提供有关值或验证的任何逻辑或状态， 即由有关Ext.form.field.Field混合处理。 这两个混合类可以分别被使用（例如Ext.form.FieldContainer是Labelable但是不是Field）， 或组合使用（例如Ext.form.field.Base同时继承并具有两个连接逻辑）
使用这个混合类的组件类应该使用Filed布局或者推导其正确的大小和位置根据组件的配置标签和消息。 他们还必须调用initLabelable方法在组件初期化期间来确保混合类被正确设置。
如果指定，则当第一次渲染时，该组件会显示这个值作为其主动消息。 使用setActiveError或unsetActiveError在组件创建之后更改它。
模板，用于把传递到setActiveErrors错误消息的数组格式化成一个HTML字符串。 默认情况下，渲染每个消息作为一个无序列表中的一项。
Defaults to: ["<tpl if="errors && errors.length">", "<ul><tpl for="errors"><li>{.}</li></tpl></ul>", "</tpl>"]
An optional string or XTemplate configuration to insert in the field markup
after the label text. If an XTemplate is used, the component's render data
serves as the context.
可选的字符串或XTemplate配置为在标签文本后标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在标签元素后标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在subTpl markup后标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
是否调整组件的body区域，给'side'或'under'的错误消息留出空间。
Defaults to: true
应用到body内容元素的CSS类。
Defaults to: "x-form-item-body"
可选的字符串或XTemplate配置为在标签文本前标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在标签元素前域标记插入。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在subTpl markup前标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
应用到错误消息元素的CSS类。
Defaults to: "x-form-error-msg"
扩展的CSS类，被应用到body内容元素，附加baseBodyCls。
Defaults to: ""
域标签。它被附加了labelSeparator， 其位置和大小被labelAlign、 labelWidth和labelPad配置确认。
应用到最外层元素的CSS类，标志它主动参与表单域的布局。
Defaults to: "x-form-item"
当设置为true，如果fieldLabel为空，则标签元素（fieldLabel和labelSeparator）会被自动隐藏。 如果设置为false，会导致空标签元素被渲染，预留空格； 这对于想要在同一个表单里有一个没有标签的域于其他有标签的域对齐很有用。
如果想无条件隐藏标签，即使一个非空的fieldLabel配置，那么设置hideLabel配置为true。
Defaults to: true
设置为true时，完全隐藏标签元素（fieldLabel和labelSeparator）。 参考hideEmptyLabel，它控制是否空间会被保留为空fieldLabel。
Defaults to: false
用来标记组件无效的CSS类。
Defaults to: "x-form-invalid"
控制fieldLabel的位置和对齐方式。有效值为：
Defaults to: "left"
可选的字符串或XTemplate配置为在标签文本内部（作为属性）标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
应用到标签元素的CSS类。CSS类被用来定制renderSelector和驱动域布局， 它被连字符（'-'）和labelAlign连接。 使用labelClsExtra添加附加类。
Defaults to: "x-form-item-label"
可选的添加到标签元素一个或多个附加的CSS类的字符串。默认为空。
可选的添加到标签元素一个或多个附加的CSS类的字符串。默认为空。
fieldLabel和输入域之间的像素空间的合计。
Defaults to: 5
插入到fieldLabel后面的字符。
Defaults to: ":"
直接应用到这个域的标签的CSS样式规范字符串。
直接应用到这个域的标签的CSS样式规范字符串。
fieldLabel以像素为单位的宽度。只适用于 labelAlign设置了“left”或“right”。
Defaults to: 100
渲染模板的字段装饰。 组件类用这个混合类应包括逻辑以此作为其 renderTpl 并实现getSubTplMarkup方法以生成域主体内容。
一个域的结构如下表：
如果label:align: 'left|top'：
+----------------------+------------+---------+--------------+
| Label: | InputField | sideErrorEl |
+----------------------+------------+---------+-------------+
| | underErrorEl (colspan=3) |
+-----------------------------------------------------------+
或者如果labelAlign: 'top'：
+-----------------------------------------------------------+
| labelAlign:'top' label: (colspan=3) |
+----------------------+------------+---------+-------------+
| InputField (colspan=2) | sideErrorEl |
+----------------------+------------+---------+-------------+
| underErrorEl (colspan=3) |
+-----------------------------------------------------------+
总列始数终加起来是3（即使 labelAlign: 'top'），因为当渲染到Ext.layout.container.Form布局，
只是表格的TR将被放置到表单的主TABLE中，全部兄弟列必须匹配，使他们都贴齐线。
当triggerCell或旁边错误单元格被隐藏或显示，输入单元格的合并将被重新计算，以保持正确的3行可见列数。
Defaults to: ["<tpl if="labelAlign==\'top\'">", "<tr>", "<td id="{id}-labelCell" colspan="3" style="{labelCellStyle}" {labelCellAttrs}>", "{beforeLabelTpl}", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "{afterLabelTpl}", "</td>", "</tr>", "</tpl>", "<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>", "<tpl if="labelOnLeft">", "<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>", "{beforeLabelTpl}", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "{afterLabelTpl}", "</td>", "</tpl>", "<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation" colspan="{bodyColspan}">", "{beforeSubTpl}", "{[values.$comp.getSubTplMarkup()]}", "{afterSubTpl}", "</td>", "<tpl if="msgTarget==\'side\'">", "<td id="{id}-errorEl" class="{errorMsgCls}" style="display:none" width="{errorIconWidth}"></td>", "</tpl>", "</tr>", "<tpl if="msgTarget==\'under\'">", "<tr>", "<tpl if="labelOnLeft">", "<td></td>", "</tpl>", "<td id="{id}-errorEl" class="{errorMsgClass}" colspan="{[values.labelOnLeft ? 2 : 3]}" style="display:none"></td>", "</tr>", "</tpl>", {disableFormats: true}]
错误消息文本应该显示的位置。必须是下列值之一：
qtip 当用户鼠标悬停在该域之上时显示包含了消息的迅速提示。这是默认的。
Ext.tip.QuickTipManager.init必须被这个设置调用以起作用。
title 显示消息在默认浏览器title属性弹出。
under 在域下方添加一块包含了错误消息的div。side 添加一个错误图标在域的右边，鼠标悬停上面时弹出显示消息。none 不显示任何错误消息。这可能对如果要实现自定义错误显示有用。[element id] 直接把错误消息添加到一个指定元素的innerHTML。Defaults to: "qtip"
为true时，禁止显示任何这个对象上的错误消息。
Defaults to: false
扩展事件
Defaults to: []
DIV Element包装组件的内容。仅在组件已被渲染后可用。
DIV Element包装组件的内容。仅在组件已被渲染后可用。
Flag。标志这个对象作为域是labelabe。总为true。
Defaults to: true
<TD> Element，其中包含这个组件的标签Element。仅在组件已被渲染后可用。
<TD> Element，其中包含这个组件的标签Element。仅在组件已被渲染后可用。
这个组件的标签Element。仅在组件已被渲染后可用。
这个组件的标签Element。仅在组件已被渲染后可用。
本身
获取当前类的引用，此对象被实例化。不同于 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)
返回调用父类的方法的结果。
计算对body单元格合并的值 - 单元格包含输入字段。
该字段的表结构包含4列：
这个类的初始化配置。典型例子:
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 混入原型 键-值对
执行这个混合类的初始化。 组件类使用这个混合类在他们自己的初始化期间应调用这个方法。
修改已渲染的DOM以匹配当前activeError。这只修改内容和属性，你得调用doComponentLayout来真正修改显示。
设置主动错误消息到给定字符串。这个函数用给定的字符串替换全部错误消息内容。 参考setActiveErrors，接受消息数组并依据activeErrorsTpl格式化它们。 注意，这只修改错误消息元素的文本和属性，你得调用doComponentLayout来真正修改匹配的域布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid代替。
错误消息
设置主动错误消息到错误消息的数组。消息已经使用activeErrorsTpl被格式化到一个单独的消息字符串。 参考setActiveError，它允许用一个单独的字符串设置整个错误内容。 注意，这只修改错误消息元素的文本和属性，你得调用doComponentLayout来真正修改域匹配的布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid替代。
错误消息
应用一组默认配置的值到此Labelable实例。 对于每一个给定的对象，检查是否该组件配置了hasOwnProperty， 如果没有，那么他继承了其原型的默认值，我们应使用默认值。
应用到对象的默认值。
获取从该对象被实例化的类的引用。 请注意不同于 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
配置扩展
清除主动错误消息。注意，这只清除错误消息元素的文本和属性，你得调用doComponentLayout来真正修改域匹配的布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid替代。
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
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() { ... };
});
成员
this
这个类的原型借用另一个类的成员
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 '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如：
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()
别名新方法的名称，或对象设置多个别名。 参见flexSetter
原来的方法名
以字符串格式，获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
重写这个类的成员。通过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 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类
经由setActiveError，当有效错误消息改变时触发。
有效错误消息
The options object passed to Ext.util.Observable.addListener.