开发者

Ext 3 tutorial code not compatible with Ext 4

I wanted to rewrite this tutorial to Ext4, from Ext3. But from what I was able to observee, the createDelegate function was removed (as with many other things propably) and it does not work. I've tried calling call/apply instead of this undefined createDelegate but then I'm encountering other problem later in the code - this.msgEl is undefined. How to get around this ?

<!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.slide开发者_Go百科In('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>

The error :

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


createDelegate is now a static method -- all native JS object prototype overrides have been removed in Ext 4. So instead of myFn.createDelegate(this) you would do Ext.Function.createDelegate(myFn, this) or the preferable alias Ext.bind(myFn, this).


I haven't used Ext4 yet, but a place to start is to use ext-all-debug.js instead of ext-all.js. You might get more specific information as to what is causing the error.


change : c.showMessage = this.showMessage.apply(this);

to : c.showMessage = this.showMessage.apply(this, arguments);

This calls the showMessage function in the scope of 'this' and uses the arguments "array" which contains the arguments the the function has been called with.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜