【问题标题】:TreeNode click event on ExtJs 4ExtJs 4上的TreeNode单击事件
【发布时间】:2011-04-19 16:12:51
【问题描述】:

我正在使用 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 有强烈的仇恨,也许只是这个 beta 版本的问题,但是......

如何为树节点上的单击事件添加侦听器? (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: itemclick 事件现在有效(在 EXJS 4 final 上),它仍然不能解决我的问题。当我调用每个树节点时,我想调用一个特定的函数。之前真的很简单。现在想不通了。

【问题讨论】:

    标签: javascript extjs extjs4


    【解决方案1】:

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

    【讨论】:

    • 在我愤怒驱动的答案搜索过程中,我发现了 itemclick 事件,当我尝试它时,它也不起作用,但话又说回来,“愤怒驱动的搜索”不是最好的。我会试试你的代码,让你知道。谢谢你的回答。
    • 好吧,不走运。它仍然不会触发事件。我将在上面发布我的代码的 sn-p。
    • 错误是什么??只是没有开火??我可以看看你的整个代码吗?也许我可以帮助你...
    • itemclick 是正确的,并且确实有效(我只是在本地验证了它)。你确定你没有任何 JS 错误吗?否则你一定有其他事情发生。
    • 没有错误(至少在萤火虫中)。现在我将暂时搁置这个问题,并专注于 MVC'ing 我的实际代码,然后,再试一次,我会接受你的回答,因为很明显,它是正确的。谢谢
    【解决方案2】:

    所以,它可能会帮助一些可能正在与我当时遇到的同样问题苦苦挣扎的人。

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

    我通过拆分数据库中的配置完成了我所需要的,比如

    controllerName|functionName
    

    然后在“itemclick:”的处理程序上调用此代码:

    this.getController(ctr)[fn]();  
    

    其中 ctrcontrollerNamefn函数名。这可以通过 eval 轻松完成,但我不想这样做。

    【讨论】:

      【解决方案3】:

      我无法使用 IE 触发 itemclick(在 Chrome 中很好)。我修改了我的代码以使用“checkchange”,它工作正常。

      【讨论】:

      • “checkchange”的问题是,如果您希望在单击所选项目时触发事件。如果不是这样,“checkchange”就可以正常工作,否则就不行。
      猜你喜欢
      • 2012-01-16
      • 1970-01-01
      • 2011-11-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-30
      相关资源
      最近更新 更多