Home

Ext.ux.Cover Wiki

A Coverflow implementation for Sencha Touch based on Ext.DataView

Ext.ux.Cover allows you to create a Coverflow presentation not only for images but for almost everything. This implementation aims to work in a similar way as Ext.List, so you can present images, text and even audio or video tags.

Currently supported devices (Tested)

• iOS (iPhone, iPod Touch, iPad)
• Blackberry (Playbook)

Why is not Android listed?

At the time that this wiki is written, Android (2.x and 3.0) has some issues rendering CSS3 Animations and 3D Transitions, so it will break the browser when you try to load the example.

Update Android ICS claims to support 3D transitions, which is totally not true. It's lack of -webkit-perspective makes that translate in Y axis to not be working. Although, scale is another issue despite of the performance - which btw, just sucks.

How to use Ext.ux.Cover

Ext.ux.Cover component is very simple. Since it extends from Ext.DataView you have to supply a few parameters to its constructor:

var cover = Ext.create('Ext.ux.Cover', {
	store: store,
	itemTpl: template
});

The required parameters are store and itemTpl.

• store {Ext.data.Store}
• itemTpl {Ext.XTemplate}

In the same way as Ext.dataview.DataView, Ext.ux.Cover uses an Ext.XTemplate for its internal templating mechanism and it is bound to an Ext.data.Store.

var store = Ext.create('Ext.data.Store',{
    fields: ['firstName', 'lastName', 'company', 'image'],
    data: [
        {firstName: 'Tommy',   lastName: 'Maintz', company: 'Sencha', image: './images/sencha.png'},
        {firstName: 'Rob',     lastName: 'Dougan', company: 'Sencha', image: './images/sencha.png'},
	    {firstName: 'Jay',     lastName: 'Robinson', company: 'Sencha', image: './images/sencha.png'}
    ]
});

var template = new Ext.XTemplate(
	'<div>',
		'<div class="dev">{firstName} {lastName}</div>',
		'<div class="company">{company}</div>',
		'<div class="image"><tpl if="image"><img  src="{image}"></tpl></div>',
	'</div>'
);

var cover = new Ext.ux.Cover({
	store: store,
	itemTpl: template
});

var viewport = new Ext.Panel({
	fullscreen: true,
	items:[cover]
});

Themes

If you take a look to the Ext.ux.Cover project structure you will notice a folder called theme. Ext.ux.Cover has its own theming mixin function to generate the css file. Although, you can use that mixin if you are generating an unique css file using Sencha's mixins for theming your application. In case you don't, you can just reference cover.css inside your html file, but I wil recommend you to take a look on this post where it is explained how to use compass and sass for theming Sencha Touch.