ExtJs 4上的TreeNode点击事件

时间:2011-04-19 16:12:52

标签: javascript extjs extjs4

我正在使用ExtJS 4(beta 3),我有一个TreePanel,这是我的导航菜单。 它是这样的:

  • 工作
    • 添加工作
    • 列出所有工作
  • ...
    • ...
    • ...

(这将在权限系统基础上进行,但这是另一个故事)

在ExtJS 3上,点击“添加作业”时执行的操作就像添加

一样简单
...
leaf:true,
listeners:{
click:function(n){
       //my code...
   }
}
...

到根子元素。

现在不是那么简单。我得到的更接近(在树梢上)

listeners:{
    click : {
             element : 'el',
             fn : function(eve, elem, obj){
                   console.log(node);
                   console.log(elem);
                   console.log(obj);
                  }
    }
}

所以,也许我只是一个菜鸟,也许我已经对ExtJS产生了强烈的仇恨,也许只是这个测试版的一个问题,但是......

如何在树节点上的click事件中添加侦听器? (Select事件不会做我需要的事情)

谢谢你们。

编辑:目前正在对此进行测试,但它无效。

 ... = Ext.create('Ext.tree.TreePanel', {
                        region      : 'west',
                        collapsible : false,
                        title       : 'ITMI',
                        width       : 220,
                        margins     : '5 5 5 5',
                        cmargins    : '5 5 5 5',
                        hideHeaders : true,
                        useArrows   : true,
                        rootVisible : false,
                        headers: [{
                                xtype    : 'treeheader',
                                text     : 'Nome',
                                flex     : 1,
                                dataIndex: 'nome'
                            }],
                        store: store,
                        listeners:{
                            itemclick: function(n){
                                console.info(n);
                            }
                        }
    ...

编辑2:项目点击事件现在有效(在EXJS 4决赛中),它仍然无法解决我的问题。当我打电话给每个treenode时,我想调用一个特定的功能。在它真的很容易之前。现在我无法理解。

3 个答案:

答案 0 :(得分:7)

在ext4 beta3中(也许在最终版本中)......不再有click事件......
这已更改为itemclick more info

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    renderTo: Ext.getBody(),
    height: 300,
    width: 250,
    title: 'Files',

    listeners:{
        itemclick: function(n){
            console.info(n);
        }
    }

});

答案 1 :(得分:1)

所以,这可能会帮助一些可能在我遇到同样问题时遇到困难的人。

“itemclick”事件是处理叶子点击的方式,但由于我不记得的原因,它不起作用。

我通过拆分数据库中的配置来实现我所需要的,比如

controllerName|functionName

然后在“itemclick:

的处理程序上调用此代码
this.getController(ctr)[fn]();  

ctr controllerName fn functionName 即可。这可以通过eval轻松完成,但我不愿意。

答案 2 :(得分:1)

我无法使用IE浏览器触发项目(在Chrome中很好)。我修改了我的代码以使用'checkchange',它工作正常。