`
WChao226
  • 浏览: 27886 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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

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

以上篇文章的效果图和代码为例讲解。
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("右键点击事件");
	      }



左侧树完整代码:
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 //是否可以分开
});
分享到:
评论

相关推荐

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    EXT教程EXT用大量的实例演示Ext实例

    在Ext使用过程中,可能遇到各种问题,如Ext的收费问题、API文档的查看、在页面中引用Ext、Ext是中文乱码问题、TabPanel的autoLoad属性使用问题等。这些问题的答案在教程中也有详细解答,帮助开发者克服使用中的难题...

    Ext中的tabpanel关闭后再打开不显示的问题

    ### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新...

    extjs4.2.1 tabPanel刷新及关闭标签

    ### ExtJS 4.2.1 TabPanel 刷新与关闭标签功能详解 #### TabPanel 组件简介 在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式...

    ext4.2学习之路

    #### 二、Ext JS 4.2目录结构解析 1. **build**:此目录包含用于构建Ext JS项目的工具和配置文件。 2. **docs**:提供详尽的API文档,帮助开发者了解和掌握Ext JS的各种类和方法。 3. **examples**:示例代码集合,...

    ext的tabpanel的激活与注意事项

    EXTJS的tabpanel是其组件库中的一个重要组成部分,用于创建具有多个选项卡的用户界面,每个选项卡代表一个独立的视图或工作区。在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    Ext中TabPanel的动态页面加载

    在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...

    解决EXTJS4.2的tabpanel右键关闭的BUG

    EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!

    ExtJS tabPanel实例

    要创建一个 `tabPanel`,你需要先定义一个 `Ext.container.TabPanel` 实例。在JavaScript代码中,这通常会涉及创建一个新的对象,并配置相应的属性,如宽度、高度、边框等。 ```javascript var tabPanel = Ext....

    ext-------竖向标签TabPanel

    竖向标签TabPanel-------------------------------------------------

    ExtJS-3.4.0系列:Ext.TabPanel

    1. **配置项**:可以设置多个配置项来定制`TabPanel`的行为,如`activeTab`用于指定初始活动的标签,`tabPosition`控制标签的位置(顶部、底部、左侧或右侧),`plain`决定是否显示背景和边框等。 2. **事件监听**...

    tapestry4.02中封装ext的TabPanel组件

    在Web UI设计中,TabPanel 是一种常见的布局元素,它将不同的内容区域分割成不同的标签页,用户可以通过点击不同的标签来切换显示的内容。Ext 的 TabPanel 提供了美观的样式和易于操作的API,使得在Web应用中实现...

    ExtJS扩展:垂直页签tabPanel

    5. **实例化组件**:在应用中创建这个垂直TabPanel的实例,传入所需的配置,如页签数组和自定义布局。 6. **测试和调试**:进行详尽的测试,确保在各种浏览器和屏幕尺寸下都能正确显示和操作。 通过以上步骤,我们...

    TabPanel选卡结合右键菜单实例

    本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能,这对于创建高效的多页面视图应用是非常实用的。 首先,TabPanel是一种常见的UI组件,它允许用户在一个固定的区域中通过不同...

    ext designer 设计实例

    EXT Designer是一款强大的可视化界面设计工具,主要用于创建EXT JS应用程序的用户界面。EXT JS是一个流行的JavaScript框架,用于构建富客户端Web应用。在这个“EXT Designer 设计实例”中,我们将深入探讨如何利用...

    可以拖拽的页签面板----Ext TabPanel

    在EXT JS这个强大的JavaScript框架中,`Ext.TabPanel` 是一个非常重要的组件,它用于创建具有可切换页签的用户界面。在这个特定的例子中,我们关注的是一个扩展版的`Ext.TabPanel`,它增加了拖放(DragDrop)功能,...

    Ext+JS高级程序设计.rar

    1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 1.1.5 事件处理 9 1.1.6 尺寸大小 13 1.1.7 定位功能 14 1.1.8 动画功能 16 1.1.9 杂项 19 1.2 Ext Core...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    ExtJS是一款强大的JavaScript框架,用于构建富客户端应用程序,而TreePanel和TabPanel是其核心组件,分别用于展现树形数据结构和实现多标签页界面。 首先,让我们详细了解一下TreePanel。TreePanel是ExtJS中用于...

Global site tag (gtag.js) - Google Analytics