常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样就会如果要实现"view"之间的跳转,animateActiveItem()方法将被使用,

但是通过st的源码

    animateActiveItem: function(activeItem, animation) {
        var layout = this.getLayout(),
            defaultAnimation;

        if (this.activeItemAnimation) {
            this.activeItemAnimation.destroy();
        }
        this.activeItemAnimation = animation = new Ext.fx.layout.Card(animation);
        if (animation && layout.isCard) {
            animation.setLayout(layout);
            defaultAnimation = layout.getAnimation();
            if (defaultAnimation) {
                defaultAnimation.disable();
            }
            animation.on('animationend', function() {
                if (defaultAnimation) {
                    defaultAnimation.enable();
                }
                animation.destroy();
            }, this);
        }
        return this.setActiveItem(activeItem);
    }

我们可以轻易的发现这个方法仅限于在Card布局中适用,

那么我们常常要是想做一个单一的panel时,来使用动画跳转.我们的应用要是不使用这样的容器来实现怎么办呢?

这里我们就需要使用一个整体的Panel(Main.js)来组织其他的Panel :

var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "Your Firse Panel xtype name"
        },
        {
            html: "Your Second Panel xtype name"
        },
        {
            html: "Your Third Panel xtype name"
        }
    ]
});

panel.setActiveItem(0);

这样首先加载的将是"

Your Firse Panel xtype"

如果需要跳转这里需要注意的是.要使用该View设置其的setActiveItem("xtype name") 或者 animateActiveItem("xtype name");

over!

Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)的更多相关文章

  1. sencha touch 在新版谷歌浏览器中painted事件无法触发解决方案以及carousel 控件、togglefield控件、滚动条失效

    在2.3/2.4版本中,新版谷歌浏览器(43.44版本)里面painted事件是不会触发的,以及carousel 控件.togglefield控件.滚动条失效,官方的解决方案如下,测试可用 会出现这个 ...

  2. Devexpress GridView内嵌dx:ASPxGridLookup取得控件值乱跳解决方案

    一 页面嵌入ASPxGridLookup控件 <dx:ASPxGridView ID="gridDetail" runat="server"        ...

  3. sencha touch 坑爹的Panel,数据不显示了...

    一位同学问我一个问题: sencha touch中xtype创建dataview死活不显示!!版本2.3.1,MVC模式,sencha touch创建目录程序很简单,主界面一个tabPanel,两个分 ...

  4. JavaScript开发之路01(初识Sencha Touch框架)

    一.SenchaTouch的hello world实例: Ext.application({ name:'myapp', icon:'images/icon.png', glossOnIcon:fal ...

  5. sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...

  6. delphi中panel控件应用

    delphi中的panel控件是怎么使用的?研究了很久了,还是搞不懂,只知道把它放到form上面,其他操作一律不懂了,有谁可以请教一下,如何把其他控件放到里面去呢?谢谢 提问者采纳   直接把控件放到 ...

  7. Panel控件的使用

    我们对控件进行分组的原因不外乎三个: 1.为了获得清晰的用户界面而将相关的窗体元素进行可视化分组. 2.编程分组,如对单选按钮进行分组. 3.为了在设计时将多个控件作为一个单元来移动. 在vb.net ...

  8. OLE、OCX和ActiveX控件之间的比较

      OLE(Object Linking and Embedding,对象连接与嵌入) 一.过去的OLE和今天的OLE 最初的OLE含义是指在程序之间链接和嵌入对象数据,它提供了建立混合文档的手段(资 ...

  9. sencha touch 框架的几种核心脚本文件之间的区别

    sencha-touch-debug.js      供开发时用sencha-touch.js   供发布时用sencha-touch-all.js All     供不能使用SDK构建应用程序时,将 ...

随机推荐

  1. 关于《selenium2自动测试实战--基于Python语言》

    关于本书的类型: 首先在我看来技术书分为两类,一类是“思想”,一类是“操作手册”. 对于思想类的书,一般作者有很多年经验积累,这类书需要细读与品位.高手读了会深有体会,豁然开朗.新手读了不止所云,甚至 ...

  2. Java 自定义客户端与服务器

    一:浏览器如何请求数据基本原理 基本原理: 当浏览器输入地址向服务器请求数据时,实际上浏览器会在内部建立一个Socket对象,把http请求报文转变成byet[]字节,然后调用Socket的方法把这些 ...

  3. 关于超出部分隐藏加省略号的css方法

    单行效果:display:block;     white-space:nowrap;  overflow:hidden;    text-overflow:ellipsis; 多行效果:width: ...

  4. Cocos2d-x 3.2 学习笔记(十四)保卫萝卜之界面UI

         保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...

  5. 利用gitbash上传项目到github

    GitHub主要是用作基于Git的分布式版本管理系统的库,可以保存和管理自己的代码,而且主要用作代码的合作开发.不过对于我来说,Git控制系统还比较难以掌握,或者开发小系统还不太用得着,因此我把Git ...

  6. select2 4.0.3 空记录时的处理

    使用select2插件,如果后台查找没有记录,不能返回null,要返回一个空数组,不然会报错:data is null 空数组形式为(firefox调试输出):{"items":[ ...

  7. Python编程--类的分析

    一.类的概念 python是面向对象的编程语言,详细来说,我们把一类相同的事物叫做类,其中用相同的属性(其实就是变量描述),里面封装了相同的方法,比如:汽车是一个类,它包括价格.品牌等属性.那么我们如 ...

  8. 小结:ES7——async和await初识

    一.async async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作 async用于声明一个函数是异步的. 通常情况下async.await都是跟随promise一起 ...

  9. Django_在单独文件中加载Django环境临时调试

    创建Django环境后,每次在打印调试都需要基于项目有些麻烦. 如何在项目外的文件中加载项目环境进行便携的调试? 创建一个新的 orm.py import os if __name__ == '__m ...

  10. 深入HBase架构解析(一)[转]

    前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Architecture,原本想翻译全文,然 ...