<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/sencha-touch.css">

    <script type="text/javascript" src="lib/sencha-touch-all-debug.js"></script>

</head>

<body>

    <script type="text/javascript">

        Ext.require("Ext.Carousel");

        Ext.application({

            name:"myApp",

            launch:function(){

                var panel=Ext.create("Ext.Panel",{

                    defaults:{

                        ui:"dark",

                        flex:1,

                        xtype:"carousel",

                        defaults:{

                            xtype:"panel"

                        }

                    },

                    layout:{

                        type:"vbox",

                        align:"stretch"

                    },

                    items:[

                        {

                            id:"carousel1",

                            direction:"horizontal",

                            items:[

                                {

                                    html:"Left panel",

                                    style:"background-color:pink"

                                },

                                {

                                    html:"Middle panel",

                                    style:"background-color:red"

                                },

                                {

                                    html:"Right panel",

                                    style:"background-color:yellow"

                                }

                            ]

                        },

                        {

                            id:"carousel2",

                            direction:"vertical",

                            items:[

                                {

                                    html:"Top panel",

                                    style:"background-color:pink"

                                },

                                {

                                    html:"Middle panel",

                                    style:"background-color:red"

                                },

                                {

                                    html:"Bottom panel",

                                    style:"background-color:yellow"

                                }

                            ]

                        }

                    ]

                });

                Ext.Viewport.add(panel);

                panel.getComponent("carousel1").setActiveItem(1);

            }

        })

    </script>

</body>

</html>

sencha touch xtype的更多相关文章

  1. Sencha Touch xtype对应的class

    Sencha Touch 2的有效xtype xtype Class ----------------- --------------------- actionsheet Ext.ActionShe ...

  2. 跟我一起玩转Sencha Touch 移动 WebApp 开发（一）

    1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...

  3. 【转载】Sencha Touch 提高篇 组件选择器

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:威老     原文地址:http://www.cnblogs.com/weil ...

  4. sencha touch tabsidebar 源码扩展

    先上图看效果 没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的. 插件js下载地址:http://www.m ...

  5. Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)

    常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...

  6. sencha touch 2 tabpanel中List的不显示问题,解决方案

    笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用t ...

  7. Sencha Touch Guide

     1.一些命令 创建APP #  Make sure the current working directory is the Sencha Touch 2 SDK 例如D:\Program File ...

  8. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  9. sencha touch 常见问题解答(1-25)

    欢迎留言补充,持续更新中... 1.sencha touch 是什么? 答:Sencha touch框架是世界上第一个基于HTML 5的移动应用框架.它可以让你的Web应用看起来像网络应用.美丽的用户 ...

随机推荐

  1. 用 Android-X86 和 VirtualBox 玩安卓游戏

    目前的系统是 Ubuntu 14.04,近日玩了玩 flash 版的<皇家禁卫军:前线>塔防游戏,还是想试试原生安卓游戏的表现.发现大概有两个选择: 各类安卓模拟器:官方SDK模拟器,bl ...

  2. websphere OSGi应用环境下服务调用saaj包加载问题分析报告

    websphere OSGi应用环境下服务调用saaj包加载问题分析报告 作者:bingjava 版权声明:本文为博主原创文章,转载请说明出处:http://www.cnblogs.com/bingj ...

  3. Hibernate映射类型对照表

    Hibernate映射类型对照表 java类型  Hibernate映射类型  SQL类型 java.math.BigDecimal big_decimal numeric byte[] binary ...

  4. c++ ip地址相关

    #include <stdio.h> #include <string.h> #include <arpa/inet.h> #include <sys/typ ...

  5. 读书笔记：<世界是数字的>

    世界是数字的?第一次听到这个名词不由的感到惊讶,我有听过地球是海洋的,那世界不应该是人类共同拥有的吗或者也可以说世界是大自然的?为什么世界偏偏是数字的呢?我带着满心的疑问去看了那本<世界是数字的 ...

  6. UML工具选择

    今天在考虑UML工具的选择,个人要求比较简单:能够画用例图,时序图,活动图即可. 选择的工具主要有以下三个: 1.Enterprise Architect 2.Power Designer 15 3. ...

  7. 一个奇怪的网络故障 默认网关为0.0.0.0（Windows）

    用IPCONFIG命令看到的情况是这样: Windows IP 配置 以太网适配器 本地连接 : 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . ...

  8. 常用正则表达式（匹配URL/email/number）

    var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/ ...

  9. PHP合并数组array_merge函数运算符加号与的区别

    两个的区别是:1.数组键名为数字键名时,要合并的两个数组中有同名数字KEY的时候,使用array_merge()不会覆盖掉原来的值,而使用“+”合并数组则会把最先出现的值作为最终结果返回,而把后面的数 ...

  10. Rake::TestTask 介绍

    Rake::TestTask 介绍 通常我们创建一个新的项目的时候,会建立一个test或者spec的文件夹来存放测试的文件,运行这些测试需要单独的命令,比如在项目目录下执行rspec .或者ruby ...