3

我正在尝试在 Sencha Touch 2.1 中创建一个列表，其中每个 itemTPL 行都有水平溢出。它仍然是一个垂直列表，但每行显示的内容太多。

所以我将列表放在一个包装容器中，它具有设定的宽度并允许水平滚动。这允许标题和列表内容水平移动。它实际上有效。但是，在释放滚动后，它会重新回到 0。对于容器视口来说，滚动条明显太大，给人的感觉是没有正确渲染。

有谁知道如何让顶部容器自由滚动。

这里有一个示例，它显示了溢出小窗口的图标。您可以滚动查看完整图标，但不能将滚动条留在原处... http://www.senchafiddle.com/#dSMpw

Ext.application({
name: 'SenchaFiddle',
models:['Model'],
stores:['Store'],

launch: function() {
    var list = Ext.create('Ext.List',{
        store: 'Store',
        itemTpl: new Ext.XTemplate('<img src="{icon}" width=750 height=50/>'),
        flex:1
    });

    var panel = Ext.create('Ext.Container', {
        layout:'vbox',
        width:750,
                    scrollable : {
                        direction     : 'horizontal',
                        directionLock : true
                    },
        items: [
            {
                html: 'Header bar',
            },
            list
        ]
    });

    Ext.Viewport.add(panel)
 }
});
4

2 回答 2

2

一直在寻找这个，但显然我们无法做到这一点，规则是：

  • 如果要水平显示项目，请使用 dataview
  • 如果要垂直显示项目，请使用列表
  • 如果您需要对项目进行分组，请使用列表

至于Ram G Atherya给出的建议答案，

如果我们查看源代码，它使用数据视图而不是列表（xtype：'dataview'）和“inline：wrap：false”使项目水平滚动而不被换行到下一行..

于 2013-04-26T09:18:51.310 回答
0

我不完全理解你的问题，但我认为这就是你想要的......你需要做的就是将列表的内联换行设置为 false

inline: {
        wrap: false
},
于 2012-12-29T10:07:18.407 回答