Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Infinite Carousel

  1. #1
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default Infinite Carousel

    I have made a quick example that in about 2 hours of time you can create an infinite carousel. It's quick and dirty right now but it works and I will clean up the code.

    demo

    Can't wait to see what Sencha has in plan for this also.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Posts
    294

    Default

    Hey, this is really cool. Could you explain, though, how it is infinite? Does it access the store after each cards? Or load all the cards from the store once and let you flip them? I was looking at the code and couldn't see how it is infinite.

    but great idea!

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    What it's doing is there is a data.Store behind there and I have 10 records loaded in it. You could potentionally have 1,000s if you want in the store.

    Right now it will keep 3 cards loaded. When you go forward it will look at the store if the card that is being switched to is the last in the store it will just switch to that card. If it is not the last then it will remove the first card and create a new card as the 3rd card. Same logic for going backward except it will remove the 3rd card and insert a new card to the beginning.

    In my testing it works flawlessly and will keep the order. Like I said I have to refactor the code to get thevcode to be good code but I got it to work and wanted everyone to see what you can do in under 2 hours. I even had to delete it all and start over but still got it to work.

    One bug I have found is if you swipe fast it will just stop loading new cards. Don't know why.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    294

    Default

    I think its great man. And the code is well written. This is very valuable and was on my TODO plate.

    One way it can be extended (rather easily I think), is to support paging back to the data store when it reaches the beginning or end of the data store records.

    So even though you have 3 cards 'loaded' in the carousel, when you hit the end of the data store (say 10 cards), it can trigger the store to refresh with a page increment and start over.

    Do you think its possible? I'll look into it.

    thanks again!

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    I wouldn't say the code is well written. I'd call this just a proof of concept. There are changes to the codenitself and abstraction that I want to do but I keep getting super busy. If you want to mess with it I can throw it on github or something, I don't have a license on it so you would be free to do what you want.

    Like I said, it's a proof of concept. I'd call it version 0.00001 dev. Haha
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Ok... I have done a few things.

    First off one thing that I did that was bothering the heck out of me was that I fired some custom events and used listeners to execute functions inside the class. This is a bad thing to do so I fixed it. Simple fix!

    Next thing was abstraction. I had four separate functions with a pair for when card switching forward and a pair for backward. I now have abstracted to just two functions. I could take down to one but sometimes I like to use extra functions for certain functions. The first function is the main logic that get the right record from the store and creates the card. The second does the actual inserting.

    Last thing was just taking some "if-then" statements and shortening them down to one line. Don't think this is a performance gain but to me for a more "production" code, it reads better. Debugging I think should be expanded out.

    With all of this I went from 137 lines (of not the best programming) to 109 lines (of a little better programming).

    Two features I want to incorporate:
    -Loading more records
    -Config option to how many cards to have actively loaded in the carousel

    I have a repository at github.com: http://github.com/mitchellsimoens/Se...inite-Carousel
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186

    Default

    This looks promising for a project I am working on, but the pause during loading is rather large (ipod touch 2 with ios4) A loading screen or graphic would be useful for that, but fine work for proof of concept.

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    It would have a launch graphic if I had a graphic made for it. The 'setup' for all sencha touch apps have this config and I have the code there just not the graphic.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  9. #9
    Ext User
    Join Date
    Dec 2008
    Location
    Colorado Springs, CO
    Posts
    32

    Default

    Any plans to make this compatible with version .95?

  10. #10
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Quote Originally Posted by omulriain View Post
    Any plans to make this compatible with version .95?
    I'm just finishing up with another small extension that I will be demoing tonight so I will see what I can do!
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Page 1 of 2 12 LastLast

Similar Threads

  1. Infinite carousel
    By DirectX in forum Sencha Touch 1.x: Discussion
    Replies: 13
    Last Post: 16 Apr 2012, 7:31 AM
  2. !Question about Carousel in Carousel...
    By yCD in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 31 Jul 2010, 9:51 AM
  3. [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.
    By Mphasize in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 1 Jul 2010, 11:41 AM
  4. Infinite loop with LiveGridView
    By id9848949 in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 12 Dec 2009, 11:36 AM
  5. Is infinite queryDelay for a ComboBox possible?
    By fetchinson in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 8 Apr 2008, 8:12 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •