Sencha Touch 列表在方向更改时出现渲染问题

发布于 2024-12-07 05:33:05 字数 887 浏览 1 评论 0原文

这是针对移动网站而不是应用程序。使用 mobile safari 从我的 iPhone 4 访问移动网站。该网站以纵向模式显示并且工作正常（尽管此时只有一个完整的面板，但可以访问所有列表项）并且我的披露图标全部可见。

问题包括：

如果更改为横向，我的列表项最初将以纵向宽度显示，并且无法滚动以查看所有项目，因为垂直空间现在较小。
如果我导航到列表上的详细信息页面，然后使用主页按钮返回列表，将正确呈现横向模式面板的整个宽度，但仍然无法滚动到面板外的项目。
返回到纵向模式，列表将重新显示所有项目，但每个项目的宽度现在为横向宽度，并且披露图标位于屏幕外且无法访问。如果我通过 bBar 命令按钮导航到另一个页面并返回内容，则再次正确渲染。

这是列表配置代码（非常简单）：

var listConfig = {
itemTpl: '<div class="rName">{menuitem}</div>',
scroll: 'vertical',
monitorOrientation: true,
selModel: {
    mode: 'SINGLE',
    allowDeselect: true
},
onItemDisclosure: {
    scope: 'test',
    handler: function(record, btn, index) {
        mainpanel.hide();
        showDetail(record);
    }
},
store: nhsw.stores.topmenu
};

var topmenuList = new Ext.List(Ext.apply(listConfig, {
    layout: 'fit',
    hideOnMaskTap: false
}));

原文

This is for a mobile web site rather than an app. Accessing the mobile site from my iPhone 4 using mobile safari. The site comes up in portrait mode and works fine (can get to all list items although there are only a panel full at this point) and my disclosure icons are all visible.

The issues include:

if changing to landscape my list items will display with the portrait width initially and it's not possible to scroll to see all items since the vertical space is now less.
if I navigate to a detail page on the list and then use my home button to return the list will render the full width of the landscape mode panel correctly but still cannot scroll to items off the panel.
return to portrait mode and the list redisplays all items but the width of each item is now landscape wide and the disclosure icons are off screen and not accessible. If I navigate to another page via a bBar command button and return things render correctly again.

Here is the list config code (pretty straightforward):

var listConfig = {
itemTpl: '<div class="rName">{menuitem}</div>',
scroll: 'vertical',
monitorOrientation: true,
selModel: {
    mode: 'SINGLE',
    allowDeselect: true
},
onItemDisclosure: {
    scope: 'test',
    handler: function(record, btn, index) {
        mainpanel.hide();
        showDetail(record);
    }
},
store: nhsw.stores.topmenu
};

var topmenuList = new Ext.List(Ext.apply(listConfig, {
    layout: 'fit',
    hideOnMaskTap: false
}));

分享到QQ

分享到微博