【原创】EXTJS，实现的两个tabpanel,每个panel有个可以伸缩的accordion，顺带实现开关小VIEWPORT。系统马上联调了，做个主页先……
欧科，啥也不说，先上效果图。
顺带发现可以用function关闭viewport，中间的Toggle the west region，可以开关左边的viewport.
底下是两个tab，每个tab里，都有一个手风琴，可伸缩。本来打算用树，后来发现不如这个好看。
直接上源码
index.js
//主页的viewport布局 Ext.onReady(function() { var productPanel = new Ext.Panel({ title : ' 生产模块 ', layout : 'accordion', //layout : 'fit', id:'productPanel', defaults : { // applied to each contained panel bodyStyle : 'padding:0px' }, layout: { type: 'accordion', animate: true }, // layoutConfig : { // // layout-specific configs go here // titleCollapse : false, // animate : true, // activeOnTop : true // }, items : [{ title : '<h1>水质部分</h1>', html : '<ul><li>水质监测</li><li>水质预测</li><li>水质记录</li></ul>' }, { title : '疾病部分', html : '<ul><li>疾病监测</li><li>疾病预警</li><li>疾病记录</li></ul>' }, { title : '投喂部分', html : '<ul><li>投喂决策</li><li>投喂记录</li><li>XXXX</li></ul>' }] }); var systemconfPanel= new Ext.Panel({ title : ' 生产模块 ', layout : 'accordion', //layout : 'fit', id:'systemconfPanel', defaults : { // applied to each contained panel bodyStyle : 'padding:0px' }, layout: { type: 'accordion', animate: true }, items : [{ title : '系统初始化', html : '<p>这是系统初始化</p>' }, { title : '参数配置', html : '<p>这是参数配置</p>' }, { title : '知识管理', html : '<p>这是知识管理</p>' }] }); var viewport = new Ext.Viewport({ layout : 'border', renderTo : Ext.getBody(), items : [//viewport的ITEM开始 //北方 { title : '<marquee width="400px">欢迎使用集约化水产养殖智能管理系统</marquee>', id : "north", region : 'north', xtype : 'panel', spilt : true, height : 120, html : '<P align="center"> 集约化水产养殖智能管理系统 </p>' }, //西方 { title : '菜单', region : 'west', id : 'west', // see Ext.getCmp() below title : 'West', width: 200, // give east and west regions a width minSize: 175, maxSize: 400, margins: '0 0 0 0', collapsible: true, split: true, layout: 'fit', // specify layout manager for items items: // 西部的ITEM开始 // this TabPanel is wrapped by another Panel so the title will be applied new Ext.TabPanel({ activeTab : 0, width : 200, tabPosition : 'bottom', defaults : { autoScroll : true }, items : [productPanel, systemconfPanel ] })//tabPanel结束 //西部ITEM的结束 }, //中间 { title : '中间', region : 'center', xtype : 'panel', html : '<a id="hideit" href="#" mce_href="#">Toggle the west region</a>', spilt : true }] //viewport的ITEM结束 }); Ext.get("hideit").on('click', function() { // get a reference to the Panel that was created with id = 'west-panel' var w = Ext.getCmp('west'); // expand or collapse that Panel based on its collapsed property state w.collapsed ? w.expand() : w.collapse(); }); });
主页代码：
index.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CICTA</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <link rel="stylesheet" type="text/css" href="<%=basePath %>ExtJS311/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="<%=basePath %><!-- ExtJS311/adapter/ext/ext-base.js"> // --></mce:script> <mce:script type="text/javascript" src="<%=basePath %><!-- ExtJS311/ext-all.js"> // --></mce:script> <mce:script type="text/javascript" src="<%=basePath %><!-- JavaScript/index.js"> // --></mce:script> </head> <body> <div id="north"></div> <div id="west"></div> <div id="center"></div> </body> </html>
谢谢观赏！有错误请高手指正，wupeng1003#gmail.com