江苏网站建设效果,网站开发大致需要哪些步骤,网站开发培训实训,网站建设腾讯云与阿里云在用Ext开发App应用时#xff0c;一般的框架都是左边为菜单栏#xff0c;中间为tab页方式的显示区域。而tab页面大多采用的嵌入一个iframe来显示内容。但是采用iframe方式有一个很大的弊端就是每次在加载一个新的iframe时都要将Ext的核心js#xff0c;css文件重新加载。由于…在用Ext开发App应用时一般的框架都是左边为菜单栏中间为tab页方式的显示区域。而tab页面大多采用的嵌入一个iframe来显示内容。但是采用iframe方式有一个很大的弊端就是每次在加载一个新的iframe时都要将Ext的核心jscss文件重新加载。由于Ext是一个庞大的类库这些文件的体积都很庞大仅仅是ext-all.js就有400多k所以用iframe方式加载就大大降低了效率。为了能解决这个问题我推荐使用Ext.Panel的autoload模式进行加载页面。用这种模式加载就可以避免Ext核心文件重新加载的问题。可以很好的提高程序的运行效率。以下我简单介绍一下实现的过程和原理以及我在开发是遇到的问题和如何解决这些问题。 这种模式的几个技术点在于 1.菜单的点击事件实现 2.将要加载的页面该如何编写 3.如何让加载页面的控件的高度和宽度自适应比如Panelgrid 菜单事件的实现 这个函数需要三个参数 a.模块编号这个编号是自定义的别且一定要唯一。在菜单点击事件中要把这个编号传过来作为tab子页的id b.模块的urltab子页autoload的url c.模块的名称tab子页的title 代码如下 function addtab(id,link,name){ var tabId tab-id; //为id稍作修改。 var tabTitle name; var tabLink link; var centerpanel Ext.getCmp(displayCenterPanel); var tab centerpanel.getComponent(tabId);//得到tab组建 var subMainId tab- id -main; if(!tab){ tab centerpanel.add( new Ext.Panel({ id:tabId, title:tabTitle, //autoLoad:{url:tablink, scripts:true,nocache:true}, autoScroll:true, iconCls:tabIconCss, layout: fit, border:false, closable:true }) ); centerpanel.setActiveTab(tab); tab.load({ url: tabLink, method:post, params: {subMainId: subMainId}, scope: this, // optional scope for the callback discardUrl: true, nocache: true, text: 页面加载中,请稍候……, timeout: 9000, scripts: true }); }else{ centerpanel.setActiveTab(tab); } } 将要加载的页面该如何编写 % page languagejava importjava.util.* pageEncodingutf-8% % taglib prefixs uri/WEB-INF/struts-tags.tld% % String mainName (String)request.getParameter(subWcid); %script /* 用到的js文件 1、../js/appjs/frontMg/exposure/exposure.grid.js 2、../js/appjs/frontMg/exposure/exposure.search.js 3、../js/appjs/frontMg/exposure/exposure.view.js 4、../js/appjs/frontMg/exposure/exposure.win.js 5、../js/appjs/frontMg/exposure/exposure.js */ var mainName %mainName%; var Front_exposure_ButtonIds s:property valuefunccode/;/scriptdiv id%mainName%-p styleheight:100%/divscript languagejavascript typetext/javascript src../js/appjs/frontMg/exposure/exposure2.js/script 加载页面的控件的高度和宽度自适应 由于这种使用autoload模式加载进来的页面是不能随着浏览器的大小变化而变化的。所以我们要实现浏览器的大小变化函数即window.onresize事件。 但是在实现这个事件的时候一定要加上setTimeout来控制它让其延迟一会儿执行否则是不能达到我们的效果。 //控制tab页面容器大小的函数 function allComResize(){ var modelidarr modelids.split(,); var len modelidarr.length; if(len0){ return false; } var w Ext.getCmp(displayCenterPanel).getActiveTab().getInnerWidth(); var h Ext.getCmp(displayCenterPanel).getActiveTab().getInnerHeight(); for(var i0; ilen;i){ var tmpmodelid modelidarr; var subPage Ext.getCmp(tab-tmpmodelid-main); if(subPage){ subPage.setWidth(w); subPage.setHeight(h); } } } //通过window.onresize事件来执行allComResize函数控制tab容器的大小 var oTime;window.onresize function(){ if (oTime) { clearTimeout(oTime); } oTime setTimeout(allComResize(), 100); //延迟100毫秒执行} 原文地址http://www.phpchina.com/bbs/viewthread.php?tid97424转载于:https://www.cnblogs.com/nikyxxx/archive/2010/03/15/1686499.html
