以下是全部代码,使用的是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>" } ] }) }
相关推荐
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化代码 09.实现文章类别的...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
extjs 4.2 参考书 开发
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs4.2入门教程详解,及API文档。
ExtJs4.2正式版
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
extjs4.2 分页combo动态条数 源码,不懂的加群
基于EXTJS 4.2 MVC环境搭建,并从后台获取数据在extjs Grid上显示出来
ExtJS4.2入门案例 博客:http://blog.csdn.net/coco2d_x2014/article/details/52986835
php+extjs4.2翻页搜索实例.php
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
框架spring+springmvc+mybatis+extjs4.2目录框架
extjs4.2更换主题,实现各种皮肤互换。
Extjs4.2练习小Demo,新手第一次上传啦,多要点分好下载更多的资源的说
extjs点击右侧面板生成tab,面板是ul+li的