您的应用程序架构中的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 （）。选择（选中）; 
} 
...

总结

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

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

下载项目文件