Sencha touch 如何在secnha制作splashScreen

我想在sencha中显示启动屏幕。在这里，我将在splashscreen.html页面中显示splash几秒钟（5秒钟），然后直接进入登录页面。那么，如何在sencha中解决这个问题呢

我所做的：

Ext.Loader.setPath({
    'Ext': 'touch/src'
});

Ext.application({
    name: 'EditTest',

    requires: [
        'Ext.MessageBox', 'Ext.form.FieldSet','Ext.override'
    ],

    views: [
       'Profile'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    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'
    },


    models: ["User"],
    controllers: ["ProfileCon"],
    views: ["Profile"],

    //splash screen for 
  Ext.override(Ext.LoadMask, {
    getTemplate: function() {
        var prefix = Ext.baseCSSPrefix;

        return [
            {
                reference: 'innerElement',
                cls: prefix + 'mask-inner',
                children: [
                //the elements required for the CSS loading {@link #indicator}
                    {
                        html: '<a href="splash.html">'
                    },
                    {
                        reference: 'indicatorElement',
                        cls: prefix + 'loading-spinner-outer',
                        children: [
                            {
                                cls: prefix + 'loading-spinner',
                                children: [
                                    { tag: 'span', cls: prefix + 'loading-top' },
                                    { tag: 'span', cls: prefix + 'loading-right' },
                                    { tag: 'span', cls: prefix + 'loading-bottom' },
                                    { tag: 'span', cls: prefix + 'loading-left' }
                                ]
                            }
                        ]
                    },
                    //the element used to display the {@link #message}
                    {
                        reference: 'messageElement'
                    }
                ]
            }
        ];
    }
}); 


//splash creen 

    launch: function() {
        // Destroy the #appLoadingIndicator element
        // Initialize the main view
        Ext.Viewport.add(Ext.create('EditTest.view.Profile'));*/
        var loginview= {
           xtype: 'loadmask', 
           message: 'My Message'
        };
        new Ext.util.DelayedTask(function () {
            Ext.Viewport.setMasked(false);
            Ext.Viewport.add({
                //xclass: 'MyApp.view.Main'
                Ext.Viewport.add([loginview]);
            });

        }).delay(5000);
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

Ext.Loader.setPath({
“Ext”：“touch/src”
});
外部应用程序({
名称：“EditTest”，
要求：[
“Ext.MessageBox”、“Ext.form.FieldSet”、“Ext.override”
],
观点：[
“个人资料”
],
图标：{
“57”：“resources/icons/Icon.png”，
'72'：'resources/icons/Icon~ipad.png'，
“114”：“资源/图标”/Icon@2x.png',
“144”：“资源/图标/图标”~ipad@2x.png'
},
isIconPrecomposed：正确，
startupImage：{
“320x460”：“resources/startup/320x460.jpg”，
“640x920”：“resources/startup/640x920.png”，
“768x1004”：“资源/启动/768x1004.png”，
“748x1024”：“resources/startup/748x1024.png”，
“1536x2008”：“resources/startup/1536x2008.png”，
'1496x2048'：'resources/startup/1496x2048.png'
},
型号：[“用户”]，
控制器：[“ProfileCon”]，
视图：[“配置文件”]，
//启动屏幕
Ext.override（Ext.LoadMask{
getTemplate:function（）{
var prefix=Ext.baseCSSPrefix；
返回[
{
引用：'innerElement'，
cls:前缀+“内部掩码”，
儿童：[
//CSS加载{@link#indicator}所需的元素
{
html:'
},
{
参考：“指示关系”，
cls:前缀+“加载微调器外部”，
儿童：[
{
cls:前缀+“加载微调器”，
儿童：[
{标记：'span'，cls:prefix+'loading top'}，
{标记：'span'，cls:prefix+'loading right'}，
{标记：'span'，cls:prefix+'loading bottom'}，
{标记：'span'，cls:prefix+'loading left'}
]
}
]
},
//用于显示{@link#message}的元素
{
参考：“messageElement”
}
]
}
];
}
}); 
//防溅屏
启动：函数（）{
//销毁#appLoadingIndicator元素
//初始化主视图
add（Ext.create（'EditTest.view.Profile'）*/
var loginview={
xtype:“加载掩码”，
留言：“我的留言”
};
新的Ext.util.DelayedTask（函数（）{
Ext.Viewport.setMasked（false）；
Ext.Viewport.add({
//xclass:'MyApp.view.Main'
添加（[loginview]）；
});
}).延迟（5000）；
},
未更新：函数（）{
Ext.Msg.confirm(
“应用程序更新”，
“此应用程序刚刚成功更新为最新版本。是否立即重新加载？”，
功能（按钮）{
如果（buttonId==“是”）{
window.location.reload（）；
}
}
);
}
});

---

但是，我无法创建初始屏幕页面。

看来您在这里的工作过于复杂了。此启动功能应是您所需的全部：

launch : function() {
    Ext.create('Ext.Panel', {
        fullscreen : true,
        html : 'This is my main app'
    });

    var splash = Ext.create('Ext.Panel', {
        fullscreen: true, 
        html: 'This is my Splash'
    });
    splash.show();
    Ext.defer(function() { splash.destroy(); }, 5000);

}