javascript - ExtJS 4 中函数处理程序内的作用域

Question

我搜索了一些关于范围问题的信息并找到了一些东西，但我不确定它们是否适合我的情况。我真的很困惑 atm，所以我想我不妨直接到论坛提问。

我有一个树面板。在该树面板内，我有一个 xtype: 'textfield' 的停靠项。该文本字段采用一个值，并通过specialkey 事件处理程序内的Ext.Ajax.Request 将其用作ajax 请求中的参数。服务器在其响应中返回一个 JSON 对象，该对象被解码并包含树节点的文件夹 ID。在 ajax 请求的 SUCCESS 配置中，有一个我想要运行的函数，它必须通过 getNodeById(IdFromAjaxResponse) 引用树的节点并展开它们。问题是我不知道如何引用这些节点。我尝试了 this.getStore().getNodeById 但结果发现“this”指的是窗口(我猜我的树面板容器？？？)。如何引用树面板或树商店？我不想使用 getCmp 等直接推荐。

一些有帮助的代码:

Ext.define('treePanel', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.folderTreePanel',
    //title: 'Folder Tree',
    displayField: 'name',
    rootVisible: false,
    store: 'treeStore'
    dockedItems: {
        xtype: 'textfield',
        name: 'Search',
        allowBlank: true,
        enableKeys: true,
        listeners: {
            specialkey: function (txtField, e) { //This handler will essentially take the search value and return the path from the DB
                if (e.getKey() == e.ENTER){
                    var searchValue = txtField.getValue();
                    Ext.Ajax.request({
                        url: 'MyServlet',
                        params: {
                            caseType: 'search',
                            value: searchValue
                        },
                        success: function(response) {
                            response = Ext.decode(response.responseText);
                            var node, i=0;
                            expandFn = function () {
This is where I have a problem->node = this.up('treePanel').getStore().getNodeById(response.IDs[i].folderId);
                                node.expand();
                                i++;
                                if (i >= response.IDs.length-1) return;
                                expandFn();
                            }
                        }
                    });
                }
            }, scope: this
        }
    },
    columns: [{
        xtype: 'treecolumn',
        text: 'Folder Name',
        flex: 2,
        sortable: true,
        dataIndex: 'name'
    },{
        text: 'Folder ID',
        dataIndex: 'id',
        flex: 2,
        sortable: true
    }]
});

编辑:我找到了答案。每个事件将触发它的实例作为参数传递到处理函数中。在这种情况下，txtField 指的是文本字段本身。然后我可以遍历继承并找到面板。

但是现在有一个新问题。 expandFn() 被调用一次，然后因为“node”未定义而停止。它应该递归，直到响应数组中不再有任何项目。我再次认为这是一个范围问题，但我真的很困惑，而且我似乎没有看到出问题的地方......

Answer 1

listeners 配置有一个属性scope。您可以将其设置到树面板。

[编辑] 在specialkey监听器中，将this分配给一个变量。在 success 回调中，范围与specialkey 监听器中的范围不同。请参阅下面修改后的代码。

listeners: {
   scope: this,
   specialkey: function (txtField, e) { 
            var me = this;
            if (e.getKey() == e.ENTER){
                var searchValue = txtField.getValue();
                Ext.Ajax.request({
                    url: 'MyServlet',
                    params: {
                        caseType: 'search',
                        value: searchValue
                    },
                    success: function(response) {
                        response = Ext.decode(response.responseText);
                        var node, i=0;
                        expandFn = function () {
                            node = me.getStore().getNodeById(response.IDs[i].folderId);
                            node.expand();
                            i++;
                            if (i >= response.IDs.length-1) return;
                            expandFn();
                        }
                    }
                });
            }
}