Results 1 to 3 of 3

Thread: Question on how carousel caches inner elements for optimization

  1. #1
    Sencha User elwhiz's Avatar
    Join Date
    Apr 2009
    Posts
    28
    Vote Rating
    0
      0  

    Default Unanswered: Question on how carousel caches inner elements for optimization

    Hi,

    I have a big application and often times it needs more than 3 carousel items and have a bunch of elements inside of it.

    I notice that with ST 2, only 3 carousel inner items are rendered and served as the container for inner elements and its reused again if it has more than 3 items.

    I also notice that even though it uses 3 carousel items, it renders the inner elements/panels on the dom even though its not painted on the screen. I have seen this behavior when I stuff each carousel item with scrollable panels with images. On every carousel item I scroll to the bottom of panel until I reach the last carousel item, say the 20th. I notice that when I go back, every panel is still scrolled to the bottom. When I also made a network inspection, the images for all the inner panel of the carousel are being loaded even though Im still on the first carousel item.

    I want to know if this is really the case that somewhere in the dom, the inner panel of the carousel items are cached. I also want to know how I can optimize my app to only render and invoke events when the carousel item is active. I dont want to fire all events at once for the 20 carousel items with inner panels. I also want to have small memory footprint and want to destroy the inner panels when its not the active carousel item.

    Thank you in advance for helping.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,336
    Answers
    3885
    Vote Rating
    1297
      0  

    Default

    There are the <div> elements that are reused so that we can inject the element for the item that is going to take up. You can change the bufferSize config to tell the Carousel how many items it should use. By default it is 1 so you will have 1 on each side of the active item making it have 3 of the cache <div>s. You can set it to 2 and have 5 cache <divs>

    Code:
    new Ext.carousel.Carousel({
        fullscreen : true,
        bufferSize : 2,
        items      : [
            {
                html : 'One'
            },
            {
                html : 'Two'
            },
            {
                html : 'Three'
            },
            {
                html : 'Four'
            },
            {
                html : 'Five'
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Hi, I've found this very old post and I have a question.

    Using a smaller bufferSize will only affect performance or could it make the carousel not responsive ?

    Thanks

Tags for this Thread

Posting Permissions

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