Ext.ux.Cover - Coverflow extension for Sencha Touch

[elmasse]

Glad you like it Markus!

Thanks for the feedback!

Best,
Max

[gauravtoshniwal]

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]

That's not yet implemented. But I will add it to my list

[elmasse]

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.Co...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]

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]

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]

Hi,

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

Thanks,
Prakash.

[seb123]

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]

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

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!