javascript - 在 Javascript 范围外调用 ExtJS 函数

Question

我是 ExtJS 的新手。尝试在应用程序中使用和自定义选项卡功能。

我想从 Javascript Scope 调用一个 带参数的函数，它在 ExtJs 范围内。现在我可以在不传递参数的情况下调用函数而不会出现任何错误。当我通过传递参数(在代码中提到)调用相同的函数时，它给我以下错误，因为函数没有获得任何值。

Uncaught TypeError: Cannot call method 'indexOf' of null

此函数应将新选项卡添加到选项卡面板。

当我通过从 ExtJS 范围传递参数来调用相同的函数时，它成功地添加了选项卡。但是当通过传递参数从 javascript 范围调用函数时不是。帮助我理解并解决这个问题。

Ext.onReady(function() {
var currentItem;
var tabs = Ext.widget('tabpanel', {
    launch: function() {
      _myAppGlobal = this;
    },
    renderTo: 'tabs',
    resizeTabs: true,
    enableTabScroll: true,
    width: 850,
    defaults: {
        autoScroll: true,
        bodyPadding: 10
    }], 
    plugins: Ext.create('Ext.ux.TabCloseMenu', {
        extraItemsTail: [
            '-',
            {
                text: 'Closable',
                checked: true,
                hideOnClick: true,
                handler: function (item) {
                    currentItem.tab.setClosable(item.checked);
                }
            },
            '-',
            {
                text: 'Enabled',
                checked: true,
                hideOnClick: true,
                handler: function(item) {
                    currentItem.tab.setDisabled(!item.checked);
                }
            }
        ],
        listeners: {
            aftermenu: function () {
                currentItem = null;
            },
            beforemenu: function (menu, item) {
                menu.child('[text="Closable"]').setChecked(item.closable);
                menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());

                currentItem = item;
            }
        }
    })
  });

  function addTab_inside(closeable, tabtitle, targetUrl) {
      tabs.add({
          title: tabtitle,
          iconCls: 'tabs',
          autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
          closable: closeable,
          autoScroll: true,
          nocache: true,
          discardUrl: false
      }).show();
  }
});

function addTab_Outside(){
   addTab_inside(true, 'Test', 'test.php');
}

addTab_Outside 函数基于事件并在 xyz 元素上调用 onClick。

Answer 1

Ext 作用域是不存在的。 Ext 是一组不多不少的 JS 对象和函数。因此，适用于 JS 的一切都适用于 Ext。任何范围问题和复杂性都纯粹是 JavaScript 的问题，Ext 与任何其他 JS 库或实用程序没有任何不同。

现在，让我们看看你做了什么:

1. 您使用一些参数调用了 Ext.onReady() 函数。
2. 您在全局范围(也称为窗口范围)中定义了函数 addTab_Outside()。

就是这样。

现在让我们看看 addTab_Outside 函数。在此函数中，您正在调用另一个函数 addTab_inside。但是这个“内部”功能在哪里呢？ JS应该去哪里找这个函数呢？由于你在全局范围内定义'ouside'函数，那么JS将在同一范围内寻找内部函数，并且找不到它，因为它不是在全局范围内创建的。

那么“内部”函数是在什么范围内创建的？好吧，让我们回到您在这里做的第一件事:Ext.onReady() 函数调用。您调用此函数并传入一个参数。该参数是一个带有 2 个局部变量 currentItem 和 tabs 的匿名函数。您还创建了一个名为“addTab_inside”的本地函数。当我说“本地”时，它意味着变量对于创建它们的范围内的函数是本地的。在您的情况下，父函数是匿名的，因此不可寻址。该函数内的任何局部变量当然可以相互访问，因为它们都在同一范围内。因此，只要“选项卡”引用“内部”函数或 currentItem 就可以了。

您的解决方案唯一可行的方法是将外部函数移到大型匿名函数 block 中。但我怀疑你不想这样做，因为确实没有理由这样做。

虽然对范围的讨论很重要，但我的直觉是无论您尝试做什么，都应该采用不同的方法。如果您正在构建一个完整的应用程序，那么我建议您使用 Sencha 指南中概述的应用程序结构，使用 Controller 和文件夹结构来分隔您的代码。