PDA

View Full Version : Ext.ux.Cover - Coverflow extension for Sencha Touch



elmasse
18 Jul 2011, 6:53 AM
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
19 Jul 2011, 11:46 AM
Hi elmasse ,

That is a very nice implementation =D>.

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
19 Jul 2011, 12:24 PM
Hi elmasse ,

That is a very nice implementation =D>.

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
27 Jul 2011, 2:38 AM
this is just beautiful... thanks a lot!

elmasse
2 Aug 2011, 6:02 AM
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
5 Aug 2011, 1:27 PM
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
8 Aug 2011, 2:11 AM
Looks good. =D>

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
9 Aug 2011, 9:20 AM
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
9 Aug 2011, 9:23 AM
Looks good. =D>

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
20 Aug 2011, 7:07 AM
Nice work. I love it. Well done!

Regards,
Markus

elmasse
30 Aug 2011, 4:39 AM
Glad you like it Markus!

Thanks for the feedback!

Best,
Max

gauravtoshniwal
20 Sep 2011, 11:37 AM
I do not seem to have the detail (flip) card working....
Can anyone help? I dont think this is anywhere in the documentation.
Thanks in advance :)

elmasse
21 Sep 2011, 3:19 PM
That's not yet implemented. But I will add it to my list :)

elmasse
17 Oct 2011, 6:25 AM
Guys,

I have created a new branch on github for SenchaTouch 2 version of Ext.ux.Cover.
Check it out at https://github.com/elmasse/Ext.ux.Cover/tree/sencha-touch-2

Any comments are more than welcome.

I have some issues with orientationChange event in this first version for ST2, but I'm working on it.

fizo
18 Oct 2011, 2:09 AM
Hi elmasse, good job sharing this for others to use. But im having a problem implementing the coverflow. It works perfectly when i view my code using chrome browser however, when i debug it using the iphone simulator or the real iphone, the anel where i put the coverflow item is empty (the coverflow doesn't show). This is the code i used dont know where the problem is from or if there are any other attributes or parameters ive got to specify to make it work.


Ext.regModel('Flow', {
fields : [ 'menu', 'description' ]
});


var stored = new Ext.data.JsonStore({
model : 'Flow',
data : [ {
menu : 'about',
description : 'about us',
image : './images/panel_example.jpg'
}, {
menu : 'food',
description : 'food & drink',
image : './images/food_panel.jpg'
},]
});


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"> {description}</div>',

'<div class="image"><tpl if="image"><img src="{image}"></tpl></div>',
'</div>' ],
store : stored,
activeItem : 0,
listeners : {
itemdoubletap : function() {
console.log('itemdbltap', arguments);
},
itemtap : function(cover, idx) {
console.log('itemtap', arguments);
if (cover.activeItem !== idx) {
cover.setActiveItem(idx);
}
},
scope : this
}
});
var theTab= new Ext.TabPanel({
fullscreen: true,
tabBar:{
dock: 'bottom',
layout: {pack: 'center'}
},
//cls: 'thepanel',

items:[{

//Demo purpose
layout: Ext.is.Phone ? 'fit': {
type: 'vbox',
pack:'center',
align: 'center'
},
//end demo
items: [cover]
}]
});

ive also put references to the cover.css and cover.js in my html file.

elmasse
18 Oct 2011, 9:59 AM
Fizo,

Try this code. You had an extra comma in data definition, I have also removed code from demo so it will be cleaner.




Ext.regModel('Flow', {
fields : [ 'menu', 'description' ]
});

var stored = new Ext.data.JsonStore({
model : 'Flow',
data : [ {
menu : 'about',
description : 'about us',
image : './images/panel_example.jpg'
}, {
menu : 'food',
description : 'food & drink',
image : './images/food_panel.jpg'
} // Check here you had an extra comma (,)
]
});


var cover = new Ext.ux.Cover({
itemCls : 'my-cover-item',
itemTpl : [
'<div>',
'<div class="dev"> {description}</div>',
'<div class="image"><tpl if="image"><img src="{image}"></tpl></div>',
'</div>' ],
store : stored,
activeItem : 0
});

var theTab= new Ext.TabPanel({
fullscreen: true,
tabBar:{
dock: 'bottom',
layout: {pack: 'center'}
},
items:[cover]
});



Let me know if it doesn't work. Or just shoot me an email - elmasse <at> gmail <dot> com

prakash.kapa
13 Nov 2011, 9:05 PM
Hi,

I am looking to implement the vertical cover flow. Can you help me to convert it to vertical stype.

Thanks,
Prakash.

seb123
16 Nov 2011, 12:31 AM
Hey guys, the coverflow app. is gorgeous!

Maybe you can help me. I try to add another category. First Coverflow-Page for my Movies, second Page for my Audio-Files.

I tried a lot, but it wouldn't work. How can I add another Page. I got the elmasse-Ext.ux.Cover-v0.1-2-g44c24ac Code. I added my Code, actually I got a second page, but it woun't work properly. The 'Movies' page have no content. I have to push first Movies-Tab, to get to the Audio-Tab...
(:|


Ext.create('Ext.tab.Panel',{
fullscreen: true,
tabBar:{
dock: 'bottom',
layout: {pack: 'center'}
},

items:[{
title: 'Movies',
iconCls: 'favorites',
//Demo purpose
layout: (Ext.os.deviceType === 'Phone')? 'fit': {
type: 'vbox',
pack:'center',
align: 'center'
},
//end demo
items: [cover]
},


//this is new
{
title: 'Audio',
iconCls: 'favorites',
//Demo purpose
layout: (Ext.os.deviceType === 'Phone')? 'fit': {
type: 'vbox',
pack:'center',
align: 'center'
},
//end demo
items: [cover]
},

]
})

elmasse
23 Dec 2011, 3:58 PM
@seb123

Try creating different cover instances for your panels. You should not have same instances on different containers.
Sorry for the late response. Please feel free to contact me by mail or just fill a github issue on my repo so I can take a look.

Thanks!

elmasse
27 Dec 2011, 4:37 PM
JP,

You cannot use item for Ext.ux.Cover. This is an implementation based on Ext.DataView so you will need a template and a Store to display information as it were a List but with a coverflow like view.

Please check the Cover wiki for more info: https://github.com/elmasse/Ext.ux.Cover/wiki

Thanks and Happy New Year!

hotatguitar
11 Feb 2012, 4:05 AM
Hi i wonder if anyone could help


I have this store that cover that references a store called stored
[
] var cover = Ext.create('Ext.ux.Cover', { itemCls: 'my-cover-item',
//These are just for demo purposes.
height: (Ext.os.deviceType !== 'Phone')? 400: undefined,
width: (Ext.os.deviceType !== 'Phone')? 800: undefined,
//end-demo
itemTpl : [
'<div>',


'<div class="company">{artist} </div>',
'<div class="image"><tpl if="image"><img src="{image}" ></tpl></div>',

'</div>'
],
store : stored,

selectedIndex: 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
}
});[]

Which has this model

[
] Ext.regModel('Flow', { fields : [ 'id', 'artist', 'name', 'icon', 'image', 'spotifyUrl', 'review', 'homeURL', 'homeUrlIcon' ]
});


[]


if i use the following store the cover flow looks great
[
] var storedx = new Ext.data.JsonStore({ model : 'Flow',
data : [ {

image : 'http://productshopnyc.com/htdocs/2007_ALBUMS_OF_THE_YEAR.JPG'
}, {

image : 'http://productshopnyc.com/htdocs/2007_ALBUMS_OF_THE_YEAR.JPG'
} // Check here you had an extra comma (,)
]
});[]

how ever if i use a controller call to server to get data
[
] var stored = new Ext.data.Store({
model: 'Flow',
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url : 'http://localhost:8080/spotify-portal/album/listJSON',
reader: {
type: 'json'

}
}),
autoLoad: true
});[]

It appears the if statement in this tag is always false
[
]'<div class="image"><tpl if="image"><img src="{image}" ></tpl></div>',[]

Heres the json from server
[
][{artist:"batman1",image : "http://img.uvumi.com/photos/2241/mini/album-cover-small2-1.jpg"},{artist:"batman2",image : "http://img.uvumi.com/photos/2241/mini/album-cover-small2-1.jpg"}][]

which appears to be ok as if i use the image div without the if it displays but formatting all screwy.

Any pointers

elmasse
13 Feb 2012, 12:48 PM
@hotaguitar

I've been debuging a bit the cover and I found a little issue when you use a store with proxy and you dont set up autoLoad true. It is fixed right now on the github repository.

Please feel free to download and test it. Thank you for your feedback!

https://github.com/elmasse/Ext.ux.Cover

Please if you find any bugs do not hesitate to contact me or just create an issue in github repo!

Thanks!
Max

hotatguitar
14 Feb 2012, 4:17 AM
I have just tried your update and it indeed now works on chrome and safari which is great thanks.

I have tried on iPhone though and run into issues.

Simple test as before run without the call to remote proxy and renders on iPhone correctly. wire up the json call and the iPhone doesn't render it.

Works fine in desktop browsers though.

Im also interested in the listeners you have a double tap listener? i just banged an alert in one described earlier in thread and it doesn't seem to wanna show on a double tap.


Thanks for help and nice work looks great.

hotatguitar
14 Feb 2012, 8:14 AM
Is it me or is the keyboard navigation still working as well? Mines only responding to mouse.

Thanks for help!

elmasse
15 Feb 2012, 12:53 PM
I'm working on the issue you mentioned earlier in your post. Regarding keyboard nav this is not supported since this extension is only for SenchaTouch and there you wouldn't like to use keyboard.

a.premkumar
15 Mar 2012, 3:33 AM
This is a nice piece of work. It is working good. but I felt that it would be great if the height and width of the Coverflow is automatically acquired just like the othe Components in Sencha Touch 2. Do you have any plans to fix this issue?

Anyway, Its a great effort and hats off to you...:-)

elmasse
15 Mar 2012, 8:09 AM
@a.premkumar

It already gets size automatically. The example has some height and width just for demo purposes, mainly cause I don't do the profile detection so I'm setting up those values to get the example work on phone/ipad/desktop.

Let me know if this is what you mean or I'm missing smth.

Best!
Max

a.premkumar
16 Mar 2012, 6:30 AM
After I saw your reply, I tried to checked it. It takes the window width by default but it makes me to hard code the height of the coverflow. I dono what im missing but i could do with your help.

Regards,
Premkumar.A

elmasse
20 Mar 2012, 12:39 PM
Ext.ux.Cover doesn't set the height/width or the component in the screen, what you need to do is to specify the layout on cover's container. If take a look on the example, in case you run it on a phone, the height and width are undefined and the tabPanel gets a fit layout, which will be in charge of setting the corresponding sizes.
What is inferred by the Ext.ux.Cover is the size of each item based on the Cover dom element size.

a.premkumar
21 Mar 2012, 5:55 AM
Yeah Thanks....:-) I will check it out.

vimalsank
16 Apr 2012, 10:02 PM
<b>CoverFlow extension for views</b>

Is it possible to place views(view-Page contains fields like text box and buttons) instead images?

I want to implement the same using multiple views. Any idea?

Please advice.


Thanks.

avsivaprakasam
4 Jul 2012, 4:35 AM
Hi ,

Am using this cover flow in my app. When the first or last item is selected cover flow drag should be disabled. Any idea how to implement this.

mariovde
5 Jul 2012, 3:19 AM
You sir, deserve a statue!
Magnificent! thanks!

kclerc
8 Oct 2012, 2:29 AM
Hey
I have a question to your extension

Is it possible to add the "bulletpoint" at the bottom like in the Carousel Component?

Thx for your help

Cheers
Kevin

kclerc
30 Oct 2012, 5:32 AM
Hey guys

Do you have any idea why the itemTap event on android 2.3 is not firing?
I tried already a lot of stuff but nothing changed :-(

Thanks a lot for your help

cheers
Kevin

UCHIHA.ITACHI
10 Nov 2012, 11:27 PM
Thanks dude, taht's Greate

sendy
6 Jan 2013, 1:21 PM
I am using this plugin it works fine but I want also to show video and audios how can I do it please.

arbinds
20 May 2013, 6:03 AM
Hi Elmasses,
I have checked you demo its working fine on iOS device and good job.
But when i tested on android device it's fail to run as expected behavior.
Please suggest if there is any solution.

Regards,
Arbind

anilvardhan.p
21 Jan 2014, 10:25 PM
Hi,
I liked the plugin, as i am new to sencha couldn't able to understand how to use it in my view.
please let me know steps on, placing the files in proper folder and how to call it in my view file.

Thanks in advance.

anilvardhan.p
22 Jan 2014, 11:58 PM
Hi all,
please suggest me how i can use it in my view.
Due to launch function mentioned in this, whenever i run my app it's displaying directly this animation only.

i want this in a view that's it!!

I feel for all exp sencha guys it's silly questions...but i am just started...please help me!!