Image and audio not rendering when nested in Container inside Carousel

[vitalaaron]

Hi,

This works fine:

Ext.application({
    launch: function () {
      
      var image_1 = {
        xtype: 'image',
        src: 'http://path/to/my/image.jpg'
      };
      
      var audio_1 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio.mp3',
        autoPause: true
      };
      
      Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'fit',
        items: [image_1, audio_1]
      });
    }
});

while the following does not. Using the same container as a carousel item renders nothing other than the dots at the bottom of the page:

Ext.application({
    launch: function () {
      
      var image_1 = {
        xtype: 'image',
        src: 'http://path/to/my/image1.jpg'
      };
      var image_2 = {
        xtype: 'image',
        src: 'http://path/to/my/image2.jpg'
      };
      
      var audio_1 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio1.mp3',
        autoPause: true
      };
      var audio_2 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio2.mp3',
        autoPause: true
      };
      
      Ext.create('Ext.Carousel', {
          fullscreen: true,
          items: [
            Ext.create('Ext.Container', {
              fullscreen: true,
              layout: 'fit',
              items: [image_1, audio_1]
            }),
            Ext.create('Ext.Container', {
              fullscreen: true,
              layout: 'fit',
              items: [image_2, audio_2]
            })
          ],
      });


    }
});

Any idea what I am doing wrong in the second example?

Thanks.

[AndreaCammarata]

First, I suggest you to remove the "fullscreen" configuration from your containers.
That is nod needed.
Then, since you are using a "fit" layout for your Carousel container items, I suggest you to dock your audio files to the top or the bottom of the container, otherwise, just change the container layout type to "vbox".

[vitalaaron]

Hi,

Removing the container fullscreen option and setting the container layout to"fit", along with setting the audio elements docked to"bottom" got it to work.

Thanks!!