Sencha Touch 2 – Implementing a Gratuitous Ext.List Tap Animation

A student in my Sencha Touch 2 class asked me recently how to trigger an animation on a list item that had been tapped by a user.

The solution is relatively straightforward (for iOS). Add the following style to your CSS:

  .rotateListViewItem {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 2s;
	-webkit-transform: rotateX(720deg);
  }

Then modify your Ext.List definition to refer to that class through the selectedCls property:

Ext.define("CrimeFinder.view.news.confess.List", {
 extend : 'Ext.dataview.List',
 xtype : 'confesslist',
 requires : ['Ext.plugin.PullRefresh', 'Ext.plugin.ListPaging'],
 config : {
   itemTpl : '{lname},{fname}',
   store : 'Confessions',
   selectedCls: 'rotateListViewItem',
   onItemDisclosure : true,
   clearSelectionOnDeactivate : true,
   plugins : [
    {
     xclass : 'Ext.plugin.PullRefresh',
     pullRefreshText : 'Pull down to see recent confessions!'
    }, 
    {
     xclass : 'Ext.plugin.ListPaging',
     autoPaging : true
    }
   ]
  }
});

Android webkit produces a whackier result that I haven’t had time to troubleshoot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s