PDA

View Full Version : overlay doesn't resize properly



cabennett85
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?

Thanks,
Cole

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 ];

Ext.ux.UniversalUI.superclass.initComponent.call(this);

},

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


});

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

Ext.setup({
onReady: function() {
Cfbipad.Main.init();
}
});

news.js contains the overlay
--------

Ext.ns('News');

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'}];

News.newsPanel.superclass.initComponent.call(this);
},

hideNews: function(btn, event){
this.hide();
},
});

cabennett85
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.

evant
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.