How to load a view in a container

Question

This looks like basic but I am new to Sencha Touch and still have no idea how to implement this.

I want to create a welcome page where it shows only a logo in the center of the screen. Then after 5 seconds or so, It would load the main page.

Here's my code for the main view:

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

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

and this is the code for 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>'
}
});

It should display a logo in the center of the screen. But in fact, it shows nothing. I've used Ext.Panel instead of Ext.Container but it doesn't work.

It works with Ext.navigation.View though, but for a welcome page, it shouldn't have a navigation header on the top of a screen.

What do I do wrong? Oh, and sorry for the bad English.

Did the answer below fix your problem. If yes, then accept it, otherwise tell us what did not work and what error you got. — Titouan de Bailleul, Nov 09 '12 at 21:44

score 0 · Accepted Answer · answered Nov 05 '12 at 12:09

The common mistake when developping with Sencha Touch is to forget to set the layout of your view. The layout defines how your inner components are gonna be placed on the view. You can find more here

For a view with one component which you want to take the whole screen, you should take the layout fit like so :

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

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

Hope this helped

score 0 · Answer 2 · answered Nov 17 '12 at 08:18

What you need sounds more like a splash screen rather than a view... On an installed app the splash screen gets shown automatically between the start of the app and first view getting loaded...You can configure the startup screen property in your app.js file LINK Hope it helps...

How to load a view in a container

2 Answers2