extjs4.0中文API整理01——Application

extjs4.0中文API整理01——Application

材料来自于extjs官网，翻译参考脚本娃娃的中文版

一、Ext.app.Application

1.代表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，就像在上面的例子那样做。

2.在Application中关联有关其他的应用

因为一个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将自动为我们加载所有的应用程序文件。

3.常用的配置项

(1)listeners : Object

一个配置对象，包含一个或多个事件处理函数，在对象初始化时添加到对象。

它应该是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'); }
}
}
});

(2)models : String[]

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']
});

(3)name : String

应用程序名称。这将是你的views，controllers，models和stores的namespace。

名称不能使用空格或特殊的字符。

(4)refs : Object[]

configs数组的简历参考页面上的view。例如：

Ext.define("MyApp.controller.Foo", {
extend: "Ext.app.Controller",
refs: [
{
ref: 'list',
selector: 'grid'
}
],
});

这将添加getList的方法到controller上

(5)scope : Object

执行launch函数的范围。默认在应用程序实例。

(6)stores : String[]

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']
});

(7)views : String[]

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']
});

4.常用方法

(1)new Ext.app.Application( [Object config] ) : Object

创建新应用

(2)addEvents( Object/String... eventNames )

向本Observable可能触发的事件列表中添加指定的事件。

要么是有事件名作为属性，属性值为 true的对象。例如:

this.addEvents({
storeloaded: true,
storecleared: true
});

要么是作为参数的任意个数的事件名。例如:

this.addEvents('storeloaded', 'storecleared');

(3)on( String/Object eventName, [Function fn], [Object scope], [Object options] )

addListener的简写方法

addListener( String/Object eventName, [Function fn], [Object scope], [Object options] )

向本对象添加一个事件处理函数，例如:
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}
});

Parameters

eventName : String/Object

被监听的事件名。 也可以是属性名字是事件名字的对象。

fn : Function (optional)

事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。 会被调用， 参数为fireEvent的参数加上下述options参数。

scope : Object (optional)

事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

options : Object (optional)

包含事件处理函数配置的对象。

注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

这个对象可能包含以下任何一个属性:

scope : Object

事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

delay : Number

事件触发后，调用事件处理函数延时毫秒数。

single : Boolean

设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。

buffer : Number

使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。

target : Ext.util.Observable

只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数

element : String

这个选项只对绑定在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
});

(4)control( String/Object selectors, Object listeners )

通过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');
}
});

Parameters

selectors : String/Object

如果第一个参数是字符串, 第二个参数是用来作为监听器,否则一个对象的选择器- >监听器是假设的

listeners : Object

(5)init( Ext.app.Application application )TEMPLATE

当应用程序加载后，模板的方法才被调用。 在Application的发布功能被执行之前调用，

因此提供一个回调点来运行任何代码在Viewport被创建之前。

(6)launch( String ) : BooleanTEMPLATE

当页面装载完成后自动调用。这是个空函数，应该被每一个需要调用页面加载的application重载。

(7)create( ) : ObjectSTATIC

创建这个类的新实例。

Ext.define('My.cool.Class', {
...
});

My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。