javascript - Ext 3 教程代码与 Ext 4 不兼容-6ren

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

转载作者：行者123 更新时间：2023-11-30 18:43:17

27

4

我想重写 this从 Ext3 到 Ext4 的教程。但是从我能够观察到的情况来看，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

最佳答案

createDelegate 现在是一个静态方法——所有 native JS 对象原型(prototype)覆盖都已在 Ext 4 中删除。因此，您可以使用 Ext.Function 而不是 myFn.createDelegate(this)。 createDelegate(myFn, this) 或更可取的别名 Ext.bind(myFn, this)。

关于javascript - Ext 3 教程代码与 Ext 4 不兼容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6228430/

27

4

0

文章推荐： c# - 注册启动脚本

文章推荐： javascript - 跨域ajax请求自动使用jsonp

文章推荐：数字的javascript验证

firefox - 升级插件以与 Firefox 4.0 兼容，但也尝试使其与 3.x 兼容。建议？
我有一个为 Firefox 3.6 编写的附加组件，现在我正在将其升级到 Firefox 4.0，同时尝试使其与 3.6 兼容。有没有人有尝试这样做的经验，或者关于如何在代码变得太意大利面条式的情况下
cassandra - 哪个版本的 Astyanax 与 Cassandra 2.0.1 兼容，或者哪些其他 Java 驱动程序与 Cassandra 2.0.1 兼容
我已经安装了 Cassandra 2.0.1 并想在我的应用程序中使用 Astyanax Java API。我在维基上看到了 Cassandra 兼容性表，上面写着 Astyanax 使用 Netfl
vbscript - 如何使我的自定义类与 For Each 兼容？
是否可以使纯粹在 VBScript(无 COM 对象)中实现的自定义容器类与 For Each 语句一起使用？如果是这样，我必须公开哪些方法？最佳答案简而言之，没有为什么？创建一个可枚举的集合类
java - 与哪些变量运算符 >> 兼容
我这里的代码很少 int b=3; b=b >> 1; System.out.println(b); 它工作得很好，但是当我将变量 b 更改为 byte、short、float、double 时它包含
兼容 Java 类名
我们有一个 Java 客户端，它使用 corba 调用多个第三方系统。这些是实现同一组接口(interface)的不同系统。我们获得了使用这些接口(interface)的库(jar 文件)。例如，这些
HTML5 兼容 - 类属性中的尾随空格
我知道从技术上讲 HTML5 是一个“实时规范”，但我想知道它是否符合在类名中添加尾随空格的规定。我没有在规范中看到任何对这种情况的引用，但我的一个队友说它是无效的。也许我错过了什么？修剪这些空间会
multithreading - 使克隆的线程 pthread 兼容
我在 Linux x86-64 上用 C 语言编程。我正在使用一个库，它通过原始 clone 创建多个线程系统调用而不是使用 pthread_create .这些线程运行库内部的低级代码。我想钩住这
assembly - 汇编程序中的低级网络(兼容 x86)
我希望用汇编程序编写一个可启动程序，能够发送和接收网络数据包。我不想使用任何库，我想自己创建它(并在这样做的同时学习)。不幸的是，我无法找到有关最低级别的网卡通信(发送原始套接字)的任何信息。我相信有
具有固定范围的 CoffeeScript 兼容 fork ？
是否有除 fixed scoping 之外没有任何更改的 CoffeeScript 分支，以便它在很大程度上与 CoffeeScript 兼容(如果代码没有外部变量赋值则完全兼容)？我会考虑使用可接受
java - 为什么方法引用与具有不同参数数量的功能接口(interface)兼容？
这个问题已经有答案了: Why is BiConsumer allowed to be assigned with a function that only accepts a single para
java - 兼容 JDBC 的主存独立数据库
我的 Java 应用程序需要一个高性能主内存数据库 1] 请建议数据库 -符合 JDBC -独立(即平面文件) -支持内存表 -高性能 -B-TREE索引 2] JAVA中是否有任何技术可以在程序运行
c++ - 如何使std::string与char *兼容？
我通常会找到一些以char*作为参数的函数，但是我听说在C++中更推荐std::string。如何将std::string对象与以char* s为参数的函数一起使用？到目前为止，我已经知道了c_str
javascript - 如何使这个模块与 requireJS 兼容
我正在移植我的一个旧 javascript 文件以与 requireJS 兼容。这是以前代码的样子。 // effect.js (function(exports){ // shorthand
android - 如何使我的项目与 getMapAsync 兼容？
在今天更新我的 SDK 之前，我有工作代码(为了将来引用，请查看问题询问日期)。 .getMap 曾经发出警告，表明它已被弃用，但现在它甚至不被识别为有效输入。我假设这是因为 API 24(Andro
POSIX 兼容 shell 中的数组
根据 this reference sheet on hyperpolyglot.org , 下面的语法可以用来设置一个数组。 i=(1 2 3) 但是我在 dash 上遇到错误，它是 Ubuntu
mysql - 无效模式--兼容 : mysql40
我的 MacBook 上安装了 MYSQL 8.0.12(下载版本)。当我尝试转储 mysql40 的兼容版本时，收到错误 Invalid mode to --known: mysql40。我 100
testing - 哪些版本控制软件与 remedy 兼容？
您好，我正在更改我的版本控制系统，我调查了 perforce 是否与 bcm 补救措施兼容。有谁知道其他版本的控制系统也与 bcm 补救措施兼容？？最佳答案 BMC Remedy 会更接近 Clea
python - 兼容 Numpy 的图像绘图库
我需要在 python 中的图像上绘制一般坐标网格。我可以计算网格线的像素坐标，因此我只需要一个能够将它们绘制为图像顶部的虚线的模块。图像以 numpy 数组的形式出现，因此我需要能够在这些格式和绘
python - 使文件处理代码与 asyncio 兼容
库接受文件输入的“传统”方式是做这样的事情: def foo(file_obj): data = file_obj.read() # Do other things here 客户端代
css - 我怎样才能使以下代码与 IE6 兼容？
代码 Untitled Document #topDropDownMenu { position: relative;

首页

博学

6Ren·AI

商城

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