sencha touch carousel not removing all items

Question

Baffled by this and not sure where to start looking.

I have a carousel which I load when the refresh event fires on my backing store:

    Ext.define('Rb.store.Items', {
        extend: 'Ext.data.Store',
        requires: ['Rb.model.Item', 'Ext.data.proxy.Rest'],
        config: {
            storeId: 'itemstore',
            model: 'Rb.model.Item',
            proxy: {
               type: 'rest',
               url: '',
               reader: {
                   type: 'json',
                   rootProperty: 'items'
               }
            },
            autoLoad: false,
            listeners:{
                refresh: function( me, data, eOpts ){
                    console.log("refresh");
                    var carousel = Ext.ComponentQuery.query('rbdetailcarousel')[0];
                    carousel.removeAll(true);
                    console.log(carousel.getItems().getCount());
                    data.each(function(rec){
                        console.log(rec.data);
                        var rdcp = Ext.create('Rb.view.RbDetailCarouselPanel',{
                                                         cur_item: rec.data,
                                                         style: 'background-image:url(resources/startup/320x460.jpg);background-repeat:no-repeat;',
                                                     });
                        rdcp.items.get(1).setHtml(rec.data.name);
                        carousel.setActiveItem(rdcp);

                    });

                    carousel.setActiveItem(0);
                }
            }
        }
    });

My carousel is super simple:

    Ext.define('Rb.view.RbDetailCarousel', {
        extend: 'Ext.Carousel',
        xtype: 'rbdetailcarousel',
        config: {
            itemId: 'rbdetailcarousel',
        }
    });

There are two things that are happening here that are strange:

When I call carousel.getItems().getCount(), right after the carousel.removeAll(true), I always get a return value of 1. If I inspect the carousel, there is still one item left in the carousel (it looks like it's the indicator??).
When I reload the store, it clears out all the items except the first one, so that as I refresh more and more I get repeats of the first item, then the remaining items added to the end. It seems as if the removeAll(true) is not removing that first item.

Any ideas on where I can look to solve this? I have a suspicion that I'm not grabbing the reference to the carousel correctly, because I shouldn't be getting back the indicator as one of the items in it, right?

Thanks

what does this line mean? rdcp.items.get(1).setHtml(rec.data.name); — Thiem Nguyen
@ThiemNguyen - that line just sets the html for a panel contained in the rdcp element. It uses the "name" field from the current record to do it. — jb44
aint sure the error is really here. Can you please post a fiddle so that I can help out? fiddle.sencha.com — Thiem Nguyen
Hi - sorry it's taken me so long to get back to you, but I'm having some real issues getting my app up on the fiddle. I can get it running but there are errors being thrown which I can't see and there is apparently no documentation for the facility. Here is what I have so far: fiddle.sencha.com/#fiddle/2ad. If you have any suggestions on how I could get fiddle documentation, that may help. I have not yet been able to reproduce the error above because there are other errors happening that I can't reproduce locally. Thanks again — jb44
Update: ok, I did manage to get this up and running on fiddle: fiddle.sencha.com/#fiddle/2ad. If you click on a list item, it will take you to the carousel. If you go back, then click a list item again, the carousel fills with more items. This illustrates the problem. Thanks — jb44

jb44 jb44 · Accepted Answer · 2013-12-23T15:04:29

As hinted at by OhmzTech and answered on the sencha forum, I was adding items to my carousel which had duplicate itemId's. I'm still a little fuzzy on the standing of these ids (and to what extend they are used by the framework internally), apparently you don't want to have a single container with duplicate children itemIds.

sencha touch carousel not removing all items

1 Answers