Carousel页面

留下记录,以备以后查阅

效果如下


目录结构:

  1 app.js:
  2 Ext.Loader.setConfig({ enabled: true });
  3 Ext.application({
  4     name:"app",
  5     views:["Main"],
  6     controllers:["Application"],
  7     launch: function() {
  8         
  9         Ext.Viewport.add({
 10             xtype: "mainview"
 11         });
 12     }
 13 });
 14 
 15 main.js
 16 Ext.define("app.view.Main",{
 17     extend:"Ext.Carousel",
 18     xtype:"mainview",
 19     
 20     config:{
 21         items:[{
 22             xtype:"toolbar",
 23             docked:"top",
 24             title:"产品推荐",
 25             items:[{
 26                 xtype:"button",
 27                 id:"backbutton",
 28                 ui:"back",
 29                 text:"后退"
 30             }]
 31         },{
 32             xtype:"panel",
 33             layout:"card",
 34             id:"panel1",
 35             items:[{
 36                 xtype:"image",
 37                 id:"image1",
 38                 cls: 'my-carousel-item-img',
 39                 src:"resources/img/1.jpg"
 40             },{
 41                 //cls: 'my-carousel-item-img',
 42                 html:"<img src='resources/img/1.jpg' align='center' height='30%' width:'30%'><br/>这是第一个产品的介绍"
 43             }]
 44         },{
 45             xtype:"panel",
 46             layout:"card",
 47             id:"panel2",
 48             items:[{
 49                 xtype:"image",
 50                 id:"image2",
 51                 cls: 'my-carousel-item-img',
 52                 src:"resources/img/2.jpg"
 53             },{
 54                 //cls: 'my-carousel-item-img',
 55                 html:"<img src='resources/img/2.jpg' align='center' height='30%' width:'30%'><br/>这是第二个产品的介绍"
 56             }]
 57         }]
 58     }
 59 });
 60 
 61 application.js
 62 Ext.define("app.controller.Application",{
 63     extend:"Ext.app.Controller",
 64     config:{
 65         refs:{
 66             image1: "#image1",
 67             panel1: "#panel1",
 68             panel2: "#panel2",
 69             image2: "#image2",
 70             back : "#backbutton",
 71             main: "mainview"
 72         },
 73         
 74         control:{
 75             image1:{
 76                 tap:"swichcard"
 77             },
 78             image2:{
 79                 tap:"swichcard"
 80             },
 81             back:{
 82                 tap:"goback"
 83             }
 84         }
 85     },
 86     
 87     swichcard:function(img,e,obj){
 88         img.getParent().setActiveItem(1);
 89     },
 90     
 91     goback:function(but,e,obj){
 92         var panel1 = this.getPanel1();
 93         var    panel2 = this.getPanel2();
 94         var index = this.getMain().getActiveIndex();
 95         if(index == 0){
 96             panel1.setActiveItem(0);
 97         }else{
 98             panel2.setActiveItem(0);
 99         }
100     }
101 });
example.css 
 1 /**
 2  * Cusotm css for the Carousel example
 3  */
 4 
 5 body {
 6     background-color: #FFFF;
 7 }
 8 
 9 .my-carousel-item {
10     background: url(images/loading.png) no-repeat center center;
11 }
12 
13 @media screen and (orientation:portrait) {
14     .my-carousel-item-img {
15         background-size: 100% auto;
16 }
17 }
18 
19 @media screen and (orientation:landscape) {
20     .my-carousel-item-img {
21         background-size: auto 100%;
22 }
23 }
24 
25 .x-portrait .my-carousel-item-img {
26     background-size: 100% auto;
27 }
28 
29 .x-landscape .my-carousel-item-img {
30     background-size: auto 100%;
31 }
32 
33 .my-carousel-item-img {
34     background-position: center center;
35 }
36 
37 .x-carousel-indicator > * {
38     background-color: orange !important;
39     opacity: 0.4;
40 }
41 
42 .x-carousel-indicator > .x-carousel-indicator-active {
43     opacity: 1;
44 }
index.html 
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Test</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <link rel="stylesheet" href="../Touch2/resources/css/sencha-touch.css" type="text/css" />
 7     <link rel="stylesheet" href="resources/css/example.css" type="text/css" />
 8     <script type="text/javascript" src="../Touch2/builds/sencha-touch-all.js"></script>
 9     <script type="text/javascript" src="app.js"></script>
10 
11   </head>
12   
13   <body>
14   </body>
15 </html>






posted @ 2012-03-07 15:17  大肉包子  阅读(318)  评论(0)    收藏  举报