Extjs treePanel node scope problem

Question

I have yet another problem with extjs. When I build treeview I can't get the scope to work with the tree nodes. The scope of root node is my js object as opposed to treenode which returns window as the scope.

Any idea why?

TreePanel Definition:

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);

Item Definition:

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

Chau Chau · Accepted Answer · 2011-05-31T13:41:09

When using TreePanel's I normally put the click event on the treepanel and not on each of the nodes. If you don't need the click event to be handled differently for each node, put the click event on the treepanel like this:

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

Now the scope of the click event is the same as when you created the treepanel and you still have access to the node which is being clicked on by the user.

Extjs treePanel node scope problem

1 Answers