PDA

View Full Version : Panel height is not updated on orientation change



MartinK7
9 May 2014, 8:34 AM
Displaying a simple Ext.panel.Panel using a ''fit' layout on a tablet, the panel's height is not updated as expected when the device's orientation is changed. The width is updated correctly though. The same problem also occurs using other components (e.g. Ext.container.Container) and other layouts (e.g. 'hbox').

You can witness this in 2 ways:
1) by putting enough html content in the panel so that it requires scrolling.
2) by adding a 'resize' listener and displaying the received width and height values.

If you do the above and load the page on the tablet while in landscape and then turn the tablet in portrait, you will see that the extra vertical space is not used at the bottom and you will notice that the new dimensions received by the 'resize' event handler has an updated width but the WRONG HEIGHT VALUE. (The same problem occurs if you start in portrait mode and then turn to landscape, except that in this case the main symptom is that you can no longer reach the bottom of your page content.)

If I do a setHeight() with the expected value and call updateLayout() from within the 'resize' handler, I get a proper page reflow.

As a sidenote, contrary to what the documentation states, the 'resize' event is also received upon initial rendering.

evant
9 May 2014, 12:04 PM
Please post some code, your description doesn't really provide enough information to go on.

MartinK7
12 May 2014, 6:59 AM
Here's the sample code.


Ext.application({
name: 'AMP',
extend: 'AMP.Application',
autoCreateViewport: 'AMP.view.main.MainTablet'
});

Ext.define('AMP.view.main.MainTablet', {
extend: 'Ext.panel.Panel',
xtype: 'app-maintablet',

layout: 'fit',
items: [{
html: '<h1>To</h1><h1>demo</h1><h1>this</h1><h1>problem,</h1><h1>we</h1><h1>need</h1><h1>to</h1><h1>put</h1><h1>some</h1><h1>content</h1><h1>in</h1><h1>this</h1><h1>panel</h1><h1>that</h1><h1>will</h1><h1>require</h1><h1>scrolling</h1><h1>for</h1><h1>sure</h1><h1>when</h1><h1>displayed</h1><h1>in</h1><h1>landscape</h1><h1>mode</h1><h1>on</h1><h1>a</h1><h1>tablet.</h1>',
bodyStyle: 'background-color:cyan;',
// bodyStyle: 'background-color:yellow;padding:50px;',
autoScroll: true
}],

listeners: {
resize: function(panel, width, height, oldWidth, oldHeight) {
Ext.Msg.alert('New Width='+width+', New Height='+height+'<br>Old Width='+oldWidth+', Old Height='+oldHeight);
}
}
});


Here are the steps.


Load the (cyan) page below on a tablet, in landscape mode.
UNEXPECTED: 'Resize' event handler is called, contrary to what the Ext.panel.Panel documentation states.
Dismiss the message box.
Verify that you can scroll to the end of the page.
Turn the device in portrait mode.
SYMPTOM #1: the New Height value is not correct in the message box.
Dismiss the message box.
SYMPTOM #2: the Panel's height is not resized correctly.

The same problem exists if you start in portrait mode, although in that case the symptom is that you can no longer reach the end of the page.


BUG #2? Body padding not being considered when calculating page size
While setting up this example, I may have uncovered a separate issue.

Switch the 'bodyStyle' like in the example code above.
Load the (yellow) page on a tablet. Try to scroll to the bottom.

BUG #2? Notice that you cannot see the last line of text. The 50px top/bottom padding seems to not have been taken into account in calculating the page height.


Martin

evant
12 May 2014, 7:11 AM
What is your intent with the test case? A layout fit with no sizing is a fairly uncommon usage.

MartinK7
12 May 2014, 7:22 AM
I was expecting the page extents to match the device's display size after the orientation change. That is, in my example, the entire visible page would be cyan after turning to portrait.

What led me to believe that there might be a bug is that in the 'resize' event handler the panel width is updated but NOT the height.

If you believe this is the intended behavior, then what would be the recommend way of having a panel re-flow correctly after an orientation change?

evant
12 May 2014, 7:30 AM
I think you want something like:



Ext.define('X', {
extend: 'Ext.container.Viewport',
xtype: 'app-maintablet',

layout: 'fit',
items: [{
html: '<h1>To</h1><h1>demo</h1><h1>this</h1><h1>problem,</h1><h1>we</h1><h1>need</h1><h1>to</h1><h1>put</h1><h1>some</h1><h1>content</h1><h1>in</h1><h1>this</h1><h1>panel</h1><h1>that</h1><h1>will</h1><h1>require</h1><h1>scrolling</h1><h1>for</h1><h1>sure</h1><h1>when</h1><h1>displayed</h1><h1>in</h1><h1>landscape</h1><h1>mode</h1><h1>on</h1><h1>a</h1><h1>tablet.</h1>',
style: 'background-color:cyan;',
autoScroll: true
}],

listeners: {
resize: function(panel, width, height, oldWidth, oldHeight) {
alert('New Width='+width+', New Height='+height+'<br>Old Width='+oldWidth+', Old Height='+oldHeight);
}
}
});

MartinK7
12 May 2014, 9:48 AM
Indeed, using the Viewport does what I want.. Thanks for that.

I still have 2 questions though:

1) Is it normal that the Panel width is updated on orientation change but not the height?

2) What about the 2nd issue I mentioned about adding padding to the bodyStyle preventing to access the bottom of the Panel's content when displayed on a tablet?