Question

我想垂直堆叠两个Sencha Touch Ext.List。我希望这两个列表都属于可滚动的容器。我遇到的问题是，我不确定如何将这些列表配置为完全展开的组件（包含容器应该处理滚动）。

即。你必须向下滚动第一个列表的全部内容才能进入第二个列表。

此外，包含容器还应该可以填充其他堆叠组件，例如表单。

示例：

-> Container (should show scroll bars if contained content doesn't fit in the container)
   -> Form (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)

更新

我设法通过将列表的scrollable设置为null来获得一些工作。但是，它仅适用于2.1.0之前的Sencha Touch版本，因此2.0.1工作正常。

    var mainPanel = Ext.create("Ext.Container",
    {
        fullscreen: true,
        layout: 'vbox'
    });

    var subPanel = Ext.create("Ext.Container", {
        flex: 1,
        layout: 'vbox'
    });

    Ext.define('MyList', {
        extend: 'Ext.List',
        config: {
            scrollable: null,
            fullscreen: false
        }
    });

    var itemName = 'MyItem';
    Ext.define(itemName, {
        extend: 'Ext.data.Model',
        config: {
            fields: ["title"]
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: itemName,
        data: [
                { title: 'row1' },
                { title: 'row2' }
            ]
    });

    var list1 = Ext.create('MyList');
    list1.setItemTpl('<div>List 1 - {title}</div>');
    list1.setStore(store);

    var list2 = Ext.create('MyList');
    list2.setItemTpl('<div>List 2 - {title}</div>');
    list2.setStore(store);

    subPanel.add(list1);
    subPanel.add(list2);

    mainPanel.add(subPanel);
    Ext.Viewport.add(mainPanel);

为什么它不能在2.1.0 +中运行？

Answer 1

您是否尝试将列表的scrollable配置设为false？

我建议延长Ext.dataview.DataView而不是从Ext.dataview.List开始。你必须建立一些自己的样式，但我发现这通常比试图从Ext.List中删除不需要的功能更容易。

垂直堆叠两个Sencha Ext.Lists

1 个答案: