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

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'

            }

        ]

    }

});

    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

        });