sencha-touch - 如何在 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 属性。这就是为什么它没有出现在您的屏幕上。它非常关键。