PDA

View Full Version : Ext.ux.touch.SwipeTabs



VinylFox
8 Nov 2010, 11:02 AM
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

Steffen Hiller
8 Nov 2010, 3:33 PM
Next time please ask before you read my mind. ;)

Thanks anyway. :)

VinylFox
9 Nov 2010, 4:30 AM
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.

Steffen Hiller
9 Nov 2010, 4:43 AM
*waving to all possible camera locations*

sandor
11 Nov 2010, 5:11 AM
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,

VinylFox
11 Nov 2010, 7:28 AM
There is a small example on the Github page for this project (https://github.com/VinylFox/Ext.ux.touch.SwipeTabs), 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 (https://github.com/VinylFox/Ext.ux.touch.SwipeTabs/blob/master/src/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:


{
xtype: 'tabpanel',
...,
plugins: [new Ext.ux.touch.SwipeTabs()],
...
}

That should be it. All of your tabs will have swipe navigation between them.

sandor
11 Nov 2010, 7:50 AM
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...):


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,

Steffen Hiller
11 Nov 2010, 10:15 AM
I get I guess the same error as you Sandor: (In Chrome)


Uncaught TypeError: Cannot call method 'on' of undefined in sencha-touch-debug.js:526

VinylFox
11 Nov 2010, 12:46 PM
I found the problem, get the most recent version from Github and try again.

Thanks guys.

sandor
12 Nov 2010, 9:03 AM
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:



<!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,

VinylFox
12 Nov 2010, 9:35 AM
Glad your enjoying it.

As for the naming, my local web server routes all requests for /touch/* to the most recent build folder. Im not too worried about the examples being out of the box working. The end user should be able to figure out how to change a path on their own.

RonaldBrinkerink
16 Dec 2010, 7:59 AM
Hi Shea,

Great work. Should be in the product I think.
One of the items in my tabpanel is a list.
The plugin fails on this item because it doesn't have a getLayout method.
Should I put a panel around the list?

Thanx, Ronald

VinylFox
16 Dec 2010, 11:05 AM
I just noticed the same thing yesterday when building a new app.

The List Component had recently been changed to be a non-Panel based component which must now be contained within a Panel, so I'm sure there is something going on there.

Ill take a look into what's going on.

VinylFox
16 Dec 2010, 2:09 PM
Ok, I think I have it fixed now (https://github.com/VinylFox/Ext.ux.touch.SwipeTabs/commit/7b08e8e548b9fb61c412c87c1bf5279e83c3bfd9). Give it a try, see how it works for you.

gkatz
5 Jan 2011, 3:44 AM
love it!!!

gkatz
5 Jan 2011, 6:19 AM
Interesting...
swipe action on my carousel components stopped working once I added the plugin.
My root component is a tabpanel and its cards have carousels and so I cant use the plugin as is.
I still would love to incorporate it, what I need is to detect my 'current' view and if it includes the carousel I need to disable swipe tabs (or something like that).
any suggestions on how to do this?

VinylFox
5 Jan 2011, 6:27 AM
This plugin can't read your mind, it has no way to know if your swipe was meant to change tabs or move the carousel. Not sure why you expected that to work.

With that said, I have used a carousel as the last tab in a set of tabs and that works out just fine. Once you are at the first item in the carousel, the swipe activates the tab change, otherwise it moves the carousel.

gkatz
5 Jan 2011, 6:36 AM
thanks. of course this makes complete sense...
If I can detect what is the current view I need to check the most deaply nested visible child with swipe bahavior (carousel, tabpanel w. plugin) and it should be the one 'enjoying' the swipe...
not sure if this is feasible to implement

SimonFlack
17 Feb 2011, 12:38 AM
I ran into a little problem when I had a {xtype: 'map'} in one of my tabs. Everytime I swiped to move around the map I swiped to the next/previous tab.

To temporarily solve this I added a "noswipe: true," property to the tab panel containing the {xtype: 'map'} and modified the plugin with


initSwipeHandlers: function(){
this.cmp.til = this.cmp.items.length-1;
this.cmp.items.each(function(itm, i){
if(itm.noswipe && itm.noswipe === true){
//Dont add swipe
}else{

So I can still use the plugin and swipe between tabs but the plugin is not enabled on the tab panel containing my map.

VinylFox
28 Feb 2011, 8:42 AM
Thanks again Simon for your contributions, I have integrated your request, though I made a slight naming change. The noswipe config seemed a bit too much of a double negative to me, so I called it allowSwipe instead.

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

paulnurkkala
6 Jul 2011, 5:38 AM
Awesome plugin! Thanks!

sdavid
11 Oct 2011, 6:02 AM
hi,
first of all i woukld like to say thnak you to Vinyl Fox for this damn good plugin!

While playing around with it and setting the switchCardAnimation to 'cube' i realized that the tabpanel is correctly detecting the swipe to the left (next). So it transitions (with cube transition) well into the next card. But when I want to swipe to the right (back) the switchCardAnimation seems to be configured with 'slide' now and the duration is also not configured by me (must be '250' or something).

I donīt know if plugin is for slide only, otherwise let me know.
Cheers
Steven

christiandersen
16 Apr 2012, 6:17 AM
Are there any plans to port this functionality to Sencha 2.0?

bpulliese
6 May 2012, 9:01 PM
I'm using the sencha touch 2 update to this plugin and it seems to only detect the swipe on the actial tab toolbar and not the content. Is this the correct behaviour?

Sencha Touch 2 update: https://github.com/VinylFox/Ext.ux.touch.SwipeTabs/blob/master/src/Ext.ux.touch.SwipeTabs.js

hjeDK
28 Jun 2012, 1:23 AM
How do I add this plugin in to my app?
I keep getting:
Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: plugin.swipetabs

both if I add the .js file to the plugins-folder and if I put it in a touch folder in the ux folder.