Sencha Touchで柔軟なhtmlパネルのコンテンツを水平カルーセルと結合する方法は？

Question

高さが全ページよりも長いHTMLコンテンツがいくつかあります。このコンテンツの最後に、私は水平カルーセルを入れたいと思います。私がしようとするすべての試みはHTMLコンテンツを表示しますが、カルーセルを正しく動作させることはできません。私は、コード単位でてるのはここ

は

Ext.create('Ext.Container', { 
    fullscreen: true, 
    scrollable: true, 
    items: [ 
     { 
      xtype: 'panel', 
      html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>', 
      style: 'background-color: #2E99FC' 
     }, 
     { 
      xtype: 'carousel', 
      items: [ 
       { 
        html : 'Item 1', 
        style: 'background-color: #5E99CC' 
       }, 
       { 
        html : 'Item 2', 
        style: 'background-color: #759E60' 
       }, 
       { 
        html : 'Item 3', 
        style: 'background-color: #FF0000' 
       } 
      ] 
     } 
    ] 
}); 

すべてのヘルプは大歓迎...です。

Answer 1

私はSencha 1.1でexpirienceを持っています。あなたの構文が1.1か2であるかどうかはわかりません。 私はあなたのコードで少し演奏しました。

Ext.setup({ 
    onReady: function() { 
     var panel= new Ext.Panel({ 
      html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>', 
      style: 'background-color: #2E99FC' 
     }); 

     var carousel = new Ext.Carousel({ 
      flex:1, 
      items: [ 
       { 
        html : 'Item 1', 
        style: 'background-color: #5E99CC' 
       }, 
       { 
        html : 'Item 2', 
        style: 'background-color: #759E60' 
       }, 
       { 
        html : 'Item 3', 
        style: 'background-color: #FF0000' 
       } 
      ] 
     }); 

     new Ext.Panel({ 
      fullscreen: true, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      items: [panel, carousel] 
     }); 
    } 
}); 

あなたに欠けていた大きなものは、flex：1プロパティです。これがあなたの画面に表示されなかった理由です。非常に重要です。