Sencha Touch 2 面板水平滚动使其消失答案

【问题标题】：Sencha Touch 2 horizontal scroll for panel makes it disappearSencha Touch 2 面板水平滚动使其消失
【发布时间】：2012-09-08 10:09:01
【问题描述】：

我正在尝试在面板中显示一些 html（专辑）并希望给它一个水平滚动。但它没有显示。它使我的面板消失。我花了几个小时来修复它。请帮帮我。

var panel = Ext.create('Ext.Panel', {

        scrollable: {
            direction: 'horizontal',
            directionLock: true
        },
        height:120,
        html: '<h2>Photo Albums</h2><ul><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="Cover Photos"></a><span>Cover Photos</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="holilongnameofholitotesthere"></a><span>sample</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_251.jpg" title="Kerala"></a><span>Kerala</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="Kerala"></a><span>Kerala</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="Kerala"></a><span>444</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="Kerala"></a><span>333</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_40285.jpg" title="Kerala"></a><span>222</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/_@user_102517.jpg" title="Kerala"></a><span>sample</span></li></ul>',
        });
    // add the list as an item to the viewport
    Ext.Viewport.add({
        layout: {
            type: 'vbox',
            pack: 'center'
        },
        items: [panel
        ]
    });

【问题讨论】：

如果你想创建一个水平列表，参考sencha中的水平列表示例

标签： sencha-touch-2 panel horizontal-scrolling

【解决方案1】：

实现这一点的最简单方法是使用带有一些额外 CSS 的 Ext.List 组件。

这是 JavaScript（非常简单的数据列表）：

Ext.application({
    launch : function () {
        Ext.Viewport.add({
            xtype: 'list',
            data: [
                { name: 'one' },
                { name: 'two' },
                { name: 'three' },
                { name: 'four' },
                { name: 'five' }
            ],
            itemTpl: '{name}'
        });
    }
});

还有自定义 CSS，它使每个项目都内联：

.x-list .x-list-inner {
    width: auto;
}
.x-list-container {
    white-space: nowrap;
}
.x-list-item {
    display: inline-block;
    width: 400px;
}

您可以在此处找到更多信息：http://www.sencha.com/forum/showthread.php?181298-Dataview-List-Horizontal-Scroll-Possible

【讨论】：