Adding a message box to a button icon

Question

I am trying to add a message box when the user clicks on a certain button. This is the code that I have:

{
    text: 'Button Icon',
    id: 'buttonIcon',
    cls: 'x-btn-text-icon',
    launch: function() {
        Ext.MessageBox.show({
            title: "",
            msg: "Message Text",
            icon: Ext.MessageBox.WARNING,
            buttons: Ext.MessageBox.OKCANCEL,
            fn: function(buttonIcon) {
                if (buttonIcon === "ok") {
                    alert("Done!")
                }
            }
        });
    }
}

Right mow, when you click on the button icon nothing happens at all and I need it to display the message that I have entered. Please Help.

Answer 1

A button doesn't have a launch function, instead you need to use the handler function.

Like this:

{
    text: 'Button Icon',
    id: 'buttonIcon',
    cls: 'x-btn-text-icon',
    handler: function() {
        Ext.MessageBox.show({
            title: "",
            msg: "Message Text",
            icon: Ext.MessageBox.WARNING,
            buttons: Ext.MessageBox.OKCANCEL,
            fn: function(buttonIcon) {
                if (buttonIcon === "ok") {
                    alert("Done!")
                }
            }
        });
    }
}