Extjs中通过Tree加载右侧TabPanel

最近在做一个物流管理的项目,公司必须要求用Extjs4.1来做界面,因为以前一直也没有接触过所以开发的过程中遇到了很多的困难。同时Extjs4.1的资料在网上也相对来说较少。好了,不说废话上代码:

1.左侧的功能树

复制代码
 1 Ext.define("AM.view.SystemTree", {
 2     extend : 'Ext.tree.Panel',
 3     alias : 'widget.systemTree',
 4     rootVisible : false,// 不展示ROOT
 5     displayField : 'text',
 6     // title:'物流运输系统',
 7     viewConfig : { // 具有拖拽功能
 8         plugins : {
 9             ptype : 'treeviewdragdrop'
10         },
11         listeners : { // 拖拽
12             drop : function(node, data, overModel, dropPosition, options) {
13                 alert("把: " + data.records[0].get('text') + " 移动到: "
14                         + overModel.get('text'));
15             }
16         }
17     },
18 
19     dockedItems : [ {
20         xtype : 'toolbar',
21         items : [ {
22             xtype : 'button',
23             id : 'allopen',
24             icon : 'resources/img/lock_open.png',
25             text : '展开全部'
26         }, {
27             xtype : 'button',
28             id : 'allclose',
29             icon : 'resources/img/lock.png',
30             text : '收起全部'
31         } ]
32     } ],
33 
34     root : {
35         text : 'root',
36         leaf : false,
37         id : '0',
38         children : [ {
39             text : '运输管理',
40             checked : false, // 显示被选中
41             leaf : false, // 是否是叶子节点
42             icon : 'resources/img/folder_user.png',
43             id : '01',
44             children : [ {
45                 text : '车辆信息管理',
46                 checked : false,
47                 icon : 'resources/img/report_edit.png',
48                 leaf : true,
49                 id : 'vehiclelist',  //主要的要点在这里,这里的id要指定为你要打开的那个视图的别名
50             }]
51         }]
52     }
53 
54 });
复制代码

要点介绍:

  • tree一定不要忘记添加别名alias
  • 设置树形结构的子节点的id值为你需要在右侧显示的view的别名alias(重要) ------可参考下方的view代码

2.需要打开的对应的view

复制代码
 1 Ext.define("AM.view.transportation.VehicleList",{
 2     extend:'Ext.grid.Panel',
 3     alias:'widget.vehiclelist',   //这里一定要设置别名
 4     id:'vehiclelist',
 5     store:'VehicleStore',
 6     ......中间代码省略
 7     columns : [
 8                      {text:'车辆编号',dataIndex:'vehicleNo',
 9                          field:{
10                              xtype:'textfield',
11                              allowBlank:false
12                          }
13                      },
14 
15                      {text:'车辆描述',xtype:'templatecolumn',
16                          tpl:'车辆的编号为{vehicleNo} 所在地区为{vehicleArea}'    
17                      }
18                  ],
19     initComponent:function(){
20         this.callParent(arguments);
21     }
22 });
复制代码

3.建立一个右侧的TabPanel

复制代码
 1     Ext.define('AM.view.TabPanel',{         //主页面的tab面板
 2         extend: 'Ext.tab.Panel', 
 3         alias:'widget.tabpanel',
 4         closeAction: 'destroy',
 5         defaults :{
 6             bodyPadding: 10
 7         },
 8         items: [{
 9             title: '主页',
10             autoLoad:'content.jsp'    //只有一个基本的panel
11         }],
12 
13     }); 
复制代码

4.设置点击tree的触发事件

复制代码
 1 'systemTree':{
 2                 itemclick:function(tree,record,item,index,e,options){
 3                     var tabs = tree.ownerCt.ownerCt.ownerCt
 4                     .child('#center-grid').child("#tabpanel");
 5                     //获取当前点击的节点  
 6                      var treeNode=record.raw;  
 7                      var id = treeNode.id;  
 8                      var text=treeNode.text;  
 9                      //获取点击的树节点相同的tab标签  
10                      var tab = tabs.getComponent(id); 
11                      if(!tab){//如果不存在  
12                         tabs.add({//用点击树的节点的ID、text新建一个tab  
13                          id:id,  
14                          closable: true,    
15                          title:text,    
16                          iconCls:id,    
17                          xtype:id  //将tree设置好的id对应的TabPanel中去,相当与把对应的view填充到TabPanel中
18                         }).show();
19                      }else{//如果存在  
20                         tabs.setActiveTab(tab);//Active  
21                      }  
22                 }
23             },
复制代码

结果上效果图:

总结:Extjs做出来的效果确实很炫,但是学起来也有一定的难度,特别是比较新的版本,网上很难找到什么好的教程。还好我们有API,可以多对着API中的例子进行练习,这样掌握起来也很快。最近才接触Extjs,希望各位大神不要吐槽!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值