第一種：

?????? 直接通過TreePanel中的Config Option中的listener來添加，代碼如下：

??? var TreePan = new Ext.tree.TreePanel({

??????? id: 'TreePan',

??????? title: "側邊欄",

??????? useArrows: true,

??????? width: 240,

??????? height: 660,

??????? region: 'west',

??????? frame: true,

??????? autoScroll: true,

??????? enableDD: false,

??????? containerScroll: true,

??????? draggable: false,

??????? root: root,

??????? rootVisible: false,

??????? collapsible: true,

??????? collapsed: true,

??????? animate: true,

??????? listeners: {

??????????? 'click': function(node, e) {

????????? ??????if (node.isLeaf()) {

??????????????????? var newWin = new Ext.Window({

??????????????????????? width: 745,

??????????????????????? height: 529,

??????????????????????? title: "現用技術標準",

??????????????????????? html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

??????????????????? });

??????????????????? newWin.show();

??????????????? }

??????????? }?? ????

?}

?

失敗，表現為程序對 “node.isLeaf()”這個方法的識別有問題，加上這條if語句，則點擊所有節點沒反應（包括非葉節點）；去掉這個if，則點所有節點都會出現新窗口（包括非葉節點）。

?

???? 第二種：

???? 使用TreePan.on來添加Event，代碼如下：

?

??? var TreePan = new Ext.tree.TreePanel({

??????? id: 'TreePan',

??????? title: "側邊欄",

??????? useArrows: true,

??? ????width: 240,

??????? height: 660,

??????? region: 'west',

??????? frame: true,

??????? autoScroll: true,

??????? enableDD: false,

??????? containerScroll: true,

??????? draggable: false,

??????? root: root,

??????? rootVisible: false,

??????? collapsible: true,

??????? collapsed: true,

??????? animate: true,?

?}

TreePan.on('click', BiaoZhunClick);

?

??? function BiaoZhunClick(node, e) {

??????? if (node.leaf) {

??????????? //??????????? e.stopEvent();

??????????? var newWin = new Ext.Window({

?????????? ?????width: 745,

??????????????? height: 529,

??????????????? title: "現用技術標準",

??????????????? html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

??????????? });

??????????? newWin.show();

??????? }

??? }

?

失敗，表現如方法二。

?

???? 第三種：

???? 通過查API Document，知道可以用addListener這個方法來給TreePanel添加Event，于是嘗試如下：

?

??? var TreePan = new Ext.tree.TreePanel({

??????? id: 'TreePan',

??????? title: "側邊欄",

??????? useArrows: true,

??????? width: 240,

??????? height: 660,

??????? region: 'west',

??????? frame: true,

??????? autoScroll: true,

??????? enableDD: false,

??????? containerScroll: true,

??????? draggable: false,

??????? root: root,

??????? rootVisible: false,

??????? collapsible: true,

??????? collapsed: true,

??????? animate: true,?

?}

??? TreePan.addListener('click', BiaoZhunClick);

??? function BiaoZhunClick(node, e) {

??????? if (node.leaf) {

??????????? //??????????? e.stopEvent();

??????????? var newWin = new Ext.Window({

??????????????? width: 745,

??????????????? height: 529,

??????????????? title: "現用技術標準",

??????????????? html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

??????????? });

??????????? newWin.show();

?? ?????}

??? }

?

成功，終于可以實現只有在點擊葉節點時才彈出浮窗了。

?轉自：http://blog.csdn.net/scythev/article/details/4818610

?

轉載于:https://www.cnblogs.com/xuhongfei/p/4037060.html

總結

以上是生活随笔為你收集整理的ExtJS中给Tree节点加click事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。