`
海底的潮水
  • 浏览: 5043 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

sencha Touch controller routes

 
阅读更多
Ext.define("mvc.controller.testController",{
extend:"Ext.app.Controller",
config:{
    
    routes: {//路由
    /* 以路由功能为基础,为应用程序设置访问历史功能支持变得很容易。
    * 路由实现原理:就是url和控制器动作之间的映射,
    * 当地址栏中的一个特定类型url被检测到的时候,
    * 相应的控制其动作就会被自动调用
            */
        //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#login
        //通过在index.html的后面添加#login即可访问showLogin里的方法。
        //这个可认为是深链接。我们可以将链接的任意部分发送出去,当这个链接被单击时候页面会加载到正确的位置。
        //而不是应用程序的初始位置。
      'login': 'showLogin',
      //:id是参数
      //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#user/234
      //即可把234当做参数传递给shouUserById这个函数
              'user/:id': 'showUserById',
              //包含两个参数id,format,
               //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#products/12/abc
      //即可把12和abc当做参数传递给showProductInFormat函数
              'products/:id/:format': 'showProductInFormat',
              //路由进阶
              /* 路由进阶产生原因:
                                              正常情况下 路由中的通配符可以匹配任意连续的字母和数字字符串。
              *  比如"products/:id/edit"这个路由可以匹配"#products/123/edit",
              *  但是却不能匹配"#products/a ,fd.sd/edit",后面这个url包含了一些非法字符(空格,逗号,点号);
              * 传参需求:
              * 但是有时候我们还是需要路由能够匹配类似的url,比如我们的url包含一个文件名,我们想把它取出来。
              * 路由进阶解决办法:
              *   也就是说可以使用一个包含了action属性的配置对象来取代action字符串。
              *   除此之外,我们给这这个对象添加一个conditions属性,
              *   这个属性定义了:filename这个参数可以匹配英文数字、阿拉伯数字外加一个英文点号。
              *   这样我们的路由现在就可以匹配像http://myapp.com/#file/someFile.jpg这样的url了,
              *   它会把someFile.jpg作为参数传递给控制器的showFile函数。
              * //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#file/someFile.jpg
              */
              'file/:filename': {
                   action: 'showFile',
                   conditions: {
                      ':filename': "[0-9a-zA-Z\.]+"
              }
               }
            },
    refs:{//可以使用itemId或者选择器进行查找过滤
        conView:"#controllerView",
        tabOneApple:"button[action=tabOneApple]",
        //查找button中action是tabOneApple的按钮
        infoPanel: {
               selector: 'tabpanel panel[name=fish] textfield',
               //查找 tabpanel中item的name是fish的这个tab,tab的items中是否含有xtype是textfield的
               //如果不含有则根据下面的xtype和autoCreate自动创建textfield组件
               xtype: 'textfield',
               autoCreate: true
              }
    },
    control:{
    tabOneApple: {
               tap: 'doTabOneApple'
             },
             'button[action=tabOneBanana]': {
               tap: 'doTabOneBanana'
              }
    },
   
},
showLogin:function(){
// this.getConView().addComponent("小苹果");
// this.getConView().items.getAt(0).add({
// xtype:"textfield",
// label:"ssss"
// })
},

showUserById:function(id){
console.log("id=="+id)
},
showProductInFormat:function(id,format){
console.log("id=="+id+",format=="+format);
},
showFile:function(filename){
console.log(filename)
},
doTabOneApple:function(){
var infoPanel=this.getInfoPanel();
infoPanel.setLabel("hellow")
this.getConView().items.getAt(0).add(infoPanel)
},
doTabOneBanana:function(){
this.getTabOneApple().setText("I like apple!")
}
})
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...

    sencha touch 登陆界面

    Sencha Touch 的三层架构主要包括视图(View)、模型(Model)和控制器(Controller)。视图是用户界面的呈现部分,模型用于处理数据,而控制器则负责协调视图和模型之间的交互。 1. 视图(View): 在Sencha ...

    Sencha 和 Sencha Touch 简介

    本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...

    sencha touch项目源码

    2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...

    Sencha Touch in Action

    《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    senchaTouch和fusioncharts结合的实例

    4. **初始化图表**:在Sencha Touch 的控制器(Controller)中,当数据加载完成后,利用FusionCharts的API创建图表实例。你需要指定图表类型、宽度、高度、数据源以及容器ID。 ```javascript var chart = new ...

    Sencha Touch2 MVC Demo (含源码/数据库)

    MVC(Model-View-Controller)架构模式是Sencha Touch 2中的核心设计原则,帮助组织和管理代码,提高应用的可维护性和可扩展性。 在这个“Sencha Touch 2 MVC Demo”中,我们很可能会找到一个完整的示例项目,展示...

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

    Sencha Touch 是一款专为移动设备设计的前端框架,它为开发者提供了构建触控友好的、高性能的Web应用程序的能力。1.0.1a是这个框架的一个早期版本,虽然现在可能已被更新版本所取代,但对于了解其发展历史和技术原理...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...

    Sencha Touch MVC 模式

    在Sencha Touch中,MVC(Model-View-Controller)模式是其核心架构,帮助开发者组织和分离代码,提高代码的可维护性和可扩展性。本文将深入探讨Sencha Touch的MVC模式以及如何使用。 ### MVC模式简介 MVC模式是一...

Global site tag (gtag.js) - Google Analytics