Extjs treePanel节点范围问题答案

【问题标题】：Extjs treePanel node scope problemExtjs treePanel节点范围问题
【发布时间】：2011-05-31 13:21:59
【问题描述】：

我还有一个关于 extjs 的问题。当我构建树视图时，我无法获得使用树节点的范围。根节点的范围是我的 js 对象，而不是返回窗口作为范围的 treenode。

知道为什么吗？

TreePanel 定义：

this.treeForParamPanel= new Ext.tree.TreePanel(
{
    layout: 'fit',
    frame:true,
    iconCls:'search',

    animCollapse:false,
    collapsedIconCls: 'search',
    titleCollapse :true,
    collapsible: true,
    split:true,
    collapsed: false,
    animate: false,
    lines: true,
    id:'treeParamPanel'+this.id,
    region:region,
    title: 'aaa',
    anchor:'100%',
    //rootVisible:false,
    width: 200,
    height:300,
    border:false,
    autoScroll:true,

    loader: new Ext.tree.TreeLoader({
        scope:this,
        dataUrl:'index.php?act=index.php'
    })
});
this.rootTreeForParamPanel = new Ext.tree.AsyncTreeNode({
    text: 'aaa',
    draggable:false,
    id:'source',
    scope:this,
    listeners: {
        click: { 
            scope:this,
            fn:function(ev) { 
                alert(this); 
            }
        }
    }
});
this.treeForParamPanel.setRootNode(this.rootTreeForParamPanel);

物品定义：

[
    {
        "text": "testyybvnvbnvb",
        "id": "16",
        "leaf": true,
        "draggable": "false",
        "qtip": "aaa",
        listeners: {
            click: { 
                scope: this,
                fn:function(ev) { 
                    alert(this); 
                }
            }
        }
    }
]

【问题讨论】：

标签： extjs treeview scope treenode

【解决方案1】：

当使用TreePanel 时，我通常将点击事件放在treepanel 上，而不是放在每个节点上。如果您不需要为每个节点分别处理 click 事件，请将 click 事件 放在 treepanel 上，如下所示：

this.treeForParamPanel = new Ext.tree.TreePanel(
{
    ... your parameters...
    listeners:
    {
        click: function(node, event) {
            alert('You have clicked on node ' + node.id);
        },
        scope: this
    }
});

现在 click 事件 的范围与您创建 treepanel 时的范围相同，并且您仍然可以访问用户单击的节点。

【讨论】：