Question

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

这是自定义吐司（相对基本）：

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

这是尝试烘烤自定义窗口：

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

    Ext.toast(bob);

我错过了什么实质性的东西吗？

据我所知，Ext.window.Toast应该是可扩展的。如果使用上面的配置调用toast。在课堂上发现（而不是传递一个对象），吐司工作。此外，在创建的对象上适当地设置所有配置。

Answer 1

这是我最终的结果。像魅力一样：

shift

小提琴：https://fiddle.sencha.com/#fiddle/rrs

Answer 2

当塔巴拉斯在他的问题中证明时，{p> Ext.window.Toast可以延长;但是，调用Ext.toast的{{3}}告诉我们一些重要的事情：

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 - ＆＃34;实例化＆＃34;一个新的配置。宾语。

但是，可以通过配置。直接致电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函数。

Ext 5.1.1，Extend Ext.window.Toast

2 个答案: