1. #1
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      0  

    Default Ext.ux.Cover - Coverflow extension for Sencha Touch

    Ext.ux.Cover - Coverflow extension for Sencha Touch


    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

  2. #2
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      0  

    Default


    Quote Originally Posted by tomalex0 View Post
    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.

    Code:
    		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

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    390
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    this is just beautiful... thanks a lot!

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
    Mrs_Kensington is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    sarajay is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      0  

    Default


    Quote Originally Posted by Mrs_Kensington View Post
    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

  9. #9
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      0  

    Default


    Quote Originally Posted by sarajay View Post
    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.

  10. #10
    Touch Premium Member
    Join Date
    Feb 2011
    Posts
    57
    Vote Rating
    0
    mvoss is on a distinguished road

      0  

    Default Nice,

    Nice,


    Nice work. I love it. Well done!

    Regards,
    Markus