Extjs tree节点的点击事件

Extjs tree节点的点击事件 [问题点数：80分，结帖人Q11253217]

            不显示删除回复

           显示所有回复

            显示星级回复

           显示得分回复

            只显示楼主

           收藏

关注 Q11253217 GotoDo 本版等级： 结帖率：94.74%

楼主 发表于： 2013-08-28 15:38:05 extjs tree 监听事件 我想做一个类似如下图的界面 然后点击左边tree的节点在中间区域能够生成一个tab界面。不同节点点击的时候进入的页面不同 代码如下：求监听事件怎么写 JavaScript code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 var  tab =  new  Ext.TabPanel({      region :  'center' ,      deferredRender :  false ,      activeTab : 0,      resizeTabs :  true ,  // turn on tab resizing      minTabWidth : 115,      tabWidth : 135,      enableTabScroll :  true });   Ext.onReady( function () {      var  viewport =  new  Ext.Viewport({          width : 1024,          height : 620,          layout :  'border' ,  // border布局          items : [{              region :  'north' ,  // 必须用region参数指定位置              xtype :  'panel' ,              height : 50,              frame: true ,              split :  false ,  // split属性是设置除了center区域外是否可调节大小              html :  '欢迎登录!' ,              margins :  '0 0 0 0'                    // title: 'South Region is collapsible', //要想设置折叠必须设置title                  // collapsible: true                  }, {                      region :  'south' ,  // 必须用region参数指定位置                      xtype :  'panel' ,                      height : 50,                      frame: true ,                      split :  false ,  // split属性是设置除了center区域外是否可调节大小                      html :  '欢迎登录!' ,                      margins :  '0 0 0 0'                  // title: 'South Region is collapsible', //要想设置折叠必须设置title                  // collapsible: true                  }, {                      title :  'West Region is collapsible' ,                      region :  'west' ,                      xtype :  'panel' ,                      width : 200,                      collapsible :  true ,  // 设置可折叠                      id :  'west-region-container' ,                      layout :  'fit' ,                      margins :  '0 0 0 0' ,                      title :  '管理系统' ,                      items : [{                          xtype :  'treepanel' ,                          title :  '系统菜单' ,                          expanded :  true ,                          containerScroll :  true ,                          root : {                              text :  '系统管理' ,                              children : [{                                  text :  '行政区划管理' ,                                  id :  'c1' ,                                  expanded :  true ,                                  children : [{                                      text :  '行政区划管理1' ,                                      id :  'c11' ,                                      leaf :  true                                  }, {                                      text :  '行政区划管理2' ,                                      id :  'c12' ,                                      leaf :  true                                  }]                                      /*                                       * href:"Grid.html",//节点的链接地址                                       * hrefTarget:"tab"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开                                       */ }, {                                  text :  '部门管理' ,                                  id :  'c2' ,                                  expanded :  true ,                                  children : [{                                      text :  '部门管理1' ,                                      id :  'c21' ,                                      leaf :  true                                  }, {                                      text :  '部门管理2' ,                                      id :  'c22' ,                                      leaf :  true                                  }]                              }, {                                  text :  '用户管理' ,                                  expanded :  true ,                                  id :  'c3' ,                                  children : [{                                      text :  '用户管理1' ,                                      id :  'c31' ,                                      leaf :  true                                  }, {                                      text :  '用户管理2' ,                                      id :  'c32' ,                                      leaf :  true                                  }]                              }, {                                  text :  '菜单管理' ,                                  expanded :  true ,                                  id :  'c4' ,                                  children : [{                                      text :  '菜单管理1' ,                                      id :  'c41' ,                                      leaf :  true                                  }, {                                      text :  '菜单管理2' ,                                      id :  'c42' ,                                      leaf :  true                                  }]                              }]                          },                          viewConfig : {                            }                      }],                      dockedItems : [{                          xtype :  'toolbar' ,                          dock :  'bottom' ,                          items : [{                              text :  "全部折叠" ,                              listeners : {                                  "click"  : {                                      fn :  function () {                                          this .collapseAll();                                      },                                      scope :  this                      }                     }                          }]                      }]                    }, tab // 初始标签页          ]        });   }); 更多0 分享到： 相关知识库：  HTML5  OpenCV  软件测试  C++ width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" id="aswift_1" name="aswift_1" style="box-sizing: content-box; left: 0px; position: absolute; top: 0px;"> 免费试用IBM Bluemix   id="iframeu1636201_0" src="http://pos.baidu.com/vcum?rdid=1636201&dc=2&di=u1636201&dri=0&dis=0&dai=2&ps=3261x547&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468285817870&ti=Extjs%20tree%E8%8A%82%E7%82%B9%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6-优快云%E8%AE%BA%E5%9D%9B-youkuaiyun.com-%E4%B8%AD%E5%9B%BD%E6%9C%80%E5%A4%A7%E7%9A%84IT%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA&ari=1&dbv=2&drs=3&pcs=1165x677&pss=1165x9208&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468285817&rw=677&ltu=http%3A%2F%2Fbbs.youkuaiyun.com%2Ftopics%2F390569768&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9YUJXrSt9zJUlsSXVzt8qwCo8wPqqwdSMY8QjYH4CnJxRMixZUPFgVw1UlIQOt6_%26wd%3D%26eqid%3Dd5eab307000eec4b00000005578442f8&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468285818&qn=5f95a9b762cd1cf4&tt=1468285817855.19.207.207" width="200" height="22" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: content-box; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">   id="iframeu1636204_0" src="http://pos.baidu.com/vcum?rdid=1636204&dc=2&di=u1636204&dri=0&dis=0&dai=3&ps=3261x801&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468285817870&ti=Extjs%20tree%E8%8A%82%E7%82%B9%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6-优快云%E8%AE%BA%E5%9D%9B-youkuaiyun.com-%E4%B8%AD%E5%9B%BD%E6%9C%80%E5%A4%A7%E7%9A%84IT%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA&ari=1&dbv=2&drs=3&pcs=1165x677&pss=1165x9208&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468285817&rw=677&ltu=http%3A%2F%2Fbbs.youkuaiyun.com%2Ftopics%2F390569768&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9YUJXrSt9zJUlsSXVzt8qwCo8wPqqwdSMY8QjYH4CnJxRMixZUPFgVw1UlIQOt6_%26wd%3D%26eqid%3Dd5eab307000eec4b00000005578442f8&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468285818&qn=f5910998197dcb29&tt=1468285817855.19.210.210" width="200" height="22" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: content-box; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理 回复次数：9

关注 podongxi77744... 暖暖猫 本版等级：	#1 得分：0 回复于： 2013-08-28 16:06:03 给你的treepanel添加一个 监听吧，
	对我有用[1]  丢个板砖[0]  引用 |  举报 |  管理

关注 Q11253217 GotoDo 本版等级：	#2 得分：0 回复于： 2013-08-28 16:12:09 引用 1 楼 podongxi777442156445 的回复: 给你的treepanel添加一个 监听吧， 能不能举个例子的说。我老是获取不到节点
	对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理

关注 podongxi77744... 暖暖猫 本版等级：	#3 得分：10 回复于： 2013-08-28 16:14:49 JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试
	对我有用[1]  丢个板砖[0]  引用 |  举报 |  管理

关注 Q11253217 GotoDo 本版等级：	#4 得分：0 回复于： 2013-08-28 16:21:48 引用 3 楼 podongxi777442156445 的回复: JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试 这样弹出来的时候说我node.id未定义
	对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理

关注 podongxi77744... 暖暖猫 本版等级：	#5 得分：0 回复于： 2013-08-28 16:27:58 好吧，不过LZ，你能不能把这个tree和那个tab一样分离出来，然后自己定义一个treepanel 假设定义的为treepanel JavaScript code ? 1 2 3 4 treepanel.on( 'click' , treeClick); function  treeClick(node,e){    alert(node.id); }
	对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理

关注 showbo  无聊码农 本版等级：     更多勋章

#6 得分：70 回复于： 2013-08-28 16:57:30 引用 4 楼 Q11253217 的回复: Quote: 引用 3 楼 podongxi777442156445 的回复: JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试 这样弹出来的时候说我node.id未定义 加错误位置了吧。。                 items: [{                     xtype: 'treepanel',                     title: '系统菜单',                     expanded: true,                     listeners: { itemclick: function (view, record, item, index, e, eOpts) {                         if (record.get('leaf')) { //叶子节点                             var id = record.get('id');                             if (Ext.getCmp(id)) tab.setActiveTab(id);                             else tab.add({ title: record.get('text'), html: 'tab内容--' + record.get('text'), closable: true, id: id });                         }                     }                     },                     containerScroll: true,                     root: {

对我有用[2]  丢个板砖[0]  引用 |  举报 |  管理

关注 Q11253217 GotoDo 本版等级：

#7 得分：0 回复于： 2013-08-28 17:59:36 引用 6 楼 showbo 的回复: Quote: 引用 4 楼 Q11253217 的回复: Quote: 引用 3 楼 podongxi777442156445 的回复: JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试 这样弹出来的时候说我node.id未定义 加错误位置了吧。。                 items: [{                     xtype: 'treepanel',                     title: '系统菜单',                     expanded: true,                     listeners: { itemclick: function (view, record, item, index, e, eOpts) {                         if (record.get('leaf')) { //叶子节点                             var id = record.get('id');                             if (Ext.getCmp(id)) tab.setActiveTab(id);                             else tab.add({ title: record.get('text'), html: 'tab内容--' + record.get('text'), closable: true, id: id });                         }                     }                     },                     containerScroll: true,                     root: { 大神就是大神啊，十分感谢

对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理

关注 Q11253217 GotoDo 本版等级：

#8 得分：0 回复于： 2013-08-28 18:07:22 引用 7 楼 Q11253217 的回复: Quote: 引用 6 楼 showbo 的回复: Quote: 引用 4 楼 Q11253217 的回复: Quote: 引用 3 楼 podongxi777442156445 的回复: JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试 这样弹出来的时候说我node.id未定义 加错误位置了吧。。                 items: [{                     xtype: 'treepanel',                     title: '系统菜单',                     expanded: true,                     listeners: { itemclick: function (view, record, item, index, e, eOpts) {                         if (record.get('leaf')) { //叶子节点                             var id = record.get('id');                             if (Ext.getCmp(id)) tab.setActiveTab(id);                             else tab.add({ title: record.get('text'), html: 'tab内容--' + record.get('text'), closable: true, id: id });                         }                     }                     },                     containerScroll: true,                     root: { 大神就是大神啊，十分感谢 如果我想在tab里显示的内容是不同的页面怎么显示，就是相当于这边节点对应不同的页面

对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理

关注 miyouyou 米悠悠 本版等级：

#9 得分：0 回复于： 2014-03-11 17:00:09 引用 6 楼 showbo 的回复: Quote: 引用 4 楼 Q11253217 的回复: Quote: 引用 3 楼 podongxi777442156445 的回复: JavaScript code ? 1 2 3 4 5 listeners:{          click :  function (node,e){                  alert(node.id);           } } 给你的那个treepanel加一个这个试试 这样弹出来的时候说我node.id未定义 加错误位置了吧。。                 items: [{                     xtype: 'treepanel',                     title: '系统菜单',                     expanded: true,                     listeners: { itemclick: function (view, record, item, index, e, eOpts) {                         if (record.get('leaf')) { //叶子节点                             var id = record.get('id');                             if (Ext.getCmp(id)) tab.setActiveTab(id);                             else tab.add({ title: record.get('text'), html: 'tab内容--' + record.get('text'), closable: true, id: id });                         }                     }                     },                     containerScroll: true,                     root: { 大神啊，我太崇拜你啦