Question

我在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中测试应用时，滚动按预期工作。

Answer 1

我没有看到父面板上定义的高度（使用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;

SenchaTouch 2.3：面板无法滚动

1 个答案: