Results 1 to 6 of 6

Thread: Recreated carousel item doesn't get added to carousel: Two-year old bug

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default Recreated carousel item doesn't get added to carousel: Two-year old bug

    I have a carousel that, as you swipe forward and backward, progressively creates and destroys carousel items (rather than having all carousel items at the same time, for app performance). At any time, you will have either two items (if you're at either end of the list), or three items (if you're in the middle of the list).

    However, I have found a bug that I absolutely cannot shake; I've actually had this bug for over two years now, and have just been handling it with pretty bad mitigations. Essentially, there are instances where a carousel item does not get fully created, the most common of which is the following:
    • Start at the beginning of the carousel
    • Swipe to the end of the carousel
    • Start swiping back toward the beginning of the carousel
    • The DOM elements for the item 3 spots from the end will not exist
    The "dead item" in question does exist according to sencha, if you call Ext.getCmp() with its ID, everything shows up as expected. However, the item's contents do not exist in the DOM; the only DOM element for the item is:

    HTML Code:
    <div class="x-carousel-item x-sized" id="ext-component-1" style="-webkit-transform: translate3d(0px, 0px, 0px);"></div>
    I've tried modulating the object's id so the 1st and 2nd instances of creating the object have different ids, destroying the contents of the carousel completely, repeatedly calling destroy on the object in question, and a million other things. The only "solution" I've found is Ext.Viewport.removeAll(true) and replacing the whole interface, which is obviously a terrible solution, and has its own bugs.

    I've even tried gutting my app completely and going with the most bare bones code, with a single object and a single listener. Still happens. The entire code for the simplified app is below. The sample app is here. Any help here would be unbelievably well-appreciated.

    Code:
    launch: function() {
            Ext.fly('appLoadingIndicator').setHtml()
    
    
            index = 1;
    
    
            Ext.Viewport.add({
                id:     'carousel',
                xtype:  'carousel',
                indicator:false,
                listeners: {
                    activeitemchange: function(carousel_item, new_active_item, old_active_item){
                        console.log("Aciveitemhange")
                        carousel = Ext.getCmp('carousel');
    
    
                        index = Number(new_active_item.getId())
    
    
                        carousel.getItems().each(function(item){
                            if(Number(carousel.getActiveItem().getId()) != Number(item.getId())){
                                item.destroy();
                            }
                        });
    
    
                        if(Number(new_active_item.getId()) > Number(old_active_item.getId())){
                            type = "next";
                        }else{
                            type = "previous";
                        }
                        console.log("type: "+type);
    
    
                        createCarouselObject = function(index_value){
                            var carousel_object = {
                                id:     ''+index_value+'',
                                style:  'font-size:100px',
                                html:   index_value
                            };
                            return carousel_object;
                        }
    
    
                        if(type == "next"){
                            if(index < 7){
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }else{
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }
                        }else if(type == "previous"){
                            if(index > 1){
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }else{
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                            }
                        }
                    }
                },
                items:[
                    {
                        id:   "1",
                        style:  'font-size:100px',
                        html: "1"
                    },
                    {
                        id: "2",
                        style:  'font-size:100px',
                        html:"2"
                    }
                ]
            })
    }

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Since it's been a week, I just wanted to bump this. Any help here would be incredibly awesome.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I wasn't able to find any existing bug reports for this. Are you able to recreate this in a Fiddle?
    https://fiddle.sencha.com/#home

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Found your other thread, and better to keep the discussion in one place.
    http://www.sencha.com/forum/showthread.php?299938

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Yep! Here you go: https://fiddle.sencha.com/?fiddle=lb7#fiddle/lb7Thanks for taking a look at this, Gary. You rule

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Thanks. I filed a bug, which one can track via the other thread.
    http://www.sencha.com/forum/showthread.php?299938

Similar Threads

  1. Prevent Carousel.add from setting the added item as active
    By tt88 in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 11 May 2014, 11:04 PM
  2. Recreated active item doesn't get added to any container
    By SergioPrado in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 6 Feb 2013, 3:53 PM
  3. [CLOSED] Ext.carousel.Carousel: add() after removeAll() doesn't set active item
    By dbarton in forum Sencha Touch 2.x: Bugs
    Replies: 7
    Last Post: 20 Nov 2012, 11:51 AM
  4. [FIXED] [PR1] Ext.Carousel.setItems(Array) doesnt remove previous added items
    By SunboX in forum Sencha Touch 2.x: Bugs
    Replies: 3
    Last Post: 5 Nov 2011, 5:23 AM

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
  •