How to create Splash screen for Sencha touch application?

Hello,

This is blog post is all about creating splash screen for sencha touch application. We all know that Sencha touch displays startup image while app is busy in loading necessary JavaScript files. However this image will only be displayed for few seconds. What if you want to display splash screen for users to have a feel that application is loading necessary data and will start in some time.

Following is the code to accomplish this. You have to write this code in app.js file


launch: function () {
        Ext.Viewport.setMasked({
            xtype: 'loadmask',
            message: 'My Message'
        });
        new Ext.util.DelayedTask(function () {
            Ext.Viewport.setMasked(false);
            Ext.Viewport.add({
                xclass: 'MyApp.view.Main'
            });

        }).delay(5000);
    }

Above code will display load mask for 5 seconds and than it will add your main view to viewport. You can also override Ext.LoadMask if you want to display your brand logo or images etc. See the following code


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

        return [
            {
                //it needs an inner so it can be centered within the mask, and have a background
                reference: 'innerElement',
                cls: prefix + 'mask-inner',
                children: [
                //the elements required for the CSS loading {@link #indicator}
                    {
                        html: '<img src="images/MyLogo.png"/>'
                    },
                    {
                        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'
                    }
                ]
            }
        ];
    }
});

Check this code


{
      html: '<img src="images/MyLogo.png"/>'
}

This will add an extra logo to your loading screen. This is how you can add any other extra content to your splash screen.

Hope this helps you.

Sencha touch Spinner field - Change Plus/Minus button icons

Hello,

Recently I was working on a project where I had to change plus/minus button icons on sencha touch spinner fields. See the image below.

First I tried to change it with traditional sencha touch approach. By using sass files but there are no variables or mixins defined for it. You can check this from Sencha Touch Theme  

After that I checked the source code of spinner field and found that plus and minus signs are added by just specifying it in html of element so we can override it and change it the way we want.

Here are steps for it. Create an overides.js file and attach it after sencha touch js and before app.js. Add following code to it.



Ext.override(Ext.field.Spinner, {
    updateComponent: function (newComponent) {
        this.callParent(arguments);

        var innerElement = this.innerElement,
            cls = this.getCls();

        if (newComponent) {
            this.spinDownButton = Ext.Element.create({
                cls: ' minusButton',
                html: '<img src="resources/icons/minus.png"/>'
            });

            this.spinUpButton = Ext.Element.create({
                cls:' plusButton',
                html: '<img src="resources/icons/plus.png"/>'
            });

            this.downRepeater = this.createRepeater(this.spinDownButton, this.onSpinDown);
            this.upRepeater = this.createRepeater(this.spinUpButton, this.onSpinUp);
        }
    }
});

Check this code

html: '<img src="resources/icons/minus.png"/>' 
html: '<img src="resources/icons/pluss.png"/>'

This does the trick and will add your custom icon to it and you will get ui as displayed in above image.

Hope this helps you. Please note that above code is tested for Sencha touch 2.0 gpl version. It may be different for other older versions or may change in future version.