Question

我想从Ext3向Ext4重写this教程。但是从我能够观察到的情况来看，createDelegate函数被删除了（与许多其他东西一样可行）并且它不起作用。我试过调用call / apply而不是这个未定义的createDelegate，但后来我在代码中遇到了其他问题 - this.msgEl是未定义的。如何解决这个问题？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="shared/examples.js"></script>
<style type="text/css">
    body {
        padding: 10px;
    }

    .x-popup-el {
        position: absolute;
        background: transparent url(resources/images/default/qtip/tip-sprite.gif) no-repeat right 0;
        border-left:1px solid #99BBE8;
        padding-right:6px;
        overflow:hidden;
        zoom:1;
    }

    .x-popup-body {
        background: transparent url(resources/images/default/qtip/tip-sprite.gif) no-repeat 0 -62px;
        padding-top:3px;
        overflow:hidden;
        zoom:1;
    }

    .x-popup-message-text {
        padding:0 20px 0 10px;
        font-family:helvetica,tahoma,verdana,sans-serif;
    }

    .x-popup-message-text.error {
        color: red;
    }
</style>
<script type="text/javascript">

Ext.ux.PopupMessage = Ext.extend(Object, {
    init: function(c) {
        this.client = c;
        c.showMessage = this.showMessage.apply(this);
        if (c.rendered) {
            this.onRender(c);
        } else {
            c.on('render', this.onRender, this);
        }
    },

    onRender: function(c) {
        this.el = c.el.createChild(
            '<div class="x-hidden x-popup-el">' + 
                '<div class="x-popup-body">' +
                    '<span class="x-popup-message-text"></span>' +
                '</div>' +
            '</div>'
        );
        this.el.syncFx();
        this.msgEl = this.el.child('span.x-popup-message-text');
    },

    showMessage: function(m, cls) {
        if (this.fading) {
            clearTimeout(this.fading);
            this.fading = 0;
        }
        console.log(this);
        this.msgEl.dom.innerHTML = m;
        if (cls) {
            this.msgEl.extraCls = cls;
            this.msgEl.addClass(cls);
        }
        this.el.stopFx();
        this.el.alignTo(this.client.el, "bl-bl", [0, -1]);
        this.el.slideIn('b').fadeIn({
            callback: this.hide,
            scope: this
        });
    },

    hide: function() {
        this.fading = this.el.fadeOut.defer(5000, this.el, [{
            callback: function() {
                this.msgEl.removeClass(this.msgEl.extraCls);
            },
            scope: this
        }]);
    }
});

Ext.onReady(function(){
    p = new Ext.Panel({
        plugins: new Ext.ux.PopupMessage(),
        frame: true,
        title: 'My Panel',
        renderTo: document.body,
        width: 400,
        html: Ext.example.bogusMarkup
    });

    new Ext.Toolbar({
        renderTo: document.body,
        style: {
            'margin-top': '20px'
        },
        width: 400,
        items: [{
            text: 'Show message',
            handler: function() {
                p.showMessage("Hello world!");
            }
        }, {
            text: 'Show error message',
            handler: function() {
                p.showMessage("Something bad!", "error");
            }
        }]
    });
});
</script>
</head>
<body>
</body>
</html>

错误：

this.msgEl is undefined
file:///C:/Work/learn-tmp/Popup.html
Line 76

Answer 1

createDelegate现在是一个静态方法 - 在Ext 4中删除了所有本机JS对象原型覆盖。因此，myFn.createDelegate(this)代替Ext.Function.createDelegate(myFn, this)或优先别名Ext.bind(myFn, this)。

Answer 2

我还没有使用Ext4，但是一个开始的地方是使用ext-all-debug.js而不是ext-all.js。您可能会获得有关导致错误的更多具体信息。

Answer 3

更改：c.showMessage = this.showMessage.apply（this）;

to：c.showMessage = this.showMessage.apply（this，arguments）;

这将调用“this”范围内的showMessage函数，并使用参数“array”，其中包含调用该函数的参数。

Ext 3教程代码与Ext 4不兼容

3 个答案: