如何在Sencha Touch中将灵活的html面板内容与水平旋转木马相结合?

时间:2011-12-07 05:25:44

标签: sencha-touch sencha-touch-2

我的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'
                }
            ]
        }
     ]
});

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我对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属性。这就是为什么它没有出现在你的屏幕上。它至关重要。