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

我试图在面板中显示一些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
        ]
    });

var panel=Ext.create（'Ext.panel'{
可滚动：{
方向：'水平'，
方向锁：正确
},
身高：120，
html:“相册封面照片
样本
喀拉拉邦
喀拉拉邦
444
333
222
样本”，
});
//将列表作为项目添加到视口中
Ext.Viewport.add({
布局：{
键入：“vbox”，
包装：'中心'
},
项目：[小组
]
});

实现这一点的最简单方法是使用带有一些额外CSS的

Ext.List

组件

下面是JavaScript（包含数据的非常简单的列表）：

以及自定义CSS，它使每个项目内联：

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

---

您可以在这里找到更多信息：

如果您试图创建水平列表，请参考sencha中的水平列表示例

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