Hierarchy
Ext.BaseExt.AbstractComponentExt.ComponentExt.resizer.SplitterInherited mixins
Requires
Subclasses
Uses
Files
本类实现 在箱子布局 VBox的实例之间 或者 HBox的实例之间 立刻更新他们的大小 的功能.
一个分割栏(Splitter)对象将保存所有他需要去调整大小的(可调整的)兄弟姐妹的比例(the flex ratio).
它通过设置 所有 可调整大小的同级元素的 flex 属性为像素值 来实现.
组件实际的 flex 属性的数字值将被改变, 但是所有的组件与flex相对应的 比例 将被保存下来.
分割栏可以配置为 显示中间点的 小箭头折叠工具(mini-collapse tool)指向折叠目标 collapseTarget的折叠方向.
然后分割栏调用两边面板(Panel)的 collapse 或者 expand 方法
来执行适当的操作 (取决于两边面板的折叠状态). 如果要自己创建小箭头折叠工具(mini-collapse tool),
可以配置 performCollapse: false ,但需要自己处理其折叠.
一个标签名或者 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'
}
}
设置 True 组件创建时自动显示. 这个配置项可能仅仅用于 floating 组件或者组件使用 autoRender. 默认为false.
Defaults to: false
一个基础 CSS 类, 它将被添加到当前的组件元素上. 这个将被传给这个组件内部的一个元素, 比如 Panel 的 body 将会得到一个 x-panel-body 的类. 这意味着你创建一个子面板, 你想让它得到所有的面板造型元素和主体, 你舍弃 baseCls x-panel 并使用 componentCls 为组件添加特定的造型.
Defaults to: "x-component"
一个描述组件的子元素的数组. 数组的每个成员是这些属性的对象:
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.
设置为true则允许通过双击(dblclick)来切换 collapseTarget 面板(Panel) 的 展开/折叠 状态.
Defaults to: true
描述将要折叠的面板的相对位置的字符串. 可以是 'prev' 或者 'next'.
或者是当前要折叠的面板 (Panel)对象.
小箭头折叠工具(mini-collapse tool)的方向将由此设置所决定.
注意:只有面板(Panel)可以被折叠.
Defaults to: "next"
当折叠的时候,将被添加到分割栏的CSS类. 参见 collapsible.
设置为 true 来显示分割栏的小箭头折叠工具(mini-collapse tool),其用于切换collapseTarget 面板(Panel)的折叠/展开. 默认等于面板(Panel)的设置 collapsible.
Defaults to: false
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时发生闪烁.
提供分割栏两边的组件默认的最大值(宽 或 高)
Defaults to: 1000
提供分割栏两边的组件默认的最小值(宽 或 高)
Defaults to: 40
当组件被禁用添加的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
指定为'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
设置为 'true' 在组件渲染时在组件周围提供一个圆角边框.
当运行在过时的, 或者不符合规范的浏览器如微软的IE 9 浏览器之前不支持圆角, 这才是必要的配置.
由该框架采取了额外的空间，可从只读属性 frameSize.
一个字符串，它指定了这个组件的封装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.
当没有可利用的对象引用时，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.
一个配置对象，包含一个或多个事件处理函数，在对象初始化时添加到对象。 它应该是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 实例加载组件远程内容.
当鼠标移到该元素, 一个可选的额外的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.又自动又始终
设置为 false 来阻止此分割栏的 小箭头折叠工具关联到 collapseTarget的折叠状态.
设置为 false 来阻止此分割栏的 小箭头折叠工具关联到 collapseTarget的折叠状态.
一个对象或者对象数组, 组件将提供自定义功能. 一个有效的插件唯一的要求是包含一个 init 方法, 接收一个 Ext.Component 类型参数. 当组件被创建时, 如果有可用的插件, 组件将会调用每个插件的 init 方法, 并将自身的引用作为方法参数传递给它. 然后, 每个插件就可以调用方法或者响应组件上的事件, 就像需要的那样提供自己的功能.
所使用的数据 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
一个 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: []
此属性提供了一个较短的替代全类型创建对象.
使用 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
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
在本类中设置为true将一个对象标识为实例化的Observable或其子类。
Defaults to: true
创建自定义组件时这是个内部标识. 默认情况下, 此设置为 'true'
这意味着禁用时每个组件都获得一个蒙版. 组件像 FieldContainer, FieldSet, Field, Button, Tab
覆盖这个属性为 false 因为他们希望实现自定义禁用逻辑.
Defaults to: true
此分割栏的方向. 使用HBox布局的时候为'vertical',而使用 VBox布局时为: 'horizontal'.
本身
获取当前类的引用，此对象被实例化。不同于 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'
只存在于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)
返回调用父类的方法的结果。
此组件上取消任何递延重点
移除本对象的包括受管理的监听器在内的所有监听器
移除本对象的所有受管理的监听器
克隆当前组件使用原来的配置传入到该实例的默认值。
覆盖一个新的配置包含任何属性来覆盖在克隆版本。 可以通过对这个对象的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
找一个容器上面这个组件在任何级别的自定义函数。 如果传递的函数返回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.
Gets the bubbling parent for an Observable
The bubble parent. null is returned if no bubble target exists
私有方法,获取此浮动组件能移动的范围(x/y 偏移)
元素或者 此组件将被限制的Region.
限制的 x/y 范围
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.
本函数使用传递给onRender的位置参数并返回一个 DOM元素，你能在insertBefore中使用它。
索引, 元素id或者 你想把这个组件放在它前面的元素
在insertBefore中使用的DOM元素
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.
This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
返回分割栏 跟踪器的配置对象 (含有 xclass 属性).
此方法在 BorderSplitter 中被重写为 创建一个
BorderSplitterTracker.
获取此组件的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 混入原型 键-值对
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对象
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.
检验此组件是否是指定的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.
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
允许销毁操作的行为。 调用父类的OnDestroy后，组件将被销毁。
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 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.
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.
继续事件的触发(见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)组件.
设置此组件在其父面板的停靠位置. 注意, 如果此组件是含有 DockLayout 的父面板的集合的一部分, 此设置才有效果.(注意, 任何面板上默认有一个 DockLayout)
this
设置组件的高度. 这个方法会触发 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
设置组件的宽度和高度. 此方法触发 resize 事件. 此方法可以接收单独的 width 或者 height 值作为参数,
或者你可以传递像这样的一个 size 对象: {width:10, height:20}.
设置新的宽度值. 这可以是:
{width: widthValue, height: heightValue}.undefined 保留原来的宽度不变.设置新的高度值 (如果第一个参数传递了一个size对象, 此参数没有必要传递). 这可以是:
undefined 保留原来的高度不变.this
设置组件的宽度. 此方法触发 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时指定的作用域参数是一样的，否者监听器将会被移除。
沿着 ownerCt 查找匹配简单选择器的祖先容器.
例如:
var owningTabPanel = grid.up('tabpanel');
用来检验的简单选择器.
匹配的祖先容器 (或者 undefined 如果未找到匹配).
刷新组件的内部区域.
如果已经通过tpl为当前组件配置了一个模板, 那么将会使用此参数来装配模板. 如果没有为当前组件配置模板, 组件的内容区域将会通过 Ext.Element 进行刷新.
只有在使用 html 配置时此参数才合法.
Defaults to: false
只有在使用 html 配置时此参数才合法. 当脚本加载完成时回调函数才被执行.
Injected as an override by Ext.Aria.initialize
方法/属性添加到这个类的原型。
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.
组件失去激活后触发.
The options object passed to Ext.util.Observable.addListener.
在组件被 destroy 之后触发.
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.
组件获取焦点时触发.
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.
在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.