PDA

View Full Version : [CLOSED-455] setFloating autoShow does not appear to work



gcallaghan
21 Oct 2010, 3:48 PM
Sencha Touch version tested:

0.9 rev 7____

only default ext-all.css
custom css (include details)




Platform tested against:

Google Chrome 7....


Description:

Using the autoshow parameter in the setFloating method call does not appear to work at all.


Test Case:



Viewport = Ext.extend(Ext.Panel,{
fullscreen:true,
layout:'card',


initComponent:function(){
Viewport.superclass.initComponent.call(this);
var h_bar = new Ext.Toolbar({dock:'top'});

this.addDocked(h_bar);

if(!Ext.is.Phone){
this.setFloating(true,true);// autoshow does not appear to work
this.setWidth(MAX_WIDTH);// this changes on screen resize
this.setCentered(true);
//this.show(); // workaround for autoShow bug
}


this.doComponentLayout();
},

});

Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
icon: 'img/icon.png',
glossOnIcon: false,
onReady:function(){
var viewport = new Viewport();
}
});


See this URL : http://


Steps to reproduce the problem:

Run the above code in a browser


The result that was expected:

A floating panel should with a Toolbar should appear


The result that occurs instead:

a blank screen is shown




Debugging already done:

none


Possible fix:

not provided

Workaround:

Call show() explicitly

BrendanC
21 Oct 2010, 3:56 PM
Thanks for the bug report.

gcallaghan
21 Oct 2010, 4:50 PM
Found the bug here (http://dev.sencha.com/deploy/touch/docs/source/Component.html#method-Ext.Component-setFloating). I think...


this.floating = !!floating;

Looks like a typo in setFloating. I believe double negatives are grammatically and programaticly incorrect ;)

-- foolish me, this is type coercion. But man does that look weird.

gcallaghan
21 Oct 2010, 5:17 PM
nevermind these seem to be everywhere. I've never seen that before. is that a special syntax?

evant
4 Nov 2010, 10:00 PM
I'm having some trouble making some sense out of the test case.

You have a panel that's set to fullscreen, which means it will automatically resize itself to the size of the screen, on orientationchange/window resize, but then try and set the component to float. It seems like a fairly odd combination of options to use. Fullscreen panels automatically get shown, so there's no explicit need to call it.

Can you provide some more info?

gcallaghan
4 Nov 2010, 10:10 PM
Here's an example in the wild.
http://ifinancials.com
the main goal is to have a common interface between phone and desktop.

gcallaghan
5 Nov 2010, 8:22 AM
A Shorter test case



viewport = Ext.extend(Ext.Panel,{
/**
This test case implements the use case of creating a centered, floating, panel on the desktop
or a fullscreen app on a phone. The fullscreen:true argument forces the floating panel to be 100% of the
browser height on a desktop and forces the app to take up the screen on a phone.
*/
fullscreen:true,
layout:'card',
initComponent:function(){
viewport.superclass.initComponent.call(this);



if(!Ext.is.Phone){
//if (false){
this.setFloating(true,true);// autoshow does not appear to work
this.setWidth(960);
this.setCentered(true);
//this.show();// HACK, workaround because the autoshow argument on the setFloating call doesn't appear to work
// uncomment the above line to see what I expected to happen.
}
this.doComponentLayout();

},

});

Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
icon: 'img/icon.png',
glossOnIcon: false,
onReady:function(){

viewport = new viewport({
hideOnMaskTap:false,
monitorOrientationChange:false
});

viewport.setCard(new Ext.Component({items:{html:'test'}}), 'fade');



}
});

evant
13 Nov 2010, 11:04 PM
As discussed in another similar thread, using fullscreen and floating/setting a width don't really make sense. Marking as closed.