View Full Version : Ext.plugin.touch.CardSwipe

29 Mar 2011, 10:46 AM
Just a convenience plugin. Have a Panel using the CardLayout? You can add functionality of using the swipe event to go forward or back. Pretty simple:

GitHub: https://github.com/mitchellsimoens/Ext.plugin.touch.CardSwipe
Demo: http://www.simoens.org/Sencha-Projects/demos/

31 Mar 2011, 8:39 PM
how we can do this type of menu in Sencha Touch,
menu sliding vertically,

below is the sample image

1 Apr 2011, 4:13 AM
Why didn't you create a new thread for this? This is off topic for this thread.

Anyway, a docked DataView could do this easily.

1 Apr 2011, 5:34 AM
i can create the new one,

and thanks for the prompt reply,

29 Aug 2011, 8:14 AM
very nice plugin!

I wonder how to

a) find out which content item is active
b) let the plugin rotate to a specific content item OR rotae to a random one


26 Dec 2011, 11:08 AM
Very nice plugin - is there any way of excluding a card from the sliding behaviour (if for example you have a card with a draggable map)?


21 Jun 2012, 8:34 AM
Please provide a short Readme in your github directories, with a short step-by-step guide on how to implement your CardSwipe component.

The majority of plugin/framework contributors on github are doing this, helping others to get a quick start adding their components...

And yes: of course I can figure it out myself, reading through your code... and everyone else can do this, spending hours of wasted time that could have been saved with a simple readme...

your plugins are all missing a Readme with a short guide.... be friendly and social and add it to save other ppl some time... it will take you only a couple of minutes but saves hours/weeks/days for all the other ppl using your component.

thank you

21 Jun 2012, 8:46 AM
I do when I can, not sure how you wasted hours, the example shows how to use it

21 Jun 2012, 11:06 PM

the example doesn't tell you where to put the files and stuff...

make no mistake: YOU know how to use that component, but for OTHERS it's hard to even know where to put the files and how to set references and which lines of code do really matter.... of course every1 can read through the example and do some oldskool "TRY AND ERROR" until it works. But why? Why not a readme that tells the important stuff and gets you started within a couple of minutes...

22 Jun 2012, 12:02 AM
So far I can't figure out how to implement CardSwipe to my Sencha Touch 2 project. Tried some stuff, but got error messages like:

[Ext.createByAlias] Cannot create an instance of unrecognized alias: plugin.cardswipe

Where do you put the file Ext.plugin.touch.CardSwipe.js

I tried it in several directories like


i also put it in

Would be great to get a short 2 lines of answer on how to implement and reference it in a Sencha Touch 2 project :-)

22 Jun 2012, 3:33 AM
nevermind, i noticed that CardSwipe is old and has many deprecated stuff in it, so to get this to work for Sencha Touch 2 would take me ages..

However here is the solution if any1 should search:

Ext.define('.........................', {
extend: 'Ext.Panel',
alias: '.............................',

config: {
id: '............................',
layout: {
type: 'card'

items: [
xtype: 'label',
html: '1111111111111111111111'
xtype: 'label',
html: '2222222222222222222222'

listeners : {
element : 'element',
swipe : function(e, t) {

if (e.direction == 'left')
// theIndex is a global var, set in "app.js": var theIndex = 0;
if (theIndex < (this.getItems().length-1))
this.animateActiveItem(theIndex, {type: 'slide', direction: 'left'});
if (theIndex > 0)
this.animateActiveItem(theIndex, {type: 'slide', direction: 'right'});



22 Jun 2012, 4:41 AM
@klaus777 This is in the ST1 forums so it's only going to work for ST1 currently but it would be simple to upgrade it.

22 Jun 2012, 4:42 AM
the example doesn't tell you where to put the files and stuff...

You can put the files where ever you want, just have to include it as a <script> like the example does or going into production include it in the build just like everything else.