Rendering issues with Sencha Touch list on orientation change
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 lis开发者_如何学Got 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
}));
Added layout: 'fit' to containing panel and all is good now.
精彩评论