Extjs中通过Tree加载右侧TabPanel具体实现

来源：互联网发布：淘宝网小孩玩的挖掘机编辑：程序博客网时间：2024/05/16 14:59

Extjs中通过Tree加载右侧TabPanel具体实现

作者：字体：[增加减小] 类型：转载时间：2013-05-05 我要评论

用Extjs4.1来做界面，有关Extjs4.1资料在网上也相对来说较少，下面是具体的实现代码1.左侧的功能树2.需要打开的对应的view，有类似需求的朋友可以参考下哈

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

复制代码代码如下:

Ext.define("AM.view.SystemTree", { 
extend : 'Ext.tree.Panel', 
alias : 'widget.systemTree', 
rootVisible : false,// 不展示ROOT 
displayField : 'text', 
// title:'物流运输系统', 
viewConfig : { // 具有拖拽功能 
plugins : { 
ptype : 'treeviewdragdrop' 
}, 
listeners : { // 拖拽 
drop : function(node, data, overModel, dropPosition, options) { 
alert("把: " + data.records[0].get('text') + " 移动到: " 
+ overModel.get('text')); 
} 
} 
}, 
dockedItems : [ { 
xtype : 'toolbar', 
items : [ { 
xtype : 'button', 
id : 'allopen', 
icon : 'resources/img/lock_open.png', 
text : '展开全部' 
}, { 
xtype : 'button', 
id : 'allclose', 
icon : 'resources/img/lock.png', 
text : '收起全部' 
} ] 
} ], 
root : { 
text : 'root', 
leaf : false, 
id : '0', 
children : [ { 
text : '运输管理', 
checked : false, // 显示被选中 
leaf : false, // 是否是叶子节点 
icon : 'resources/img/folder_user.png', 
id : '01', 
children : [ { 
text : '车辆信息管理', 
checked : false, 
icon : 'resources/img/report_edit.png', 
leaf : true, 
id : 'vehiclelist',　　//主要的要点在这里，这里的id要指定为你要打开的那个视图的别名 
}] 
}] 
} 
}); 

要点介绍：
•tree一定不要忘记添加别名alias
•设置树形结构的子节点的id值为你需要在右侧显示的view的别名alias（重要）　------可参考下方的view代码
2.需要打开的对应的view

复制代码代码如下:

Ext.define("AM.view.transportation.VehicleList",{ 
extend:'Ext.grid.Panel', 
alias:'widget.vehiclelist', 　　//这里一定要设置别名 
id:'vehiclelist', 
store:'VehicleStore', 
　　　　......中间代码省略 
columns : [ 
{text:'车辆编号',dataIndex:'vehicleNo', 
field:{ 
xtype:'textfield', 
allowBlank:false 
} 
}, 
{text:'车辆描述',xtype:'templatecolumn', 
tpl:'车辆的编号为{vehicleNo} 所在地区为{vehicleArea}' 
} 
], 
initComponent:function(){ 
this.callParent(arguments); 
} 
}); 

3.建立一个右侧的TabPanel

复制代码代码如下:

Ext.define('AM.view.TabPanel',{ //主页面的tab面板 
extend: 'Ext.tab.Panel', 
alias:'widget.tabpanel', 
closeAction: 'destroy', 
defaults :{ 
bodyPadding: 10 
}, 
items: [{ 
title: '主页', 
autoLoad:'content.jsp'　　　　//只有一个基本的panel 
}], 
}); 

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

复制代码代码如下:

'systemTree':{ 
itemclick:function(tree,record,item,index,e,options){ 
var tabs = tree.ownerCt.ownerCt.ownerCt 
.child('#center-grid').child("#tabpanel"); 
//获取当前点击的节点 
var treeNode=record.raw; 
var id = treeNode.id; 
var text=treeNode.text; 
//获取点击的树节点相同的tab标签 
var tab = tabs.getComponent(id); 
if(!tab){//如果不存在 
tabs.add({//用点击树的节点的ID、text新建一个tab 
id:id, 
closable: true, 
title:text, 
iconCls:id, 
xtype:id　　//将tree设置好的id对应的TabPanel中去，相当与把对应的view填充到TabPanel中 
}).show(); 
}else{//如果存在 
tabs.setActiveTab(tab);//Active 
} 
} 
}, 

结果上效果图:

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

0 0