I have an issue with my ExtJS 5 app on iPhone or iPad where if I rotate the device to change orientation while having a modal window open, and then rotate it back to the original orientation, I won't be able to scroll to the top of the page after closing the modal window. This problem is reproducible using Safari or Chrome in both iOS 7 and 8.
Here is the sample code that shows the problem. My real app is a vbox with two components: a header and content container. I can reproduce the problem with just the content container and hence the simple version here. The long dummy text is there to make the container long enough to show a vertical scroll bar and that is necessary to reproduce the problem. Any suggestions will be greatly appreciated.
Ext.define('WinOrScroll.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'WinOrScroll.view.main.MainController',
'WinOrScroll.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
autoScroll: 'true',
flex: 1,
items:[{
html: '<p>SCROLL TO THE BOTTOM OF THE PAGE AND CLICK THE "Push this to Test" BUTTON</p>' +
'<p>Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superiors with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossimas cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they are decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I will not argue, I will fall in with everything, I will win them by politness, and show them that I have nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have. He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable, and he had indeed the vaguest idea where the wood and river in quedtion were.</p>' +
'<p>Qui no velit similique moderatius, mel falli deserunt consequuntur ne. Erat justo velit ut ius, equidem appetere posidonium ei mei. In mea possim alterum, omnes alterum democritum ad mea. Vix id lobortis prodesset. Quem posidonium dissentiunt eos et. Eligendi reprimique at pro. Nam ut numquam volutpat imperdiet. Mel malorum menandri cu. Ius quaestio atomorum eu. Cu ius rebum iudicabit corrumpit.</p>' +
'<p>Vis ridens deserunt sententiae ei. No qui dicunt tibique. Tale moderatius pro ad, an probo verear vix. In ius etiam dicit pertinax, est ei lorem iudicabit urbanitas. Eum ex ignota feugait voluptaria, et per dolorem definitionem.</p>' +
'<p>Qui ut debet neglegentur consectetuer, erat illum antiopam ea quo. Te has solum accumsan vituperatoribus. No alii aliquam vis. Menandri oportere sit ex. His an tibique salutatus, has diceret detracto at, nec an clita menandri moderatius.</p>' +
'<p>Ne facilis vivendo ponderum ius, oratio dolore eu pro. Mel utamur reprehendunt et, ei ius quas brute appetere. Vix novum aeque dignissim ut, ea animal iracundia eum, qui eu quodsi epicuri rationibus. Luptatum philosophia est eu, elitr intellegat nec at. Persius sadipscing id mei, zril laudem legimus vim ex.</p>' +
'<p>Eu duo adipiscing intellegam, ne amet lucilius adipisci vel. Quo tota expetenda at, cum ei modus omnes tollit. Sea te nusquam docendi maiestatis, at tale dicta labore vis, eu pro iriure pertinax evertitur. Unum impetus definitiones ea usu, movet option feugait ne cum, eum sale movet ancillae ne.</p>' +
'<p>Pri nullam luptatum an. Ad simul dissentiet eos, ad eam rationibus referrentur. Duo at erant salutandi dissentias, in vis mutat malis, his ad error detraxit invenire. Ne tamquam facilis patrioque quo. Nam id sonet aeterno. Ne tota dicunt assentior eam, sea essent vocibus concludaturque ei, te inimicus rationibus honestatis quo. At graecis senserit pertinacia sit, harum perfecto voluptatibus ex sit.</p>' +
'<p>Autem menandri at cum. No habeo novum scribentur sea, eum ad nobis temporibus. Stet altera repudiandae ei nec, id audiam commune usu. Ne mei porro nostro, illum adversarium pri at, ne impetus detracto menandri vis. Wisi illud definitionem sea ex, usu graeci percipitur et. Ei duo iudico atomorum torquatos.</p>' +
'<p>Audire expetenda eu sit. Ea nec errem quaestio suscipiantur. Id duo solum liber indoctum, erant expetenda pro ut. Cu movet habemus signiferumque vis, no eam omnesque iracundia, singulis sententiae signiferumque id cum. Id ceteros adipiscing vix, mei ex liber mediocrem. Ne consulatu hendrerit vix, his no postea eripuit commune.</p>' +
'<p>Pri nullam luptatum an. Ad simul dissentiet eos, ad eam rationibus referrentur. Duo at erant salutandi dissentias, in vis mutat malis, his ad error detraxit invenire. Ne tamquam facilis patrioque quo. Nam id sonet aeterno. Ne tota dicunt assentior eam, sea essent vocibus concludaturque ei, te inimicus rationibus honestatis quo. At graecis senserit pertinacia sit, harum perfecto voluptatibus ex sit.</p>' +
'<p>Autem menandri at cum. No habeo novum scribentur sea, eum ad nobis temporibus. Stet altera repudiandae ei nec, id audiam commune usu. Ne mei porro nostro, illum adversarium pri at, ne impetus detracto menandri vis. Wisi illud definitionem sea ex, usu graeci percipitur et. Ei duo iudico atomorum torquatos.</p>' +
'<p>Audire expetenda eu sit. Ea nec errem quaestio suscipiantur. Id duo solum liber indoctum, erant expetenda pro ut. Cu movet habemus signiferumque vis, no eam omnesque iracundia, singulis sententiae signiferumque id cum. Id ceteros adipiscing vix, mei ex liber mediocrem. Ne consulatu hendrerit vix, his no postea eripuit commune.</p>'
},{
xtype: 'button',
text: 'Push this to Test',
handler: function () {
Ext.Msg.alert('Repro Steps', 'Rotate your device to change orientation. Then rotate back to original orientation and click OK. Notice that you will not be able to scroll all the way to the top after the window is closed');
}
}]
}]
});
Here is the sample code that shows the problem. My real app is a vbox with two components: a header and content container. I can reproduce the problem with just the content container and hence the simple version here. The long dummy text is there to make the container long enough to show a vertical scroll bar and that is necessary to reproduce the problem. Any suggestions will be greatly appreciated.
Ext.define('WinOrScroll.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'WinOrScroll.view.main.MainController',
'WinOrScroll.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
autoScroll: 'true',
flex: 1,
items:[{
html: '<p>SCROLL TO THE BOTTOM OF THE PAGE AND CLICK THE "Push this to Test" BUTTON</p>' +
'<p>Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superiors with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossimas cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they are decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I will not argue, I will fall in with everything, I will win them by politness, and show them that I have nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have. He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable, and he had indeed the vaguest idea where the wood and river in quedtion were.</p>' +
'<p>Qui no velit similique moderatius, mel falli deserunt consequuntur ne. Erat justo velit ut ius, equidem appetere posidonium ei mei. In mea possim alterum, omnes alterum democritum ad mea. Vix id lobortis prodesset. Quem posidonium dissentiunt eos et. Eligendi reprimique at pro. Nam ut numquam volutpat imperdiet. Mel malorum menandri cu. Ius quaestio atomorum eu. Cu ius rebum iudicabit corrumpit.</p>' +
'<p>Vis ridens deserunt sententiae ei. No qui dicunt tibique. Tale moderatius pro ad, an probo verear vix. In ius etiam dicit pertinax, est ei lorem iudicabit urbanitas. Eum ex ignota feugait voluptaria, et per dolorem definitionem.</p>' +
'<p>Qui ut debet neglegentur consectetuer, erat illum antiopam ea quo. Te has solum accumsan vituperatoribus. No alii aliquam vis. Menandri oportere sit ex. His an tibique salutatus, has diceret detracto at, nec an clita menandri moderatius.</p>' +
'<p>Ne facilis vivendo ponderum ius, oratio dolore eu pro. Mel utamur reprehendunt et, ei ius quas brute appetere. Vix novum aeque dignissim ut, ea animal iracundia eum, qui eu quodsi epicuri rationibus. Luptatum philosophia est eu, elitr intellegat nec at. Persius sadipscing id mei, zril laudem legimus vim ex.</p>' +
'<p>Eu duo adipiscing intellegam, ne amet lucilius adipisci vel. Quo tota expetenda at, cum ei modus omnes tollit. Sea te nusquam docendi maiestatis, at tale dicta labore vis, eu pro iriure pertinax evertitur. Unum impetus definitiones ea usu, movet option feugait ne cum, eum sale movet ancillae ne.</p>' +
'<p>Pri nullam luptatum an. Ad simul dissentiet eos, ad eam rationibus referrentur. Duo at erant salutandi dissentias, in vis mutat malis, his ad error detraxit invenire. Ne tamquam facilis patrioque quo. Nam id sonet aeterno. Ne tota dicunt assentior eam, sea essent vocibus concludaturque ei, te inimicus rationibus honestatis quo. At graecis senserit pertinacia sit, harum perfecto voluptatibus ex sit.</p>' +
'<p>Autem menandri at cum. No habeo novum scribentur sea, eum ad nobis temporibus. Stet altera repudiandae ei nec, id audiam commune usu. Ne mei porro nostro, illum adversarium pri at, ne impetus detracto menandri vis. Wisi illud definitionem sea ex, usu graeci percipitur et. Ei duo iudico atomorum torquatos.</p>' +
'<p>Audire expetenda eu sit. Ea nec errem quaestio suscipiantur. Id duo solum liber indoctum, erant expetenda pro ut. Cu movet habemus signiferumque vis, no eam omnesque iracundia, singulis sententiae signiferumque id cum. Id ceteros adipiscing vix, mei ex liber mediocrem. Ne consulatu hendrerit vix, his no postea eripuit commune.</p>' +
'<p>Pri nullam luptatum an. Ad simul dissentiet eos, ad eam rationibus referrentur. Duo at erant salutandi dissentias, in vis mutat malis, his ad error detraxit invenire. Ne tamquam facilis patrioque quo. Nam id sonet aeterno. Ne tota dicunt assentior eam, sea essent vocibus concludaturque ei, te inimicus rationibus honestatis quo. At graecis senserit pertinacia sit, harum perfecto voluptatibus ex sit.</p>' +
'<p>Autem menandri at cum. No habeo novum scribentur sea, eum ad nobis temporibus. Stet altera repudiandae ei nec, id audiam commune usu. Ne mei porro nostro, illum adversarium pri at, ne impetus detracto menandri vis. Wisi illud definitionem sea ex, usu graeci percipitur et. Ei duo iudico atomorum torquatos.</p>' +
'<p>Audire expetenda eu sit. Ea nec errem quaestio suscipiantur. Id duo solum liber indoctum, erant expetenda pro ut. Cu movet habemus signiferumque vis, no eam omnesque iracundia, singulis sententiae signiferumque id cum. Id ceteros adipiscing vix, mei ex liber mediocrem. Ne consulatu hendrerit vix, his no postea eripuit commune.</p>'
},{
xtype: 'button',
text: 'Push this to Test',
handler: function () {
Ext.Msg.alert('Repro Steps', 'Rotate your device to change orientation. Then rotate back to original orientation and click OK. Notice that you will not be able to scroll all the way to the top after the window is closed');
}
}]
}]
});
Cannot scroll page to the top after changing device orientation with an open window
Aucun commentaire:
Enregistrer un commentaire