Comment charger une vue dans un conteneur

Question

Cela ressemble à basique mais je suis nouveau à Sencha Touch et je n'ai toujours aucune idée de comment implémenter cela.

Je souhaite créer une page d'accueil dans laquelle seul un logo s'affiche au centre de l'écran. Puis, après 5 secondes, il chargerait la page principale.

Voici mon code pour la vue principale:

Ext.define('Sencha.view.Main', { 
extend: 'Ext.Container', 
xtype: 'mainpanel', 
requires: [ 
    'Sencha.view.Opening' 
], 

config: { 
    items: [{ 
     xtype: 'opening' 
    }] 
} 
}); 

et c'est le code pour Opening.js:

Ext.define('Sencha.view.Opening', { 
extend: 'Ext.Panel', 
xtype: 'opening', 

config: { 
    scrollable: false, 
    fullscreen: true, 
    html: '<div id="opening-logo"><img src="resources/images/logo.png"/></div>' 
} 
}); 

Il devrait afficher un logo dans le centre de l'écran. Mais en fait, cela ne montre rien. J'ai utilisé Ext.Panel au lieu de Ext.Container mais cela ne fonctionne pas.

Cela fonctionne avec Ext.navigation.View cependant, mais pour une page d'accueil, il ne devrait pas avoir un en-tête de navigation en haut d'un écran.

Qu'est-ce que je fais de mal? Oh, et désolé pour le mauvais anglais.

Answer 1

L'erreur commune lors du développement avec Sencha Touch est d'oublier de définir la disposition de votre vue. La disposition définit comment vos composants internes vont être placés sur la vue. You can find more here

Pour une vue avec un composant que vous voulez prendre tout l'écran, vous devez prendre la forme de mise en page comme ceci:

Ext.define('Sencha.view.Main', { 
extend: 'Ext.Container', 
xtype: 'mainpanel', 
requires: [ 
    'Sencha.view.Opening' 
], 

config: { 
    layout: 'fit', 
    items: [{ 
     xtype: 'opening' 
    }] 
} 
}); 

Hope this aidé

Answer 2

Qu'est-ce que vous avez besoin des sons plus comme un splash screen plutôt qu'une vue ... Sur une application installée, l'écran de démarrage s'affiche automatiquement entre le début de l'application et la première vue chargée ... Vous pouvez configurer la propriété de l'écran de démarrage dans votre fichier app.js LINK ...