Extjs miframe的使用

最新推荐文章于 2020-04-07 10:43:15 发布
最新推荐文章于 2020-04-07 10:43:15 发布
阅读量3.6k 收藏
点赞数
分类专栏： ExtJS 文章标签： extjs function iframe callback structure string

Iframe 有的时候还是须要的，比如在Tab中嵌入报表、嵌入其它系统的界面。下面代码是项目中一段

ExtJs 3.1.1

使用IFrame须要一个ExtJS的一个插件ManagedIFrame（miframe.js），用了这个插件可以使用 xtype:'iframepanel' 

代码段：

 1:  var p_center = new Ext.TabPanel({
 2:          region: "center",
 3:          resizeTabs: true, // turn on tab resizing
 4:          minTabWidth: 115,
 5:          tabWidth: 135,
 6:          enableTabScroll: true,
 7:          width: 600,
 8:          activeTab: 0,
 9:          height: 250,
10:                     items:[{
11:                          xtype: 'iframepanel',
12:                          title:'系?统?容?量?分?配?',
13:                           id:"form_chapteradmin",
14:                            loadMask:{msg:'Loading Quote...'},
15:                            deferredRender: false, 
16:                            //bodyStyle:'padding:10px',
17:                            frameConfig:{name:'chatperadminForm'},
18:                            border:false,
19:                            //frame:true,
20:                            defaultSrc: 'http://mhl-pc/ReportServer?%List&rs:Command=Render:toolbar=false'
21:                        }],
22:          defaults: { autoScroll: true }
23:      });
24:   

 

图：

Snap1


另一个列子的使用，其中miframe.js的源代码也贴出
view plain
<pre name="code" class="html"><script type="text/javascript" src="miframe.js"></script>  
  
  
<script type="text/javascript">  
 Ext.onReady(function(){  
  var pane = new Ext.Panel({  
   name:'my panel',  
   renderTo:'newid',  
   items:[{  
    xtype:'iframepanel',  
    title:'有滚动条的iframe',  
    defaultSrc:'iframe.html',  
    defaultHeight:'200'  
   }]  
  });  
  
  var pane1 = new Ext.Panel({  
   name:'my panel',  
   renderTo:'noscr',  
   items:[{  
    xtype:'iframepanel',  
    title:'这个iframe',  
    defaultSrc:'iframe.html'  
   }]  
  });  
 });  
</script>  
</head>  
<body>  
<div id="newid"></div>  
<div id="noscr"></div>  
  
   
  
miframe.js  如下：  
  
   
  
//====================================================================================  
  
   
  
/*  
  * Usage:<br>  
   * <pre><code>  
   * // Harness it from an existing Iframe from markup  
   * var i = new Ext.ux.ManagedIFrame("myIframe");  
   * // Replace the iFrames document structure with the response from the requested URL.  
   * i.load("http://myserver.com/index.php", "param1=1¶m2=2");  
   * //Notes:  this is not the same as setting the Iframes src property !  
   * // Content loaded in this fashion does not share the same document namespaces as it's parent --  
   * // meaning, there (by default) will be no Ext namespace defined in it since the document is  
   * // overwritten after each call to the update method, and no styleSheets.  
  * </code></pre>  
  * <br>  
   * @cfg {Boolean/Object} autoCreate True to auto generate the IFRAME element, or a {@link Ext.DomHelper} config of the IFRAME to create  
   * @cfg {String} html Any markup to be applied to the IFRAME's document content when rendered.  
    * @constructor  
    * Create new Updater directly.  
    * @param {Mixed} el, Config object The iframe element or it's id to harness or a valid config object.  
    * @param {Config} forceNew (optional) By default the constructor checks to see if the passed element already has an Updater and if it does it returns the same instance. This will skip that check (useful for extending this class).  
 */  
   
 Ext.ux.ManagedIFrame = function(){  
        
     var args=Array.prototype.slice.call(arguments, 0)  
         ,el = Ext.get(args[0])  
         ,config = args[0];  
     if(el && el.dom && el.dom.tagName == 'IFRAME'){  
         config = args[1] || {};  
     }else{  
        config = args[0] || args[1] || {};  
        el = config.autoCreate?  
   Ext.get(Ext.DomHelper.append(document.body, Ext.apply({tag:'iframe',scrolling:'YES', src:(Ext.isIE&&Ext.isSecure)?Ext.SSL_SECURE_URL:''},config.autoCreate))):null;  
     }  
       
     if(!el || el.dom.tagName != 'IFRAME') return el;  
        
     !!el.dom.name.length || (elel.dom.name = el.dom.id); //make sure there is a valid frame name  
    
        this.addEvents({       
         /**  
           * @event documentloaded  
           * Fires when the iFrame's Document(DOM) has reach a state where the DOM may be manipulated  
           * @param {Ext.ux.ManagedIFrame} this  
           */  
        "documentloaded" : true  
      
     });  
               
        if(config.listeners){  
   this.listeners=config.listeners;  
   Ext.ux.ManagedIFrame.superclass.constructor.call(this);  
     
        }  
           
         Ext.apply(el,this);  // apply this class interface ( pseudo Decorator )  
           
         el.addClass('x-managed-iframe');  
     
   //el.dom.scrolling="auto";//--------------------------------  
     
           
         var content = config.html || config.content || false;  
           
      if(content){  
    el.update.defer(100,el,[content]);//allow the iframe to quiesce for Gecko  
         }  
           
         return el;  
       
    };          
   
    Ext.extend(Ext.ux.ManagedIFrame , Ext.util.Observable,  
       {   
         
       /*  
   Write(replacing) string content into the IFrames document structure  
  * @param {String} content The new content  
         * @param {Boolean} loadScripts (optional) true to also render and process embedded scripts  
         * @param {Function} callback (optional) Callback when update is complete.   
     */  
     update : function(content,loadScripts,callback){  
           
         loadScriptsloadScripts = loadScripts || this.getUpdateManager().loadScripts || false;  
            
      this._windowContext = null;  
      content = Ext.DomHelper.markup(content||'');  
                               
      var doc = this.getDocument();  
      if(doc){  
        doc.open();  
      
        doc.write(loadScripts===true?  
             content:content.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, ""));  
          
        //create an 'eval'able context for the iframe and this.execScript  
        doc.write ('<script type="text/javascript">(function(){'+  
                 "var MSIE/*@cc_on=1@*/;"+ // IE sniff  
                 "parent.Ext.get('"+this.dom.id +"')._windowContext=MSIE?this:{eval:function(s){return eval(s);}}"+  
             "})();<\/script>" );  
                
               
        doc.close();  
      
        if(!!content.length){  
           this.checkDOM(false,callback);   
        } else if(callback){  
         callback();  
        }  
      }  
      
      return this;  
     },  
     _windowContext : null,  
     /*  
   Return the Iframes document object  
     */  
     getDocument:function(){  
      return this.getWindow().document;  
     },  
       
     /*  
   Return the Iframes window object  
     */  
     getWindow:function(){  
         var dom= this.dom;  
      return dom?dom.contentWindow||window.frames[dom.name]:window;  
     },  
       
     /*  
   Print the contents of the Iframes (if we own the document)  
     */  
     print:function(){   
         if(this._windowContext){  
           try{        
    var win = this.getWindow();  
      
    if(Ext.isIE){  
     win.focus();  
    }   
    win.print();  
           }catch(ex){  
    throw 'print: invalid document context';  
           }  
         }       
     },  
     //private  
     destroy:function(){  
         
         this.removeAllListeners();  
           
         if(this.dom && this.dom.src) {  
           this.dom.src = 'javascript:false';  
         }    
           
                   
     }  
     /*  
       Execute a javascript code block(string) within the context of the Iframes window object.  
       * @param {String} block A valid ('eval'able) script source block.  
       * <p> Note: execScript will only work after a successful update (document.write);  
     */  
     ,execScript: function(block){  
         if(this._windowContext){  
             return this._windowContext.eval( block );  
         } else {  
          throw 'execScript:no script context';  
         }  
     }  
     /* Private   
   Poll the Iframes document structure to determine DOM ready state,  
   and raise the 'documentloaded' event when applicable.  
     */  
     ,checkDOM : function(win,callback){  
             //initialise the counter  
      var n = 0   
         ,winwin = win||this.getWindow()  
         ,manager = this;  
        
        var t =function() //DOM polling  
       {  
        var domReady=false;  
        //if DOM methods are supported, and the body element exists  
        //(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]   
        //in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)  
          
        domReady  = (win.document && typeof win.document.getElementsByTagName != 'undefined'   
            && ( win.document.getElementsByTagName('body')[0] != null || win.document.body != null ));  
          
        //if the timer has reached 70 (timeout after ~10.5 seconds)  
        //in practice, shouldn't take longer than 7 iterations [in kde 3   
        //in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]  
        if(n++ < 70 && !domReady)  
        {  
         //try again  
         t.defer(150);  
         return;  
        }  
        if(callback)callback();  
        manager.fireEvent("documentloaded",manager); //fallback  
               };  
      t();  
        }  
 });  
   
 /*  
  * @class Ext.ux.ManagedIFramePanel   
  * Version:  0.11  
  *     Made Panel state-aware.  
  * Version:  0.1  
  * Author: Doug Hendricks 12/2007 doug[always-At]theactivegroup.com  
  *  
  *    
 */  
 ExtExt.ux.ManagedIframePanel = Ext.extend(Ext.Panel, {  
    /**  
     * @cfg {String/Object/Function} bodyCfg  
     Custom bodyCfg used to embed the ManagedIframe.       
    */  
 //alert(defaultHeight);  
    bodyCfg:{tag:'div'  
      ,cls:'x-panel-body'  
      ,children:[{tag:'iframe',frameBorder:0,width:'100%',height:this.defaultHeight||'200',cls:'x-managed-iframe',scrolling:'auto'}]  
    },  
      
      
    //id:null,  
      
    /**  
         * Cached Iframe.src url to use for refreshes. Overwritten every time setSrc() is called unless "discardUrl" param is set to true.  
         * @type String  
     */  
    defaultSrc:null,  
  
    /**  
         * @cfg {String/Object/Function} iframeStyle  
         * Custom CSS styles to be applied to the body's ux.ManagedIframe element in the format expected by {@link Ext.Element#applyStyles}  
         * (defaults to {overflow:'auto'}).  
     */  
    iframeStyle: {overflow:'auto'},  
      
    animCollapse:false,   
      
    initComponent : function(){   
         Ext.ux.ManagedIframePanel.superclass.initComponent.call(this);   
         this.addEvents("documentloaded");  
           
         if(this.defaultSrc){  
        this.on('render',  function(){this.setSrc();}, this, {delay:10});  
          
        }  
         },  
           
      // private  
     onDestroy : function(){  
         if(this.iframe){  
             delete this.iframe.ownerCt;  
             Ext.destroy(this.iframe);  
         }  
                    
         Ext.ux.ManagedIframePanel.superclass.onDestroy.call(this);  
     },     
      
     // private  
      onRender : function(ct, position){  
          
        Ext.ux.ManagedIframePanel.superclass.onRender.call(this, ct, position);   
          
        if(thisthis.iframe = this.body.child('iframe.x-managed-iframe')){  
            this.iframe = new Ext.ux.ManagedIFrame(this.iframe);  
          
            thisthis.iframe.ownerCt = this;    
            this.relayEvents(this.iframe, ["documentloaded"]);  
              
            if(this.iframeStyle){  
       this.iframe.applyStyles(this.iframeStyle);  
            }  
        }  
      },    
        // private  
     afterRender : function(){    
         if(this.html && this.iframe){  
              this.iframe.update(typeof this.html == 'object' ?  
                             Ext.DomHelper.markup(this.html) :  
                             this.html);  
              delete this.html;  
          }  
                               
          Ext.ux.ManagedIframePanel.superclass.afterRender.call(this);   
           
     },  
       
      //private    
     doAutoSrc : function(){  this.setSrc();  },  
       
         /**  
          * Sets the embedded Iframe src property.  
            
          * @param {String/Function} url (Optional) A string or reference to a Function that returns a URI string when called  
          * @param {Boolean} discardUrl (Optional) If not passed as <tt>false</tt> the URL of this action becomes the default URL for  
          * this panel, and will be subsequently used in future setSrc calls.  
          * Note:  invoke the function with no arguments to refresh the iframe based on the current defaultSrc value.  
         */  
     setSrc : function(url, discardUrl){  
                  
        var src = url || this.defaultSrc || (Ext.isIE&&Ext.isSecure?Ext.SSL_SECURE_URL:'');  
                
  if(this.rendered && this.iframe){ //rendered?  
              this.iframe._windowContext = null;  
              this.iframe.dom.src = (typeof src == 'function'?src()||'':src);  
     thisthis.iframe.dom.height=this.defaultHeight||'200';//add by mlc 2008-04-15  
        }  
  
          
        /*for(var i=0;i<prefs.length;i++){  
          if(this.id==prefs[i].text){  
           this.iframe.dom.src=prefs[i].items.defaultSrc;  
          }  
        }*/  
                 
        if(discardUrl !== true){ this.defaultSrc = src; }  
        this.saveState();  
     },  
       
     //Make it state-aware  
     getState: function(){  
  
        return Ext.apply(Ext.ux.ManagedIframePanel.superclass.getState.call(this) || {},  
             {defaultSrc  :this.defaultSrc });  
     }  
   
});   
Ext.reg('iframepanel', Ext.ux.ManagedIframePanel);


寒小二
关注
专栏目录
ExtJs使用IFrame的实现代码
10-29
Iframe 有的时候还是须要的，比如在Tab中嵌入报表、嵌入其它系统的界面。下面代码是项目中一段。希望对用ExtJS开发的兄弟做个参考。
eslint-plugin-extjs:使用ExtJS框架的项目的ESLint规则
05-18
使用ExtJS框架的项目的ESLint规则。 这些规则的目标是与ExtJS 4.x一起使用。 欢迎请求与5.x兼容的请求！ 规则明细 ext-array-foreach ExtJS提供的两个主要的数组迭代器函数和不同之处在于， each函数都为早期终止...
extjs用iframe的问题
weixin_33873846的博客
07-21 254
项目中用extjs做前提系统的界面是左边用树做目录 右边用tabpanel做内容展示点击树节点的时候 在tabpanel添加新的tab JScript code var newTab = centerPanel.add(new Ext.Panel({ id : tabId, title : tabTitle, iconCls : "treeNodeLea...
ExtJS中定义iframe
西西里飞鱼
04-01 417
ExtJS中定义iframe. 列出我自己所知道的方案。 方案一 例如 var iframe={ region:'center', border:true, margins:'3', html: '' } 可通过以下方式为iframe赋值路径 Ext.getDom("procFrame").contentWindo...
ExtJs中如何灵活使用Iframe!
热门推荐
YOUNG
06-06 1万+
<br />      ExtJS虽然能够作出非常华丽的页面，但对于大量的数据显示来说任然存在着很多的不足！而使用iframe则可以巧妙的解决该问题，使我们运用Ext更加灵活自如，将我们的项目做得更加完美！下面讲述的就是iframe的简单用法：（如有更好的解决方案望各位指出）<br /> <br />1.index.html:<br /> <br /><script type="text/javascript"><br />  var addWin = null;<br />  var editWin =
extjs+iframe
请叫我
12-13 1560
这个方法蛮好用的 可以在父界面中提交iframe中的表单 window.frames['ueditorframe'].document.forms[0].submit();
如何在extjs中使用crystalreport？
04-04
EXTJS是一个强大的JavaScript框架，用于构建富客户端应用程序，而Crystal Reports是一款广泛使用的报表工具，能够生成复杂的业务报告。下面我们将详细介绍如何在EXTJS中使用Crystal Reports。 首先，了解EXTJS和...
Extjs的简单使用手册中文PPT版
07-22
资源名称：Extjs的简单使用手册 中文PPT版 内容简介：本文档主要讲述的是Extjs的简单使用手册；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看 资源截图：  资源太大，传百度网盘了，链接在附件...
extjs-graphql-app:样例应用程序说明了如何在ExtJS中使用GraphQL
05-21
如何在ExtJS中使用GraphQL 这是基于样本ExtJS的文章。 开始开发环境 登录到Sencha NPM存储库 npm login --registry=https://npm.sencha.com/ --scope=@sencha 安装依赖项 npm install 启动应用程序 npm start
ExtJs使用IFrame
weixin_30604651的博客
03-24 167
Iframe 有的时候还是须要的，比如在Tab中嵌入报表、嵌入其它系统的界面。下面代码是项目中一段。希望对用ExtJS开发的兄弟做个参考。 环境： Microsoft Visual Studio 2008 Sp1 Asp.net MVC ExtJs 3.1.1 使用IFrame须要一个ExtJS的一个插件ManagedIFrame（miframe.js），用了这个插件可以使用 xtype...
Extjs6-iframe-优化.rar
12-26
Extjs6 插件IFrame.js存在一定问题。同步利用ajax进行异步检测访问是否可达，如果不可达则重置iframe的url，指定显示404界面。
Extjs 在Tab中使用Iframe
weixin_30545285的博客
11-06 93
在Tab中不是很好实用Iframe，提供两种参考方式：一：单一的tab,每次左边的tree的node事件都会更新的。先创建一个拥有HTML的标签CodenewExt.TabPanel({id:'main-tabs',activeTab:0,region:'center',...
Extjs中对于iFrame的使用
zyjustin9的专栏
10-29 1952
Extjs中对于iFrame的使用   注：Extjs中没有iFrame，只能用html中的来代替！ 方式： 在Extjs的元素中加上下面这句话： html:"&lt;iframe id='frame' name='frame' src='http://******' width=100% height=100%/&gt;"   一.Jsp页面文件： &lt;%@page imp...
EXTJS7 自定义组件 IFRAME
路过君的博客
04-07 270
Ext.define('PSR.Iframe', { extend: 'Ext.Component', xtype: 'psr-iframe', config: { src: null }, element: { reference: 'element', children: [{ re...
在Extjs中使用iframe以及手动刷新iframe
liuyu2783的博客
05-05 3115
{  columnWidth : .3, layout : 'form', // xtype : 'fieldset', height : 225, items : [{      html :      '      +      attributes.basePath      + 'secure/sitech/product_tree/pages/taskManager/
Extjs 实现iframe 整个页面遮罩效果
XWL1992的专栏
01-12 562
两个页面a.html和b.html,b嵌入a中，现在需要在b中实现遮罩a整个页面，可以使用top.Ext.getBody().mask().由此可以猜测在子页面中获取父页面元素 一样可以使用top实现。再此为证明，只是给下次遇到类似需求时提供解决思路。
extjs使用 iframe嵌入框，点击事件弹出窗口显示
Java小白的博客
01-11 1681
extjs使用 iframe嵌入框，点击事件弹出窗口显示
Extjs在iframe里实现页面跳转
kawayiso007的专栏
09-13 758
用ext.getCmp方法tabpanel的引用，然后调用它的方法添加啊 var topTab = window.parent.Ext.getCmp('content-panel');             if (topTab) {                  topTab.addFeed(docNo, docNo, TaskUrl);             } else {
Ext 模块套用iframe，配合使用；
leos
03-02 277
/**************************************************************** * 文件名: TemperatureBigDataDisplayPlatform.js * 作者: leos * 文件创建时间: 2020.02.27 * 文件描述: xxx统计图 *************************************...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值