Question

我正在尝试在Sencha Touch 2.1中创建一个List，每个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)
 }
});

Answer 1

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

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

至于answer提供的Ram G Atherya，

如果我们查看源代码，使用dataview而不是list（xtype：'dataview'）并且“inline：wrap：false”使项目水平滚动而不被包裹到下一行..

Answer 2

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

inline: {
        wrap: false
},

Sencha Touch 2.1：允许垂直列表上的水平溢出

2 个答案: