Extjs 3.3.1框架 -- lovebugs-- 编程爱好者博客

主jsp页面如下： <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="ww" uri="/webwork"%> <%@ taglib prefix="lovebugs" uri="http://www.lovebugs.cn"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>VVV</title> <link rel="stylesheet" type="text/css" href="js/ext331/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="js/ext331/resources/css/yourtheme.css" /> <link rel="stylesheet" type="text/css" href="js/ext331/resources/docs.css" /> <link rel="stylesheet" type="text/css" href="js/ext331/resources/style.css" /> <link rel="shortcut icon" href="js/ext331/resources/favicon.ico" /> <link rel="icon" href="js/ext331/resources/favicon.ico" /> <style type="text/css"></style> <script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1396058-8']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script> <script type="text/javascript" src="js/ext331/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext331/ext-all.js"></script> <script type="text/javascript" src="js/ext331/ux/TabCloseMenu.js"></script> <script type="text/javascript" src="js/ext331/docs.js"></script> <script type="text/javascript"> _tabs=[${strmenus}]; function hideAllMenu() { Ext.menu.MenuMgr.hideAll(); } </script> <style>  </style> </head> <body scroll="no" id="docs"> <div id="loading-mask"></div> <div id="loading"> <div class="loading-indicator"> <img src="resources/default/images/loading/progress.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle" /> Loading… </div> </div> <div id="header"> <div style="float:right;color: #FF0000;position:relative;top:5px;right:15px;"> <a href="#" style="padding:5px">用户信息</a> | <a href="loginout.shtml">退出</a> </div> </div> <div id="main"></div> <div id='win_template'> </div> </body> </html> docs.js是整个框架的脚本 Ext.BLANK_IMAGE_URL = 'js/ext331/resources/s.gif'; /*全局变量*/ var _navigation=null; var _load = null; var _tabs = [{url:"usermanager.shtml",text:"用户管理",icon:"icon-user",items:[{url:"usermanager.shtml",text:"认证用户管理",icon:"icon-acuser"} ,{url:"groupmanager.shtml",text:"用户组管理",icon:"icon-group"} ,{url:"sysuser.shtml",text:"系统用户管理",icon:"icon-user"}]} ,{url:"usermanager.shtml",text:"上下线信息",icon:"icon-user",items:[{url:"usermanager.shtml",text:"用户管理"} ,{url:"usermanager.shtml",text:"组管理"}]} ]; var _topH = 55; var _topToolbar=null; function _push(index,o){ if(null!=_navigation) { _navigation.push(index,o.href,o.innerHTML); } } /*导航*/ Navigation = function() { var navigation_pre="<div style='height:20px;'><label>当前位置：</label>"; var navigation_end="</div>"; return { nav_arr:[], toStr:function() { var str_nav = navigation_pre; for(var i=0;i<this.nav_arr.length;i++) { if(i==0) { str_nav+=this.nav_arr[i]; }else{ str_nav=str_nav+" >> "+this.nav_arr[i]; } } str_nav += navigation_end; return str_nav; }, /*index为菜单级，tab为0级*/ push:function(index,href,title) { if(href==''){ var a = title; }else{ var a = "<a href='"+href+"' target='mainframe' onclick='javascript:_push("+index+",this)'>"+title+"</a>"; } /*变更当前节点的值消掉多余的项*/ if(this.nav_arr.length-1>index) { this.nav_arr.length=index+1; this.nav_arr[index]=a; }else if(this.nav_arr.length-1<index){ this.nav_arr[index] = a; }else { this.nav_arr[index]=a; } }, remove:function() { }, update:function() { if(null!=_topToolbar) { Ext.get(_topToolbar.items.get(0).id).dom.innerHTML=this.toStr(); } } }; }; DocPanel = Ext.extend(Ext.Panel, { url: '', menu:null, autoScroll:true, initComponent : function(){ DocPanel.superclass.initComponent.call(this); } }); MainPanel = function(){ this.searchStore = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: 'http://extjs.com/playpen/api.php' }), reader: new Ext.data.JsonReader({ root: 'data' }, ['cls', 'member', 'type', 'doc'] ), baseParams: {}, listeners: { 'beforeload' : function(){ this.baseParams.qt = Ext.getCmp('search-type').getValue(); } } }); MainPanel.superclass.constructor.call(this, { id:'doc-body', region:'center', margins:'5 5 5 5', resizeTabs: true, minTabWidth: 125, tabWidth: 135, maskDisabled:false, enableTabScroll: true, activeTab: 0, html:"<iframe id=\"mainframe\" name=\"mainframe\" width='100%' marginwidth='0' marginheight='0' height='100%' class='module' frameborder=\"0\" scrolling='auto'></iframe>" ,tbar:['--'] }); }; Ext.extend(MainPanel, Ext.TabPanel, { initEvents : function(){ MainPanel.superclass.initEvents.call(this); }, listeners:{ 'tabchange':function(tp, tab) { /*tab切换*/ var link = tab.url; var href = link.url; document.getElementById("mainframe").src=href; /*导航置为第一项*/ _navigation.push(0,href,tab.title); } }, initalltab:function(){ /*创建一个额外的菜单，用途是：当没有菜单的tab over之后，这个额外的菜单隐藏显示，从而关闭上一次显示的菜单*/ var ix = new Ext.menu.Menu({width:0}); /*初始化tab鼠标移动事件。注意tab标签的id是由MainPanel的id与Tab的id加__组成*/ this.items.each(function(item ,index,length){ var tpid = this.id; var tabid = item.id; Ext.get(tpid+"__"+tabid).on("mouseover",function(){ var a = [];a.push(this.getLeft());a.push(_topH+36); if(null!=item.menu) { item.menu.showAt(a); }else { ix.showAt([-1000,-1000]); } }); },this); }, loadTab : function(href,cls,title,menu,icon){ var id = 'tab-' + cls; //alert(href); this.add(new DocPanel({ id:id, title: title, iconCls:icon, menu:menu, url:{url: href} })); } }); MenuItem = Ext.extend(Ext.menu.Item,{ tp:null, tabid:0, initComponent : function(){ MenuItem.superclass.initComponent.call(this); }, handler:function() { if(null!=this.tp) { /*点击菜单项，tab切换到当前tab*/ this.tp.setActiveTab(this.tabid); /*topbar显示栏变化*/ _navigation.push(1,this.href,this.text); } } }); /*框架页面*/ Ext.onReady(function(){ Ext.QuickTips.init(); _load = new Ext.LoadMask(Ext.getBody(), {msg:"页面加载中..."}); _navigation = new Navigation(); /*创建TabPanel*/ var mainPanel = new MainPanel(); /*tabs由外层传入,目前只支持一级菜单，如果需要实现多级菜单，那么就要用递归实现*/ for(var i=0;i<_tabs.length;i++) { var tab_json = _tabs[i]; /*tab为json字符串 {url:xxx,text:yyy,items:[{},{}]}*/ var oTab =null; try{ if(tab_json instanceof String) { oTab = Ext.util.JSON.decode(tab_json); }else { oTab = tab_json; } }catch(e){ Ext.Msg.alert("提示","菜单项加载失败!"); } if(null==oTab) {continue;} var _items = oTab.items; /*如果菜单没有子项，则不给这个tab添加菜单*/ if(0==_items.length) { mainPanel.loadTab(oTab.url,i,oTab.text,null,oTab.icon); }else {/*如果菜单有子项，则给这个tab添加菜单，并给菜单填写子项*/ var menu = new Ext.menu.Menu({ width :150, shadow :'drop' }); mainPanel.loadTab(oTab.url,i,oTab.text,menu,oTab.icon); for(var x = 0;x<_items.length;x++) { var _item = _items[x]; menu.addItem(new MenuItem({text:_item.text,href:_item.url,hrefTarget:'mainframe',tabid:i,tp:mainPanel,iconCls:_item.icon})); menu.addItem(new Ext.menu.Separator({labelSeparator:':'})); } } } /*Viewport布局*/ var viewport = new Ext.Viewport({ layout:'border', items:[ { cls: 'docs-header', height: _topH, region:'north', xtype:'box', el:'header', border:false, margins: '0 0 5 0' }, mainPanel,{ cls: 'docs-header', region:'south', height: 30, html:'Copyright © 2011 XXXX 版权所有' } ] }); viewport.doLayout(); /*初始化tabs*/ mainPanel.initalltab(); _topToolbar=mainPanel.getTopToolbar(); /*首次加载Loading*/ setTimeout(function(){ Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({remove:true}); }, 250); }); //--------------------------------------------------------------------------打开窗口 function openWindow(titlex,url,param,only,w,h) { var text = "<div id='hello-win' class='x-hidden'><div class='x-window-header'>窗口</div></div>"; Ext.get('win_template').dom.innerHTML=text; if(param.length!=0) { if(url.indexOf("?")!=-1){ url = url+'&id='+param; }else{ url = url+'?id='+param; } }else{ } var w = new Ext.Window({ applyTo:'hello-win', layout:'fit', width:w, height:h, resizable:false, modal : true, monitorResize :true, x:250, y:50, title:'IT与运维操作审计系统', closeAction:'close', listeners :{ "close":function(){ lbgrid.store.reload(); } }, plain: true, items: new Ext.Panel({ id: "panel2", fitToFrame: true }) }); w.show(this);//窗口显示 var ocmp = w.getComponent(0); window.setTimeout(function(){ocmp.getEl().dom.lastChild.lastChild.innerHTML='<iframe src='+url+' frameborder="0" width='+w+' height='+h+' style="overflow:hidden;" ></iframe>'},300); }

博客介绍

正文

Extjs 3.3.1框架2011-06-23 19:53:00

评论