使用
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 的引用。这种规则是很直接遍历的。: