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 相关文章推荐
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP框架性能测试报告
2016/05/08 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
python文件写入write()的操作
2019/05/14 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
学生干部学习的自我评价
2014/02/18 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
2015年妇女工作总结
2015/05/14 职场文书
上甘岭观后感
2015/06/10 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL