Extjs tree节点的点击事件

时间：2022-05-10 19:09:30

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

  Extjs tree节点的点击事件收藏
楼主 发表于： 2013-08-28 15:38:05
extjs tree 监听事件
我想做一个类似如下图的界面
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 // 初始标签页
         ]
 
     });
 
});
  • 免费试用IBM Bluemix
    •  
  • <iframe id="iframeu1636201_0" src="http://pos.baidu.com/vcum?rdid=1636201&amp;dc=2&amp;di=u1636201&amp;dri=0&amp;dis=0&amp;dai=2&amp;ps=3261x547&amp;dcb=BAIDU_SSP_define&amp;dtm=BAIDU_DUP_SETJSONADSLOT&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1468285817870&amp;ti=Extjs%20tree%E8%8A%82%E7%82%B9%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6-CSDN%E8%AE%BA%E5%9D%9B-CSDN.NET-%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&amp;ari=1&amp;dbv=2&amp;drs=3&amp;pcs=1165x677&amp;pss=1165x9208&amp;cfv=0&amp;cpl=4&amp;chi=1&amp;cce=true&amp;cec=UTF-8&amp;tlm=1468285817&amp;rw=677&amp;ltu=http%3A%2F%2Fbbs.csdn.net%2Ftopics%2F390569768&amp;ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9YUJXrSt9zJUlsSXVzt8qwCo8wPqqwdSMY8QjYH4CnJxRMixZUPFgVw1UlIQOt6_%26wd%3D%26eqid%3Dd5eab307000eec4b00000005578442f8&amp;ecd=1&amp;psr=1920x1080&amp;par=1920x1040&amp;pis=-1x-1&amp;ccd=24&amp;cja=false&amp;cmi=6&amp;col=zh-CN&amp;cdo=-1&amp;tcn=1468285818&amp;qn=5f95a9b762cd1cf4&amp;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;"></iframe>
     
  • <iframe id="iframeu1636204_0" src="http://pos.baidu.com/vcum?rdid=1636204&amp;dc=2&amp;di=u1636204&amp;dri=0&amp;dis=0&amp;dai=3&amp;ps=3261x801&amp;dcb=BAIDU_SSP_define&amp;dtm=BAIDU_DUP_SETJSONADSLOT&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1468285817870&amp;ti=Extjs%20tree%E8%8A%82%E7%82%B9%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6-CSDN%E8%AE%BA%E5%9D%9B-CSDN.NET-%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&amp;ari=1&amp;dbv=2&amp;drs=3&amp;pcs=1165x677&amp;pss=1165x9208&amp;cfv=0&amp;cpl=4&amp;chi=1&amp;cce=true&amp;cec=UTF-8&amp;tlm=1468285817&amp;rw=677&amp;ltu=http%3A%2F%2Fbbs.csdn.net%2Ftopics%2F390569768&amp;ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9YUJXrSt9zJUlsSXVzt8qwCo8wPqqwdSMY8QjYH4CnJxRMixZUPFgVw1UlIQOt6_%26wd%3D%26eqid%3Dd5eab307000eec4b00000005578442f8&amp;ecd=1&amp;psr=1920x1080&amp;par=1920x1040&amp;pis=-1x-1&amp;ccd=24&amp;cja=false&amp;cmi=6&amp;col=zh-CN&amp;cdo=-1&amp;tcn=1468285818&amp;qn=f5910998197dcb29&amp;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;"></iframe>
    对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理
    回复次数：9
    #1 得分：0 回复于： 2013-08-28 16:06:03
    给你的treepanel添加一个 监听吧，
    对我有用[1]  丢个板砖[0]  引用 |  举报 |  管理
    #2 得分：0 回复于： 2013-08-28 16:12:09
    引用 1 楼 podongxi777442156445 的回复:
    给你的treepanel添加一个 监听吧，

    能不能举个例子的说。我老是获取不到节点
    对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理
    #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]  引用 |  举报 |  管理
    #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]  引用 |  举报 |  管理
    #5 得分：0 回复于： 2013-08-28 16:27:58
    Extjs tree节点的点击事件好吧，不过LZ，你能不能把这个tree和那个tab一样分离出来，然后自己定义一个treepanel
    假设定义的为treepanel
    JavaScript code ?
    1
    2
    3
    4
    treepanel.on( 'click' , treeClick);
    function  treeClick(node,e){
       alert(node.id);
    }

    对我有用[0]  丢个板砖[0]  引用 |  举报 |  管理
    #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]  引用 |  举报 |  管理
    #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]  引用 |  举报 |  管理
    #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]  引用 |  举报 |  管理
    #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: {
    Extjs tree节点的点击事件
    大神啊，我太崇拜你啦
    标签：

    相关文章