`
liss
  • 浏览: 844147 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

iframe in a tab panal

阅读更多

http://www.extjs.com/forum/showthread.php?18144-iframe-in-a-tab-panal&highlight=IFrameComponent

Jack has this solution

Code:
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
     onRender : function(ct, position){
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url});
     }
});

then:

Code:
var tab = new Ext.Panel({
     id: id,
     title: title,
     closable:true,
     // layout to fit child component
     layout:'fit', 
     // add iframe as the child component
     items: [ new Ext.ux.IFrameComponent({ id: id, url: uri }) ]
});
            
this.add(tab);

I need to make this work for my tabs, but the way I have my layout, i am not sure how to put in the code.

Code:
 Ext.onReady(function(){

        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
       var viewport = new Ext.Viewport({
           
             layout:"border",
items:[

	 new Ext.BoxComponent({ // raw
          region:'north',
          el: 'north',
          height:106
           }),
	{
    region:"center",
    title:"User Portal",
    items:[{
        xtype:"tabpanel",
        activeTab:0,
        items:[{
            xtype:"panel",
            title:"Personal Assistant",
			contentEl: 'panel1'
          },{
            xtype:"panel",
            title:"Fowarding",
			contentEl: 'panel2'
          },{
            xtype:"panel",
            title:"OutLook",
			contentEl: 'panel3'
          },{
            xtype:"panel",
            title:"Corporate Directory",
			contentEl: 'panel4'
          },{
            xtype:"panel",
            title:"Administration",
			contentEl: 'panel5'
          },{
            xtype:"panel",
            title:"Downloads",
			contentEl: 'panel6'
          },{
            xtype:"panel",
            title:"Training",
			contentEl: 'panel7'
          }]
      }]
  },
  
  {
    region:"south",
   title:'Copyright 2005-2007 company, Inc.'
      }]
  
           
        });
    });


Any help would be great.

分享到:
评论

相关推荐

    panal(Last) VC++

    标题 "panal(Last) VC++" 暗示我们正在处理一个与Visual C++相关的项目,可能是关于一个名为“panal”的控件或库的最后版本。在描述和标签中再次强调了“panal(Last) VC++”,进一步确认这涉及到一个使用VC++编译器...

    Panal solar photovoltaic caracteristic.rar_Solar_matlab GUI_phot

    Panal solar photovoltaic caracteristic

    GUI编程

    1.Fraph user interface,图形用户接口。 2.桌面程序.(桌面) 3.服务器java.string.xxx 4:控件 Button //按钮 Checkbox //复选框 RadioBox //单选框 Text //文本框 Group //成组框 ...Panal //面板 D

    贝加莱B&R PowerPanel100/200 面板系列用户手册(英文).pdf

    贝加莱(B&R)公司生产的PowerPanel 100/200系列面板是一系列工业级的用户界面产品,主要用于工业自动化领域。用户手册作为产品的重要组成部分,为用户提供了详尽的操作指导、技术参数和维护服务信息。...

    C#panel用法例子

    C#网站制作学习到的panel用法例子,主要演示了怎么使用panel控制panel内部控件的显示、隐藏。例子是我从网上找的,我试过可以用。

    EVIEWS面板数据分析操作教程之PanelData模型.pptx

    EVIEWS面板数据分析操作教程之PanelData模型.pptx

    grafana-waterfall-panel

    瀑布板 ... 配置 安装后,您可以在仪表板上添加新的面板类型“瀑布面板”。 预期领域 面板只能处理一个时间序列,时间序列可以包含以下字段: 栏位类型 必需的 ... 每个元组将在面板中以一个条形表示,从其“起点”开始,...

    vuetify-blackout-panel:显示消息或微调框的停电面板

    @ aphorica / vuetify-blackout-panel github的: : 网址: : 正在安装 npm install @aphorica/vuetify-blackout-panel 或者 yarn add @aphorica/vuetify-blackout-panel 运行演示 在命令提示符中,cd info'...

    CRP-ES80驱动说明.pdf

    该手持器配备了一个操作面板,包括了ALED和BLED两个轴的状态指示灯,一个显示器PANAL,以及三个可操作按键:MODE、UP(上升)、DOWN(下降)。这些组件共同构成了用户与驱动器进行交互的核心部分。 1. **伺服驱动...

    C#中主窗体Panel中加载其他多个窗体Panel控件

    1. 使用TabControl:除了使用Panel,你也可以考虑使用TabControl控件,它可以更直观地管理多个子窗体,每个Tab页对应一个子窗体。 2. 动画效果:在切换Panel时,可以加入淡入淡出等动画效果,提高用户体验。 3. 状态...

    c#自定义圆角panel

    在.NET Framework中,C#是一种常用的编程语言,用于开发Windows应用程序。在Windows Forms应用中,Panel控件是一个非常基础的元素,它允许我们组织和管理其他控件。然而,系统默认的Panel控件并没有提供设置圆角的...

    病例管理软件(非常适合初学者学习)

    代码主要内容包括: 1、datagridview:控件使用(绑定,单击取值,双击事件,数据更新) 2、泛型实体类:存储用户数据,减少数据库操作,从中模糊查询数据 ...5、窗体布局:Panal控件实现同窗口多用途

    项目

    打开XAMPP Control Panal并启动[apache]和[mysql]。 从github下载项目( )。 或遵循gitbash命令i>cd C:\\xampp\htdocs\ii>git clone https://github.com/PuneethReddyHC/online-shopping-system-advanced.git将...

    连接器:使用JavaScript,PHP,MySql开发了一个完整的社交网站,例如Facebook或Twitter,其中包括新闻源,个人资料,朋友系统,聊天系统,趋势发布等功能。

    打开XAMPP Control Panal并启动[apache]和[mysql]。 从github( )下载项目或遵循gitbash命令 cd C:\\xampp\htdocs\ git clone https://github.com/manoharys/Connector.git 将文件解压缩到C:\ xampp \ htdocs...

    在线购物系统高级:演示站点

    打开XAMPP Control Panal并启动[apache]和[mysql]。 从github下载项目( )。 或遵循gitbash命令i>cd C:\\xampp\htdocs\ii>git clone https://github.com/PuneethReddyHC/online-shopping-system-advanced.git将...

    在线购物系统:演示

    打开XAMPP Control Panal并启动[apache]和[mysql]。 从github下载项目( ) 或遵循gitbash命令i> cd C:\ xampp \ htdocs \ ii> git clone 将文件解压缩到C:\ xampp \ htdocs中。 打开链接localhost / phpmyadmin ...

    OverrideTask

    覆写任务运行该项目的说明:1-下载或克隆存储库2- npm install3-通过命令ng serve --o打开用于运行角度项目的终端4-创建帐户登录panal模块我在Firebase中使用了angular来登录

    登录面板:安装登录面板

    2. **源码获取**:文件名"login-panal-master"表明这可能是一个GitHub或其他版本控制系统中的项目仓库主分支。你需要下载或克隆这个仓库到本地,通常包含HTML、CSS、JavaScript以及PHP文件。 3. **数据库设置**:...

Global site tag (gtag.js) - Google Analytics