PDA

View Full Version : Have I missed something?



SimonFlack
24 Mar 2011, 1:44 AM
Hey guys

I am having problems with a TabPanel that does not layout correctly when you rotate the the phone.

The tabbar runs across the center of the screen and is not docked at the bottom.

This is occuring on all of my projects that use a TabPanel for the main viewport.

Note: Only occurs on phones (android and iPhone) when rotated from portrait to landscape. If you load the app while in landscape orientation the app handles future rotation correctly.

Maybe I am just blind and have missed something simple. Can you guys see anything I may have missed?

I created a little test app to recreate the problem and test if it was a compiled SASS problem. But the problem is still there even when I use sencha-touch.css

My test app is at: http://www.whitefox.no/projects/tablayout/index-orig.html (sencha's default css)


Ext.namespace('uin');

uin.blankpanel = {
xtype: 'panel',
layout: 'fit',
html: 'Test',
title: 'Panel',
iconCls: 'info'
}

//Main viewpoint
uin.viewport = Ext.extend (Ext.TabPanel ,{
//Use a constructor to overide items based on device type
constructor: function(config){
//Config
config = Ext.apply({
id: 'TabPanel',
fullscreen: true,
tabBar: {
dock : 'bottom',
layout: {
pack: 'center'
}
}
}, config);

this.items = [
uin.blankpanel,
uin.blankpanel,
uin.blankpanel,
uin.blankpanel,
uin.blankpanel
]
//Call base constructor
uin.viewport.superclass.constructor.call(this, config);
}
});

//Entry Point: Using old way for now.
Ext.setup({
onReady: function() {
var app = new uin.viewport();
}
});

SimonFlack
24 Mar 2011, 7:27 AM
Nobody?

kcaldwell1123
24 Mar 2011, 12:49 PM
I get your same error on your test app. If I copy your code and run it on my local web server using 1.0.1a it works. I have started creating an app using tab panel as entry with no issue.