EXTJS(入门篇05)Intro to Applications with Sencha Touch 2.docxVIP

Intro to Applications with Sencha Touch 2本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。Sencha Touch 2旨在实现应用程序跨平台的高效开发。为了尽可能简单的编写应用程序，ST2为我们提供了一个简单而功能强大的应用程序体系结构，即MVC。在该体系结构下，使我们的代码简洁，可测试并且易于维护，还有诸多的好处：History Support：在你的应用程序中提供了一个完整的back按钮，可以链接到应用程序的任何部分。Deep Linking：当我们分享deep links时，在屏幕上打开任何界面的时候，都像是链接到一个Web界面。Device Profile：使用通用代码便可以让我们轻松的为手机或者平板电脑定制自己的UI。Anatomy of an Application一个应用程序其实就是Models，Views，Controllers，Stores和Profiles的集合，只不过附加了一些特殊的元素，例如程序的图标或者加载图片等等。Model：在应用程序中代表了一个对象类型，简单理解便是数据模型。View：利用Sencha Touch内部组件，负责向用户显示数据，简单解释便是视图。Controller：处理应用程序的交互，监听事件并作出响应，简单理解就是控制器。Store：负责将数据加载到我们的应用程序当中。Profile：为的是在尽可能多的通用代码下，为手机和平板电脑定制UI。简单理解就是配置文件，如果是手机应该加载怎样的UI，平板电脑则加载什么样的UI。通常我们在Sencha Touch的应用程序中都会这样编写application：file:///D:\sencha\docs\index.htmlExt.application({ name: MyApp, models: [User, Product, nested.Order], views: [OrderList, OrderDetail, Main], controllers: [Orders], launch: function() { file:///D:\sencha\docs\index.htmlExt.create(MyApp.view.Main); }});那么我们就对以上代码进行简单分析：name：便是我们定义的命名空间，我们的所有代码都在该空间下编写，类似Java中的顶级包名。在上面的代码中，我们我们知道，在view文件夹下有Main.js文件，就等价于该文件的存在路径为MyApp.view.Main。我们通过models,views和controllers来加载相应目录下的文件。至于依赖加载，我们的其他章节会为你阐述的。Controllerscontroller是程序的中心，它把程序的各部分有机的结合在一起，并统一运行控制，使我们的程序正常运行。比如，view中存放的仅仅是页面布局等代码，关于页面逻辑处理的代码几乎都存放在controller中了，实现逻辑代码的统一管理。A simple example接下来的例子展示给我们如何快速的定义控制器。在这里我们使用两个比较常用的控制器配置项：refs和control。通过refs，我们可以轻松的在一个页面中找到任何的组件。在本例中，我们将匹配xtype为formpanel的组件，并将第一个匹配的作为loginForm，并在doLogin函数之后使用该属性。第二件事情便是建立起一个control配置项。就像refs，它使用一个组件查询器来找到所有的formpanel。看看下面具体的代码再说吧：file:///D:\sencha\docs\index.htmlExt.define(MyApp.controller.Sessions, { extend: file:///D:\sencha\docs\index.htmlExt.app.Controller, config: { refs: { loginForm: formpanel }, control: { formpanel button: { tap: doLogin } } }, doLogin: function() { var form= this.getLoginForm(), values = form.getValues(); MyApp.authenticate(values); }});doLogin函数本身是很简单的，因为在定义一个loginForm的refs的时候，控制器会自动为我们生成一个getLoginForm的函数，返回我们需要的那个formpanel。简单理解上面代码的作用便是：refs