View Full Version : [INFOREQ] StartupImage property not working?

16 Aug 2012, 1:26 AM

We are testing Sencha Architect (2.1) at the office as a development tool. So far most problems we came across we were able to solve. However, there is one thing we can not get fixed. Even after reading several threads in this forum.

We are using the startupImage property to make our test app show a startup image. We have set the following values in this property:

We are certain that all the images are there and are working. We tested it with a simple style that sets a background image in the index.html. So we know for a fact the images are there and are all working.

However, we do not get to see the image during app load with the startupImage property. When we start our test app, we only get to see white screen before the app itself is shown. This happens on an iPhone 4 (5.1.1), iPad 2 (5.1.1), iPhone Simulator, Android (2.3.3), Android (2.3.5) and Android (4.0.4).

We have even tried the phoneStartupImage property that some people refer to in the forums, but they all don't work.

Who can help us out and tell us what we are doing wrong and solve this? Is this a bug?

16 Aug 2012, 1:28 PM
Are you packaging the app? The startupImage property does not work if you are previewing the app through the device's browser.

EDIT: I tested this and the startupImage property does work through the simulator. You have to bookmark it to the homescreen to be able to see the startup images. The startupImage property does not set the image if you are packaging the app.

16 Aug 2012, 10:52 PM
Yes, we are packaging the app. We packaged the app for iPad, iPhone and Android and none of them show the startup image.

22 Aug 2012, 5:08 AM
No one here, who has a solution or the same problem?

23 Aug 2012, 1:55 PM
I've asked someone from the touch team to take a look at this.

23 Aug 2012, 10:41 PM
Ah great, thank you! Hopefully some solution wil come out of it.

28 Aug 2012, 4:17 PM
We have the same issue. I cannot release my clients application until its resolved.

3 Sep 2012, 11:11 AM
Do you get a blank white screen instead while the app is loading?

5 Sep 2012, 3:35 AM
Yes, we only get a white screen. Nothing else.

5 Sep 2012, 5:06 PM
We ended up packaging from scratch using phonegap / xcode.

We set the splash screen in phone gap to not automatically hide using a plist setting.

Then in main app.js:

launch: function()
console.log ('app launch');

Ext.create('AppName.view.HomeScreen', {fullscreen: true});

//Hide the splash screen
setTimeout(function() {
console.log('hiding splash screen');
}, 2000);

6 Sep 2012, 3:36 AM
Thank you for the input. I will have a look at it and hope we can use something of it. We do not use Phonegap for packaging, but use sencha touch for packaging.

6 Sep 2012, 2:14 PM
I am having the same problems of white screen before it loads. Come on ST2 team PLEASE see to this fix asap. Spent the last day looking for solutions cant show my client and our rent depends on it.
Found a hack using override technique..but its not prety the white screen still shows but not for as long

Out of curiosity can this be solved using HTML5 localstorage?

6 Sep 2012, 3:26 PM
I would prefer to use Sencha for packaging as well, however it never worked as needed.

The response from Sencha support was to use a 3rd party packager.

6 Sep 2012, 3:28 PM
And yes - i too have several months of my staffs salaries depending on being able to deliver.

7 Sep 2012, 12:30 AM
3rd party packaging I'm prepared to do for native apps. What about web apps, this project Im working on at the moment is a web app.

Is it atleast possible to change the color of the white screen? Is it pre launch config?

9 Sep 2012, 11:43 PM
Architect Build tested:

Build: 613
Project Type:

Touch 2.x

An Sencha application has a startupImage property to show an image during application startup. Even if the startupImage property is filled, the image does not show during startup.
Steps to reproduce the problem:

Made different images, used only low resolution, tested it with an iPhone and iPad.
The result that was expected:

Expected to see a startupimage. Even the default sencha resource startup images don't work.
The result that occurs instead:

Only see a white screen during app startup
HELPFUL INFORMATIONScreenshot, Project, or Video:

Contents of the startupImage object:
{'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'}
Possible fix:

not provided
Operating System:

OSX 10.7, Windows 7, Xcode iOS Simulator, iPhone 4 (iOS 5.1.1) iPad 2 (iOS 5.1.1), Samsung Galaxy S (Android 4.0.4)

2 Oct 2012, 4:13 AM
Still can't get it to work. Is there anyone else who has a solution? I keep getting a white screen during startup. No image is displayed. Have tried all solutions in the forum found so far.

5 Oct 2012, 4:32 AM
Did some extra research:
Seems like the startupimage is also not working when packaging the app with PhoneGap. Also the standard command line rendered project that has default startupimages set, doesn't work. In all cases no startup image is loaded.

5 Oct 2012, 11:36 AM
We packaged with Phonegap for iOS and Android. Startup images were defined on the Phonegap side of things.

5 Oct 2012, 3:30 PM
Thank you for the input. I will have a look at it and hope we can use something of it. We do not use Phonegap for packaging, but use sencha touch for packaging.

The startupImage property is only used when an app is bookmarked to the home screen on an iOS device through a website(docs here (http://docs.sencha.com/touch/2-0/#!/api/Ext-method-setup)). It does not set the startup image if you are packaging the app using the command line tools, Architect, or other third party software such as Phonegap.

If you are using Phonegap you can set the default images through xcode (http://developer.apple.com/library/ios/documentation/iphone/conceptual/iphoneosprogrammingguide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12) or through eclipse for android apps by replacing the current splash screen (http://stackoverflow.com/a/8157103).

However setting the startup image for a packaged app through Architect or the command line tools is currently not supported.

7 Oct 2012, 11:31 PM
We packaged with Phonegap for iOS and Android. Startup images were defined on the Phonegap side of things.

Hmmm ok. Can't believe Sencha is not able to do this too.

Can you point me to some good documentation on how to package a complete Sencha app with Phonegap?

8 Oct 2012, 9:51 AM
Here ya go:

8 Oct 2012, 10:36 PM
Thanks! Will have a look into that.

1 Feb 2013, 9:56 AM
No solution to this problem yet???

12 Feb 2013, 11:55 PM
Apparently these parameters only apply to mobile projects that are designed to run in a web browser... rather than packaged mobile projects... its pretty counter intuitive to the noob.

1 Mar 2013, 12:37 AM
Hi All, I need some help regarding the Startup image.

The App should show a login panel . And i would like to set a Background image from the Startup (loading indicator) until the Login panel appears with the same Background image in full screen .

I tried 4 Methods to do it but no success
First Method :
I set a style block in the index.html:

<style type="text/css"> shtml, body {
height: 100%;
background-image: url(resources/startup/ios/Ipad_Landscape_1024x748.png);
background-position: center;
background-repeat: no-repeat;
-> the Problem is that the image will be loaded after the White Screen and Loading indicator and i don't know how to set it depending on the Orientation (Portrait , Landscape)

Second Method:

I wrote this in the index.html :
!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="resources/startup/ios/Ipad_Landscape_748x1024" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="resources/startup/ios/Ipad_Portrait_768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />

--> No success

Third Method:

icon: {
'57': 'resources/icons/ios/Icon_phone.png',
'72': 'resources/icons/ios/Icon-72_Ipad.png',
'114': 'resources/icons/ios/Icon-114.png',
'144': 'resources/icons/ios/Icon-144_ipad@2x.png'
fullscreen: true,
isIconPrecomposed: true,
startupImage: {

'768x1004': 'resources/startup/ios/Ipad_Portrait_768x1004.png',
'748x1024': 'resources/startup/ios/Ipad_Landscape_748x1024.png',

--> Failed

The last one : I tried to add this line to the app.js

tabletStartupScreen: 'resources/startup/ios/Ipad_Landscape_748x1024.png',

--> failed

I need Help Please .
Thanks in Advance