Extjs tree节点的点击事件

来源：互联网发布：m1216nfh 网络扫描编辑：程序博客网时间：2024/05/22 13:31

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

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

楼主发表于： 2013-08-28 15:38:05

extjstree监听事件

我想做一个类似如下图的界面

然后点击左边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&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-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&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.csdn.net%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;"></iframe>
<iframe 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-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&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.csdn.net%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;"></iframe>

对我有用[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: {

大神啊，我太崇拜你啦

0 0

m1216nfh 网络扫描

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子干贝怎么泡发冬瓜干贝汤的做法干贝排骨汤的家常做法干贝的吃法干贝粥干贝冬瓜干贝的功效干贝的做法大全干贝可以炖什么汤干贝肉的家常做法干贝是什么做的干贝是啥干贝煲汤做法大全干贝煲汤怎么做干贝炒蛋的做法炒干贝的家常做法干贝炒蛋干贝怎么来的干贝的家常做法炖汤瑶柱干贝怎么吃鲜干贝的家常做法干贝的功效与作用干贝萝卜汤的家常做法干贝的家常做法大全干贝功效干贝粥的家常做法什么是干贝干贝的营养价值干贝的作用瑶柱的做法干贝做法干贝是什么干贝冬瓜汤的家常做法干贝炖排骨干贝的图片干贝怎么做干贝的家常做法干贝怎么做好吃干贝图干贝干的家常做法