background image

使用

E xt JS 4 搭建 APP 架构(二)

在前面两篇文章中,我们已经展开讨论了使用

ExtJs4 来创建 Pandora 风格的体系结构。我们

从对复杂的用户界面程序使用

mvc 模式,包含了很多视图、存储和模型。我们介绍了应用架

构的基本技术,像在控制器中控制你的视图或是触发所有控制器都能监听到的

app 级别的

事件。在这篇文章中,我们继续实现程序内基于

mvc 架构的控制器逻辑。

回顾一下
在我们继续实现我们的程序之前,我们首先要看看

Ext JS 4 提供的一些更加好用的功能。在

前面的些列文章中,我们讲解了如何通过在

 Ext.application 配置中添加 stores 和 models 数

组来自动加载

store 和 model。我们也解释了使用这种方式会为每个加载的 store 创建实例,

默认

id 为他们的名字。

回顾一下
在我们继续实现我们的程序之前,我们首先要看看

Ext JS 4 提供的一些更加好用的功能。在

前面的些列文章中,我们讲解了如何通过在

 Ext.application 配置中添加 stores 和 models 数

组来自动加载

store 和 model。我们也解释了使用这种方式会为每个加载的 store 创建实例,

默认

id 为他们的名字。

app/Application.js
Ext.application({
    ...
    models: ['Station', 'Song'],
    stores: ['Stations', 'RecentSongs', 'SearchResults']
    ...
});
配置

 models 和 stores 除了会让程序自动加载和实例化这些类以外,还会自动的创建对应的

get 方法来获取他们的实例引用,对于 controller 和 view 也是一样的。这意
味着,要获得

 Stations 控制器中获得它的 store,只需要把它的 store 添加到配置项 stores 数

组中。

app/controller/Station.js
...
stores: ['Stations'],
...
现在,我们可以再控制器的任何地方通过自动生成的

get 方法 getStationsStore  来获得

 

Stations 的 store 的引用。这种规则是很直接遍历的。: