1. #1
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default Ext.ux.touch.SwipeTabs

    Ext.ux.touch.SwipeTabs


    This is a plugin that enables the user to swipe left and right to navigate between tabs.

    https://github.com/VinylFox/Ext.ux.touch.SwipeTabs

    Enjoy

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Next time please ask before you read my mind.

    Thanks anyway.

  3. #3
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    I actually have cameras setup in your office. Easiest way to anticipate what you need.

    I don't know how many of my friends I watched trying to do this on their iPhone in my app...it seems to be a very natural interaction.

  4. #4
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    *waving to all possible camera locations*

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    Hi Shea, thanks for sharing this! Would you mind to share a very basic example that uses the plugin? Had no luck with my rudimentary programming knowledge :-)

    Thanks,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  6. #6
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    There is a small example on the Github page for this project, but ill try to get ya started...

    The plugin is pretty self reliant, all that is needed is to add it to a TabPanel and it will do the rest for ya.

    So first off, you need to download the Ext.ux.touch.SwipeTabs.js file from Github and include it in your html page just after the ext-touch.js file.

    Then in your TabPanel, add a plugins config containing an instance of the plugin like so:

    PHP Code:
      {
        
    xtype'tabpanel',
        ...,
        
    plugins: [new Ext.ux.touch.SwipeTabs()],
        ...
      } 
    That should be it. All of your tabs will have swipe navigation between them.

  7. #7
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    Hi & Thanks Shea, i was missing the declaration in the HTML file. But even if i am doing that, safari throws out an error and the page is not displayed. Is this supposed to work only if the tabpanel is expicitely set as xtype (xtype: 'tabpanel',)? What i am trying is to use the tab example from RC1 (probably wrong than...):

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: false,
        onReady: function() {
            var tabpanel = new Ext.TabPanel({
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
    
    // Here you go you cool plugin!
    
    			plugins: [new Ext.ux.touch.SwipeTabs()],
    			
    //-----------------------------
    			
                fullscreen: true,
                ui: 'light',
                cardSwitchAnimation: {
                    type: 'slide',
                    cover: true
                },
                
                defaults: {
                    scroll: 'vertical'
                },
                items: [{
                    title: 'About',
                    html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                    iconCls: 'info',
                    cls: 'card1'
                }, {
                    title: 'Favorites',
                    html: '<h1>Favorites Card</h1>',
                    iconCls: 'favorites',
                    cls: 'card2',
                    badgeText: '4'
                }, {
                    title: 'Downloads',
                    id: 'tab3',
                    html: '<h1>Downloads Card</h1>',
                    badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                    cls: 'card3',
                    iconCls: 'download'
                }, {
                    title: 'Settings',
                    html: '<h1>Settings Card</h1>',
                    cls: 'card4',
                    iconCls: 'settings'
                }, {
                    title: 'User',
                    html: '<h1>User Card</h1>',
                    cls: 'card5',
                    iconCls: 'user'
                }]
            });
        }
    });
    
    Thanks,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  8. #8
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    I get I guess the same error as you Sandor: (In Chrome)
    Code:
    Uncaught TypeError: Cannot call method 'on' of undefined in sencha-touch-debug.js:526

  9. #9
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    I found the problem, get the most recent version from Github and try again.

    Thanks guys.

  10. #10
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    Sweeeet. Thanks Shea! But i would change the js and css declarations in the header of the example :-) Makes more sense than renaming the ST installation i think:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Tab Swipe Example</title>
    		<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
      		<script type="text/javascript" src="../../sencha-touch.js"></script>
    		<script src="../../src/Ext.ux.touch.SwipeTabs.js"></script>
    		<script>
    		Ext.setup({
    		    onReady: function() {
    		        var tabpanel = new Ext.TabPanel({
    		            tabBar: {
    		                dock: 'bottom',
    		                layout: {
    		                    pack: 'center'
    		                }
    		            },
    					plugins: [new Ext.ux.touch.SwipeTabs()],
    		            fullscreen: true,
    		            ui: 'light',
    		            cardSwitchAnimation: {
    		                type: 'slide',
    		                cover: true
    		            },		            
    		            defaults: {
    		                scroll: 'vertical'
    		            },
    		            items: [{
    		                title: 'About',
    		                html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
    		                iconCls: 'info',
    		                cls: 'card1'
    		            }, {
    		                title: 'Favorites',
    		                html: '<h1>Favorites Card</h1>',
    		                iconCls: 'favorites',
    		                cls: 'card2',
    		                badgeText: '4'
    		            }, {
    		                title: 'Downloads',
    		                id: 'tab3',
    		                html: '<h1>Downloads Card</h1>',
    		                badgeText: 'Text can go here too, but it will be cut off if it is too long.',
    		                cls: 'card3',
    		                iconCls: 'download'
    		            }, {
    		                title: 'Settings',
    		                html: '<h1>Settings Card</h1>',
    		                cls: 'card4',
    		                iconCls: 'settings'
    		            }, {
    		                title: 'User',
    		                html: '<h1>User Card</h1>',
    		                cls: 'card5',
    		                iconCls: 'user'
    		            }]
    		        });
    		    }
    		});
    		</script>
    		
    		<style type="text/css" media="screen">
    		   body {
    		       background-color: #333;
    		   }
    		   .x-tabpanel > .x-panel-body .x-panel-body {
    		       padding: 100px 0;
    		       text-align: center;
    		       font-size: 72px;
    		       font-weight: bold;
    		       color: rgba(0,0,0,.2);
    		       text-shadow: rgba(255,255,255,.2) 0 1px 0;
    		       padding: 100px 15%;
    		   }
    		   .x-phone .x-tabpanel > .x-panel-body .x-panel-body {
    		       padding: 30px 20px;
    		       font-size: 36px;
    		   }
    		   .x-phone p {
    		       font-size: 16px;
    		       line-height: 18px;
    		   }
    		   h1 {
    		       font-weight: bold;
    		   }
    		   p {
    		       font-size: 24px;
    		       line-height: 30px;
    		   }
    		   .card1 .x-panel-body {
    		       background-color: #ccc;
    		   }
    		   .card2 .x-panel-body {
    		       background-color: #5E99CC;
    		   }
    		   .card3 .x-panel-body {
    		       background-color: #759E60;
    		   }
    		   .card4 .x-panel-body {
    		       background-color: #9C744F;
    		   }
    		   .card5 .x-panel-body {
    		       background-color: #926D9C;
    		   }
    
    		</style>
    	</head>
    	<body>
    	</body>
    </html>
    Cheers,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

Similar Threads

  1. Ext Designer for Touch
    By Frank R in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 11 Feb 2012, 12:53 PM
  2. Ext JS and Sencha Touch!
    By mcamer in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 1 Dec 2010, 10:19 AM
  3. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  4. How can I use the Ext.Msg in sencha touch?
    By bu123 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 23 Jul 2010, 4:35 AM
  5. Ext Touch Core anyone?
    By mystix in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Jun 2010, 4:52 AM

Thread Participants: 10

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi