0

我在 SenchaTouch 2.3 的 hbox 布局中遇到了一个奇怪的问题。该视图扩展了 Ext.Container。这是配置：

config: {
    layout: "hbox",
    style: "padding-bottom: 20px;",
    items: [
        {
            xtype: "panel",
            id: "stmc_info_buttons",
            cls: ["stmc_info_buttons", "shadow"],
            width: 350,
            styleHtmlContent: true,
            scrollable: true,
            items: [{
                xtype: "list",
                grouped: false,
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                indexBar: false,
                cls: "stmc_info",
                id: "stmc_info_btn_entries",
                variableHeights: false,
                itemHeight: 35,
                store: {
                    id: "stmc_info_store",
                    model: "Stbg.model.Info",
                    proxy: {
                        type: "ajax",
                        url: "resources/json/info.json",
                        reader: {
                            type: "json",
                            rootProperty: "info"
                        }
                    },
                    autoLoad: true
                },
                itemTpl: new Ext.XTemplate(
                    '<tpl switch="typ">',
                    '<tpl case="rubrik">',
                    '<div class="contact2 {csscls}">{titel}</div>',
                    '<tpl default>',
                    '<div class="contact2 stmc_info_entry">{titel}</div>',
                    '</tpl>'
                )
            }]
        },
        {
            xtype: "panel",
            layout: 'fit',
            flex: 1,
            id: "stmc_info_text",
            scrollable: {
                direction: 'vertical',
                directionLock: true
            },
            cls: ["stmc_info_text", "shadow"]
        }
    ]
}

如果我点击左侧的条目，右侧的面板会显示相应的内容。一切正常。如果内容比视口“长”，它应该是可滚动的。但是，如果我尝试将面板滚动到底部并从平板电脑上松开手指，则视图会“跳”回顶部。所以我无法到达内容的底部。错误在哪里？

更改面板数据的方法执行以下操作：

loadText: function (loadUrl, target) {
    Ext.Ajax.request({
        url: loadUrl,
        success: function (response, opts) {
            var panel = Ext.getCmp(target);
            if (panel != null) {
                panel.setHtml(response.responseText);
            }
        },
        failure: function (response, opts) {
            ...
        }
    });
}

附加信息：正在加载的内容是纯 HTML。该问题仅出现在 Android 平板电脑上。当我在 Chrome 中测试应用程序时，滚动按预期工作。

4

1 回答 1

0

我没有在您的父面板上看到定义的高度（使用 hbox 布局）......高度是必要的，并且需要来自某个地方。我在 2.2.1 中遇到了一个错误，在我在另一个上方打开一个浮动面板后，我遇到了滚动问题......新窗口是一个卡片布局，其中有 2 个列表，第一个列表没有滚动并且第二个做了。不用说，这非常令人沮丧，所以我自己编写了代码来更新滚动条的 maxPosition。如果您无法解决问题，可以根据您的需要调整以下代码。

//get the list / scroller instances
var list = window.down('list[listName=workorders-list]'),
    scroller = list.container.getScrollable().getScroller();

//each line item is set to be 47px tall, so we'll calculate the
//maxHeight based on records.length * 47 - container height
var maxHeight = parseInt(records.length,10) * 47 - parseInt(scroller._containerSize.y,10);

//if maxHeight is less than 0 adjust it to 0
if (maxHeight < 0) {
    maxHeight = 0;
}

scroller.maxPosition.y = maxHeight;
于 2013-11-07T19:42:24.413 回答