Horizontal and Vertical carousel creation using SenchaTouch2.0

1. Download the latest SenchTouch2.0 library from following location.
       http://www.sencha.com/products/touch/download
2. Create a one new root folder and name it is “app”.
3. Create a “js” folder inside the “app” folder and copy the "sencha-touch-all.js" file from downloaded library and paste it into “js” folder.
4. Create a “css” folder inside the “app” folder and copy the “sencha-touch.css” file from downloaded library and paste it into “css” folder.
5. Create "app.js" file into inside the app folder and paste the following code.


Ext.application({
 name : 'HCarousel',
 requires : ['Ext.carousel.Carousel'],
 launch : function() {
  Ext.Viewport.add({
  xtype : 'carousel',
  direction : 'horizontal',
  fullscreen : true,
           items :  [{
                 html : 'Panel 1',
                   style: 'background-color: #5E99CC'
           },
                    {
                      html : 'Panel 2',
                      style: 'background-color: #759E60'
                    },
                    {
                      html : 'Item 3'
                    }]
        });
 }
});


6. Create a index.html file into inside the app folder and add the following code.
<html>

 <head>
   <title>Horizontal Carousel</title>
    <link rel="stylesheet" type="text/css" href="css/sencha-touch.css"></link>
    <script type="text/javascript" src="js/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
 </head>
 <body></body>
</html>
7. Preview the index.html file using either chrome or safari browser.



8. For creating vertical carousel just change the direction value as 'vertical' from 'app.js'.




Ext.application({
 name : 'VCarousel',
 requires : ['Ext.carousel.Carousel'],
 launch : function() {
  Ext.Viewport.add({
  xtype : 'carousel',
  direction : 'vertical',
  fullscreen : true,
           items :  [{
                 html : 'Panel 1',
                   style: 'background-color: #5E99CC'
           },
                    {
                      html : 'Panel 2',
                      style: 'background-color: #759E60'
                    },
                    {
                      html : 'Item 3'
                    }]
        });
 }
});


Notify the effect.






Comments