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

翻译 2012年03月29日 23:15:25

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

总结

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

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

下载项目文件

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

您的应用程序架构中的Ext JS 4,第2部分 在先前的Ext JS建筑的文章中,我们探讨了如何构建一个潘多拉风格的应用程序,使用Ext JS的。我们看看在模型 - 视图 - 控制器架构,以及如...
  • azhou2012
  • azhou2012
  • 2012年03月29日 23:14
  • 11541

EXT JS4与EXT JS3的区别

布局 1.ComponentLayout 布局 在响应调整大小的请求时,复杂组件运用ComponentLayout来完成内部元素的定型。比如FieldLayout管理组件中的标签和输入元素的尺寸和...
  • loveforever89
  • loveforever89
  • 2012年05月10日 14:53
  • 1425

Ext JS 6学习文档-第3章-基础组件

基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮,文本框,日期选择器等等 表...
  • jiangbo110119
  • jiangbo110119
  • 2017年03月19日 10:57
  • 1061

[Ext JS 4] 实战之升级系列一[Ext jS 3-->Ext JS 4]

前言 若干年前,使用Ext JS 3 开发了一个系统。 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变。 Ext JS ...
  • oscar999
  • oscar999
  • 2013年07月25日 08:54
  • 3170

[Ext JS 6 By Example 翻译] 第3章 - 基础组件

转载自:http://www.jeeboot.com/archives/1219.html 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一...
  • lovelyelfpop
  • lovelyelfpop
  • 2016年12月27日 11:18
  • 1505

【层级结构】Ext.js5应用层级结构介绍

非英文专业,同时也是Ext.js的初学者,若您能指出错误和不恰当的地方,万分感谢!原文:https://docs.sencha.com/extjs/5.1/application_architectu...
  • TUD2014
  • TUD2014
  • 2015年12月14日 18:23
  • 598

应用程序架构本质,第 7 部分: 应用程序架构安全性

为了能在体系结构层次保持实力,成功的 IT 专家都会从战略、系统、策略和过程的角度思考问题。从编程的圈子跳出来,了解从较高的应用程序架构级别处理安全性的新方法。跑在安全违规行为的前面,帮助确保您企业的...
  • ibmjournal
  • ibmjournal
  • 2008年01月21日 11:25
  • 698

『Citric』天空中的繁星 · DP

天空中的繁星     天空中的繁星 天空中的繁星   【问题描述】 Lemon最近买了一台数码相机。某天Lemon很无聊,于是对着夜空拍了一张照片,然后把照片导入了电脑。 Lemon想依靠电脑...
  • ycdfhhc
  • ycdfhhc
  • 2015年10月26日 16:34
  • 688

卫** 打包上传360 问题

应用上传到360 的时候提示加固, 上传上去之后然后下载, 下载后签名文件已经被删除, 可以直接签名 jarsigner -verbose -sigalg SHA1withRSA -digest...
  • yike5868
  • yike5868
  • 2016年10月14日 11:06
  • 201

Android应用签名命令后提示您的应用签名算法采用“SHA256withRSA”,在部分4.2一下安卓版本的手机上不能安装的解决方案

给未签名的apk进行签名的命令:jarsigner -verbose -keystore ~/Workspace/mykeystore -signedjar ./xxx.apk ./xxx.signe...
  • u012875442
  • u012875442
  • 2017年07月24日 11:31
  • 921
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:您的应用程序架构中的Ext JS 4,第3部分
举报原因:
原因补充:

(最多只允许输入30个字)