您的应用程序架构中的Ext JS 4，第3部分

您的应用程序架构中的Ext JS 4，第3部分

在以前的文章系列的第1和第2部分中，我们探讨架构潘多拉风格的应用程序使用的Ext
JS 4的新功能。我们开始的模型-视图-控制器架构采用一个复杂的用户界面，有多个视图，存储和模型。我们看在您的应用程序架构的基本技巧，如你的意见，从控制器控制和射击应用广泛的事件，控制器可以听。在这一系列的一部分，我们将继续执行应用程序的MVC架构，内部控制器逻辑。

获得参考

我们继续执行我们的应用程序之前，我们应该检讨的Ext JS 4 MVC的包中提供了更先进的功能。在这一系列的前面部分，我们发现如何可以自动加载商店和模型，将它们添加到商店和模型在您Ext.application配置阵列在您的应用程序。我们还解释说，以这种方式加载的每个商店创建一个实例，给它的StoreID等于它的名字。

APP / Application.js

Ext.application({
...
models: ['Station', 'Song'],
stores: ['Stations', 'RecentSongs', 'SearchResults']
...
});

除了加载和实例化这些类，加入到这些阵列的存储和模型也自动为您创建的干将。这也是为控制器和意见的情况下。商店，模型，控制器和视图配置也存在于控制器和工作方式完全相同，因为他们中的应用实例。这意味着，为了得到以监测站商店内的基站控制器的参考，我们需要做的是添加存储阵列存储。

APP /控制器/ Station.js的的

...... ： [ '站' ]，
...

现在我们可以得到一个参考站店，在任何地方使用自动生成getter方法命名的控制器

getStationsStore

。该公约是直接的和可预见的：

观看次数： [ 'StationsList' ]  / /创建的吸气名为“getStationsListView” - >返回参考StationsList类
模型： [ '站' ]      / /创建getter方法命名为“getStationModel” - >返回参考站模型类
控制器： [ “宋' ]    / /创建getter方法命名为“getSongController” - >返回宋控制器实例
存储： [ '站' ]     / /创建的吸气名为“getStationsStore” - >返回监测站存储实例

重要的是要注意的意见和模型的getter返回一个引用类（需要你自己的实例化），而商店和控制器的干将返回实际实例。

引用视图实例

在上一节中，我们描述如何店，模型，控制器和视图配置自动创建getter方法，让您可以轻松地检索他们。

getStationsListView

getter方法将返回一个引用视图类。在我们的应用程序的流程，我们想我们StationsList选择第一项。在这种情况下，我们不希望一个视图类的引用，相反，我们希望我们的视口内的的实际StationsList实例的引用。

3，一个非常普遍的做法，以获得在Ext JS在页面上参照现有的组件实例是Ext.getCmp方法。虽然这种方法继续努力，这是不推荐的方法在Ext JS 4。使用Ext.getCmp需要你给每一个组件一个唯一的ID，以便在您的应用程序中引用它。在新的MVC封装，我们可以把一个控制器内的参考视图实例（部分），利用中的Ext
JS 4的新功能：ComponentQuery。

APP /控制器/ Station.js的的

...
文献： [{
/ /组件查询的
选择： “视口>＃西部地区> stationslist” ，
参考： “stationsList'
}]
...

在

参

配置，你可以设置参考，以查看实例。这允许您检索和操作页面上的控制器的行动内的组件。来形容你要引用的组件，你可以使用ComponentQuery内选择属性。其他所需的信息是这个对象的内部

的

ref 属性。这将被用来作为参数组内的每个项目自动将生成的getter名称的一部分。例如，一个getter 定义

文献：“stationsList”

（注意资本大号），将产生称为控制器

getStationsList

。另外，如果你没有设立一个控制器内部参考，您可以继续使用

Ext.getCmp

内的控制器动作。但是，我们不鼓励你这样做，因为它迫使你在你的项目管理，独特的组件ID，往往导致问题作为项目的发展。

重要的是要记住，这些干将将建立独立的观点是否在页面上实际存在的。当你调用getter和选择成功匹配在页面上的一个组成部分，它缓存的结果，以便后续调用的getter将快速。然而，当选择不匹配页面上的任何意见，getter方法​​将返回null。这意味着，如果你有上取决于视图的逻辑，有一种可能性，该视图在页面上不存在，你需要添加getter返回的结果，如果只执行检查，以确保在你的逻辑。此外，如果多个组件相匹配的选择，只有第一个将被退回。因此，它是很好的做法，让你选择特定的单一视图，你希望得到的。最后，当你摧毁你引用一个组件，调用的getter将开始再次返回null直到有另一个组件页面上的匹配选择。

级联应用程序启动控制器逻辑。

应用程序启动时，我们要加载用户的现有车站。虽然你可以把里面的应用程序的逻辑

onReady

方法，提供了一个MVC架构您

onLaunch

方法，激发每个控制器上，尽快，因为所有的控制器，模型和商店被实例化，并呈现您的初步意见。这提供了一个全球的应用程序逻辑和逻辑控制器之间的清洁分离。

第1步

APP /控制器/ Station.js的的

onLaunch ： （） {
/ /使用自动生成的getter获得

站控制器onLaunch方法似乎是完美的地方，打电话给站商店的负载方法。正如你可以看到，我们还成立了一个被执行，只要我们的商店加载回调。

第2步

APP /控制器/ Station.js的的

...
onStationsLoad: function() {
var stationsList = this.getStationsList();
stationsList.getSelectionModel().select(0);
}
...

在此回调，我们可以使用自动生成的getter StationsList实例，并选择第一项。这将引发

的SelectionChange

上StationsList的事件。

第3步

APP /控制器/ Station.js的的

...
INIT ： 函数（） {
控制（{
'stationslist“ ： {
的SelectionChange  。onStationSelect
}，
...
}）;
}

onStationSelect: function(selModel, selection) {
this.application.fireEvent('stationstart', selection[0]);
},
...

应用程序事件是非常有用的，当你有你的应用程序中的许多事件感兴趣的控制器。只有一个控制器，而不是为每个控制器相同的看法事件听，会听视图的事件，并触发一个应用广泛的事件，别人能听。这也使得控制器进行通信，而彼此了解或根据对方的存在。我们在

onStationSelect

行动，触发应用程序事件称为

stationstart

。

第4步

APP /控制器/ Song.js的的

...
refs: [{
ref: 'songInfo',
selector: 'songinfo'
}, {
ref: 'recentlyPlayedScroller',
selector: 'recentlyplayedscroller'
}],

商店： [ 'RecentSongs' ]，

INIT ： 函数（） {
...
/ /我们听的广泛应用stationstart事件
。应用。（{
stationstart ： 这一点。onStationStart ，
范围： 本
}）;
}

onStationStart  功能（站） {
VAR 商店=  这的。getRecentSongsStore （）;

商店。负载（{
回调： 本。onRecentSongsLoad ，
的params ： {
站：站。（“ID” ）
}，
范围： 本
}）;
}
...

作为的宋代控制器的init方法中的一部分，我们已经成立了一个监听器的

stationstart

应用程序事件。当发生这种情况，我们需要我们RecentSongs存储加载到这个站的歌曲。我们在做这个

onStationStart

方法。我们得到一个参考的RecentSongs存储和调用它的负载方法，定义控制器的行动需要尽快完成加载被解雇。

第5步

APP /控制器/ Song.js的的

...
onRecentSongsLoad: function(songs, request) {
var store = this.getRecentSongsStore(),
selModel = this.getRecentlyPlayedScroller().getSelectionModel();

selModel 。选择（存储。最后（））;
}
...

到加载的RecentSongs商店当站的歌曲，我们选择在RecentlyPlayedScroller的最后一首歌。为此，我们得到的RecentlyPlayedScroller选择模型

DataView

并在其上调用select方法，通过在RecentSongs商店的最后一个记录。

第6步

APP /控制器/ Song.js的的

...
init: function() {
this.control({
'recentlyplayedscroller': {
selectionchange: this.onSongSelect
}
});
...
},

onSongSelect ： 功能（selModel ，选择） {
本。getSongInfo 。（） （选择[ 0 ]）;
}
...

当我们选择在滚动的最后一首歌，它会触发一个

SelectionChange

事件。在控制方法上，我们已经成立了此事件的监听器;和在onSongSelect方法，我们完成更新的SongInfo认为数据应用程序的流程。

启动一个新站

现在，它变得很容易实现额外的应用程序流量。添加逻辑创建和选择一个新站的样子：

APP /控制器/ Station.js的的

...
文献： [{
文献： “stationsList” ，
选择 “stationslist'
}]，

初始化 函数（） {
/ /听上NewStation组合框选择事件
控制（{
...
“newstation” ： {
选择 。onNewStationSelect
}
}）;
}

onNewStationSelect: function(field, selection) {
var selected = selection[0],
store = this.getStationsStore(),
list = this.getStationsList();

（选定&&  ！商店。getById （选择。（“ID” ））） {
/ /如果新选定的车站不存在于我们的站店，我们把它添加
存储。添加（选定）;
}

/ /我们选择在站列表站的
列表。getSelectionModel （）。选择（选中）;
}
...

总结

我们已经说明，使用一些先进的控制器技术，并保持你的逻辑，从你的意见单独的应用程序的架构变得更容易理解和维护。在这个阶段，应用程序已经是相当的功能。我们可以搜索和添加新站，我们就可以开始选择他们的站。车站的歌曲将被载入，我们的歌曲和艺术家信息。

我们将继续完善我们的应用程序在本系列的下一部分，造型和自定义组件创建的重点。

下载项目文件