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{ // 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

Change Color of Alert Box in Sencha Touch

  Modified On Nov-30-2017 02:47:09 AM

Leave Comment