CODEWITHSUNDEEP
sencha-touch-2
Patrice Cote
Patrice Cote

Reputation: 3716

Ext.application startupImage

I started from the Carousel example in Sencha Touch 2.1. In the app.js file, I see the "startupImage" property that defines the different sizes of the images we want to use. Yet, I can't seem to find any documentation about this property. In the docs, they talk about "" and "" which are specific to the Apple iOS world. But if we use Sencha Touch, it's because we dont wanna be tied to a specific company (it seems obvious).

What I want to know is, how does it works ? There is 2 parameters, one is a resoluton and the second is the path to the png file. Can we modify the first parameter or do we have to make png files that fit those numbers ?

Ext.application({    

    name: 'TestSencha',

    requires: [
        'Ext.MessageBox'
    ],

    views: ['Main', 'PicViewer', 'Extras'],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/[email protected]',
        '144': 'resources/icons/[email protected]'
    },

    isIconPrecomposed: true,

   startupImage: {
       '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'
    },

// rest of code goes here....

Upvotes: 0

Views: 1257

Answers (1)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

I suggest you take a look at src/core/Ext-more.js in the ST2 SDK.

Basically it scans the startupImage defined in the config of the application and test the OS of the device and its device ratio and call the addStartupImage like so

if (Ext.os.is.iPad) {
    if (devicePixelRatio >= 2) {
        // Retina iPad - Landscape
        if ('1496x2048' in startupImage) {
            addStartupImage(startupImage['1496x2048'], '(orientation: landscape)');
        }
...

And here is the addStartupImage :

function addStartupImage(href, media) {
    var link = document.createElement('link');
    link.setAttribute('rel', 'apple-touch-startup-image');
    link.setAttribute('href', href);
    if (media) {
        link.setAttribute('media', media);
    }
    head.append(link);
}

Here's for the explanation.

Hope this helps

Upvotes: 1

Related Questions