View Full Version : Toolbar Does Not Re-Pack on Orientation Change

5 Aug 2011, 9:19 AM
Sencha Touch version tested:


only default ext-all.css

Platform tested against:

Android 2.2 (Droid X)


When switching between portrait and landscape orientation, Ext.Toolbar does not re-pack. I am using pack: 'center', and the toolbar stretches to fill the width of the screen. If it first renders in landscape, then renders in portrait, the contents are aligned off the right edge of the component (i.e. still aligned to be centered in a landscape orientation). I have tried Ext.repaint() and toolbar.doComponentLayout() with no luck.

Test Case:

at.view.ContactBar = Ext.extend(Ext.Toolbar, {
initComponent: function () {
Ext.apply(this, {
ui: 'dark',
layout: {
pack: 'center'
defaults: {
iconMask: true,
ui: 'plain',
style: { padding: '2em' }

new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
initComponent: function() {
this.phoneButton = new Ext.Button({
iconCls: 'phoneIcon'

this.emailButton = new Ext.Button({
iconCls: 'emailIcon'

this.webButton = new Ext.Button({
iconCls: 'webIcon'

this.mapButton = new Ext.Button({
iconCls: 'mapIcon'

// The toolbar that provides contact options
this.contactToolbar = new at.view.ContactBar({
items: [
this.items = [this.contactToolbar];

Steps to reproduce the problem:

Rotate phone to landscape.
Load panel containing toolbar.
Rotate phone to portrait.

The result that was expected:

The toolbar should re-pack its contents relative to the new size.

The result that occurs instead:

The toolbar itself resizes, but the contents are still packed relative to its original size.

Screenshot or Video:

video available, unable to upload mp4 due to invalid file message.

Debugging already done:

Tried adding/removing 'hbox' from the layout. Tried running Ext.repaint() and doComponentLayout() on orientation change.

Possible fix:

not provided

Sencha Touch is a fantastic product. Thanks in advance for any help on this issue.

5 Aug 2011, 10:43 AM
On more detailed investigation, it looks like this problem only happens if you load the screen in landscape initially. If you load it in portrait the first time, it transitions between landscape and portrait without an issue. Maybe it's setting a minimum width somewhere?