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中。

  • 相关阅读:
    josn类库引用
    WPF圆角按钮
    C#实现某一属性值变化时触发事件 Form1_changeEvent是对应的事件
    C#winform生成安装包
    特性
    反射可以动态调用对象(一般是类)的名称,属性,方法等。具体见下。重要
    原子操作 和Inerlocked 常用于多线程同步
    spingboot 配置多个数据源报错
    Address already in use: JVM_Bind 端口被占用的几个解决办法
    数据库问题(一)
  • 原文地址:https://www.cnblogs.com/fyq891014/p/3294799.html
Copyright © 2011-2022 走看看