Ext.ux.Cover - Coverflow extension for Sencha Touch

Hi i wonder if anyone could help


I have this store that cover that references a store called stored
[

Code:

---

]        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

[

Code:

---

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


[

---

]


if i use the following store the cover flow looks great
[

Code:

---

]        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
[

Code:

---

]        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
[

Code:

---

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

---

]

Heres the json from server
[

Code:

---

][{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

@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

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.

Is it me or is the keyboard navigation still working as well? Mines only responding to mouse.

Thanks for help!

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.

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...:-)

@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

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

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.

Yeah Thanks....:-) I will check it out.