Hi again,
This works fine (plus the audio element overlaps the photo, which is what I want) :
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 using the same container as a carousel item renders nothing other than the dots at the bottom of the page (no visible image or audio elements):
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.