1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default Answered: Image and audio not rendering when nested in Container inside Carousel

    Answered: Image and audio not rendering when nested in Container inside Carousel


    Hi,

    This works fine:

    Code:
    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:

    Code:
    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.

  2. 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".

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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".
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default


    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!!

Thread Participants: 1

Tags for this Thread