CODEWITHSUNDEEP
javascriptextjsviewextjs4messagebox
chrisboustead
chrisboustead

Reputation: 1563

Extending MessageBox as View - Ext JS 4.1

I'm trying to extend a MessageBox within a view so I can reuse it throughout my application.

It seems that when I do so, I lose some of the default functionality that makes the messagebox useful (msg, button definitions, icon definitons, default drag constraints, etc). Documentation is a little confusing as it seems configs should be defined within the show() function, and I'm unsure of how to set them within my view.

How can I truly extend a messagebox component as a view?

Basic MessageBox (what I want to create with my view):

Ext.Msg.show({
     title:'Error',
     msg: 'There was an error.',
     buttons: Ext.Msg.YESNOCANCEL,
     icon: Ext.Msg.QUESTION
});

Renders:

Normal Messagebox

but when I show my view:

Ext.create('IOL.view.app.Message').show();

I basically end up with a vanilla Panel/Window component

Ext.define('IOL.view.app.Message', {

    extend : 'Ext.window.Window',

    config: {

    },

    constructor: function(config) {
        this.initConfig(config);
        this.callParent(arguments);
    },


    initComponent : function() {

        Ext.apply(this, {
            xtype: 'messagebox',
            width: 400,
            height: 200,
            title:'Error',
            html: 'There was an error.',
            buttons: [
                { text: 'Button 1' }
            ]

        });

        this.callParent(arguments);
    }// initComponent
});

Renders:

enter image description here

Upvotes: 3

Views: 3222

Answers (1)

egerardus
egerardus

Reputation: 11486

It seems you are extending an Ext.window.Window and applying the messagebox configs to it. Why not just extend Ext.window.MessageBox:

Ext.define('IOL.view.app.Message', {
    extend : 'Ext.window.MessageBox',
    width: 400,
    height: 200,
    title: 'Error',
    html: 'There was an error.',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.ERROR,

    // whatever else you want to do
    initComponent : function() {

        this.callParent(arguments);
    }
});

@EricCook brings up a good point below. The MessageBox class is designed for reuse in the app as a singleton not really for subclassing.

In your question you said:

I'm trying to extend a MessageBox within a view so I can reuse it throughout my application

I can understand that if you want to create a different type of messagebox that you would call with the normal Ext.Msg.show method, you could extend the MessageBox with your own buttons or icons I suppose.

But for regular use this isn't something you need to extend. For repeated use in your app you could hold a reference to the message box config you want in the controller like:

// SomeController.js
errorMsg: {
     title:'Error',
     msg: 'There was an error.',
     buttons: Ext.Msg.YESNOCANCEL,
     icon: Ext.Msg.QUESTION
},

Then whenever you want to call that type of message you could use (assuming the scope is the controller itself, or you could get a reference to the controller beforehand):

Ext.Msg.show(this.errorMsg);

Upvotes: 4

Related Questions