PDA

View Full Version : Sencha touch 1.0.1 height



georgec
1 Dec 2010, 5:15 AM
Hello,

I have just upgraded an existing solution I have from Sencha touch 1.0 to 1.0.1 and all the elements on my screen have disappeared.

Apparently this is because I am not setting the height property for elements inside a panel with card layout. But surely I wouldn't want to manually set fixed heights for the elements... Is there a way for Sencha Touch to correct the heights or should I roll back to 1.0??

mrsunshine
1 Dec 2010, 5:25 AM
which kind of elements did you use in you panel?
can you post some code

omarc
1 Dec 2010, 6:51 AM
I have noticed the same problem.

From what I see, this only occurs if you use Ext.regApplication, if I initialize the panel with Ext.setup, it works just fine.

This is an example:

Using Ext.setup, notice that the red background covers the whole screen:


Ext.setup({
"icon" : "/assets/1.0/mxomobile/assets/images/icon.png",
"glossOnIcon" : true,
"tabletStartupScreen" : "/assets/1.0/mxomobile/assets/images/tablet_startup.png",
"onReady": function() {
new Ext.Panel({
"fullscreen": true,
"style": "background: red;",
"html": "content here"
});
}
});

Using Ext.regApplication, notice that the red background covers only the height of the text:


Ext.regApplication({
"icon" : "/assets/1.0/mxomobile/assets/images/icon.png",
"glossOnIcon" : true,
"name" : "Test regApplication",
"tabletStartupScreen" : "/assets/1.0/mxomobile/assets/images/tablet_startup.png",
"launch": function() {
new Ext.Panel({
"fullscreen": true,
"style": "background: red;",
"html": "content here"
});
}
});

giluka
3 Dec 2010, 3:16 AM
as work-around my solution is to add a listener (event afterlayout) to component with that problem that set height to 100%:



listeners:{
afterlayout:function(panel){
panel.setHeight('100%');
}
}

aCa
3 Dec 2010, 4:55 AM
I also use Ext.regApplication and when upgrading from 1.0 to 1.0.1 my elements where not displayed. I didnt have time to look into it so I just reverted to 1.0, but it sounds like the same problem.

mrsunshine
3 Dec 2010, 8:27 AM
Its a bug / problem wit Ext.Application, it does not init the Ext.Viewport object which is responsible for the fullscreen mode.

you have to do something like this, to have fullscreen


Ext.regApplication({
name: 'MyApp',
useLoadMask: true,
launch: function() {
Ext.Viewport.init();
new Ext.Panel({
fullscreen: true,
style: "background: blue;",
html: "content here"
});
Ext.Viewport.onOrientationChange();
}
});



its not the nicest way but a workaround until Ext Application supports ullscreen by default

edspencer
4 Dec 2010, 6:42 PM
Thanks Nils - that fix works perfectly. I've integrated it into the Ext.Application class so you'll be able to remove the hack shortly

mrsunshine
5 Dec 2010, 5:09 AM
Thanks Nils - that fix works perfectly. I've integrated it into the Ext.Application class so you'll be able to remove the hack shortly
cool than you can close BUG 508: http://www.sencha.com/forum/showthread.php?114688-OPEN-508-0.99-Fullscreen-does-not-work-with-Ext.regApplication%28%29