如何在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的使用期限。我不知道你的语法是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属性。这就是为什么它没有出现在你的屏幕上。它非常关键。