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>