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

[sarajay]

Looks good.

Wondering, is it possible to create similar effect, to navigate with multiple views?
any idea or sample would be helpful

Thanks in Advance
JP

[elmasse]

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

Many many thanks for your help on this. I think that what you mentioned about the z-index issues is the same issue I'm experiencing on Chrome 12 for Mac OSX. Do not know the root cause yet, but if you take a look on the code, you will find some commented code about setting z-indexes. Anyway using that adds complexity and time to the main function and may cause some lags when using the component, so since it won't work (yet) on Android devices I prefer to remove them.

Again, thanks a lot for your help on testing this component!

Bests!
Max

[elmasse]

Looks good.

Wondering, is it possible to create similar effect, to navigate with multiple views?
any idea or sample would be helpful

Thanks in Advance
JP

JP,

Glad you like it! I guess it is completely possible to take this into, maybe, a Layout to do what you say.

[mvoss]

Nice work. I love it. Well done!

Regards,
Markus