`
猜不透
  • 浏览: 133926 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs4.2点击树形菜单生成tab页并访问发送请求

阅读更多



 以下是全部代码,使用的是extjs4.2.1,,代码复制即可使用: 

 

 

Ext.onReady(panelLayout);

function panelLayout() {
                //新建tabpanel
	var tab = Ext.create('Ext.TabPanel', {
		region : 'center',
		deferredRender : false,
		activeTab : 0,
		resizeTabs : true, // turn on tab resizing
		minTabWidth : 115,
		tabWidth : 135,
		enableTabScroll : true
	});
	var viewPort = Ext.create('Ext.Viewport', {
		layout : "border",
		items : [ {
			region : 'north',
			minHeight : 100,
			html : 'north'
		}, {
			title : 'West Region is collapsible',
			region : 'west',
			xtype : 'panel',
			width : 200,
			collapsible : true, // 设置可折叠
			id : 'west-region-container',
			layout : 'fit',
			margins : '0 0 0 0',
			layout : 'accordion',
			title : '菜单',
			split : true,
			collapsible : true,
			layoutConfig : {
				animate : true
			},     
			items : [{
                        title : '业务信息处理',
                        xtype : 'treepanel',
                        expanded : true,
                        animate : true,
                        enableDD : false,
                        border : false,
                        containerScroll : true,
                        root : {
                            text : '..',
                            id:'root',
                            children : [{
                                text : '业务信息',
                                id : 'bussinessInfo_gotoBusinessInfo.do',
                                leaf : true
                            }, {
                                text : '组织管理',
                                leaf : true,
                                id :'dept_list.jsp'
                            }]
                        },
			listeners:{
	//添加节点点击事件	itemclick: function(v,r,item){
					var n = tab.getComponent(r.raw.id);
					 if(r.raw.id=='root'){
					 	return;
					 }
                                        if (!n) { // 判断是否已经打开该面板
                                            n = tab.add({
                                                'id' : r.raw.id,
                                                'title' : r.raw.text,
                                                 closable : true, // 通过html载入目标页
                                                 html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'
                                            });
                                        }
                                    tab.setActiveTab(n);
                             } 
			}
                    }, {
                        title : '信息中心',
                        border : false,
                        html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
                    }, {
                        title : '系统设置',
                        border : false,
                        html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
                    }]
		},tab, {
			region : 'south',
			minHeight : 25,
			html:"<div align='center'>版权所有 xxxx有限公司 © 信息服务中心</div>"
		} ]
	})

}

 

  • 大小: 123.2 KB
分享到:
评论
1 楼 u010995675 2015-08-27  
大神请问下itemclick: function(v,r,item){ 
                    var n = tab.getComponent(r.raw.id);  中的v,r,item是什么意思啊?还有r.raw.id怎么获取的id呢?谢谢

相关推荐

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    SpringMVC+ExtJs4.2实例

    在ExtJs4.2中,通过Ajax请求,我们可以从SpringMVC的Controller获取数据,然后更新到View上,或者向服务器发送数据进行保存。 项目的具体实现可能包括以下步骤: 1. 创建SpringMVC的配置文件,定义...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化代码 09.实现文章类别的...

    EXTjs4.2中文版

    EXTjs4.2中文版是EXTjs框架的一个重要版本,EXTjs是一个强大的JavaScript库,专门用于构建用户界面,尤其适用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。它以其组件化的设计理念,丰富的UI...

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

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

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    extjs 4.2 开发 参考书

    ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...

    EXTJS4.2学习入门教程

    EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程

    ExtJs4.2 下拉框树

    综上所述,`ExtJs4.2 下拉框树`的实现涉及到了组件扩展、树形数据处理、界面布局和交互设计等多个方面,通过对`TreePicker.js`的修改,开发者成功地克服了原生框架的限制,提供了更符合需求的下拉树功能。

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。

    Extjs4.2中文教程

    Extjs4.2入门教程详解,及API文档。

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    ExtJs4.2正式版

    ExtJs4.2正式版

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

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

    extjs 4.2 jsb2

    extjs 4.2 jsb2 4.2没有自带jsb2文件

    nodejs+extjs4.2+mysql

    标题 "nodejs+extjs4.2+mysql" 暗示了这是一个使用 Node.js、ExtJS 4.2 和 MySQL 数据库构建的项目。这个项目的核心是利用这些技术搭建了一个基本的框架,使得开发者可以方便地在此基础上添加自己的业务逻辑和功能。...

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

Global site tag (gtag.js) - Google Analytics