Home > DeveloperSection > Articles > Change Color of Alert Box in Sencha Touch

Change Color of Alert Box in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 2784  View(s)
Rate this:

Change Color of Alert Box in Sencha Touch

In this article, I’m explaining how to change color of alert box in sencha touch.

By default, the alert box in sencha touch looks like this:

Change Color of Alert Box in Sencha Touch

We want to change the color of alert box according to our need, for this follows these simple steps:

Step 1:

Drag-n-drop a form panel to the canvas, add a button to the form and the tap event of the button.

Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        items: [

            {

                xtype: 'button',

                itemId: 'mybutton',

                margin: 50,

                text: 'Show Alert Box'

            }

        ],

        listeners: [

            {

                fn: 'onMybuttonTap',

                event: 'tap',

                delegate: '#mybutton'

            }

        ]

    }

});

Step 2:

Now write the following code in the tap event of the button to create a alert box with some properties:

    onMybuttonTap: function(button, e, eOpts) {

        var msgBox = new Ext.MessageBox(); // Creates the Alert Box

        msgBox.show({    // Shows the Alert Box                                

            message : 'Alert Box', // Message of Alert Box

            buttons : [{text : 'Ok', itemId : 'Ok'}], // Buttons to be displayed on Alert Box

            style : 'background-color : #0099FF' // Background Color of Alert Box

        });

 Output

Change Color of Alert Box in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick