title: Problem when adding more than 3 cards to sencha-touch carousel
body: <p>I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:</p>
  
  <p>The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.</p>
  
  <p>(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)</p>
  
  <p>What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?</p>
  
  <p>This is my js:</p>
  
  <pre><code>Ext.setup({
      onReady: function() {
          // Create a Carousel of Items
          var carousel = new Ext.Carousel({
              defaults: {
                  cls: 'card'
              },
              items: [{
                  cls: 'tab1',
                  html: 'Tab 1'
              },
              {
                  cls: 'tab2',
                  html: 'Tab 2'
              },
              {
                  cls: 'tab3',
                  html: 'Tab 3'
              },
              {
                  cls: 'tab4',
                  html: 'Tab 4'
              }]
          });
  
  
          new Ext.Panel({
              fullscreen: true,
              layout: {
                  type: 'vbox',
                  align: 'stretch'
              },
              defaults: {
                  flex: 1
              },
              items: [carousel]
          });
      }
  });
  </code></pre>
  
  <p>EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.</p>