Hy,
это то, что выглядит моя тестовая страница:
Синяя область - это родительская страница, а зеленая область - IFrame, которая запускает приложение ExtJS (простое окно просмотра с меткой внутри).
Если сайт выполнен на сенсорном устройстве (IPad, Android Tablet и т.д.), невозможно прокручивать страницу путем "вытирания" на IFrame (зеленая область). Чтобы прокрутить страницу, нужно протирать синюю область.
Это правильно работало в ExtJS v4.2.1 (см. ссылки ниже).
Test-сайты:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (не работает, как ожидалось, используя ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (работает как ожидалось, тот же код, но с помощью ExtJS v4.2.1)
Код проверки:
Родительский сайт (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
IFrame (frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css'; return false;" />
<script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
style: { 'background-color': 'yellowgreen' },
layout: 'fit',
items: [{
xtype: 'label',
text: 'Ext version: ' + Ext.versions.extjs.version,
margin: 16
}]
});
});
</script>
</head>
<body>
</body>
</html>
Я очень благодарен за обходной путь для этого, поскольку он практически делает мои сайты бесполезными на мобильных устройствах, хотя они отлично работали с ExtJS 4.2.1.
Спасибо и наилучшие пожелания
Ps: Я уже опубликовал отчет об ошибке на форумах sencha, но так как я не получал никакой помощи там до тех пор, пока знаю, я также пытаюсь удачи в stackoverflow...