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

最近在做一个物流管理的项目,公司必须要求用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)

相关推荐

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

    最近在做一个物流管理的项目,公司必须要求用Extjs4.1来做界面,因为以前一直也没有接触过所以开发的过程中遇到了很多的困难.同时Extjs4.1的资料在网上也相对来说较少.好了,不说废话上代码: 1.左侧的功能树 复制代码 代码如下: Ext.define("AM.view.SystemTree", { extend : 'Ext.tree.Panel', alias : 'widget.systemTree', rootVisible : false,// 不展示ROOT disp

  • IOS中使用UIWebView 加载网页、文件、 html的方法

    UIWebView 是用来加载加载网页数据的一个框.UIWebView可以用来加载pdf word doc 等等文件 生成webview 有两种方法: 1.通过storyboard 拖拽 2.通过alloc init 来初始化 创建webview,下列文本中 _webView.dataDetectorTypes = UIDataDetectorTypeAll; 是识别webview中的类型,例如 当webview中有电话号码,点击号码就能直接打电话 - (UIWebView *)webView

  • IOS中的webView加载HTML

    在日常开发中,我们为了效率会用到很多很多的WebView,比如在做某个明细页面的时候我们返回给你的可能是一个html字符串,我们就需要将当前字符串展示到webView上面,所以我们对HTML标签需要有一定的认识,下面我们来一起用html标签和JS写一个打地鼠游戏,这里我们主要讲解HTML标签的书写,只要如何和webView适配涉及到响应式布局我们下次讲解: 1.首先我们先新建一个html文件 2 完整html标签并且设置编码格式为UTF-8 3 在body里面增加十只老鼠图片,并且增加点击事件,

  • Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

    Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如ListView上有100个Item,一屏只显示10个Item,我们知道getView()中convertView是用来复用View对象的,因为一个Item的对应一个View对象,而Ima

  • codeigniter中实现一次性加载多个view的方法

    本文实例讲述了codeigniter中实现一次性加载多个view的方法.分享给大家供大家参考.具体如下: function somecontrollerfunction() { $data['pagetitle'] = "Welcome to jb51.net"; $this->load->view('pageheader', $data); $this->load->view('pagenav'); $this->load->view('pagec

  • Android中替换WebView加载网页失败时的页面

    我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难看,于是乎小编就在想能不能自定义一个页面,当数据请求失败时让系统来加载我们自定义好的页面?上网查了很多资料,都没有关于这个问题的解决方法(反正我是没有找到),经过小编的不断琢磨,今天终于实现了这个功能.以下就是本人自定义实现的数据加载失败时的页面: 这样看起来是不是觉得很高大尚.这和我们真正拿到数据

  • Android开发中Listview动态加载数据的方法示例

    本文实例讲述了Android开发中Listview动态加载数据的方法.分享给大家供大家参考,具体如下: 最近在研究网络数据加载的问题,比如我有几百,甚至上千条数据,这些数据如果一次性全部加载到arraylist,然后再加载到Listview中.我们必然会去单独开线程来做,这样造成的结果就是会出现等待时间很长,用户体验非常不好.我的想法是动态加载数据,第一次加载十条,然后往下面滑动的时候再追加十条,再往下面滑动的时候再去追加,这样大大减少了用户等待的时间,同时给处理数据留下了时间.网上看到了这样一

  • 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia

  • 简单模拟node.js中require的加载机制

    一.先了解一下,nodejs中require的加载机制 1.require的加载文件顺序 require 加载文件时可以省略扩展名: require('./module'); // 此时文件按 JS 文件执行 require('./module.js'); // 此时文件按 JSON 文件解析 require('./module.json'); // 此时文件预编译好的 C++ 模块执行 require('./module.node'); // 载入目录module目录中的 package.js

  • Yii2中YiiBase自动加载类、引用文件方法分析(autoload)

    本文实例分析了Yii2中YiiBase自动加载类.引用文件的方法.分享给大家供大家参考,具体如下: 在Yii2中这个函数是用来加载类的,没有直接引用文件的相关实现.但是这个也可以用来引用文件. public static function autoload($className) { /* * $classMap是一个name-value数组, * name为类的名称, * value为这个类的文件路径,其中路径可包含别名 * * 首先在$classMap中查找是否设置了类别名路径 */ if

随机推荐