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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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输出xml格式字符串(用的这个)
2012/07/12 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python中的with...as用法介绍
2015/05/28 Python
详解如何减少python内存的消耗
2019/08/09 Python
wxPython实现整点报时
2019/11/18 Python
python实现同一局域网下传输图片
2020/03/20 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
企业理念标语
2014/06/09 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
结婚保证书
2015/01/16 职场文书
单位介绍信格式范文
2015/05/04 职场文书