扩展 5.1.1，扩展 Ext.window.Toast

Question

我正在尝试扩展 Ext.window.Toast 以便在尝试向用户敬酒时减少整个应用程序中重复代码的数量；然而，尽管阅读了 toasts 上的 documentation 并尝试了 initComponent() 函数中 callParent() 的多个不同位置，但我无法 "toast" 我的自定义 toast。

这里是自定义吐司（比较基础）：

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();
    }
});

这里是为习俗干杯的尝试window：

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

    Ext.toast(bob);

我是不是遗漏了什么实质性的东西？

据我所知，Ext.window.Toast 应该是可扩展的。如果用上面的配置调用 toast。在 class 上找到（而不是传入对象），吐司有效。此外，所有配置都适当地设置在创建的对象上。

Answer 1

这就是我的结局。很有魅力：

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 是可扩展的，正如 Tarabass 在他的问题中所展示的那样；然而，调用 Ext.toast 的 source 告诉我们一些重要的事情：

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;
    };
});

源代码中最重要的部分是对 Ext.isString(message) 的调用。此处，执行评估以确定是否应关注三个进程参数（标题等），并且 - 如果评估结果为 true - "instantiates" 新配置。 object。

但是，可以通过配置。直接调用 Ext.toast。

在这个启示之后我解决这个问题的方法是用一个 Ext 单例实现工厂模式。

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
        };
    },

// ...

然后可以将调用此单例的 makeToast() 函数的结果传递给 Ext.toast 函数。

扩展 5.1.1，扩展 Ext.window.Toast

Ext 5.1.1, Extend Ext.window.Toast

javascript

extjs

extjs5