(入门篇05)intro to applications with sencha touch 2

《(入门篇05)intro to applications with sencha touch 2》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、IntrotoApplicationswithSenchaTouch2作者：一夕QQ：944281625本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。SenchaTouch2旨在实现应用程序跨平台的高效开发。为了尽可能简单的编写应用程序，ST2为我们提供了一个简单而功能强大的应用程序体系结构，即MVC。在该体系结构下，使我们的代码简洁，可测试并且易于维护，还有诸多的好处：1.HistorySupport：在你的应用程序中提供了一个完整的back按钮，可以链接到应用程序的任何部分。2.Deep

2、Linking：当我们分享deeplinks时，在屏幕上打开任何界面的时候，都像是链接到一个Web界面。3.DeviceProfile：使用通用代码便可以让我们轻松的为手机或者平板电脑定制自己的UI。AnatomyofanApplication一个应用程序其实就是Models，Views，Controllers，Stores和Profiles的集合，只不过附加了一些特殊的元素，例如程序的图标或者加载图片等等。Model：在应用程序中代表了一个对象类型，简单理解便是数据模型。View：利用SenchaTouch内部组件，负责向用户显示数据，简单解释便是视图。Controller：

3、处理应用程序的交互，监听事件并作出响应，简单理解就是控制器。Store：负责将数据加载到我们的应用程序当中。Profile：为的是在尽可能多的通用代码下，为手机和平板电脑定制UI。简单理解就是配置文件，如果是手机应该加载怎样的UI，平板电脑则加载什么样的UI。通常我们在SenchaTouch的应用程序中都会这样编写application：Ext.application({name:'MyApp',models:['User','Product','nested.Order'],views:['OrderList','OrderDetail','Main'],controller

4、s:['Orders'],launch:function(){Ext.create('MyApp.view.Main');}});那么我们就对以上代码进行简单分析：name：便是我们定义的命名空间，我们的所有代码都在该空间下编写，类似Java中的顶级包名。在上面的代码中，我们我们知道，在view文件夹下有Main.js文件，就等价于该文件的存在路径为MyApp.view.Main。我们通过models,views和controllers来加载相应目录下的文件。至于依赖加载，我们的其他章节会为你阐述的。Controllerscontroller是程序的中心，它把程序的各部分有机的

5、结合在一起，并统一运行控制，使我们的程序正常运行。比如，view中存放的仅仅是页面布局等代码，关于页面逻辑处理的代码几乎都存放在controller中了，实现逻辑代码的统一管理。Asimpleexample接下来的例子展示给我们如何快速的定义控制器。在这里我们使用两个比较常用的控制器配置项：refs和control。通过refs，我们可以轻松的在一个页面中找到任何的组件。在本例中，我们将匹配xtype为formpanel的组件，并将第一个匹配的作为loginForm，并在doLogin函数之后使用该属性。第二件事情便是建立起一个control配置项。就像refs，它使用一个组件

6、查询器来找到所有的formpanel。看看下面具体的代码再说吧：Ext.define('MyApp.controller.Sessions',{extend:'Ext.app.Controller',config:{refs:{loginForm:'formpanel'},control:{'formpanelbutton':{tap:'doLogin'}}},doLogin:function(){varform=this.getLoginForm(),values=form.getValues();MyApp.authenticate(values);}});doLogin函

7、数本身是很简单的，因为在定义一个loginForm的refs的时候，控制器会自动为我们生成一个getLoginForm的函数，返回我们需要的那个formpanel。简单理解上面代码的作用便是：refs是我们声明的组件的引用，control中是我们对这些组件需要监听的事件以及触发的函数。refs是指向，control是控制。StoresStores是SenchaTouch中特别重要的部分，并且大多数的窗体都会绑定数据的。简单来说，store其实就像是model的数据实体。例如List和Data