ext实例二(ext4.2点击左侧树,右侧tabPanel显示iFrame)

本文详细介绍了如何在左侧树控件中实现节点点击、双击及右键事件,与iframe联动操作的实现过程。通过示例代码展示了如何在不同场景下动态加载、切换和刷新iframe内容,提供了丰富的交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[color=blue]如果我的博文能帮到你,我感到非常荣幸。能力所限,对于我所写的内容如有不详不对,你们能给一些意见的话我将非常感谢。以后我会将我在工作中学到的一些知识,尽量整理出来给大家分享。 你们的意见是我的动力[/color]

以上篇文章的效果图和代码为例讲解。
var treeStore : 是创建的用于显示的数据,提供给leftTree使用
var leftTree : 是创建的左侧树容器(其中listeners为监听)

itemclick: function(view, rcd, item, idx, event, eOpts)
单击事件--代码功能:当该iFrame的tab对象不存在,创建一个新的iFrame,如果已创建了,那么直接切换显示(不重新访问url)。tab = Ext.getCmp("容器对象id值");
panelCenter.setActiveTab(tab);//显示该iFrame的tab;
//panelCenter.setActiveTab(0);通过已打开tab的位置显示,0表示第一个tab

itemclick: function(view, rcd, item, idx, event, eOpts){
var dirid = rcd.raw.id; //节点id
var dirleaf = rcd.raw.leaf; //节点leaf
var tab = Ext.getCmp("tab_"+dirid);
if(!tab && dirleaf){
//newIframe
createIframe(rcd);
}else if(!dirleaf){
return;
}
tab = Ext.getCmp("tab_"+dirid);
panelCenter.setActiveTab(tab);
}

双击事件---代码功能:如果该iFrame的tab对象不存在,就新创建一个;如果已存在,则切换到这个tab,并重新请求一次链接url
itemdblclick: function(view, rcd, item, idx, event, eOpts){
//alert("dbclick Body");
var dirid = rcd.raw.id; //节点id
var dirleaf = rcd.raw.leaf; //节点leaf
var tab = Ext.getCmp("tab_"+dirid);
if(!tab && dirleaf){
// 添加新的tab,如果tab已经存在,则将其设置为当前可见tab
createIframe(rcd);
}else{
tab.show();
tab.load(tab.src);//重新加载该url地址
tab = Ext.getCmp("tab_"+dirid);
panelCenter.setActiveTab(tab);
}
}

右击事件---代码功能:在这里可以做右键菜单,等事情
itemcontextmenu: function(view, rcd, item, idx, event, eOpts){
eOpts.preventDefault();//阻止浏览器右键
alert("右键点击事件");
}



[color=red][b][size=medium]左侧树完整代码:[/size][/b][/color]

var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
id: "0",
text: "根节点",
expanded: true,
children: [{id:"1",text: "业务模块", expanded: true, children: [
{id:"11",text: "应用管理", linkUrl: "general/appExec/go_main", leaf: true},
{id:"12",text: "产品管理", linkUrl: "general/appNormal/go_main", leaf: true},
{id:"13",text: "客户管理", linkUrl: "general/appTree/go_main", leaf: true},
{id:"14",text: "银行卡管理", linkUrl: "general/appTree/go_main", leaf: true}
]},
{id:"2",text: "系统模块", expanded: true, children: [
{id:"21",text: "数据备份", linkUrl: "general/appNormal/gView/usermy?area_id=2",leaf: true},
{id:"22",text: "系统监控", linkUrl: "general/appTree/gView/treeuser?id=0",leaf: true}
]}
]}
});

//左边树
var leftTree = Ext.create('Ext.tree.Panel', {
title: "业务模块",
store: treeStore,
border: false,
rootVisible: true,
listeners: {
itemclick: function(view, rcd, item, idx, event, eOpts){
var dirid = rcd.raw.id; //节点id
var dirtext = rcd.raw.text; //节点text
var dirleaf = rcd.raw.leaf; //节点leaf
var dirurl = rcd.raw.linkUrl; //节点url
var tab = Ext.getCmp("tab_"+dirid);
if(!tab && dirleaf){
//newIframe
createIframe(rcd);
}else if(!dirleaf){
return;
}
tab = Ext.getCmp("tab_"+dirid);
panelCenter.setActiveTab(tab);
},
itemdblclick: function(view, rcd, item, idx, event, eOpts){
//alert("dbclick Body");
var dirid = rcd.raw.id; //节点id
var dirleaf = rcd.raw.leaf; //节点leaf
var tab = Ext.getCmp("tab_"+dirid);
if(!tab && dirleaf){
// 添加新的tab,如果tab已经存在,则将其设置为当前可见tab
createIframe(rcd);
}else{
tab.show();
tab.load(tab.src);
tab = Ext.getCmp("tab_"+dirid);
panelCenter.setActiveTab(tab);
}
},
itemcontextmenu: function(view, rcd, item, idx, event, eOpts){
eOpts.preventDefault();
alert(12333);
}
}
});
//左边
var menu=[leftTree,{title:"系统管理",html:"<ul style='list-style-type:none'><li>sssss</li></ul>"},{title:"配置管理"}]; 
var panelWest = new Ext.Panel({
title: "菜单栏目",
width: 250,
maxWidth: 300,
collapsible: true,//是否可以折叠
region: "west",
layout: "accordion",
items: menu,//左侧的容器数组
split: true //是否可以分开
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值