Question

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

我想调用带有参数的函数，该函数位于Javascript Scope的ExtJs范围内。现在我可以调用函数而不传递参数而不会出现任何错误。当我通过传递参数（在代码中提到）调用相同的函数时，它给了我跟随错误，因为函数没有获得任何值。

Uncaught TypeError: Cannot call method 'indexOf' of null

此功能应向tabpanel添加新选项卡。

当我通过从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库或实用程序没有任何不同。

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

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

就是这样。

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

那么'内部'函数在什么范围内创建？好吧，让我们回到你在这里做的第一件事：Ext.onReady（）函数调用。您调用此函数传入一个参数。该参数是一个匿名函数，包含2个局部变量currentItem和tabs。您还创建了一个名为“addTab_inside”的本地函数。当我说'local'时，它意味着变量是在其创建范围内的函数的本地变量。在您的情况下，父函数是匿名的，因此无法寻址。当然，该函数中的任何局部变量都可以相互访问，因为它们都在相同的范围内。因此，只要'tabs'引用'inside'函数或currentItem即可。

解决方案的唯一方法是在大型匿名功能块中移动外部函数。但我怀疑你不想这样做，因为它确实没有理由。

尽管对范围的讨论对于理解很重要，但我的直觉是，您应该采用不同的方法来处理您想要做的事情。如果您正在构建完整的应用程序，那么我建议您使用Sencha指南中概述的应用程序结构，使用控制器和文件夹结构来分隔您的代码。

Answer 2

addTab_inside(true, 'Test', 'test.php');将在Ext.onReady之前运行。所以，你的功能还不会存在。将addTab_inside移动到Ext.onReady方法的底部。

<强>更新

@dbrin在这里解释了范围界定问题。如果你真的想让你的方法工作，你需要设置一些“命名空间”，如下所示。

//Namespace defined in Global scope
var myApp = {};

Ext.onReady(function(){ 
  //Some stuff... 

  myApp.addTab_inside = function(closeable, tabtitle, targetUrl){
    //do work
  }
});

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

正如我之前提到的，你仍然需要确保在Ext准备就绪之前不要调用addTab_inside。

尽管如此，我建议您查看suggested MVC architecture上的教程，如@dbrin所述。

在Javascript中调用范围之外的ExtJS函数

2 个答案: