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:
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' } ] } }); |
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 }); |
