---
title: "Change Color of Alert Box in Sencha Touch"  
description: "In this article, I’m explaining how to change color of alert box in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-05  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1311/change-color-of-alert-box-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 2 minutes  

---

# Change Color of Alert Box in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to change [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) of [alert box](https://www.mindstick.com/articles/12940/how-to-create-message-alert-box-using-jquery) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

By [default](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources), the alert box in sencha touch looks like this:

![Change Color of Alert Box in Sencha Touch](https://www.mindstick.com/mindstickarticle/3540a54d-7977-44e0-a959-bb216f2fcee0/images/3d2f8bf4-f0ea-4390-959b-e95efe0eb6f1.png)

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](https://www.mindstick.com/mindstickarticle/3540a54d-7977-44e0-a959-bb216f2fcee0/images/69a828b0-2330-4599-9006-9561a60769c8.png)

---

Original Source: https://www.mindstick.com/articles/1311/change-color-of-alert-box-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.