Dynamic Carousel Content does not show

Question

I have been working on this for a number of days now, but my limited JS knowledge seems to hurt me.

I am creating a dynamic Ext.Carousel component in my ST2 application, which is based on the contents of a Store file.

That all works fine, but I will show the code anyway, so that nothing is left to imagination:

 Ext.getStore('DeviceStore').load(
            function(i) {


                  Ext.each(i, function(i) {
                        if (i._data.name == 'Audio Ring') {

                            var carousel = Ext.ComponentManager.get('speakerCarousel');

                            var items = [];
                            Ext.each(i.raw.speakers, function(speaker) {

                                items.push({
                                    sci: Ext.create('SmartCore.view.SpeakerCarouselItem', {
                                        speakerId: speaker.speakerid,
                                        speakerName: speaker.speakername,
                                        speakerEnabled: speaker.speakerenabled
                                    })
                                });


                            });
                            carousel.setItems(items);


                        }
                  });
            })

Now, this adds me the appropriate number of items to the carousel. They display, but without the content I specified:

This is the Carousel itself:

Ext.define('SmartCore.view.SpeakerCarousel', {
    extend: 'Ext.Carousel',
    xtype: 'speakerCarousel',
    config: {
        id: 'speakerCarousel',
        layout: 'fit',
        listeners: {
            activeitemchange: function(carousel, item) {
                console.log(item);

            }
        }


    }
});

This is the item class, that I want to fill the data from the store into:

Ext.define("SmartCore.view.SpeakerCarouselItem", {
    extend: Ext.Panel,

    xtype: 'speakerCarouselItem',

    config: {

        title:'SpeakerCarouselItem',
        styleHtmlContent: true,
        layout: 'fit'




    },

    constructor : function(param) {


        this.callParent(param);
        this.add(
            {
            layout: 'panel',
            style: 'background-color: #759E60;',

            html: 'hello'

            }
        )

    }
});

Again, the right number of items shows in the carousel (11), but the content is not visible, nor is the background colour changed. When I check the console.log(item) in the browser, the items show as innerItems inside the carousel object.

Any help is greatly appreciated!!

Sticks Sticks · Accepted Answer · 2012-10-01T15:45:34

Well, I fixed it myself, or better, I found a workaround that seems to be what I want.

I ended up ditching the constructor all together.

Instead I overwrote the apply method for the 'speakerName' key-value pair.

From there, I can use:

this._items.items[0]._items.items[i].setWhatever(...)

to set the content inside the item.

If anyone knows the "real" way to do this, I would still greatly appreciate input!

Dynamic Carousel Content does not show

1 Answers