Ext.ux.touch. ListOptions : Add a Twitter style menu to your List Items

Overview

This plugin duplicates the functionality found in Twitter’s mobile apps where an options menu is exposed after swiping over an item in a list. The plugin was created as an ‘I wonder if that’s possible’ type project and serves to prove once again that anything native apps can do Sencha Touch can do too.

The Plugin

The plugin is added to Ext.List components and requires only a few configuration options to get it up and running quickly, however it also offers quite a lot of control over its behaviour.

Configuration Options

Events

The plugin adds 3 events to the parent Ext.List component.

An Example

I’ll talk through a simple example that is based on the Ext.List demo in the Sencha Touch download package.

First I’ll quickly explain the Model, Store and plain List. I’ll assume you have a base index.html file with all the library files etc linked into it.

Defining the plugin

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
    model: 'Contact',
    getGroupString: function(record){
        return record.get('lastName')[0];
    },
    data: [{
        firstName: 'Tommy',
        lastName: 'Maintz'
    }
    ...
    {
        firstName: 'Jay',
        lastName: 'Robinson'
    }]
});

var list = new Ext.List({
    fullscreen: true,
    itemTpl: '{firstName} {lastName}',
    indexBar: true,
    store: store,
    disableSelection: true
});

list.show();

If you fire this inside your Ext.setup function and load the page you should see a list with some of Sencha’s employees in it.

Now, let’s add the plugin!

Firstly make sure you’ve added the Plugin’s source file and CSS file.

//Inside the Ext.List's config
...
plugins: [new Ext.ux.touch.ListOptions({
    menuOptions: [{
        id: 'Team Icon Tapped',
            img: 'images/team1_small.png'
    }, {
        id: 'Favourite Icon Tapped',
        img: 'images/favorites1_small.png'
    }, {
        id: 'Cart Icon Tapped',
        img: 'images/shop2_small.png'
    }, {
        id: 'Share Icon Tapped',
        img: 'images/share_small.png'
    }]
})]
...

By taking the default values for all the other config options and adding some menuOptions we get the plugin up and running straight away. You can now play around with the various options to get the plugin working how you want!

If you have any problems with using the plugin, have questions about how it works or have suggestions about ways we can make it better then please leave us a comment or drop us an email!