CODEWITHSUNDEEP
buttonsencha-touchsencha-touch-2messagebox
O F
O F

Reputation: 191

How to embed a custom close button in top right hand corner of a Ext.MessageBox Sencha Touch 2.0

I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.

Upvotes: 2

Views: 3489

Answers (2)

borck
borck

Reputation: 926

You might want to have a look at this nice tutorial: Add action buttons to floating sencha touch panels

the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.

Hope this helps.

Upvotes: 2

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

There's no built-in config which meets your need, so you have to do it manually.

Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.

Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:

http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox

var box = Ext.create('Ext.MessageBox',
                         {
                             id: 'message-box',
                             title: 'title', 
                             message: 'message', 
                             items: [
                                 {
                                 xtype: 'toolbar',
                                 height: '40px',
                                 docked: 'top',
                                 items: [
                                     {xtype: 'spacer'},
                                     {xtype: 'button', 
                                      text: 'X', 
                                      ui: 'plain',
                                      style: {padding: '5px'},
                                      handler: function(){Ext.getCmp('message-box').hide();}
                                     },
                                 ],
                                 }
                             ]
                        });
    box.show();

Hope it helps.

Upvotes: 1

Related Questions