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 OOP包机制,类创建的方法定义
Nov 02 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Angular2安装angular-cli
May 21 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
基于layui数据表格以及传数据的方式
Aug 19 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php下载文件的代码示例
2012/06/29 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python中标准库OS的常用方法总结大全
2017/07/19 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python使用KNN算法手写体识别
2018/02/01 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
工伤赔偿协议书
2014/04/15 职场文书
鸦片战争观后感
2015/06/09 职场文书
Python基础知识之变量的详解
2021/04/14 Python