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
Printable View
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
Next time please ask before you read my mind. ;)
Thanks anyway. :)
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.
*waving to all possible camera locations*
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,
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:
That should be it. All of your tabs will have swipe navigation between them.PHP Code:{
xtype: 'tabpanel',
...,
plugins: [new Ext.ux.touch.SwipeTabs()],
...
}
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 & 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,
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
I found the problem, get the most recent version from Github and try again.
Thanks guys.
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:
Cheers,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 & 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>