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:
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
