`
literary_fly
  • 浏览: 92315 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

ExtJs非Iframe框架加载页面实现

阅读更多
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域。而tab页面大多采用的嵌入一个iframe来显示内容。但是采用iframe方式有一个很大的弊端就是每次在加载一个新的iframe时都要将Ext的核心js,css文件重新加载。由于Ext是一个庞大的类库,这些文件的体积都很庞大,仅仅是ext-all.js就有400多k,所以用iframe方式加载就大大降低了效率。为了能解决这个问题,我推荐使用Ext.Panel的autoload模式进行加载页面。用这种模式加载就可以避免Ext核心文件重新加载的问题。可以很好的提高程序的运行效率。以下我简单介绍一下实现的过程和原理,以及我在开发是遇到的问题和如何解决这些问题。

  这种模式的几个技术点在于

  1.菜单的点击事件实现? 
  2.将要加载的页面该如何编写? 
  3.如何让加载页面的控件的高度和宽度自适应,比如Panel,grid?    
    

  菜单事件的实现
  这个函数需要三个参数,
  a.模块编号,这个编号是自定义的,别且一定要唯一。在菜单点击事件中要把这个编号传过来,作为tab子页的id
  b.模块的url,tab子页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 language="java" import="java.util.*" pageEncoding="utf-8"%>
   <%@ taglib prefix="s" 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 value="funccode"/>';
</script>

<div id="<%=mainName%>-p" style="height:100%"></div>

<script language="javascript" type="text/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(len==0){
        return false;
    }
    
    var w = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerWidth();  
    var h = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerHeight(); 
      
    for(var i=0; i<len;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?tid=97424


分享到:
评论

相关推荐

    Extjs6-iframe-优化.rar

    在ExtJS6中,IFrame.js插件可能被用来创建和管理IFrame组件,以便在应用中加载外部资源或实现跨域通信。然而,根据描述,这个插件存在一个问题:在某些情况下,IFrame加载的内容可能无法正常访问。这可能是由于网络...

    ExtJs使用IFrame的实现代码

    在ExtJs中实现Iframe的嵌入功能,主要目的是为了在Web应用中集成外部页面或报表内容。ExtJs是一个用于开发富互联网应用的JavaScript库,它提供了强大的界面组件和数据处理机制。而Iframe(内联框架)标签是HTML的一...

    extjs4.2.1 tabPanel刷新及关闭标签

    在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式进行切换展示。在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,...

    extjsIframe例子

    总结起来,`extjsIframe例子`是一个关于在ExtJS 2.0中使用IFrame的实践示例,通过自定义组件或组件加载器实现IFrame的功能,可以用于展示或操作外部资源。`miframe.js`和`mainPanel.js`是实现这一功能的关键代码文件...

    ExtJs部署及使用方法

    ### ExtJs部署及使用方法详解 #### 一、ExtJs部署与配置 ...通过以上步骤,我们可以有效地部署和使用ExtJs框架,实现丰富的用户界面和交互功能。这对于构建现代化的企业级应用来说是非常有帮助的。

    解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题

    本文主要讨论的是一个特定的场景:在ExtJS框架下,使用Firefox浏览器时,如何解决关闭并重新打开窗口后,iframe中的JavaScript函数无法被访问的问题。这个问题在Internet Explorer和Google Chrome中并未出现,但在...

    Extjs4.1版本中文版

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。4.1版本是其历史上的一个重要里程碑,它提供了一套完整的组件库、布局管理、数据绑定和强大的API,使得开发者能够创建功能丰富的、交互性强...

    frameset 上传文件窗口最小化(未实现)

    当我们在一个子框架(frame或iframe)中执行操作,比如文件上传,完成后通常需要将结果或数据传递回父框架(top页面),以便主页面能根据上传结果更新状态或执行后续操作。在frameset环境下,可以通过JavaScript来...

    ExtJs4.2 Window常用方法

    ExtJs 是一个基于 JavaScript 的开源框架,用于创建复杂的前端应用程序。在ExtJs 4.2版本中,`Window`组件是一个非常基础且重要的UI组件,它为开发者提供了一个灵活的弹出窗口解决方案。通过合理的配置,可以轻松...

    iejoyswebos for .net 桌面级WEB开发框架程序V1.08

    纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...

    iejoyswebos for .net WEBOS桌面开发框架程序

    纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...

    zui动态生成树的代码,zul对extjs的集成

    例如,在 ZK 页面中使用 `&lt;iframe&gt;` 或者 `&lt;window&gt;` 控件加载包含 ExtJS 组件的 HTML 页面。 #### 示例 假设有一个使用 ExtJS 创建的面板,可以通过以下方式在 ZK 中嵌入: ```xml &lt;window title="ExtJS Panel" ...

    Extjs TriggerField在弹出窗口显示不出问题的解决方法

    4. JavaScript或Extjs框架的错误:在加载Extjs TriggerField组件时,如果JavaScript代码存在错误,或者Extjs库未能正确加载,也可能导致组件无法正常显示。 解决方案的探讨部分提出了一个可能的解决办法,即“去掉...

    extjs相关

    根据提供的文件内容,我们可以梳理出与ExtJS框架相关的几个核心知识点。ExtJS是一个用JavaScript编写的前端库,用于构建复杂的Web应用程序。以下是对文件中提到的一些关键概念和技术点的详细解释: ### ExtJS布局...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    iejoyswebos for .net 桌面开发框架程序V1.02

    纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    Ext圖片上傳、刪除、查看.net源碼

    这可能使用`Ext.window.Window`或`Ext.LoadMask`来实现加载效果,同时配合`Ext.Component`或`IFrame`加载图片资源。 此外,为了优化用户体验,项目可能还包含了进度条显示文件上传进度,这通常使用`Ext.ProgressBar...

    iejoyswebos for .net桌面级WEB开发框架程序 V1.08

    纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...

Global site tag (gtag.js) - Google Analytics