Question

我想在sencha中显示启动画面。在这里，我在飞溅screen.html页面几秒钟（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();
                }
            }
        );
    }
});

但是，我无法创建启动画面页面。

Answer 1

看起来你在这里过于复杂。这个启动功能应该是您所需要的：

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);

}

如何在secnha中制作splashScreen

1 个答案: