ExtJS 4.2.0 树节点点击事件

最新推荐文章于 2021-06-29 16:15:06 发布
转载 最新推荐文章于 2021-06-29 16:15:06 发布 · 240 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/livon/archive/2013/04/13/3018428.html

本文介绍了一个使用ExtJS框架实现的树状导航组件。该组件包括左侧区域的树状结构，通过节点点击事件可以触发控制台日志记录。文章详细展示了如何创建树节点数据，并配置树面板的各项属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

 1 /*
 2  * 取得左侧区域
 3  * 树状导航
 4  * */
 5 var get_viewport_west = function()
 6 {
 7     
 8     consoleLog('2013 0413 1219') ; 
 9     
10 
11     // 节点数据
12     var store = Ext.create('Ext.data.TreeStore', {
13         root: {
14             expanded: true,
15             children : get_tree_nodes() ,
16         }
17     });
18 
19     
20     // 节点点击事件
21     function tree_itemclick( node, event )  
22     {  
23         //var id = event.data.id ;  
24 
25         consoleLog( event.data );
26         
27     };  
28 
29 
30     // 树面板
31     var tree_panel = Ext.create('Ext.tree.Panel', {
32         region: 'west' ,
33         title: 'Simple Tree',
34         width: 200,
35         height: 150,
36         //store: get_tree_store() ,
37         store: store ,
38         rootVisible: false,
39         //renderTo: Ext.getBody(),
40         renderTo: 'viewport_region_west' ,        
41 
42         listeners:{ itemclick : tree_itemclick }
43                 
44     });
45 
46     consoleLog( '2013-04-13 1321 ' );
47 
48     
49     return tree_panel ;
50     
51 };

 

  1 var get_tree_nodes = function(){
  2     
  3     var nodes = [
  4 
  5 
  6 
  7 
  8                  {
  9                      "text": "1 - 卡口监控", 
 10                      "cls": "folder",
 11                      "expanded": true,
 12                      "children": [
 13                      
 14                          {
 15                              "id": "1.1",
 16                              "text": "1.1 卡口监控数据",
 17                              "leaf": true,
 18                              
 19                              "qtip": "../surveil_data/main.jsp",
 20                              
 21                          }
 22                      ] 
 23                  }, 
 24                  
 25                  
 26                  
 27 
 28                  {
 29                      "text": "2 - 流量统计", 
 30                      "cls": "folder",
 31                      "expanded": true,
 32                      "children": [
 33                      
 34                      
 35                          {
 36                              "id": "2.1",
 37                              "text": "2.1 车流量时统计",
 38                              "leaf": true,
 39                              
 40                              "qtip": "../report/hourly.jsp",
 41                              
 42                          },
 43                          
 44                          {
 45                              "id": "2.2",
 46                              "text": "2.2 车流量日统计",
 47                              "leaf": true,
 48                              
 49                              "qtip": "../report/hourly.jsp",
 50                              
 51                          },
 52                          
 53                          {
 54                              "id": "2.3",
 55                              "text": "2.3 车流量周统计",
 56                              "leaf": true,
 57 
 58                              "qtip": "../report/hourly.jsp",
 59                              "杨": "力权",
 60                              
 61                          },
 62                          
 63                          {
 64                              "id": "2.4",
 65                              "text": "2.4 车流量月统计",
 66                              "leaf": true,
 67                              
 68                              "qtip": "../report/hourly.jsp",
 69                              
 70                          },
 71                          
 72                          {
 73                              "id": "2.5",
 74                              "text": "2.5 车流量年统计",
 75                              "leaf": true,
 76                              
 77                              "qtip": "../report/hourly.jsp",
 78                              
 79                          }
 80                      
 81                      ]
 82                  },
 83                  
 84                  
 85                  
 86                  
 87                  
 88                  
 89                  
 90                  
 91 
 92              {
 93                  "text": "3 - 车辆布控", 
 94                  "cls": "folder",
 95                  "expanded": true,
 96                  "children": [
 97                  
 98                  {
 99                      "id": "3.1",
100                      "text": "3.1 布控车辆监视(全部)",
101                      "leaf": true,
102                      
103                      "qtip": "../monitor/monitoring.jsp",
104                      
105                  },
106                  
107                  {
108                      "id": "3.2",
109                      "text": "3.2 黑名单车辆监视",
110                      "leaf": true,
111                      
112                      "qtip": "../monitor/monitoring.jsp",
113                      
114                  },
115                  
116                  {
117                      "id": "3.3",
118                      "text": "3.3 临时布控车辆监视",
119                      "leaf": true,
120                      
121                      "qtip": "../monitor/monitoring.jsp",
122                      
123                  },
124                  
125                  {
126                      "id": "3.4",
127                      "text": "3.4 红眼客车监视",
128                      "leaf": true,
129                      
130                      "qtip": "../monitor/monitoring.jsp",
131                      
132                  },
133                  
134                  {
135                      "id": "3.5",
136                      "text": "3.5 危化车辆监视",
137                      "leaf": true,
138                      
139                      "qtip": "../monitor/monitoring.jsp",
140                      
141                  },
142                  
143                  {
144                      "id": "3.6",
145                      "text": "3.6 重点车辆监视",
146                      "leaf": true,
147                      
148                      "qtip": "../monitor/monitoring.jsp",
149                      
150                  },
151                  {
152                      "id": "3.7",
153                      "text": "3.7 布控规则管理",
154                      "leaf": true,
155                      
156                      "qtip": "../monitor/rules.jsp",
157                      
158                  }
159                  
160                  ]
161              },
162 
163 
164 
165              {
166                  "text": "4 - 违法处理", 
167                  "cls": "folder",
168                  "expanded": true,
169                  "children": [
170                  
171                      {
172                          "id": "4.1",
173                          "text": "4.1 瞬时超速处理",
174                          "leaf": true,
175                          
176                          "qtip": "../deal_with/over_speed.jsp",
177                          
178                      },
179                  
180                      {
181                          "id": "4.2",
182                          "text": "4.2 区间超速处理",
183                          "leaf": true,
184                          
185                          "qtip": "../deal_with/over_speed_segment.jsp",
186                          
187                      },
188                  
189                      {
190                          "id": "4.3",
191                          "text": "4.3 违规压线处理",
192                          "leaf": true,
193                          
194                          "qtip": "../deal_with/trample_boundary.jsp",
195                          
196                      },
197                  
198                      {
199                          "id": "4.4",
200                          "text": "4.4 违规禁行处理",
201                          "leaf": true,
202                          
203                          "qtip": "../deal_with/forbidding.jsp",
204                          
205                      },
206                  
207                      {
208                          "id": "4.5",
209                          "text": "4.5 违规套牌处理",
210                          "leaf": true,
211                          
212                          "qtip": "../deal_with/fake_plate.jsp",
213                          
214                      },
215                  
216                      {
217                          "id": "4.6",
218                          "text": "4.6 其它违规处理",
219                          "leaf": true,
220                          
221                          "qtip": "../deal_with/other_violation.jsp",
222                          
223                      },
224                  
225                      {
226                          "id": "4.7",
227                          "text": "4.7 信息审核",
228                          "leaf": true,
229                          
230                          "qtip": "../deal_with/audit.jsp",
231                          
232                      }
233                  
234                  ]
235              },
236 
237 
238 
239              {
240                  "text": "9 - 基础数据", 
241                  "cls": "folder",
242                  "expanded": false,
243                  "children": [
244                  {
245                      "id": "9-1",
246                      "text": "9-1 监控设备管理",
247                      "leaf": true,
248                      "checked": true,
249                      "qtip": "../gather/grid.jsp",
250                      
251                  },
252                  {
253                      "id": "9-2",
254                      "text": "9-2 路段管理",
255                      "leaf": true,
256                      "checked": true,
257                      "qtip": "../gather/grid.jsp",
258                      
259                  },
260                  {
261                      "id": "9-3",
262                      "text": "9-3 违法行为管理",
263                      "leaf": true,
264                      "checked": true,
265                      "qtip": "../gather/grid.jsp",
266                      
267                  },
268                  
269                  {
270                      "id": "9-4",
271                      "text": "9-4 红眼车辆管理",
272                      "leaf": true,
273                      "checked": true,
274                      "qtip": "../basic/special.jsp",
275                      "description": "红眼车辆 = 特别车辆（special）",
276                      
277                  },
278                  
279                  {
280                      "id": "9-5",
281                      "text": "9-5 红眼类别管理",
282                      "leaf": true,
283                      "checked": true,
284                      "qtip": "../basic/special_category.jsp",
285                      "description": "红眼车辆 = 特别车辆（special）",
286                      
287                  }
288                  
289                  ]
290              },
291 
292              {
293                  "text": "5 - 系统设置", 
294                  "cls": "folder",
295                  "expanded": false,
296                  "children": [
297                  
298                  {
299                      "id": "5-1",
300                      "text": "5-1 系统参数设置",
301                      "leaf": true,
302                      "checked": true,
303                      "qtip": "../gather/grid.jsp",
304                      
305                  },
306                  
307                  {
308                      "id": "5-2",
309                      "text": "5-2 用户管理",
310                      "leaf": true,
311                      "checked": true,
312                      "qtip": "../gather/grid.jsp",
313                      
314                  },
315                  
316                  {
317                      "id": "5-3",
318                      "text": "5-3 角色管理",
319                      "leaf": true,
320                      "checked": true,
321                      "qtip": "../gather/grid.jsp",
322                      
323                  },
324                  {
325                      "id": "5-4",
326                      "text": "5-4 权限设置",
327                      "leaf": true,
328                      "checked": true,
329                      "qtip": "../gather/grid.jsp",
330                      
331                  },
332                  {
333                      "id": "5-5",
334                      "text": "5-5 功能导航",
335                      "leaf": true,
336                      "checked": true,
337                      "qtip": "../system/navigation.jsp",
338                      
339                  },
340                  {
341                      "id": "5-6",
342                      "text": "5-6 短信模板",
343                      "leaf": true,
344                      "checked": true,
345                      "qtip": "../system_config/short_message_template.jsp",
346                      
347                  }
348                  
349                  ]
350              },
351 
352              {
353                  "text": "6 - 外部数据", 
354                  "cls": "folder",
355                  "expanded": false,
356                  "children": [
357                  
358                  {
359                      "id": "6-1",
360                      "text": "6-1 车辆信息",
361                      "leaf": true,
362                      "checked": true,
363                      "qtip": "../vio_platform_buffer/vehicle_info.jsp",
364                      
365                  },
366                  
367                  {
368                      "id": "6-2",
369                      "text": "6-2 违规行为信息",
370                      "leaf": true,
371                      "checked": true,
372                      "qtip": "../gather/grid.jsp",
373                      
374                  },
375                  
376                  {
377                      "id": "6-3",
378                      "text": "6-3 道路信息",
379                      "leaf": true,
380                      "checked": true,
381                      "qtip": "../gather/grid.jsp",
382                      
383                  }
384                  
385                  ]
386              },
387 
388              {
389                  "text": "7 - 统计报表", 
390                  "cls": "folder",
391                  "expanded": false,
392                  "children": [
393                  
394                  
395                  
396                  {
397                      "id": "7-1",
398                      "text": "7-1 规律性车辆详情",
399                      "leaf": true,
400                      "checked": true,
401                      "qtip": "../deliver/regularity_vehicle_detail.jsp",
402                      
403                  }
404                  
405                  ]
406              },
407 
408 
409 
410 
411 
412 
413 
414              {
415                  "text": "8 - 系统日志", 
416                  "cls": "folder",
417                  "expanded": false,
418                  "children": [
419                  
420                  {
421                      "id": "8-1",
422                      "text": "8-1 用户登录日志",
423                      "leaf": true,
424                      "checked": true,
425                      "qtip": "../report/hourly.jsp",
426                      
427                  },
428                  
429                  {
430                      "id": "8-2",
431                      "text": "8-2 违规审核日志",
432                      "leaf": true,
433                      "checked": true,
434                      "qtip": "../report/daily.jsp",
435                      
436                  },
437                  
438                  {
439                      "id": "8-3",
440                      "text": "8-3 违规上传日志",
441                      "leaf": true,
442                      "checked": true,
443                      "qtip": "../report/weekly.jsp",
444                      
445                  },
446                  
447                  {
448                      "id": "8-4",
449                      "text": "8-4 短信发送日志",
450                      "leaf": true,
451                      "checked": true,
452                      "qtip": "../report/monthly.jsp",
453                      
454                  }
455                  
456                  ]
457              }
458 
459              ];
460     
461     
462     
463     return nodes ;
464     
465     
466 };

 

 

转载于:https://www.cnblogs.com/livon/archive/2013/04/13/3018428.html

Extjs6中利用treePicker实现的下拉树中
07-29
利用extjs6自带的treePicker插件，实现下拉树的效果
Extjs改变树节点的勾选状态点击按钮将复选框去掉
10-26
在实际的应用开发中，通常需要通过事件处理器（例如按钮点击事件）来触发这种状态变化的逻辑。 值得注意的是，不同版本的Extjs在API上可能会有一些差异，因此在进行升级或维护时，开发者应该仔细阅读对应版本的文档...
extjs TreeNode单击事件
东亮博客
01-16 6621
Tree中的子节点通常要设置不同的响应事件，实现这种方法有一种原理，就是添加click侦听事件，也就是listener，其实很简单，有两种方式可以实现： 1、TreePanel.addListener(‘click’ ,ClickFn);就是TreePanel的侦听，ClickFn就是你自定义的响应函数名，用来响应click事件 2、就是在声明子节点值的时候加上listener属性，如下面简单
Element tree树组件 鼠标双击事件
雪急飞绪博客
06-29 4003
需求 双击 tree上的子节点，把节点文字显示在输入框中（这里简化一下，双击 tree 显示文字即可，省略 $emit 那一步） 注解：props 可以接收 defaultExpandAll（是否默认展开所有节点） 效果如下： 基本代码 树组件代码 <template> <el-tree id="tree" v-loading="treeDataLoading" node-key="id" :data="treeData" :default
Ext4.2学习之树的事件和右键菜单
m0_37607945的博客
03-20 142
通过Ext.tree.TreePanel创建一棵Ext的树，并渲染到id为tree的div上面 在这里读取了txt文件中的数据，内容如下所示 [ {text:'not leaf'}, {text:'is leaf',leaf:true} ] 可以为这棵树绑定节点展开、节点折叠以及单击事件 除此之外，还可以为这棵树绑定一个右键菜单 效果如下所示 完整源码如下 <!DOCTYPE html> <html> <head> &
extjs-4.2.0
03-07
extjs-4.2.0api
ExtJS 4.2.0
04-06
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，拖拽...
extjs 04_grid 单击事件新发现
12-09
本篇文章将详细探讨EXTJS Grid中的单击事件处理以及如何获取单元格和行的数据。 在EXTJS的Grid组件中，我们可以监听各种事件，如`cellclick`事件，当用户点击网格的单元格时，此事件会被触发。下面是一个简单的示例...
ExtJs 4.2.0官方源代码及示例下载
ExtJs 4.2.0是该框架的一个版本，于2013年4月发布，这是在ExtJs的发展过程中一个重要的版本更新。 ### 标题知识点： **ExtJs 4.2.0** 1. **版本更新**：版本4.2.0是ExtJs框架的一个特定版本，代表着该框架的一个...
ExtJS 树节点的点击事件
热门推荐
风中之枫
04-13 1万+
/* * 取得左侧区域 * 树状导航 * */ var get_viewport_west = function() { consoleLog('2013 0413 1219') ; // 节点数据 var store = Ext.create('Ext.data.TreeStore', { root: { expande
Extjs tree节点的点击事件
evilcry2012的专栏
07-12 3800
Extjs tree节点的点击事件 [问题点数：80分，结帖人Q11253217]             不显示删除回复           显示所有回复            显示星级回复           显示得分回复            只显示楼主          收藏 关注 Q11253217 GotoDo 本版等级：
extjs6 treepicker 下拉树
随记
03-12 2669
model定义： Ext.define('permissionModel', { extend: 'Ext.data.TreeModel', idProperty:'Id', fields: [ { name: 'ControllerName', mapping: function (data) { ...
ExtJS中给Tree节点加click事件
zwj1030711290的优快云
12-29 2575
这个问题困扰了我很长时间，我从网上找了所有跟这个沾边的文章，都没有能够解决我问题的，最后去找ExtJS的API文档，才解决的问题。我大概讲一下：          我一共实验了三种方法：        第一种：        直接通过TreePanel中的Config Option中的listener来添加，代码如下：     var TreePan = new Ext.tree.T
ExtJs之事件绑定
清风自来
01-11 1556
总结一下为gridpanel添加双击事件的不同方法： 1、不在同一界面，但又需要调用父界面的方法 dangergoodsLocationGridPanel.on({ calldblclick : function(s, td, cellIndex, record, tr, rowIndex, e, eOpts) { me.browseRecord(); } }); 2）普通事件的添加 a...
ExtJS异步树节点加载完整工程示例
ExtJS中的异步树控件允许开发者以异步方式加载树形结构的节点，即节点内容不是一次性从服务器端获取，而是当用户展开一个树节点时，才从服务器请求并加载其子节点。 ### 知识点二：异步加载的实现原理 异步加载，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值