Ext 5.1.1, Extend Ext.window.Toast

Question

I am attempting to extend Ext.window.Toast so that I can reduce the amount of repeated code throughout my application when attempting to toast the user; however, despite reading the documentation on toasts and trying a number of different placements of the callParent() in the initComponent() function, I am unable to "toast" my custom toast.

Here is the custom toast (relatively basic):

Ext.define('custom.path.to.ResponseToastWindow', {
    extend : 'Ext.window.Toast',
    xtype  : // xtype...

    requires : [
        'Ext.XTemplate'
    ],

    tpl             : null,

    html            : null,
    // configs... 
    shadowOffset    : 5,

    config : {
        message         : '',
        title           : '',
        someData    : []
    },

    initComponent : function () {
        var me = this;

        me.tpl = new Ext.XTemplate(
            // template script
            // 'message' property utilized, here
        );

        me.html = me.tpl.apply(me.someData);
        me.callParent();
    }
});

Here is the attempt to toast the custom window:

var bob = Ext.create('custom.path.to.ResponseToastWindow', {
        message     : 'objects modified',
        title       : 'Successes',
        someData    : // some data
    });

    Ext.toast(bob);

Am I missing anything substantial?

From what I can tell, Ext.window.Toast should be extendable. If calling toast with the above config. found on the class (rather than passing in an object), the toast works. Further, all of the configurations are appropriately set on the created object.

Answer 1

This is where I end up with. Works like a charm:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.define('ResponseToastWindow', {
            extend: 'Ext.window.Toast',
            xtype: 'myToast',

            tpl: '<span>{message}</span><br><span>{data}</span>',
            shadowOffset: 5,
            align: 't',
            width: 200,

            config: {
                message: '',
                title: '',
                someData: []
            },

            initComponent: function() {
                var me = this;

                me.callParent();

                me.setData({
                    message: me.getMessage(),
                    data: me.getSomeData()
                });
            }
        });

        var bob = Ext.create('ResponseToastWindow', {
            message: 'objects modified',
            title: 'Successes',
            someData: 'Some data'
        });

        bob.show();

        bob = Ext.toast({
             html: 'Data Saved',
             title: 'My Title',
             width: 200,
             align: 't'
         });

        bob.show();
    }
});

Fiddle: https://fiddle.sencha.com/#fiddle/rrs

Answer 2

Ext.window.Toast is extendable as Tarabass has demonstrated in his question; however, the source for the call to Ext.toast tells us a few important things:

function (Toast) {
    Ext.toast = function (message, title, align, iconCls) {
        var config = message,
            toast;

        if (Ext.isString(message)) {
            config = {
                title: title,
                html: message,
                iconCls: iconCls
            };
            if (align) {
                config.align = align;
            }
        }

        toast = new Toast(config);
        toast.show();
        return toast;
    };
});

The most important piece of the source code is the call to Ext.isString(message) . Here, an evaluation is performed to determine whether or not the three proceeding parameters (title, etc.) should be payed attention to and - if the evaluation results in true - "instantiates" a new config. object.

However, it is possible, then, to pass a config. directly to the call to Ext.toast .

The way I approached the problem after this revelation was to implement the factory pattern with an Ext singleton.

Ext.define('Path.to.custom.package.ToastConfig', {
    alternateClassName : 'ToastConfig',

    requires : [
        'Ext.XTemplate'
    ],

    singleton       : true, // this class is a singleton

    autoScroll      : true,
    // other config. options referenced, below....
    shadowOffset    : 5,

   /**
     * factory
    */
    makeToast : function (title, message, data) {
        var me  = this,
            tpl = null;

        tpl = me.getPromiseToastTemplate(message);


        return {
            html            : tpl.apply(data),
            title           : title,
            autoScroll      : me.autoScroll,
            // other configs...
            shadowOffset    : me.shadowOffset
        };
    },

// ...

The result of a call to this singleton's makeToast() function can then be passed to the Ext.toast function.