View Full Version : overlay doesn't resize properly

29 Jul 2010, 12:37 PM
Hello all, hope your days are going well today.

I'm testing an overlay, set to fullscreen:true, in the ipad simulator and when I rotate to landscape and then back to portrait the overlay is then positioned slightly to the left, and not centered as it's set to be. The position always seems to be fine in landscape. There's only a problem when I rotate to portrait from landscape.

Any idea why it might be doing this?


test.js sets up the ui and controls the overlay

Ext.ns('Cfbipad', 'Ext.ux');

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
activeItem: 0,

initComponent : function() {

// code to setup buttons to initiate testing
// focused on testing this
//this.newsPanel = new News.newsPanel();

// temp button to launch news panel
this.newsButton = new Ext.Button({
text: 'News',
hidden: false,
handler: this.showNews,
scope: this

// temp tb to dock button
this.newsTb = new Ext.Toolbar({
dock: 'bottom',
items: [{
xtype: 'spacer'
}, this.newsButton]
this.dockedItems = [ this.newsTb ];



showNews: function(btn, event){
this.newsPanel = new News.newsPanel();


Cfbipad.Main = {
init : function() {
this.ui = new Ext.ux.UniversalUI();

onReady: function() {

news.js contains the overlay


News.newsPanel = Ext.extend(Ext.Panel, {

initComponent: function(){

Ext.apply(this, {
floating: true,
modal: true,
centered: true,
layout: 'card',
activeItem: 0,
fullscreen: true

var dItems = [{
xtype: 'toolbar',
title: 'News',
dock: 'top',
items: [ {xtype: 'spacer'}, {
xtype: 'button',
text: 'Close',
handler: this.hideNews,
scope: this

this.dockedItems = dItems;
this.items = [{html: 'card1'}];


hideNews: function(btn, event){

30 Jul 2010, 8:41 AM
Has anybody seen something like this? Please let me know if I can add more info to help explain the problem. Thanks.

30 Jul 2010, 10:10 PM
Why are you trying to do that? The config options are more or less clashing with each other:

1) Full screen means the panel should always fit to the size of the viewport.
2) modal means you shouldn't be able to interact with anything behind it (which doesn't matter because the panel is full screen).
3) floating means you could position it at a certain point, but because of #1 this is irrelevant.
4) Same for centered.