Working Ext.ux.Cover

Radio_basis.js

Ext.require('Ext.ux.Cover');

Ext.application({
	name: 'Cover',
	launch: function(){

		var cover = new 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="dev">{firstName} {lastName}</div>',
					'<div class="company">{company}</div>',
					'<div class="image"><tpl if="image"><img  src="{image}"></tpl></div>',
				'</div>'
			],
			store : {
			    fields: ['firstName', 'lastName', 'company', 'image'],
			    data: [
			        {firstName: 'Tommy',   lastName: 'Maintz', company: 'Sencha', image: './images/sencha.png'},
			        {firstName: 'Rob',     lastName: 'Dougan', company: 'Sencha', image: './images/sencha.png'},
			        {firstName: 'Max',     lastName: 'Fierro', company: 'elmasse!'},
			        {firstName: 'Ed',      lastName: 'Spencer', company: 'Sencha', image: './images/sencha.png'},
			        {firstName: 'Jamie',   lastName: 'Avins', company: 'Sencha', image: './images/sencha.png'},
			        {firstName: 'Aaron',   lastName: 'Conran', company: 'Sencha', image: './images/sencha.png'},
			        {firstName: 'Dave',    lastName: 'Kaneda', company: 'Sencha', image: './images/sencha.png'},
	   		        {firstName: 'Michael', lastName: 'Mullany', company: 'Sencha', image: './images/sencha.png'},
	   		        {firstName: 'Abraham', lastName: 'Elias', company: 'Sencha', image: './images/sencha.png'},
				    {firstName: 'Jay',     lastName: 'Robinson', company: 'Sencha', image: './images/sencha.png'}
			    ]
			},
			activeItem: 2,
			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 tab = Ext.create('Ext.tab.Panel',{
			tabBarPosition: 'bottom',
			items:[{
				title: 'Listen Live!',
				iconCls: 'favorites',
				//Demo purpose
				layout: (Ext.os.deviceType === 'Phone')? 'fit': {
					type: 'vbox',
					pack:'center',
					align: 'center'
				},
				//end demo
				items: [cover]
			},

			{
			    title: 'News',
				iconCls: 'favorites',
				styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'wRAY - The Joint'
                },
                
                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
			},
			{
			    xtype: 'toolbar',
			    docked: 'bottom',
			    defaults: {
			        xtype: 'button',
			        handler: function() {
			            var container = this.getParent().getParent(),
			                // use ComponentQuery to get the audio component (using its xtype)
			                audio = container.down('audio');

			            audio.toggle();
			            this.setText(audio.isPlaying() ? 'Pause' : 'Play');
			        }
			    },
			    items: [
			        { text: 'Play', flex: 1 }
			    ]
			},
			{
			    html: 'Hidden audio!',
			    styleHtmlContent: true
			},
			{
			    xtype : 'audio',
			    hidden: true,
			    url   : '/wray/music/gd.mp3'
			}
			]
		});

		//weird fix to call refresh when orientation changes
		Ext.Viewport.on('orientationchange', function(){cover.refresh();})
		Ext.Viewport.add(tab);
	}
});