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("", {
 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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s