`

ExtJS Panel中放入iframe的三种方法

    博客分类:
  • Ajax
阅读更多

 

//way 1   //it works
        var frame1 = document.createElement("IFRAME");
        frame1.id = "frame1";
        frame1.frameBorder = 0;
        frame1.src = "reports/empty-report.html"; 
        frame1.height = "100%";
        frame1.width = "100%"; 
        
        var panel2 = new Ext.Panel( {
            id : "panel2",
            items: [ frame1 ]
            //contentEl: "frame1" //this won't work
            });
            
//way 2  //it works, too
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                fitToFrame: true,                
                html: '<iframe id="frame1" src="../examples/layout/table.html" frameborder="0" width="100%" height="100%"></iframe>'
            }); 

//way 3  //it works
// first, we need to add a line in HTML
//<iframe id="frame1_rename" frameborder="0" height="100%" width="100%" src="reports/empty-report.html"/>            
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                contentEl: "frame1"
            });  

// 后面将frame导航到其它URL
     document.getElementById("frame1").src = "/extjs3/examples/layout/vbox.html";

分享到:
评论

相关推荐

    Extjs 重写Panel添加click事件

    在Ext JS这个强大的JavaScript框架中,Panel是一种常用的组件,用于构建复杂的用户界面。Panel提供了丰富的功能,包括布局管理、工具栏、标题、可配置性等。然而,有时我们需要对Panel进行自定义,例如添加或修改...

    一个简单的EXTJS Panel

    #### 三、EXTJS Panel 配置详解 在`Ext.onReady()`内部,我们创建了一个新的`Panel`实例。具体配置如下: ```javascript new Ext.Panel({ renderTo: "hello", title: "hello", width: 300, height: 200, ...

    Extjs自动最大化panel

    在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...

    Extjs 4.11 重写 Panel 添加 click事件

    在ExtJS 4.11框架中,Panel是常见的组件之一,用于构建用户界面的容器。Panel经常被用作其他组件的容器,如按钮、表格、表单等。有时,我们可能需要对Panel进行自定义操作,比如监听并处理Panel上的点击事件。这涉及...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    在ExtJS中,我们通常使用`xtype: 'iframe'`来创建一个IFrame组件,然后将其添加到Panel中。然而,由于IFrame内容是异步加载的,Panel可能无法正确预估IFrame的高度,导致滚动条的出现或内容被裁剪。 为了解决这个...

    Extjs6-iframe-优化.rar

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

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extjs grid.panel 项目 源码

    在"extjs grid.panel 项目 源码"中,我们可以深入理解如何利用ExtJS构建一个功能完备的数据网格。 Grid Panel是ExtJS中的一个核心组件,它允许开发者以表格的形式展示大量数据,并提供多种交互功能,如排序、分页、...

    extjs tab panel

    ExtJS Tab Panel是Ext JS库中的一个核心组件,它用于创建具有多个标签页的应用界面,类似于浏览器中的标签页。在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容...

    学习ExtJS Panel常用方法

    ### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...

    extjs4中panel的accordion布局以及treepanel导航

    综上所述,EXTJS4中的Panel的accordion布局和TreePanel的动态导航是两种强大而灵活的功能,能够帮助开发者构建出丰富多样的用户界面。理解并熟练掌握这些特性,将使你在开发中游刃有余。通过实际操作和测试extjs中的...

    Extjs panel里添加checkboxgrop后台动态获取数据

    Extjs checkboxgrop动态获取后台数据,并默认为全选状态

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在“ExtJS3.3中文API.CHM”文档中,每个API或类都有详细的说明,包括其属性、方法、事件和配置项,这对于开发者来说是宝贵的参考资料。通过深入学习和理解这些内容,开发者能够熟练掌握ExtJS 3.3,编写出高效、高...

    extjs3 swfupload panel

    EXTJS3 SWFUpload Panel是一种在EXTJS3框架下实现的多文件上传解决方案。EXTJS是一个流行的JavaScript库,用于构建富客户端应用,而SWFUpload则是一个基于Flash的文件上传插件,它允许用户在不刷新页面的情况下进行...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    extjs中文文档大全

    ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...

    extJs2.0 中文手册

    ExtJs2.0提供了丰富的一系列UI组件,例如面板(Panel)、窗口(Window)、表单(Form)、网格(Grid)等。这些组件是构建现代Web界面不可或缺的元素。中文手册中会详细说明如何创建和使用这些组件,以及它们的配置...

    中文的Extjs的api手册

    ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一套完整的组件模型、数据绑定机制以及强大的布局管理器,使得开发者能够创建功能丰富的、交互性强的用户界面。3.3版本虽然...

    extjs3.0中文API

    1. **组件系统**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等,这些组件可以通过配置项灵活定制,以满足各种需求。 2. **布局管理**:布局管理器(Layout ...

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

Global site tag (gtag.js) - Google Analytics