ExtJs5 - 覆盖在 ext-all-debug.js 中定义的本地方法答案

【问题标题】：ExtJs5 - overriding native method defined inside ext-all-debug.jsExtJs5 - 覆盖在 ext-all-debug.js 中定义的本地方法
【发布时间】：2014-11-03 11:02:17
【问题描述】：

假设我想在 ext-all-debug.js 文件中覆盖 Sencha 提供的本机代码中的一个函数。

该函数在 Ext.util.Renderable 类中定义，名称为 cacheRefEls。

覆盖应该在项目的 index.html 中进行，以便更容易维护以供将来的版本使用。

我已经尝试过这个帖子中提出的覆盖解决方案：

Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples)

我的 index.html 如下所示：

<html>
...
<script type="text/javascript">
    Ext.define('Myapp.view.Renderable', {
        override: 'Ext.util.Renderable',
        cacheRefEls: function(el) {
              console.log("in overider method");
             //my adapted version of it
        }   
    });
</script>
...
</html>

不幸的是，通过 Firefox-33 访问 localhost:8080 后，从 Firebug-2-Console-log 中可以看到它仍然使用本机版本的函数。

我在这里缺少什么？

【问题讨论】：

cacheRefEls 是私有方法，不能被覆盖。如果您成功创建了覆盖，您应该会看到：Ext.util.Renderable: Public method "cacheRefEls" conflicts with private framework method declared by Ext.util.Renderable

标签： firefox extjs migration overriding firebug

【解决方案1】：

在 ExtJS 5 中，您需要将这些方法移动到 privates 配置中。

你应该已经看到了错误：

公共方法“cacheRefEls”与 Ext.util.Renderable 声明的私有框架方法冲突

您仍然可以覆盖私有方法。在您的情况下，解决方案是：

Ext.define('Myapp.view.Renderable', {
    override: 'Ext.util.Renderable',
    privates: {
       cacheRefEls: function(el) {
          console.log("in overider method");
         //my adapted version of it
       }
    }   
});

【讨论】：

并非所有被覆盖的方法都需要进入私有内部，只有那些原本属于私有的方法，例如 cacheRefEls。如果您尝试覆盖的方法属于那里，则必须添加静态。