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

  Modified On Nov-24-2017 07:57:13 AM

Leave Comment