Hierarchy
Ext.BaseExt.app.ControllerExt.app.ApplicationInherited mixins
Requires
Files
代表Ext JS 4的应用，典型的单页面应用使用Viewport。 典型的Ext.app.Application应该像下面这样：
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
它做了很多事情。首先，创建一个叫MyApp的全局变量-你所有的应用类（例如Models、View和Controllers）将属于单独的命名空间namespace， 彻底降低了与全局变量冲突的机会。
当页面准备好所有的JavaScript加载完成，你的应用launch函数将被调用，在那个时候你可以运行代码启动你的程序。 通常，这些动作包含创建一个Viewport，就像在上面的例子那样做。
因为一个Ext.app.Application代表整个应用，我们应该告诉他关于其他的部分应用-也就是与应用程序绑定的Models、Views和Controllers。 让我们假设我们有一个博客管理应用程序：我们有模型Model和控制器Controller来处理帖子和评论，列单的视图View，添加、编辑帖子和评论。 在这里我们将告诉应用程序这些东西：
Ext.application({
name: 'Blog',
models: ['Post', 'Comment'],
controllers: ['Posts', 'Comments'],
launch: function() {
...
}
});
注意，我们实际上并没有直接列出Views在应用程序本身。这是因为View被Controller所管理， 所以它是有意义去保持这些依赖项。应用程序将加载每一个指定的Controllers，在application architecture guide中使用路径控制公约来制定-
在这种情况下期待控制器位于app/controller/Posts.js和app/controller/Comments.js中。 依次地，每一个控制器需要列举它使用的Views并且这些Views会自动被加载。 下面是我们被定义的Posts控制器:
Ext.define('MyApp.controller.Posts', {
extend: 'Ext.app.Controller',
views: ['posts.List', 'posts.Edit'],
// 其余的控制器在这里
});
因为我们告诉了应用程序关于我们的Models和Controllers，还有我们Controllers的关于它们的Views，Ext JS将自动为我们加载所有的应用程序文件。 这意味着无论在何时添加一个新类时,我们不必手动在我们的html文件中添加script标签， 但更重要的是它可以使用Ext JS 4 SDK工具，来创建一个最小化的构建为我们的全部应用程序。
获取更多编写Ext JS 4应用程序的信息，请参见application architecture guide。
直接包含所有应用程序类的路径 这个路径将通过Ext.Loader.setPath渠道来为指定的namespace在name配置中注册。
Defaults to: "app"
值为true，在触发launch函数之前自动加载并实例化AppName.view。Viewport对象
Defaults to: false
应用程序使用的控制器名称
应用程序使用的控制器名称
当应用被第一个加载完成后，将直接重定向到这个url
当应用被第一个加载完成后，将直接重定向到这个url
True，自动建立Ext.tip.QuickTip的支持。
Defaults to: 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'); }
}
}
});
models的数组需要从AppName.model名称空间定义。例如：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
models: ['User', 'Vehicle']
});
这是等价的：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
requires: ['MyApp.model.User', 'MyApp.model.Vehicle']
});
configs数组的简历参考页面上的view。例如：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
refs: [
{
ref: 'list',
selector: 'grid'
}
],
});
这将添加getList的方法到controller上，Ext.ComponentQuery内部的使用参考grid组件在页面。
stores的数组需要从AppName.view命名空间定义。例如：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
stores: ['Users', 'Vehicles']
});
这是等价的：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
requires: ['MyApp.store.Users', 'MyApp.store.Vehicles']
});
views的数组需要从AppName.view命名空间定义。例如：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
views: ['List', 'Detail']
});
这是等价的：
Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
requires: ['MyApp.view.List', 'MyApp.view.Detail']
});
扩展事件
Defaults to: []
本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置， 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发，它的值是真的， 如果没有必要，就是假的。
本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次，这尤其有用。 用法:
if (this.hasListeners.foo) {
this.fireEvent('foo', this, arg1);
}
在本类中设置为true将一个对象标识为实例化的Observable或其子类。
Defaults to: true
本身
获取当前类的引用，此对象被实例化。不同于 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'
创建新应用
Config object.
Overrides: Ext.app.Controller.constructor
成员
向本对象添加一个事件处理函数，例如:
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的选项。
调用原来的方法，这是以前的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)
返回调用父类的方法的结果。
移除本对象的包括受管理的监听器在内的所有监听器
移除本对象的所有受管理的监听器
通过Ext.ComponentQuery在组件上添加监听器。 接受一个对象包含组件的路径映射到一个散列函数的侦听器。
在接下来的例子中“updateUser的函数映射到“点击” 事件在一个按钮组件,它是“useredit”的子组件。
Ext.define('AM.controller.Users', {
init: function() {
this.control({
'useredit button[action=save]': {
click: this.updateUser
}
});
},
updateUser: function(button) {
console.log('clicked the Save button');
}
});
获取更多信息请参加Ext.ComponentQuery的组件选择器
通过调用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');
}
}
});
使用传递过来的参数(去掉事件名，加上传递给addListener的options对象
)触发指定的事件。
通过调用enableBubble，一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。
如果任何一个事件处理函数返回false，就返回false，否则返回true。
Gets the bubbling parent for an Observable
The bubble parent. null is returned if no bubble target exists
返回一个给定名称的controller类。 如果controller不存在，由他创建。
返回controller的实例.
返回一个给定名称的Model类。 使用Ext.ModelManager.getModel的速记法。
返回model类.
当应用程序加载后，模板的方法才被调用。 在Application的发布功能被执行之前调用，因此提供一个回调点来运行任何代码在Viewport被创建之前。
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 混入原型 键-值对
当页面装载完成后自动调用。这是个空函数，应该被每一个需要调用页面加载的application重载。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
可检测的application profile
默认情况下，应用程序将分派到配置启动控制器和运行launch函数后立刻启动。返回false来阻止这种行为。
addManagedListener的简写方法
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
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
});
一个template的方法就像init, 但是在viewport被创建后调用。 在应用的launch方法被执行之后调用此方法
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
从指定的Observable接替选定的事件就好像事件是this触发的。
例如，如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:
this.relayEvents(this.getStore(), ['load']);
grid实例将会有一个observable的'load'事件，
这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数
可以使用this访问grid。
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
继续事件的触发(见suspendEvents)。
如果事件被使用queueSuspended参数挂起, 那么所有
在事件挂起期间触发的事件将会被发送到任意监听器。
获取从该对象被实例化的类的引用。 请注意不同于 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
挂起所有事件的触发。(见resumeEvents)
传true，让挂起的事件排队而不是丢弃所有挂起的事件， 这些事件将会在调用resumeEvents之后触发。
配置扩展
removeListener的简写方法
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
方法/属性添加到这个类的原型。
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 当前类