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


Posted in Javascript onMay 05, 2013

最近在做一个物流管理的项目,公司必须要求用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中通过Tree加载右侧TabPanel具体实现
总结:Extjs做出来的效果确实很炫,但是学起来也有一定的难度,特别是比较新的版本,网上很难找到什么好的教程。还好我们有API,可以多对着API中的例子进行练习,这样掌握起来也很快。最近才接触Extjs,希望各位大神不要吐槽!
Javascript 相关文章推荐
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
jquery移动listbox的值原理及代码
May 03 #Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 #Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 #Javascript
You might like
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
js继承实现方法详解
2016/12/16 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
微信小程序实现换肤功能
2018/03/14 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
初一生物教学反思
2014/01/18 职场文书
丑小鸭教学反思
2014/02/03 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
婚庆主持词大全
2015/06/30 职场文书
机械生产实习心得体会
2016/01/22 职场文书
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android