Alternate names
Ext.form.RadioHierarchy
Ext.BaseExt.AbstractComponentExt.ComponentExt.form.field.BaseExt.form.field.CheckboxExt.form.field.RadioInherited mixins
Requires
Files
单个radio表单项。和Checkbox相似，但是会自动保证，具有同一个name属性的单选按钮在同一时间内只有一个按钮 会被选中。
除了 标准的label 之外, radio 按钮 具有一个可选择的boxLabel ，它将被放置在最接近的输入项的右边。 通过 Ext.form.RadioGroup 可以方便地将一些有关联的radio按钮进行归类。
一般来说，radio的值是boolean型的，它标识着这个radio是否被选中。
以下的值将会选中radio:
true'true''1''on'其他值将会反选radio。
除了boolean值之外, 你也可以指定一些特殊的值 inputValue。 当form 提交时，它将作为参数发送。这将用在你给一些单选按钮设置了相同的 name值的时候。
Ext.create('Ext.form.Panel', {
title : 'Order Form',
width : 300,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [
{
xtype : 'fieldcontainer',
fieldLabel : 'Size',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'M',
name : 'size',
inputValue: 'm',
id : 'radio1'
}, {
boxLabel : 'L',
name : 'size',
inputValue: 'l',
id : 'radio2'
}, {
boxLabel : 'XL',
name : 'size',
inputValue: 'xl',
id : 'radio3'
}
]
},
{
xtype : 'fieldcontainer',
fieldLabel : 'Color',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'Blue',
name : 'color',
inputValue: 'blue',
id : 'radio4'
}, {
boxLabel : 'Grey',
name : 'color',
inputValue: 'grey',
id : 'radio5'
}, {
boxLabel : 'Black',
name : 'color',
inputValue: 'black',
id : 'radio6'
}
]
}
],
bbar: [
{
text: 'Smaller Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if L is selected, change to M
if (radio2.getValue()) {
radio1.setValue(true);
return;
}
//if XL is selected, change to L
if (radio3.getValue()) {
radio2.setValue(true);
return;
}
//if nothing is set, set size to S
radio1.setValue(true);
}
},
{
text: 'Larger Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if M is selected, change to L
if (radio1.getValue()) {
radio2.setValue(true);
return;
}
//if L is selected, change to XL
if (radio2.getValue()) {
radio3.setValue(true);
return;
}
//if nothing is set, set size to XL
radio3.setValue(true);
}
},
'-',
{
text: 'Select color',
menu: {
indent: false,
items: [
{
text: 'Blue',
handler: function() {
var radio = Ext.getCmp('radio4');
radio.setValue(true);
}
},
{
text: 'Grey',
handler: function() {
var radio = Ext.getCmp('radio5');
radio.setValue(true);
}
},
{
text: 'Black',
handler: function() {
var radio = Ext.getCmp('radio6');
radio.setValue(true);
}
}
]
}
}
]
});
如果指定，则当第一次渲染时，该组件会显示这个值作为其主动消息。 使用setActiveError或unsetActiveError在组件创建之后更改它。
模板，用于把传递到setActiveErrors错误消息的数组格式化成一个HTML字符串。 默认情况下，渲染每个消息作为一个无序列表中的一项。
Defaults to: ["<tpl if="errors && errors.length">", "<ul><tpl for="errors"><li>{.}</li></tpl></ul>", "</tpl>"]
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label文本之后。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label文本之后。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
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，组件的渲染数据为上下文服务。
一个标签名或者 DomHelper 描述，用来创建 Element ，它将封装当前组件。
一般情况下你不必指定此值。 对于基类 Ext.Component 和 Ext.container.Container, 此值默认为 'div'。 越复杂的sencha类使用越复杂的DOM结构， 这些是由它们自己的renderTpl方法创建的。
这被设计用来允许开发者创建针对特定应用的 工具组件，这些组件由不同的DOM元素封装而成。 示例用法:
{
xtype: 'component',
autoEl: {
tag: 'img',
src: 'http://www.example.com/example.jpg'
}
}, {
xtype: 'component',
autoEl: {
tag: 'blockquote',
html: 'autoEl is cool!'
}
}, {
xtype: 'container',
autoEl: 'ul',
cls: 'ux-unordered-list',
items: {
xtype: 'component',
autoEl: 'li',
html: 'First list item'
}
}
是否调整组件的body区域，给'side'或'under'的错误消息留出空间。
Defaults to: true
设置 True 组件创建时自动显示. 这个配置项可能仅仅用于 floating 组件或者组件使用 autoRender. 默认为false.
Defaults to: false
应用到body内容元素的CSS类。
Defaults to: "x-form-item-body"
一个基础 CSS 类, 它将被添加到当前的组件元素上. 这个将被传给这个组件内部的一个元素, 比如 Panel 的 body 将会得到一个 x-panel-body 的类. 这意味着你创建一个子面板, 你想让它得到所有的面板造型元素和主体, 你舍弃 baseCls x-panel 并使用 componentCls 为组件添加特定的造型.
Defaults to: "x-component"
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label文本之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label文本之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素之前。如果使用了XTemplate，则组件的
subTpl data将会成为模板中显示的内容。
可选的字符串或XTemplate配置为在标签文本前标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在标签元素前域标记插入。
如果使用XTemplate，组件的渲染数据为上下文服务。
可选的字符串或XTemplate配置为在subTpl markup前标记插入域。
如果使用XTemplate，组件的渲染数据为上下文服务。
一个可选的文本标签，它显示在checkbox的旁边。 它显示在checkbox的前面或者是后面，这取决于 boxLabelAlign的配置。
boxLabel展示在checkbox旁边的相对位置。可使用'before' 和'after'。
Defaults to: "after"
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素 (作为属性)之上。如果使用了XTemplate，则组件的
subTpl data 将会成为模板中显示的内容。
一个可选的字符串或者是XTemplate配置，添加在表单项的
box label 元素 (作为属性)之上。如果使用了XTemplate，则组件的
subTpl data 将会成为模板中显示的内容。
添加在boxLabel元素上的样式。
Defaults to: "x-form-cb-label"
以毫秒为单位为checkChangeEvents定义超时缓冲 默认为50毫秒
Defaults to: 50
用于监听表单项中的input element事件名称列表，将用于检查表单项值的改变。 如果检测到其中之一改变了，change event将会被触发 如果validateOnChange配置项设置成enabled，将跟随着出发验证
默认在Internet Explorer中为['change', 'propertychange']，在其他浏览器为['change', 'input', 'textInput', 'keyup', 'dragdrop']。这将在大多数支持的浏览器中捕获表单项值的变化。在当前版本仅仅的特殊情况为如下：
-Safari 3.2或以前的版本：在textareas中通过上下文菜单使用cut/paste命令还有拖动文本到textareas中 -Opera 10 and 11：拖动文本到text fields and textareas，还有在text fields and textareas中通过上下文菜单进行剪切 - Opera 9:和Opera 10 and 11一样，此外在text fields and textareas中从上下文菜单进行粘贴也不行。
如果需要在上述这些特殊情况下确保及时的变更通知，可以在一个定时器中不断调用 checkChange方法,例如使用Ext.TaskManager，或者如果这个表单项在 Ext.form.Panel中，可以使用FormPanel的Ext.form.Panel.pollForChanges配置 自动建立一个任务。
当checkbox是选中状态时，附加在组件主要元素上的CSS类。
Defaults to: "x-form-cb-checked"
一个描述组件的子元素的数组. 数组的每个成员是这些属性的对象:
name - 组件的子元素的属性名称.itemId - ID结合组件的ID是子元素的ID.id - 子元素的id.如果数组成员是字符串, 它相当于 { name: m, itemId: m }.
例如, 组件呈现一个标题和正文:
Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 id="{id}-title">{title}</h1>',
'<p>{msg}</p>',
],
renderData: {
title: "Error",
msg: "Something went wrong"
},
childEls: ["title"],
listeners: {
afterrender: function(cmp){
// After rendering the component will have a title property
cmp.title.setStyle({color: "red"});
}
}
});
一个更灵活的, 但是有些慢, 方法是 renderSelectors.
CSS 类被添加到组件根级别元素通过样式区别它.
CSS 类被添加到组件根级别元素通过样式区别它.
一个组件的内部元素的尺寸大小和定位是由组件的布局管理器决定的, 组件的布局管理器掌管着被衡量组件的内部结构.
一般来说, 开发者不会使用这个配置, 因为所有给定的需要制定尺寸大小的内部元素的组件 (比如 input fields) 是由其自身的组件布局管理器来决定的.
默认布局管理 将被用于基本类 Ext.Component 的实例上, 这个类将会简单地通过 setSize 方法来设置组件的封装元素的高度和宽度.
指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容.
此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中, 使它成为该组件的内容.
注意:
指定的HTML元素将被附加到组件的layout元素中, 在所有配置的 HTML 被插入之后, 并且, 这样的话, 在 render 事件被触发时, document中将不再包含此元素.
指定的 HTML 元素将不会参与所有的可能使用的 layout
过程. 它仅是 HTML 而已. 布局操作是在
items 上进行的.
添加 x-hidden 或者 x-hide-display 类, 以防在内容渲染到panel时发生闪烁.
当表单项修改过后使用的CSS类The CSS class to use when the field value .
Defaults to: "x-form-dirty"
当组件被禁用添加的CSS 类. 默认为 'x-item-disabled'.
Defaults to: "x-item-disabled"
指定正确的使用组件的封装元件的拖动手柄进行floating 浮动组件拖动的。
这也可以被指定作为配置对象被实例化的ComponentDragger 执行拖动。
例如，创建一个组件，只能将它拖动周围使用某些内部元件的句柄， 使用委托选项：
new Ext.Component({
constrain: true,
floating: true,
style: {
backgroundColor: '#fff',
border: '1px solid black'
},
html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
draggable: {
delegate: 'h1'
}
}).show();
Defaults to: false
Overrides: Ext.AbstractComponent.draggable
应用到错误消息元素的CSS类。
Defaults to: "x-form-error-msg"
一个额外的CSS类，被应用在body上下文元素fieldBodyCls之上。 .
Defaults to: "x-form-cb-wrap"
Overrides: Ext.form.Labelable.fieldBodyCls
域标签。它被附加了labelSeparator， 其位置和大小被labelAlign、 labelWidth和labelPad配置确认。
应用到field input element上面可选的CSS样式。 对于Ext.Element.applyStyles方法需要为有效的参数 默认为undefined.在初始化后也可参见setFieldStyle方法来改变样式
表单项主体内容配置项.
Defaults to: ["<input id="{id}" type="{type}" {inputAttrTpl}", " size="1"", "<tpl if="name"> name="{name}"</tpl>", "<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>", "<tpl if="placeholder"> placeholder="{placeholder}"</tpl>", "<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>", "<tpl if="readOnly"> readonly="readonly"</tpl>", "<tpl if="disabled"> disabled="disabled"</tpl>", "<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>", "<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>", " class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>", {disableFormats: true}]
指定为'true'的时候浮动组件以外的文档流中使用CSS绝对定位。
Ext.window.Window Window and Ext.menu.Menu Menu 组件默认情况下是浮动的.
浮动的组件编程方式将自己rendered注册到全局ZIndexManager
一个浮动的组件，也可以使用一个容器作为一个子项。这只是允许的浮动组件， This just allows the floating Component to seek a ZIndexManager by examining the ownerCt chain.
当配置为浮动，组件获取，在渲染时，一个ZIndexManager管理堆栈相关的浮动元件。 ZIndexManager带来一个单一的浮动组件组件toFront的方法被调用时，它的堆栈的顶部。
ZIndexManager通过遍历链找到一个被继承的ownerCt这本身就是浮动的。 这使子类浮动容器组件（如在一个窗口一个ComboBox下拉）可以有它的zIndex的管理 相对于任何同级节点，但始终高于浮动被继承的对象。
如果没有父类的浮动定义，浮动组件注册本身的默认 ZIndexManager.
在容器的布局，浮动组件不参与。正因为如此，他们都不会呈现，直到您明确。show
渲染后，父类浮动引用将被删除，该属性设置为找到的父类容器floatParent。 如果没有浮动的父类容器floatParent的属性 不会被删除.
Defaults to: false
Overrides: Ext.AbstractComponent.floating
应用到最外层元素的CSS类，标志它主动参与表单域的布局。
Defaults to: "x-form-item"
设置为 'true' 在组件渲染时在组件周围提供一个圆角边框.
当运行在过时的, 或者不符合规范的浏览器如微软的IE 9 浏览器之前不支持圆角, 这才是必要的配置.
由该框架采取了额外的空间，可从只读属性 frameSize.
当checked值改变的时候调用的函数(可以用来代替change 事件).
The Checkbox being toggled.
checkbox是否选中的新状态
当设置为true，如果fieldLabel为空，则标签元素（fieldLabel和labelSeparator）会被自动隐藏。 如果设置为false，会导致空标签元素被渲染，预留空格； 这对于想要在同一个表单里有一个没有标签的域于其他有标签的域对齐很有用。
如果想无条件隐藏标签，即使一个非空的fieldLabel配置，那么设置hideLabel配置为true。
Defaults to: true
设置为true时，完全隐藏标签元素（fieldLabel和labelSeparator）。 参考hideEmptyLabel，它控制是否空间会被保留为空fieldLabel。
Defaults to: false
一个字符串，它指定了这个组件的封装DOM元素会被隐藏. 值可以是:
'display' : 使用 display: none 样式组件将被隐藏.'visibility' : 使用 visibility: hidden 样式组件将被隐藏.'offsets' : 组件定位在文档的可见区域之外将被隐藏.
当一个隐藏的组件必须保持可测量的这是有用的. 使用 display 将导致一个
组件不可测.Defaults to: "display"
当前组件实例唯一的ID。
它不应该是必要的，除了在你的应用程序使用这个配置单例对象。 用一个 id 创建的组件可以使用 Ext.getCmp 进行全局访问。
代替使用分配的id, 使用 itemId 配置项, 和 ComponentQuery 它提供了基于选择搜索Sencha组件类似于DOM查询。 Container 类包含 快捷方法 通过选择器查询子组件。
注意这个ID也将被用于包含HTML元素，在页面上呈现此组件的元素的ID。 这允许你写的基于ID的CSS规则让组件的特定实例风格独特， 也可以把这个组件作为父组件, 使用它的 id 来查找子元素。
注意: 为了避免与唯一的id 产生重复，请参见 itemId.
注意: 如需访问一个元素的容器，参见 ownerCt.
默认为 auto-assigned id.
可选的 string or XTemplate 配置用于在input元素的标签中插入
如果使用XTemplate subTpl data作为数据上下文
可选的 string or XTemplate 配置用于在input元素的标签中插入
如果使用XTemplate subTpl data作为数据上下文
该ID号会被传入到生成的输入DOM元素中，默认ID号是自动生成的。如果手动配置该项，必须确保此ID在文档中是唯一的。
该ID号会被传入到生成的输入DOM元素中，默认ID号是自动生成的。如果手动配置该项，必须确保此ID在文档中是唯一的。
输入类型 输入栏的类型属性---例如radio,text,password,file。HTML5支持的输入(url, email, etc.)的扩展类型中也支持。 但是在老的浏览器中这些类型会变成'text'.
当前对于'password'输入必须使用password inputType -- 没有单独为password创建单独的组件。 可以使用Ext.form.field.File用于创建单独自定义文件上传表单项。但是如果想创建一个没有样式的输入，可以用Base类型,inputType为'file'
Defaults to: "text"
这个值被当作是一般的input元素的值，当form提交时它被作为一个参数提交。
Defaults to: "on"
用来标记组件无效的CSS类。
Defaults to: "x-form-invalid"
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
Defaults to: "The value in this field is invalid"
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用。
代替 id 与 Ext.getCmp, 使用 itemId 与
Ext.container.Container.getComponent 将会获得
itemId's 或者 id's。 既然 itemId's 是一个到容器内部MixedCollection的索引，
itemId 的作用域就被限定在容器之内 -- 避免与 Ext.ComponentManager 产生潜在的冲突，
它需要一个 唯一 id.
var c = new Ext.panel.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
{
itemId: 'p1',
title: 'Panel 1',
height: 150
},
{
itemId: 'p2',
title: 'Panel 2',
height: 150
}
]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
也可以参见 id, Ext.container.Container.query, Ext.container.Container.down 和
Ext.container.Container.child.
注意: 需要访问一个item的容易请参见 ownerCt.
控制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}]
一个配置对象，包含一个或多个事件处理函数，在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象， 一次添加多个事件处理函数。
Ext JS 组建的DOM事件
虽然一些Ext JS组件类输出选定的DOM事件（例如"click"、"mouseover"等),
但是这只能通过添加额外的值（如果能）。例如，DataView的itemclick传递被单击的节点。为了通过Component的子元素直接访问DOM事件，
我们需要指定element选项来标识要
添加DOM监听器的Component属性：
new Ext.panel.Panel({
width: 400,
height: 200,
dockedItems: [{
xtype: 'toolbar'
}],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
});
一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容.
一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容.
错误消息文本应该显示的位置。必须是下列值之一：
qtip 当用户鼠标悬停在该域之上时显示包含了消息的迅速提示。这是默认的。
Ext.tip.QuickTipManager.init必须被这个设置调用以起作用。
title 显示消息在默认浏览器title属性弹出。
under 在域下方添加一块包含了错误消息的div。side 添加一个错误图标在域的右边，鼠标悬停上面时弹出显示消息。none 不显示任何错误消息。这可能对如果要实现自定义错误显示有用。[element id] 直接把错误消息添加到一个指定元素的innerHTML。Defaults to: "qtip"
表单项名称。当使用form submit()方法其中包含这个表单项时，name作为参数名称。 如果没有指定name配置项,使用inputId作为其值。 为了在表单提交时不包括这个字段,设置submitValue为false
Overrides: Ext.form.field.Field.name
当鼠标移到该元素, 一个可选的额外的CSS类将被添加到该组件的元素, 并在鼠标移出后删除. 这可能对添加自定义的 'active' 或者 'hover' 样式的组件有用 或任何其子组件使用标准的CSS规则.
Defaults to: ""
可能的值有:
* 'auto' 自动启用水平滚动条(水平溢出:'auto')
* 'scroll' 始终启用水平滚动条(水平溢出:'scroll')
默认的水平溢出是'hidden',不能这样指定autoScroll.又自动又始终
可能的值有:
* 'auto' 自动启用水平滚动条(水平溢出:'auto')
* 'scroll' 始终启用水平滚动条(水平溢出:'scroll')
默认的水平溢出是'hidden',不能这样指定autoScroll.又自动又始终
可能的值有:
* 'auto' 自动启用自动垂直滚动条(垂直溢出:'auto')
* 'scroll' 始终启用垂直滚动条(垂直溢出:'scroll')
默认的垂直溢出是'hidden',不能这样指定autoScroll.又自动又始终
可能的值有:
* 'auto' 自动启用自动垂直滚动条(垂直溢出:'auto')
* 'scroll' 始终启用垂直滚动条(垂直溢出:'scroll')
默认的垂直溢出是'hidden',不能这样指定autoScroll.又自动又始终
一个对象或者对象数组, 组件将提供自定义功能. 一个有效的插件唯一的要求是包含一个 init 方法, 接收一个 Ext.Component 类型参数. 当组件被创建时, 如果有可用的插件, 组件将会调用每个插件的 init 方法, 并将自身的引用作为方法参数传递给它. 然后, 每个插件就可以调用方法或者响应组件上的事件, 就像需要的那样提供自己的功能.
为true时，禁止显示任何这个对象上的错误消息。
Defaults to: false
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。
这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； * * * 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。
Defaults to: false
当表单项为readOnly时，应用到组件主体元素的CSS样式.
Defaults to: "x-form-readonly"
所使用的数据 renderTpl 除了以下属性值的组件:
参见 renderSelectors 和 childEls 用法示例.
所使用的数据 renderTpl 除了以下属性值的组件:
参见 renderSelectors 和 childEls 用法示例.
一个对象其中包含指定DomQuery 选择器确定创建的子元素渲染过程的属性.
在组件的内部结构呈现根据 renderTpl, 这个对象遍历,
找到的元素作为属性添加到组件使用 renderSelector 属性名称.
例如, 一个的组件渲染标题和描述到它的元素:
Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});
对于一个更快, 但弹性较差, 替代方案达到相同的最终结果 (渲染后组件的子元素属性), 参见 childEls 和 addChildEls.
指定元素的id, 一个DOM元素或现有的元素，这个组件将被渲染成.
注意:
不使用此配置项，如果该组件是一个Container的子元素. 它的职责是 Container的 layout manager 渲染和管理其子项.
当使用此配置, 调用 render() 不是必须的.
也可参见 render .
一个 XTemplate 用于创建此组件的封装内的内部结构 Element.
你通常不需要进行设置. 对基类 Ext.Component 和
Ext.container.Container, 默认值为 null 这意味着它们最最初将被呈现没有内部结构;
他们渲染 Element 为空. 很多专用的ExtJS和Touch
类使用更复杂的DOM结构类, 提供自己的模板定义.
这是为了允许开发者创建应用程序特定的效用与定制的内部结构的组成部分.
在渲染时候, 任何创建的子元素可以自动导入对象属性的使用 renderSelectors 和 childEls 配置项.
Defaults to: "{%this.renderContent(out,values)%}"
Ext.resizer.Resizer 只有在自动大小为true的情况下,配置字符串才有效
Defaults to: "all"
定义浮动组件是否应该有阴影效果. 设置为 true 则自动创建一个 Ext.Shadow 对象, 或者设为string类型的值,用于指定 阴影的显示模式 Ext.Shadow.mode. 设置为 false 则禁用阴影.
Defaults to: "sides"
阴影效果偏移的像素值.
阴影效果偏移的像素值.
如果此属性是一个数字, 解释如下:
false.true.在 CSS 方面, shrink-wrap 宽度类似于 inline-block 元素而不是类似一个 block-level 元素. 有些容器布局总是 shrink-wrap 他们的子元素, 忽略这个属性 (e.g., Ext.layout.container.HBox, Ext.layout.container.VBox, Ext.layout.component.Dock).
Defaults to: 2
一组事件，当被触发时，应该触发这个对象去保存它的state。默认是none。
stateEvents可以是任何类型的事件支持的对象，包括浏览器或客户端事件。
(例如, ['click', 'customerchange']).
参见 stateful 对于一个解释的保存和恢复的state。
一个试图从启动时保存的state恢复到state的内部属性状态的标志。 对象必定有一个stateId为state被管理。
自动生成的id不能保证稳定的跨页面加载和不能被指望来保存和恢复相同的状态对象。
为state保存工作，state管理的提供者必须被设置为一个实现Ext.state.Provider， 并且覆盖了set和get 方法保存和召回name/value对。
一个内置的实现，Ext.state.CookieProvider是可用的。
设置state提供的当前页面：
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //从现在开始后的7天
}));
当stateEvents中被列出的事件被触发时， 一个stateful对象试图去保存state。
为了保存state，stateful对象首先序列化它的state通过调用getState。
state只有在最初配置，并改变了配置的值， 组件基类来实现{ @link # getState }来保存它的宽度和高度。
Panel类保存它折叠的state除了那个。
Grid类保存它的列state除了它超类的state。
假如有更多的应用state要保存，开发者必须提供一个实现首先 调用超类的方法去继承上面的行为，然后注入新的属性到返回的对象。
通过getState得到的值被传递给Ext.state.Manager.set， 使用配置的Ext.state.Provider，通过stateId来保存对象键。
在构造过程中，stateful对象试图通过调用Ext.state.Manager.get 传送stateId修复它的状态。
作为传递给applyState的对象。默认实现applyState 简单地复制属性的对象，但开发者可以覆盖这个支持更复杂的应用程序状态的恢复。
您可以执行额外的处理状态保存和恢复通过附加处理程序到beforestaterestore， staterestore，beforestatesave和statesave事件。
Defaults to: false
自定义风格规范适用于该组件的元素. 应该是Ext.Element.applyStyles的一个有效参数.
new Ext.panel.Panel({
title: 'Some Title',
renderTo: Ext.getBody(),
width: 400, height: 300,
layout: 'form',
items: [{
xtype: 'textarea',
style: {
width: '95%',
marginBottom: '10px'
}
},
new Ext.button.Button({
text: 'Send',
minWidth: '100',
style: {
marginBottom: '10px'
}
})
]
});
当你设置 styleHtmlContent 为 true 的时候, 配置的样式类添加到目标的内容区域.
Defaults to: "x-html"
如果设置为 true，就自动地将这个html嵌入在这个组件 (body for panels) 的内容目标里.
Defaults to: false
即使表单项启用了，设置为false将防止当前表单项被submitted
Defaults to: true
一个 Ext.Template, Ext.XTemplate 或者一个字符串数字以形成一个 Ext.XTemplate.
配合 data 和 tplWriteMode 配置一起使用.
Ext.(X)Template 更新内容区域使用的方法.
参见 Ext.XTemplate.overwrite 默认模式信息.
Defaults to: "overwrite"
An array of of classNames which are currently applied to this component
Defaults to: []
Overrides: Ext.form.field.Checkbox.uncheckedValue
此项判断当表单项失去焦点时，该表单项是否需要验证。由于在表单中逐步调试表单项，即使在操作中是否使表单项以某种方式发生变化，这也会引发验证表单项。validateOnChange用法类似。
Defaults to: true
无论合适检测到表单项的值变化了，指定这个表单项是否立马验证。 如果验证导致表单项有效性的变化，一个validitychange事件将会被触发。 这允许当用户在输入时，这个表单项立马对内容的的有效性给出即时的反馈。
当设置成false，反馈不会立马得到。如果clientValidation配置项Ext.form.Basic.doAction启用了，或者这个表单项或表单手动验证了 则这个表单提交前无论怎样都会被验证。
也可参见 Ext.form.field.Base.checkChangeEvents 来控制表单项的值是检测变化的
Defaults to: true
此属性提供了一个较短的替代全类型创建对象.
使用 xtype 是最常见的方式来定义组件实例,
特别是在一个容器中. 例如,
在一个表单包含文本域的元素可以显式创建像这样:
items: [
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Foo'
}),
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Bar'
}),
Ext.create('Ext.form.field.Number', {
fieldLabel: 'Num'
})
]
但使用 xtype, 上述成为:
items: [
{
xtype: 'textfield',
fieldLabel: 'Foo'
},
{
xtype: 'textfield',
fieldLabel: 'Bar'
},
{
xtype: 'numberfield',
fieldLabel: 'Num'
}
]
当 xtype 是多个元素共有, Ext.container.AbstractContainer.defaultType
是另一种方式为所有没有明确xtype的元素明确 xtype:
defaultType: 'textfield',
items: [
{ fieldLabel: 'Foo' },
{ fieldLabel: 'Bar' },
{ fieldLabel: 'Num', xtype: 'numberfield' }
]
items 数组所有成员现在仅仅是一个"配置对象".
这些对象用于创建和配置组件的实例.
一个配置对象可以使用 Ext.widget手动实例化一个组件:
var text1 = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Foo'
});
// or alternatively:
var text1 = Ext.widget({
xtype: 'textfield',
fieldLabel: 'Foo'
});
这种转换的配置对象实例化组件完成时创建容器作为其 {Ext.container.AbstractContainer.initComponent}
的过程的一部分. 就像同一进程的一部分, items 数组
由原来的数组转换成 Ext.util.MixedCollection 示例.
你可以定义自己的 xtype 在一个自定义的 component 指定
xtype 属性在 Ext.define. 例如:
Ext.define('MyApp.PressMeButton', {
extend: 'Ext.button.Button',
xtype: 'pressmebutton',
text: 'Press Me'
});
当给一个自定义组件命名xtype应谨慎, 因为他是唯一的,
所有xtypes共享范围.
第三方组件可考虑使用一个前缀以免冲突.
Ext.define('Foo.form.CoolButton', {
extend: 'Ext.button.Button',
xtype: 'ux-coolbutton',
text: 'Cool!'
});
扩展事件
Defaults to: []
设置这个属性为 'true' 会引起 isLayoutRoot 方法返回 'true' 并且停止寻找最顶级的组件布局.
Defaults to: false
DIV Element包装组件的内容。仅在组件已被渲染后可用。
DIV Element包装组件的内容。仅在组件已被渲染后可用。
用boxLabel创建的label元素的一个引用。 只存在于组件被渲染后并且已经配置了boxLabel属性。
The number of component layout calls made on this object.
Defaults to: 0
只存在于作为容器的子项被插入的浮动组件。
浮动的组件编程方式rendered 将不会有浮动的父级属性
对于floating浮动组件是一个容器的子项，浮动上级将是拥有容器
例如，在一个窗口的下拉列表BoundList 在窗体中, 它的浮动父窗口就是窗体
See floating and zIndexManager
其中加入任何划分元件内的密封元件,以提供图形表示的宽度, 圆角边界. 参见 frame 配置.
这是包含以像素为单位的一个对象为所有四个侧面包含下面属性的组件:
Defaults to: {left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0}
顶部边框元素的像素宽度.
Defaults to: 0
右侧边框元素的像素宽度.
Defaults to: 0
底部边框元素的像素宽度.
Defaults to: 0
左侧边框元素的像素宽度.
Defaults to: 0
左右边框元素的像素总宽度
Defaults to: 0
顶部和右侧底部的像素总宽度.
Defaults to: 0
本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置， 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发，它的值是真的， 如果没有必要，就是假的。
本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次，这尤其有用。 用法:
if (this.hasListeners.foo) {
this.fireEvent('foo', this, arg1);
}
表单的输入元素，仅当表单项被渲染才可用。
表单的输入元素，仅当表单项被渲染才可用。
true 在这个类标识对象是 Component或者其子类的实例。
Defaults to: true
Flag。标志这个对象作为域是labelabe。总为true。
Defaults to: true
标记这个组件是一个Field。通常是true。
Defaults to: true
在本类中设置为true将一个对象标识为实例化的Observable或其子类。
Defaults to: true
<TD> Element，其中包含这个组件的标签Element。仅在组件已被渲染后可用。
<TD> Element，其中包含这个组件的标签Element。仅在组件已被渲染后可用。
这个组件的标签Element。仅在组件已被渲染后可用。
这个组件的标签Element。仅在组件已被渲染后可用。
创建自定义组件时这是个内部标识. 默认情况下, 此设置为 'true'
这意味着禁用时每个组件都获得一个蒙版. 组件像 FieldContainer, FieldSet, Field, Button, Tab
覆盖这个属性为 false 因为他们希望实现自定义禁用逻辑.
Defaults to: true
The original value of the field as configured in the checked configuration, or as loaded by the last
form load operation if the form's trackResetOnLoad setting is true.
Overrides: Ext.form.field.Field.originalValue
本身
获取当前类的引用，此对象被实例化。不同于 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'
Defaults to: 0
只存在于floating组件后，他们已提供。
管理该组件的ZIndexManager的参考是z-index。
ZIndexManager维护一个堆栈的浮动组件z轴， 并且还提供了一个单一模态面具下是插入模态浮动组件的可见。
浮动组件可能是 brought to the front or sent to the back of the z轴 堆栈.
这个默认为全局ZIndexManager 浮动组件 他们以编程方式访问rendered.
对于浮动floating组件被添加到一个容器中， ZIndexManager首先回收第一个父类的浮动状态, 如果没有浮动层,全局ZIndexManager就被使用
See floating and zIndexParent
只存在于被插入的floating浮动组件作为子项的容器， 有一个浮动的容器包含在其中。
对于floating浮动组件是一个容器的子项，zIndexParent将是一个浮动的顶层容器， 负责其所有浮动的子类z-index值。 它提供了ZIndexManager的Z-索引服务， 提供其所有的后代浮动组件。
浮动的组件rendered编程方式呈现， 不会有一个'zIndexParent`属性
例如，在一个窗口这是一个ComboBox的的下拉BoundList 的窗口， 它的zIndexParent，上面显示该窗口，无论被放置在窗口的z-index堆栈。
See floating and zIndexManager
Creates new Component.
The configuration options may be specified as either:
Overrides: Ext.AbstractComponent.constructor
此方法添加解析到的每个参数到 childEls 数组.
从代表此组件的顶层元素添加 CSS 类.
This method has been deprecated since 4.1
Use addCls instead.
返回此组件让方法可以链接.
添加一个 cls 到 uiCls 数组, 这也将调用 addUIClsToElement 并增加到该组件的所有元素.
Sets up the focus listener on this Component's focusEl if it has one.
Form Components which must implicitly participate in tabbing order usually have a naturally focusable element as their focusEl, and it is the DOM event of that recieving focus which drives the Component's onFocus handling, and the DOM event of it being blurred which drives the onBlur handling.
If the focusEl is not naturally focusable, then the listeners are only added if the FocusManager is enabled.
成员
向本对象添加一个事件处理函数，例如:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许传递单个参数，参数为一个 包含指定多个事件的属性的配置对象。例如:
myGridPanel.on({
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
你也能为每个事件处理函数单独指定选项：
myGridPanel.on({
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
也能使用在特定作用域的方法名。注意
必须指定scope:
myGridPanel.on({
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
被监听的事件名。 也可以是属性名字是事件名字的对象。
事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。
会被调用，
参数为fireEvent的参数加上下述options参数。
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
包含事件处理函数配置的对象。
注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。
这个对象可能包含以下任何一个属性:
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
事件触发后，调用事件处理函数延时毫秒数。
设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。
使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。
只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数
这个选项只对绑定在Components上的监听器有效。 Component的一个属性名，这个属性引用一个待添加监听器的元素
这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:
new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
组合选项
使用options参数, 可以组合不同类型的监听器：
一个延时的一次性监听器：
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
Method which adds a specified UI to the components element.
Called by the layout system after the Component has been layed out.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
容器隐藏后调用的函数
获取通过相同的回调范围和作用范围`。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
允许完成渲染之后添加行为。在这个阶段，组件的元素 根据配置已经有了样式, 已经添加了任意CSS类名， 具有配置的可见性和启用状态。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Template method called after a Component has been positioned.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
组件显示后调用
相同的参数被传递
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
将此浮动组件对齐到指定的元素(element)
要对齐的元素或者 Ext.Component. 如果此参数为组件,则其必须是一个 component 实例. 如果是一个字符串形式的id, 将被当做元素 element 的 id.
要对齐的位置 (请参考 Ext.Element.alignTo 了解更多细节).
Defaults to: "tl-bl?"
位置的偏移,格式为 [x, y]
this
在 this 这个对象上执行自定义动画.
动画方法适用于 Component 类和 Element 类. 它在指定的时间内,对this对象的特定属性进行动画.
唯一的参数是一个配置对象, 该对象定义了开始属性值, 结束属性值,以及描述时间线的属性.
当一个元素进行动画时, 下列的属性都可定义在 from, to, 以及 keyframe 这几个配置对象中:
x - 页面 X 位置,单位:像素.
y - 页面 Y 位置,单位:像素.
left - 元素的 CSS left 值. 必须指定单位(比如: "6px").
top - 元素的 CSS top 值. 必须指定单位(比如: "6px").
width - 元素的 CSS width 值. 必须指定单位(比如: "6px").
height - 元素的 CSS height 值. 必须指定单位(比如: "6px").
scrollLeft - 元素的 scrollLeft 值.
scrollTop - 元素的 scrollLeft 值.
opacity - 元素的 opacity 值. 透明度,值只能位于 0 和 1之间.
需要注意的是, 如果动画一个被 Ext Component 所使用的元素,却不以某种方式通知组件Component 元素改变过后的状态, 可能会导致错误的 Component 行为. 这是因为 Component会继续使用元素旧的状态. 想要规避这个问题, 直接对Components 特定的属性值进行动画即可(而不要动画其内部的元素).
当组件进行动画的时候, 下列的属性都可定义在 from, to, and keyframe 这几个配置对象中:
x - 组件在页面内的 X 位置,单位:像素.
y - 组件在页面内的 Y 位置,单位:像素.
left - 组件的 left 值,单位:像素.
top - 组件的 top 值,单位:像素.
width - 组件的 width 值,单位:像素.
height - 组件的 height 值,单位:像素.
dynamic - 指定为 true, 则动画的每一帧都会 更新组件的布局 (如果是容器的话).
需要注意,每次组件大小改变,立即就重新进行布局是一种昂贵的操作.请根据实际需要进行取舍
要将一个 Window 通过动画效果改变大小, 确保其内部的布局,以及所有的阴影都正确,代码如下:
myWindow = Ext.create('Ext.window.Window', {
title: 'Test Component animation',
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Left: 33%',
margins: '5 0 5 5',
flex: 1
}, {
title: 'Left: 66%',
margins: '5 5 5 5',
flex: 2
}]
});
myWindow.show();
myWindow.header.el.on('click', function() {
myWindow.animate({
to: {
width: (myWindow.getWidth() == 500) ? 700 : 500,
height: (myWindow.getHeight() == 300) ? 400 : 300,
}
});
});
基于效率和性能的考虑, 默认情况下, Window 的内部布局只在其达到 "to" 所指定的大小时才进行刷新.
如果需要动态更新 Window 的子组件, 可以指定动画的属性 dynamic: true ,
此时两个子item在动画过程中都保持其比例.
一个对象,包含动画相关的属性,这些属性包括: 指定起始状态,结束状态,以及动画的时间线 相关的值.
下面所列出的属性中,只有 to 是强制必须有的.
config的属性值包括:
一个对象,指定动画开始时的相关CSS属性值. 如果没有指定,则默认使用元素当前实际的值. 实际的属性可能受此对象前面的动画所影响. 参见下面的元素与组件动画小节.
一个对象,指定动画结束时需要达到的相关CSS属性值.
每次动画的持续时间，单位: 毫秒 milliseconds.
一个字符串值.用于描述 如何从默认的线下 变为 非线性 的速率的类型. 其值 可以 是下列英文字符串 之一:
关键帧; 此参数是一个描述在时间轴(时间线)中特定点动作属性的对象. 其包含的属性, 名称是时间轴百分比的数字,对应的值指定在这个点的动画状态.
这是一个标准的 监听器 配置对象,
可用于在beforeanimate 事件 或者 afteranimate 事件中注入行为.
this
Sets references to elements inside the component. This applies renderSelectors as well as childEls.
Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Invoked before the Component is destroyed.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
显示之前调用组件。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
泡沫起来组件/容器的层次结构，每个组件调用指定的功能。 (this)函数调用作用域，将规定的范围或当前组件。该函数的参数将提供的 args或当前组件。如果在任何时候，该函数返回false泡沫停止。
this
调用原来的方法，这是以前的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)
返回调用父类的方法的结果。
此组件上取消任何递延重点
检查表单项自从上次检查后，其值是否变化了 如果值已经改变，将做一下一些操作：
检查表单项的isDirty状态并且如果自从上次检查后改变了触发dirtychange事件
清除该表单项的任何不可用的类型/信息。
注意：如果值没有能过pass校验，该方法不会引起表单项validate 或 isValid方法，返回'true'。 所以简单清除表单项的错误不允许Ext.form.action.Submit.clientValidation的提交。
Overrides: Ext.form.field.Field.clearInvalid
移除本对象的包括受管理的监听器在内的所有监听器
移除本对象的所有受管理的监听器
克隆当前组件使用原来的配置传入到该实例的默认值。
覆盖一个新的配置包含任何属性来覆盖在克隆版本。 可以通过对这个对象的id属性，否则将产生以避免重复。
此组件克隆的克隆副本
确保plugins数组包含完全构建插件实例. 这个将所有的配置转换成他们相应的实例.
销毁组件.
Overrides: Ext.state.Stateful.destroy
Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.
When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead of the configured renderTpl. The renderTpl is invoked by this method which is injected into the framing template.
处理自动渲染。 漂浮的组件可能有ownerCt。如果要限制它们，将它们限制在 ownerCt内，并在本地管理z-index。漂浮的组件总是渲染到document.body。
将此浮动组件移入到一个限制区域.
默认情况下,此组件被限制在其父容器中, 或在其被渲染的元素中.
有两个可选的约束范围的参数:
某元素(Element) 或者此组件将被限制在其中的 Region. 默认是此浮动组件将被渲染到其中的元素.
通过调用this.getBubbleTarget()（如果存在）允许本Observable对象触发的事件沿着继承体系起泡
在Observable基类中没有实现类。
这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。
使用范例:
Ext.override(Ext.form.field.Base, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
确保组件添加到document.body。如果组件
渲染到了Ext.getDetachedBody, 组件然后被附加到document.body。
重建所有配置的位置。
设置为true运行组件的布局。
Defaults to: false
仅当实例的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.
找一个容器上面这个组件在任何级别的自定义函数。 如果传递的函数返回true，容器将被退回。
请参见up方法
自定义函数调用的参数(container, this component).
第一个容器的自定义函数返回true
使用传递过来的参数(去掉事件名，加上传递给addListener的options对象
)触发指定的事件。
通过调用enableBubble，一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。
如果任何一个事件处理函数返回false，就返回false，否则返回true。
聚焦此组件。
如果适用，true也可以选择这个组件中的文本
延迟焦点的毫秒数（true:10毫秒）。
聚焦的Component。通常的 this的组件。
一些容器可能委托焦点到的(Window可以做到这一点通过他们
的defaultFocus 的配置选项。
Forces this component to redo its componentLayout.
This method has been deprecated since 4.1.0
Use updateLayout instead.
计算对body单元格合并的值 - 单元格包含输入字段。
该字段的表结构包含4列：
Gets the bubbling parent for an Observable
The bubble parent. null is returned if no bubble target exists
私有方法,获取此浮动组件能移动的范围(x/y 偏移)
元素或者 此组件将被限制的Region.
限制的 x/y 范围
运行表单项的校验器并返回校验失败的错误信息。 校验时在内部调用，一般不会手动调用
每一个子类应当重写或者扩大返回的值以实现自己的错误信息。 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.
校验错误使用的值(默认为当前表单项的值)
对于表单项校验产生的所有错误信息;如果无错误信息返回空数组
Returns the focus holder element associated with this Component. At the Component base class level, this function returns undefined.
Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this for use by the focus method.
Containers which need to participate in the FocusManager's navigation and Container focusing scheme also need to return a focusEl, although focus is only listened for in this case if the FocusManager is enabled.
On render, reads an encoded style attribute, "background-position" from the style of this Component's element. This information is memoized based upon the CSS class name of this Component's element. Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted into the document to receive the document element's CSS class name, and therefore style attributes.
返回输入的ID给表单，如果inputId函数输入为空值，则自动生成一个ID号。
Overrides: Ext.form.Labelable.getInputId
本函数使用传递给onRender的位置参数并返回一个 DOM元素，你能在insertBefore中使用它。
索引, 元素id或者 你想把这个组件放在它前面的元素
在insertBefore中使用的DOM元素
当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.
提交参数名字与值的映射。每一个值都应为一个字符串或者如果这个参数名含有多个值应当是一个字符串数组。 如果提交没有参数也可以返回null
返回表单项的name属性。当在form submit()中包含 表单项的值时用作参数名称。
Returns the CSS style object which will set the Component's scroll styles. This must be applied to the target element.
返回一个对象, 描述如何管理这个组件的宽度和高度. 这些对象是共享的, 不应该被修改.
，此组件的 size model.
The size model for the width.
The size model for the height.
为AbstractComponent类提供的默认状态收集方法.
此方法返回尺寸设置如 flex, anchor, width 和 height 随着 collapsed
状态.
子类实现更复杂的状态应该调用父类的实现, 如果基础的状态需要保存, 要将他们的状态应用到结果.
如果组件有一个 stateId 和 他们作为 StateProvider 文档配置, 需要注意的是组件状态只会被保存.
Overrides: Ext.state.Stateful.getState
Returns an offscreen div with the same class name as the element this is being rendered. This is because child item rendering takes place in a detached div which, being not part of the document, has no styling.
当渲染fieldSubTpl时，创建和返回一个可用的数据对象。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
模版数据
获取被用来插入到外模版bodyEl的标记。对于表单项而言是实际上的输入元素。
Overrides: Ext.form.Labelable.getSubTplMarkup
This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
获取此组件的xtype注册Ext.ComponentManager。 对于列表所有可用xtypes，请看到Ext.Component 头。用法示例：
var t = new Ext.form.field.Text();
alert(t.getXType()); // alerts 'textfield'
The xtype
返回这个组件的 xtype 层次字符串, 用斜杠分隔. 所有可用的xtype列表, 参见 Ext.Component 类头部.
如果使用你自己的子类, 请注意, 组件必须注册它自己的 xtype 值以便区别于继承的xtype.
示例用法:
var t = new Ext.form.field.Text();
alert(t.getXTypes()); // alerts 'component/field/textfield'
xtype层次字符串
返回此元素当前是否有正在进行或在队列中的动画效果, 没有则返回 false.
This method has been deprecated
废弃的方法; 4.0以后使用 getActiveAnimation 替代
如果元素有正在进行的动画效果则返回 true, 否则返回 false
隐藏这个组件，将其设置为不可见使用配置的hideMode.
回调函数调用后的组件是隐藏的。
范围（本参考），其中执行回调。默认这个组件。
this
在初始化组件模板方法是一个重要的组件的初始化步骤。它的目的 是要实现Ext.Component提供任何所需的构造逻辑函数每个子类的。 在初始化组件模板被创建的类的方法，
首先会调用层次结构向上Ext.Component被称为此后与每个在InitComponent的方法。 这使得它很容易实现，如果需要的话，重载的构造函数逻辑的组件层次结构中的任何步骤。
在InitComponent方法必须包含一个调用callParent以确保父类的在InitComponent方法是传递给构造函数的called.
All的配置选项`被称为前在InitComponent，所以你可以简单地访问他们的this.someOption。
下面的例子演示了如何使用一个动态的一个按钮的文本字符串的类的实例的时候。
Ext.define('DynamicButtonText', {
extend: 'Ext.button.Button',
initComponent: function() {
this.text = new Date();
this.renderTo = Ext.getBody();
this.callParent();
}
});
Ext.onReady(function() {
Ext.create('DynamicButtonText');
});
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
这个类的初始化配置。典型例子:
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 混入原型 键-值对
初始化这个Field mixin的当前实例。使用这个mixin的组件在他们自己初始化的过程中将会调用这个方法
执行这个混合类的初始化。 组件类使用这个混合类在他们自己的初始化期间应调用这个方法。
Initialized the renderData to be used when rendering the renderTpl.
Object with keys and values that are going to be applied to the renderTpl
根据结构初始化state对象
基于初始化配置初始化这个表单项的值
如果表单项的值不同于originalValue返回true。 如果表单项禁用了则返回false。
注意 如果其表单form 配置了trackResetOnLoad 则当值通过Ext.form.Basic.setValues载入的时候，
True 如果表单项的值不同于originalValue（并且没有被禁用） false otherwise.
返回这个表单项是否为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.
Determines whether this Component is the root of a layout. This returns true if
this component can run its layout without assistance from or impact on its owner.
If this component cannot run its layout given these restrictions, false is returned
and its owner will be considered as the next candidate for the layout root.
Setting the _isLayoutRoot property to true causes this method to always
return true. This may be useful when updating a layout of a Container which shrink
wraps content, and you know that it will not change size, and so can safely be the
topmost participant in the layout run.
如果此组件的布局是挂起的, 返回 true. This can come from direct 这可能是由这个组件的布局活动直接挂起引起的 (suspendLayouts) 或者此组件容器之一的布局是挂起的.
此组件的布局被挂起返回 true.
通过表单项的validating the processed raw value值，返回该表单项的值当前是否可用。 注意：disabled 表单项是一直被当作可用的。
如果值是可用的则返回True，返之反回false。
Overrides: Ext.form.field.Field.isValid
检验此组件是否是指定的xtype. 此方法既可以检验是否是指定的 xtype 的某个子类 (default) 或者它是否直接是指定的xtype类 (shallow = true).
如果使用你自己的子类, 请注意, 组件必须注册它自己的 xtype 值以便区别于继承的xtype.
所有可用的xtype列表, 参见 Ext.Component 类头部.
示例用法:
var t = new Ext.form.field.Text();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.field.Base
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
需要为当前组件进行检测的xtype
如果为 true, 只检测组件是否是指定的xtype类型, false to 如果为false，检测组件是否是xtype继承树中的某个子类.
Defaults to: false
如果当前组件是指定xtype的子类, 返回 true, 其他返回 false.
显示一个或多个与该表单项相关的错误信息，利用msgTarget函数决定如何展示该信息， 在表单项的用户接口元素上应用invalidCls。 注意：如果值确实通过校验了，该方法不能引起表单项validate或validate方法返回'false'， 简单的标记表单项为无效不会阻止通过Ext.form.action.Submit.clientValidation的提交。
Overrides: Ext.form.field.Field.markInvalid
addManagedListener的简写方法
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
返回在树的遍历顺序的下一个节点的组件.
注意 这并不限定于同级, 如果在同级找不到匹配节点, 会遍历树 尝试找到一个匹配节点. 对比 nextSibling.
一个 ComponentQuery 选择器过滤过滤下面的节点.
下一个节点 (或者下一个匹配选择器的节点). 如果没有没有匹配的节点返回 null.
返回此组件的下一个同级组件.
随意选择下一个匹配 ComponentQuery 选择器的同级组件.
也可参考 next()
注意 这仅限于同级, 并且如果没有同级组件匹配, 返回 null . 对比
nextNode
一个 ComponentQuery 选择器过滤下面的组件.
下一个同级组件 (或者下一个匹配选择器的同级组件). 如果没有没有匹配的同级组件返回 null.
addListener的简写方法
向本对象添加一个事件处理函数，例如:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许传递单个参数，参数为一个 包含指定多个事件的属性的配置对象。例如:
myGridPanel.on({
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
你也能为每个事件处理函数单独指定选项：
myGridPanel.on({
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
也能使用在特定作用域的方法名。注意
必须指定scope:
myGridPanel.on({
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
被监听的事件名。 也可以是属性名字是事件名字的对象。
事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。
会被调用，
参数为fireEvent的参数加上下述options参数。
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
包含事件处理函数配置的对象。
注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。
这个对象可能包含以下任何一个属性:
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
事件触发后，调用事件处理函数延时毫秒数。
设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。
使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。
只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数
这个选项只对绑定在Components上的监听器有效。 Component的一个属性名，这个属性引用一个待添加监听器的元素
这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:
new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
组合选项
使用options参数, 可以组合不同类型的监听器：
一个延时的一次性监听器：
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
Method to manage awareness of when components are added to their respective Container, firing an added event. References are established at add time rather than at render time.
Allows addition of behavior when a Component is added to a Container. At this stage, the Component is in the parent Container's collection of child items. After calling the superclass's onAdded, the ownerCt reference will be present, and if configured with a ref, the refOwner will be set.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Container which holds the component
Position at which the component was added
Called when the checkbox's checked state changes. Invokes the handler callback function if specified.
Overrides: Ext.form.field.Field.onChange
允许销毁操作的行为。 调用父类的OnDestroy后，组件将被销毁。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
当表单项的脏状态变化时调用。添加/移除主要元素的dirtyCls。
Overrides: Ext.form.field.Field.onDirtyChange
Allows addition of behavior to the disable operation. After calling the superclass’s onDisable, the Component will be disabled.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Allows addition of behavior to the enable operation. After calling the superclass’s onEnable, the Component will be enabled.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
动画可能下降到目标元素。
允许行为的隐藏操作。后调用父类onHide的， 组件将被隐藏。
相同的参数被传递＃隐藏。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Called after the component is moved, this method is empty by default but can be implemented by any subclass that needs to perform custom logic after a move occurs.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Method to manage awareness of when components are removed from their respective Container, firing a removed event. References are properly cleaned up after removing a component from its owning container.
Allows addition of behavior when a Component is removed from its parent Container. At this stage, the Component has been removed from its parent Container's collection of child items, but has not been destroyed (It will be destroyed if the parent Container's autoDestroy is true, or if the remove call was passed a truthy second parameter). After calling the superclass's onRemoved, the ownerCt and the refOwner will not be present.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
Will be passed as true if the Container performing the remove operation will delete this Component upon remove.
这个组件的DOM结构创建之后调用的模板方法。
此时, 这个组件(及其所有子组件)的DOM存在， 但是它还没有布局(摆放和调整大小)。
重写这个方法的子类能在渲染时访问DOM结构。 它应该在访问组件的任何子元素之前调用父类的方法。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
包含封装本组件的元素的父元素。
本组件的父容器的子元素集合中的索引。
Allows addition of behavior to the resize operation.
Called when Ext.resizer.Resizer#drag event is fired.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
允许显示操作的行为。 父类的onShow事件后，组件将是可见的。
覆盖在子类中需要更复杂的行为。
相同的参数被传递 Gets passed the same parameters as show.
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
方法afterShow 完成后调用。
获取通过相同的回调和范围，收到的#afterShow参数。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
任何stateEvents事件被触发将调用这个方法。
返回在树的遍历顺序的前一个节点的组件.
注意 这并不限定于同级, 如果在同级找不到匹配节点, 会遍历树 以相反的方向来尝试找到一个匹配节点. 对比 previousSibling.
一个 ComponentQuery 选择器过滤过滤前面的节点.
前一个节点 (或者前一个匹配选择器的节点). 如果没有没有匹配的节点返回 null.
返回此组件的前一个同级组件.
随意选择前一个匹配 ComponentQuery 选择器的同级组件.
也可参考 prev()
注意 这仅限于同级, 并且如果没有同级组件匹配, 返回 null . 对比
previousNode
一个 ComponentQuery 选择器过滤前面的组件.
前一个同级组件 (或者前一个匹配选择器的同级组件). 如果没有没有匹配的同级组件返回 null.
对于准备 conversion和/或validation的表单项原始值，可以执行任意必要的操作。 例如，提取出忽略的字符。在基类实现中不做任何处理，如有需要进行处理可对重载此项。
未处理的字符串值。
处理过后的字符串值。
将表单项的原始值转换成复合类型，以适合于特殊的单表类型。允许控制标准化和用户输入值向单项类型适用值的转换。 例如，对于Ext.form.field.DateDate型对象，是被getValue调用。
由用户实现决定对于不能成功转换成目标类型的原始值的处理。
对于相反的转换，请参见valueToRaw。
此类没有实现转换，返回一个未处理的原始值。
转换值。
Called by Component#doAutoRender
注册一个容器配置 floating: true 同这个组件的 ZIndexManager.
组件通过这种方式添加将不参与任何的布局, 但是首次显示时以 Window 这种方法来渲染.
从指定的Observable接替选定的事件就好像事件是this触发的。
例如，如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:
this.relayEvents(this.getStore(), ['load']);
grid实例将会有一个observable的'load'事件，
这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数
可以使用this访问grid。
Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.
The test function.
从 uiCls 数组中移除一个 cls, 这也将调用 removeUIClsFromElement 并从该组件所有元素中移除它.
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
方法, 移除一个特定的 UI + uiCls 到组件元素. 这是将添加到该元素的 cls :
this.baseCls + '-' + ui
从元素中添加的 UI
Method which removes a specified UI from the components element.
Overrides the method from the Ext.form.Labelable mixin to also add the invalidCls to the inputEl, as that is required for proper styling in IE with nested fields (due to lack of child selector)
Overrides: Ext.form.Labelable.renderActiveError
重置表单项的当前值为最初加载的值并清除验证信息。 查看{@linkExt.form.Basic}.trackResetOnLoad
重置表单项的originalValue属性以匹配当前的value。如果表单的 trackResetOnLoad 设置为true，将由 Ext.form.Basic.setValues调用
继续事件的触发(见suspendEvents)。
如果事件被使用queueSuspended参数挂起, 那么所有
在事件挂起期间触发的事件将会被发送到任意监听器。
保存对象的状态到持久存储。
滚动组件target element 的元素由传入三角点，选择动画。
以下是等价的:
comp.scrollBy(10, 10, true);
comp.scrollBy([10, 10], true);
comp.scrollBy({ x: 10, y: 10 }, true);
此方法仅供 Ext.ZIndexManager 内部调用, 用来标记一个浮动组件(floating Component)或者被移动到其 zIndex 栈的顶部, 或者从其zIndex 栈的顶部被推入(pushed from the top of its zIndex stack).
如果一个 Window 被另一个 Window 所取代, 则将其停用,并隐藏它的阴影.
此方法也将触发 activate 或者 deactivate 事件,取决于具体所发生的事情.
设置为true来激活组件,设 为 false 则停用.
Defaults to: false
新的 将霸占顶端的 zIndex 位置 的活动(active)组件.
设置主动错误消息到给定字符串。这个函数用给定的字符串替换全部错误消息内容。 参考setActiveErrors，接受消息数组并依据activeErrorsTpl格式化它们。 注意，这只修改错误消息元素的文本和属性，你得调用doComponentLayout来真正修改匹配的域布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid代替。
错误消息
设置主动错误消息到错误消息的数组。消息已经使用activeErrorsTpl被格式化到一个单独的消息字符串。 参考setActiveError，它允许用一个单独的字符串设置整个错误内容。 注意，这只修改错误消息元素的文本和属性，你得调用doComponentLayout来真正修改域匹配的布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid替代。
错误消息
设置此组件在其父面板的停靠位置. 注意, 如果此组件是含有 DockLayout 的父面板的集合的一部分, 此设置才有效果.(注意, 任何面板上默认有一个 DockLayout)
this
应用一组默认配置的值到此Labelable实例。 对于每一个给定的对象，检查是否该组件配置了hasOwnProperty， 如果没有，那么他继承了其原型的默认值，我们应使用默认值。
应用到对象的默认值。
设置field input element中的CSS style。
设置组件的高度. 这个方法会触发 resize 事件.
设置的新的高度. 这可能是一种:
this
此方法允许你显示或隐藏LoadMask这个组件上。
加载LoadMask显示默认为true LoadMask构造函数将被传递给一个配置对象， 或显示一个消息字符串。隐藏当前LoadMask为false。
如果为true掩盖的targetEl此组件，而不是的this.el。
例如，设置面板上true会导致容器被屏蔽。
Defaults to: false
LoadMask 实例
设置溢出x / y的内容元素的组件.x / y的溢出值可以是任何有效的CSS溢出 （例如，“自动”或“滚动”）.默认情况下，被'隐藏'。 传递null值将清除内联样式。传递未定义将保持当前值。
The overflow-x value. overflowX溢出x的值
The overflow-y value. overflowY溢出y的值
this
设置checkbox是否选中的状态。
以下值将会选中checkbox:
true, 'true', '1', 1, or 'on', 也包括匹配inputValue的字符串。
其他值将会反选checkbox。
新的checkbox是否选中的状态
Overrides: Ext.form.field.Base.setRawValue
设置组件的宽度和高度. 此方法触发 resize 事件. 此方法可以接收单独的 width 或者 height 值作为参数,
或者你可以传递像这样的一个 size 对象: {width:10, height:20}.
设置新的宽度值. 这可以是:
{width: widthValue, height: heightValue}.undefined 保留原来的宽度不变.设置新的高度值 (如果第一个参数传递了一个size对象, 此参数没有必要传递). 这可以是:
undefined 保留原来的高度不变.this
设置单选按钮是否选中的状态，或者，如果入参是一个字符串，选中具有相同name属性的单选按钮都将使用这个指定的值。
Overrides: Ext.form.field.Checkbox.setValue
设置组件的宽度. 此方法触发 resize 事件.
设置新的宽度值. 这可以是:
this
Inject a reference to the function which applies the render template into the framing template. The framing template wraps the content.
显示此组件，使其自动解析autoRender或floating浮动，如果是'真'。
在显示之后，一个floating浮动的组分（如一个Ext.window.Window）， 被激活，并且其z-index stack的前面。
仅适用于floating组件如 Ext.window.Window或 ToolTips，或固定组件已配置浮动：true`。 组件动画从开通时的目标。
Defaults to: null
显示后的组件调用的回调函数。 只有必要的，如果指定的动画。
作用域 (this reference)，
其中执行回调。
this
显示组件在特定XY位置。 一个浮动的组件（如菜单）被定位相对如有 有用的弹出上下文菜单： Useful for popping up a context menu:
listeners: {
itemcontextmenu: function(view, record, item, index, event, options) {
Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
margin: '0 0 10 0',
items: [{
text: 'regular item 1'
},{
text: 'regular item 2'
},{
text: 'regular item 3'
}]
}).showAt(event.getXY());
}
}
获取从该对象被实例化的类的引用。 请注意不同于 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
停止所有正在运行的特效,并清空此对象内部特效队列,如果此队列包含有尚未开始执行的那些特效.
This method has been deprecated
从 4.0 开始被 stopAnimation 替代
The Element
挂起所有事件的触发。(见resumeEvents)
传true，让挂起的事件排队而不是丢弃所有挂起的事件， 这些事件将会在调用resumeEvents之后触发。
将此浮动组件置于同一 ZIndexManager 管理器所管理的所有可见元素的顶层.
如果此组件式模态(modal)的, 以比此组件只小一点的 z-index值 插入模态遮罩层.
指定为 true 来阻止此组件获得焦点.
Defaults to: false
this
配置扩展
removeListener的简写方法
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
清除主动错误消息。注意，这只清除错误消息元素的文本和属性，你得调用doComponentLayout来真正修改域匹配的布局。 如果域扩展了Ext.form.field.Base，应调用markInvalid替代。
沿着 ownerCt 查找匹配简单选择器的祖先容器.
例如:
var owningTabPanel = grid.up('tabpanel');
用来检验的简单选择器.
匹配的祖先容器 (或者 undefined 如果未找到匹配).
刷新组件的内部区域.
如果已经通过tpl为当前组件配置了一个模板, 那么将会使用此参数来装配模板. 如果没有为当前组件配置模板, 组件的内容区域将会通过 Ext.Element 进行刷新.
只有在使用 html 配置时此参数才合法.
Defaults to: false
只有在使用 html 配置时此参数才合法. 当脚本加载完成时回调函数才被执行.
Injected as an override by Ext.Aria.initialize
通过validating表单项的当前值，返回当前表单项是否有效 自从上次验证后如果这个有效性有变化触发validitychange事件 Note:disabled表单项总是视为有效的。
子类实现允许这个方法有其他的副作用，如触发信息错误显示 想要验证实现没有副作用，使用isValid.
rue 如果值有效, 否则 false
利用getErrors得到一组校验错误数组。 当发生任一错误时，它们会被传入到markInvalid中，并且返回false，否则返回true. 在之前的版本中，通过创建子类以提供处理校验的函数实现，从3.2版本起，利用重载getErrors 代替。
校验值。
如果校验通过则返回true，如果一个或多个校验失败，则返回false。
将复合类型的值转换成适合于在表单中显示的原始值。此项控制了被传入setValue的值向用户展示的方式，包括本地化。 例如，对于Ext.form.field.Date类型，它决定了一个Date对象传入到 setValue将被转化成一个字符串符以供在表单中展示。
对于相反的转换，请参见rawToValue。
基类仅仅实现了标准的字符串转换，将empty values转换成一个空的字符串。
将要转化成原始值的复合类型值。
value 转换后的值。
方法/属性添加到这个类的原型。
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 当前类
组件激活后触发.
The options object passed to Ext.util.Observable.addListener.
组件被添加到一个容器后触发.
父容器
组件的位置索引
The options object passed to Ext.util.Observable.addListener.
在组件渲染完成之后触发.
afterrender 事件在当前组件被 rendered 之后, 在为组件定义的所有afterRender方法执行之后 触发.
The options object passed to Ext.util.Observable.addListener.
组件激活前触发. 事件监听返回 false 能阻止激活的发生.
The options object passed to Ext.util.Observable.addListener.
组件失去激活前触发. 事件监听返回 false 能阻止失去激活的发生.
The options object passed to Ext.util.Observable.addListener.
组件被 destroy前触发. 在事件监听中返回 false 可以停止destroy操作.
The options object passed to Ext.util.Observable.addListener.
当调用 hide 方法组件隐藏前触发. 从事件处理返回 false 将停止隐藏.
The options object passed to Ext.util.Observable.addListener.
在组件渲染 rendered之前触发. 在事件监听器中返回 false 可以停止render操作.
The options object passed to Ext.util.Observable.addListener.
当调用 show 方法组件显示前触发. 从事件处理返回 false 将停止显示.
The options object passed to Ext.util.Observable.addListener.
在state对象被恢复之前触发。从一个事件处理程序返回false来阻止恢复。
散列值StateProvider返回的状态。 如果这个事件没有被禁止，然而state对象被传递到applyState。 默认情况下，这只是拷贝到这个对象的属性值。 重载的方法也许来提供自定义的状态恢复。
The options object passed to Ext.util.Observable.addListener.
在state对象保存到配置state的提供者之前触发。返回false来阻止保存。
state的散列值。这是通过调用getState()确定的对象。
这个方法必须由开发人员提供返回什么来代表state是必须的， 默认情况下，Ext.state.Stateful有一个null实现。
The options object passed to Ext.util.Observable.addListener.
组件失去焦点时触发.
blur event.
The options object passed to Ext.util.Observable.addListener.
触发 一次 - 组件首次布局初始化大小后触发.
The initial width
The initial height
The options object passed to Ext.util.Observable.addListener.
Fires when the value of a field is changed via the setValue method.
The new value
The original value
The options object passed to Ext.util.Observable.addListener.
组件失去激活后触发.
The options object passed to Ext.util.Observable.addListener.
在组件被 destroy 之后触发.
The options object passed to Ext.util.Observable.addListener.
Fires when a change in the field's isDirty state is detected.
Whether or not the field is now dirty
The options object passed to Ext.util.Observable.addListener.
组件被禁用后触发.
The options object passed to Ext.util.Observable.addListener.
组件被启用后触发.
The options object passed to Ext.util.Observable.addListener.
经由setActiveError，当有效错误消息改变时触发。
有效错误消息
The options object passed to Ext.util.Observable.addListener.
组件获取焦点时触发.
focus event.
The options object passed to Ext.util.Observable.addListener.
组件被隐藏后触发, 当调用 hide 方法隐藏组件后触发.
The options object passed to Ext.util.Observable.addListener.
组件移动之后触发.
新的X坐标
新的Y坐标
The options object passed to Ext.util.Observable.addListener.
当组件从一个容器中移除时触发
持有组件的容器
The options object passed to Ext.util.Observable.addListener.
在组件被 rendered 之后触发.
The options object passed to Ext.util.Observable.addListener.
在组件被调整大小之后触发. 注意在首次布局初始化大小时 不 触发. 在生命周期里, 使用 boxready 事件.
这是宽度调整后的值
这是高度调整后的值
这是原来的宽度
这是原来的高度
The options object passed to Ext.util.Observable.addListener.
当调用 show 方法组件显示后触发.
The options object passed to Ext.util.Observable.addListener.
当与导航相关的键（如箭头、tab键、Enter键、ESC键等）按下时，该事件响应。通过 Ext.util.KeyMap可以参见其它键的用法。Ext.EventObject.getKey函数确定输入键的类型，例如：
var form = new Ext.form.Panel({
...
items: [{
fieldLabel: 'Field 1',
name: 'field1',
allowBlank: false
},{
fieldLabel: 'Field 2',
name: 'field2',
listeners: {
specialkey: function(field, e){
// e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
// e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
if (e.getKey() == e.ENTER) {
var form = field.up('form').getForm();
form.submit();
}
}
}
}
],
...
});
The event object
The options object passed to Ext.util.Observable.addListener.
在state对象被恢复之后触发。
散列值StateProvider返回的状态。state对象被传递到applyState。 默认情况下，这只是拷贝到这个对象的属性值。 重载的方法也许来提供自定义的状态恢复。
The options object passed to Ext.util.Observable.addListener.
在state对象保存到配置state的提供者之后触发。
state的散列值。这是通过调用getState()确定的对象。
这个方法必须由开发人员提供返回什么代表state是必须的， 默认情况下，Ext.state.Stateful有一个null实现。
The options object passed to Ext.util.Observable.addListener.
Fires when a change in the field's validity is detected.
Whether or not the field is now valid
The options object passed to Ext.util.Observable.addListener.
Fires when this field changes its read-only status.
only flag
The options object passed to Ext.util.Observable.addListener.