Ext.ux.Cover - Coverflow extension for Sencha Touch

[elmasse]

If you are looking for a Sencha Touch Extension to emulate Coverflow take a look at this:

http://bit.ly/SenchaCover

It works only on iOS devices since Andriod has bugs with css animations (same for Chrome running on Linux)
So you can try it using Safari (Mac & Win) or Chrome (Mac)

Get the code at: https://github.com/elmasse/Ext.ux.Cover


Comments, feedback, issues are all welcome!

PS: Thinking about to rename package to Ext.ux.touch

[tomalex0]

Hi elmasse ,

That is a very nice implementation .

1.Can you also add feature to tap on each item and selected item will comes to front.

2. Double clicking on item will flip to its info page.

Thanks for sharing

[elmasse]

Hi elmasse ,

That is a very nice implementation .

1.Can you also add feature to tap on each item and selected item will comes to front.

2. Double clicking on item will flip to its info page.

Thanks for sharing

You can do it without modify the code. Ext.ux.Cover inherits from Ext.DataView, so you can add listeners to:

itemtap
itemdbltap

to achieve what are you looking for.

		var cover = new Ext.ux.Cover({
			itemCls: 'my-cover-item',
			//These are just for demo purposes.
			height: !Ext.is.Phone? 400: undefined,
			width: !Ext.is.Phone? 800: undefined,
			//end-demo
		    itemTpl : [
				'<div>',
					'<div class="dev">{firstName} {lastName}</div>',
					'<div class="company">{company}</div>',
					'<div class="image"><tpl if="image"><img  src="{image}"></tpl></div>',
				'</div>'
			],
		    store: store,
			activeItem: 2,
			listeners:{
				itemdoubletap: function(cover, idx){ //#2
					console.log('itemdbltap', arguments);
					if(cover.activeItem === idx){
						//do something here 
					}

				},
				itemtap: function(cover, idx){ //#1
					console.log('itemtap', arguments);
					if(cover.activeItem !== idx){
						cover.setActiveItem(idx);
					}
				},
				scope: this
			}
		});

Hope this works for you. Anyway, I'm still working on this component so maybe I would add some features like this in a near future.

Best.
Max

[gkatz]

this is just beautiful... thanks a lot!

[elmasse]

Please, if you have a Playbook, or a supported BB, I would like to know if this component is working on those devices.

I've no Windows OS to install a RIM simulator

Thanks in advance!
Max

[Mrs_Kensington]

Just tried this on a Blackberry Playback and it seemed to work fine, just as smooth as on my iPad 1 (if not a little smoother).

I also tried it on a Samsung Galaxy tab 10.1 I managed to get it to load twice (out of 8 goes) without crashing the browser and it almost looks right, there just seems to be some z-index issues which hides the left edge of the selected cover and causes some odd popping on the animation.

Overall though it's really impressive!

Mrs Kensington