Код учебника Ext 3 не совместим с Ext 4 - PullRequest
Новая
       1

Код учебника Ext 3 не совместим с Ext 4

1 голос
/ 03 июня 2011

Я хотел переписать этот учебник в Ext4, из Ext3. Но из того, что я смог наблюдать, была удалена функция 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

Ответы [ 3 ]

2 голосов
/ 04 июня 2011

createDelegate теперь является статическим методом - все переопределения собственных прототипов объектов JS были удалены в Ext 4. Поэтому вместо myFn.createDelegate(this) вы должны сделать Ext.Function.createDelegate(myFn, this) или предпочтительный псевдоним Ext.bind(myFn, this).

0 голосов
/ 04 июня 2011

изменение: c.showMessage = this.showMessage.apply (this);

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

Это вызывает функцию showMessage в области видимости this и использует аргументы "массив", который содержит аргументы, с которыми функция была вызвана.

0 голосов
/ 03 июня 2011

Я еще не использовал Ext4, но для начала нужно использовать ext-all-debug.js вместо ext-all.js.Вы можете получить более конкретную информацию о том, что является причиной ошибки.

...