0

我想垂直堆叠两个 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)

更新

通过将列表的可滚动设置为空，我设法使某些东西起作用。但是，它只适用于 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+ 中工作？

4

1 回答 1

1

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

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

于 2013-04-29T02:45:32.153 回答