在AJAX结束之前扩展树节点在ExtJS中

时间:2014-05-22 13:56:03

标签: javascript ajax extjs tree extjs4

我的搜索栏停靠在我的树状面板上。当我写东西并按下输入时,会触发一个Ajax请求并返回将树展开到所请求文件夹所需的文件夹ID。在ajax.request的成功配置中,我使用循环通过getNodeById调用每个节点的expand函数。然而,在第一次扩展之后,ExtJS从代理激发自己的ajax请求以获取文件夹数据(因为它还没有被加载)。由于AJAX是异步的,因此循环比服务器响应更快,它尝试在节点本身加载之前调用节点的.expand()函数,并给出未定义的错误。我应该怎么解决这个问题?我知道通常使用AJAX你必须在处理请求之后使用回调函数来运行你要运行的所有东西,但我不确定在这种情况下如何做到这一点......

Ext.define('treeStore', 
{
    extend : 'Ext.data.TreeStore',
    alias: 'widget.treeStore',
    autoLoad : false,
    model : 'treeModel',
    root :  {
        id: 0,
        name : 'Root', 
        expanded : true,
        loaded: true
    },
    proxy :  {
        type : 'ajax', 
        url : 'MyServlet', 
        reader :  {
            type : 'json', 
            root : 'children'
        }
    },
    folderSort: true
});

Ext.define('Ext.tree.Panel',{
.
.
.
//Stuff about the tree panel etc.
dockedItems: {
        xtype: 'textfield',
        name: 'Search',
        allowBlank: true,
        enableKeys: true,
        listeners: { 
            specialkey: function (txtField, e) { 
                if (e.getKey() == e.ENTER){
                    var searchValue = txtField.getValue();
                    Ext.Ajax.request({
                        url: 'MyServlet',
                        params: {
                            caseType: 'search',
                            value: searchValue
                        },
                        success: function(response) { //ATTENTION: When calling the .expand() the AJAX hasn't finished and cannot find the node.
                            response = Ext.decode(response.responseText);
                            var panel = txtField.up();
                            response.IDs.forEach(function(entry){
                                panel.getStore().getNodeById(entry.folderId).expand(); <-problem here
                            });
                        }
                    });
                }
            }
        }
    }

1 个答案:

答案 0 :(得分:0)

通常在编写我的Ext应用程序时,我发现即使事情应按顺序启动,有时候在AJAX调用之后立即调用事物有时候太快了。可能树节点尚未正确呈现,或者其他一些问题。

尝试围绕该代码包装延迟任务:

new Ext.util.DelayedTask(function()
{
    response = Ext.decode(response.responseText);
    var panel = txtField.up();
    response.IDs.forEach(function(entry){
        panel.getStore().getNodeById(entry.folderId).expand(); <-problem here
    });
}, this).delay(100);

但是你必须解决这些范围问题。延迟函数之前的“this”就是你的范围。