关闭

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

标签: extgetter存储functionmvc项目管理
11322人阅读 评论(0) 收藏 举报

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

总结

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

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

下载项目文件

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:92253次
    • 积分:1201
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:7篇
    • 译文:22篇
    • 评论:1条
    文章分类
    文章存档