Ext.ux.Carousel not displaying properly inside panel

[iwallis]

Hi,

I am attempting to load a Ext.ux.Carousel object based on the example in Ext-Core into a panel via the autoload: 'file.html' however it is not displaying properly. I am able to get the example working no problem.


var galleryPanel = new Ext.Panel({
id: 'gallery-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
width: 500,
autoHeight: true,
title: 'Gallery',
autoLoad: {
url: 'gallery.html',
scripts: true
}
});

----------------------------
file.html
----------------------------

<div id="simple-example" style="padding: 5px; height: 280px; width: 420px; background-color: #E6E6E0">
<img src="slides/1.jpg" title="Masterpiece">
<img src="slides/2.jpg" title="Teeth">
<img src="slides/3.jpg" title="Roar">
<img src="slides/4.jpg" title="Feed me">
<img src="slides/5.jpg" title="Debugging">
<img src="slides/6.jpg" title="Baby">
</div>

<script type="text/javascript">
Ext.onReady(function() {
new Ext.ux.Carousel('simple-example');
})


</script>

Any ideas why this problem is occurring?

[iwallis]

After some further investigation it looks as though the width and height attributes are 0 when instantiated within a Ext.Panel object.

When instantiated with Ext. Panel, Firebug is showing:


<div id="gallery-panel" class=" x-panel " style="width: 538px;">
<div class="x-panel-tl">
</div>
<div id="ext-gen42" class="x-panel-bwrap">
<div class="x-panel-ml">
<div class="x-panel-mr">
<div class="x-panel-mc">
<div id="ext-gen43" class="x-panel-body" style="width: 526px; height: auto;">
<div id="simple-example" style="padding: 5px; overflow: hidden; height: 280px; width: 420px; background-color: rgb(230, 230, 224);">
<div id="ext-gen72" class="ux-carousel-container" style="width: 0px; height: 0px;">
<div id="ext-gen73" class="ux-carousel-slides-wrap" style="width: 0px; left: 0pt;">
<div id="ext-gen78" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
<div id="ext-gen79" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
<div id="ext-gen80" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
<div id="ext-gen81" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
<div id="ext-gen82" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
<div id="ext-gen83" class="ux-carousel-slide" style="width: 0px; height: 0px;">
</div>
</div>
<div id="ext-gen74" class="ux-carousel-nav" style="visibility: visible;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="x-panel-bl x-panel-nofooter">
</div>
</div>
</div>

When run from the example:


<div id="simple-example" style="padding: 5px; overflow: hidden; height: 280px; width: 420px; background-color: rgb(230, 230, 224);">
<div id="ext-gen2" class="ux-carousel-container" style="width: 420px; height: 280px;">
<div id="ext-gen3" class="ux-carousel-slides-wrap" style="width: 2520px; left: -420px; top: 0px;">
<div id="ext-gen8" class="ux-carousel-slide" style="width: 420px; height: 280px;">
</div>
<div id="ext-gen9" class="ux-carousel-slide" style="width: 420px; height: 280px;">
<img title="Teeth" src="slides/2.jpg"/>
</div>
<div id="ext-gen10" class="ux-carousel-slide" style="width: 420px; height: 280px;">
</div>
<div id="ext-gen11" class="ux-carousel-slide" style="width: 420px; height: 280px;">
</div>
<div id="ext-gen12" class="ux-carousel-slide" style="width: 420px; height: 280px;">
</div>
<div id="ext-gen13" class="ux-carousel-slide" style="width: 420px; height: 280px;">
</div>
</div>
<div id="ext-gen4" class="ux-carousel-nav" style="visibility: visible;">
</div>
</div>
</div>