zoukankan      html  css  js  c++  java
  • 从零开始学习Sencha Touch MVC应用之三

    正如本文标题所述的主题我们将继续构建我们在前面已经构建的Sencha Touch MVC app,下面我们将开始进行创建一个控制器(controller)和两个视图,然后学习如何运用它们。

    首先让我们来添加一些目录来修改现有的工程目录结构:

    创建一个控制器:在app/controllers目录下创建一个HomeController.js文件,然后在里面增加下面的内容:

    Ext.regController('Home', { // index action index: () { Ext.Msg.alert('Test', "Home's index action was called!"); },});

    我们通过在应用服务器中注册的方式创建一个控制器Ext.regController,这个服务器附带两个参数:控制器的名称和配置的对象,在配置的对象中我们将加入所需的常规属性和s/actions。一个控制器的action是一个被称为一个自动基于一个路由的功能调用,一个路由器对于controller/action对来说是一个识别器,看上去类似于一个url:如home/index, home/contact 等。

    注意:当你增加常规属性或者功能,你应当在其末尾添加一个逗号“,”以避免你在后续再增加其他功能和属性时出现错误。

    另外注意:你应当一直保持浏览器的控制台打开,以便观察出现的错误。

    缺省的路由(controller/action pair)每一个senchaTouch启动时有一个缺省的路由被加载,在你开始使用路由之前你需要定义路由的结构。

    在App目录下,创建一个routes.js文件,然后添加下面的内容:

    Ext.Router.draw((map) { map.connect(':controller/:action');});

    在上面的代码中,路由将由两部分构成:控制器和action,被一个前向斜线分割,关于更多的路由资料,请参阅相关文档(documentation.)

    现在我们来设置我们应用中的缺省设置的路由打开App.js文件,然后设置fefaultUrl属性指向到Home/index路由,如下所示:

    Ext.regApplication({ name: 'App', defaultUrl: 'Home/index', launch: () { },});

    在测试我们的应用之前,我们需要把创建的文件包含到index.html文件中:

    < type="text/java" src="lib/sencha-touch-1.1.0/sencha-touch.js"></> 

    < type="text/java" src="/app/app.js"></>

    < type="text/java" src="/app/routes.js"></> 

    < src="/app/controllers/HomeController.js" type="text/java"></> 

    注意:当你将开始建立更多的控制器、视图等的时候,有一种可能就是遗忘此步骤,并且很奇怪程序为啥不按设想和期望的进行运行显示,所以,千万不要忘记把你的文件包含到index.html中。

  • 相关阅读:
    课后作业-阅读任务-阅读提问-3
    团队-团队编程项目作业名称-团队一阶段互评
    结对-四则运算答题器-结对项目总结
    课后作业-阅读任务-阅读笔记
    团队-科学计算器-开发文档
    团队编程项目作业6-程序维护
    课后作业-团队编程项目总结
    课后作业-阅读任务-阅读提问-4
    课后作业-阅读任务-阅读笔记-4
    个人编程作业2
  • 原文地址:https://www.cnblogs.com/fyq891014/p/4188905.html
Copyright © 2011-2022 走看看