Results 1 to 2 of 2

Thread: Ext.ux.ManagedIFrame is not a constructor

  1. #1

    Exclamation Ext.ux.ManagedIFrame is not a constructor

    My goal: to actually have a working version of a window with tabs and an iframe in the tab.

    I want a window that can move around and have multiple tabs with iframes.

    I have tried for a long time - but can't get past this error:

    Ext.ux.ManagedIFrame is not a constructor
    /test-ext.php
    Line 57

    I still have not successfully got ManageIframe 2.0 to actually work.

    Can someone show me my issue please?

    test-ext.php code:

    HTML Code:
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="inc/JS/EXT/resources/css/ext-all.css">
      <script type="text/javascript" src="inc/JS/EXT/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="inc/JS/EXT/ext-all.js"></script>
      <script type="text/javascript" src="inc/JS/EXT/miframe-debug.js"></script> 
      <title id="page-title">Testing EXT</title>
      <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        p {
            margin:5px;
        }
        .settings {
            background-image:url(../shared/icons/fam/folder_wrench.png);
        }
        .nav {
            background-image:url(../shared/icons/fam/folder_go.png);
        }
        </style>
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = '../../images/blank.gif';
         Ext.onReady(function(){
        var win;
        var button = Ext.get('show-btn');
        //var MIF = new Ext.ux.ManagedIFrame({ autoCreate:{src:'http://www.extjs.com',height:350,width:'100%'} ,loadMask :false });
        //var loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden', id:'newiframe'} );
    
        button.on('click', function(){
            // create the window on the first click and reuse on subsequent clicks
            if(!win){
                win = new Ext.Window({
                    applyTo:'hello-win',
                    layout:'fit',
                    width:500,
                    height:300,
                    closeAction:'hide',
                    plain: true,
                    
    
                    items: new Ext.TabPanel({
                        applyTo: 'hello-tabs',
                        //autoTabs:true,
                        activeTab:0,
                        deferredRender:false,
                        border:false,
                        items:[{
                            title: 'Bogus Tab',
                            id: 'Bogus',
                            body:new Ext.ux.ManagedIFrame({autoCreate:{ src:'http://www.yahoo.com/', frameBorder: 0, cls:'x-panel-body ',width: '100%', height: '100%'}})
    
                        },{
                            title: 'Another Tab',
                            autoLoad: {url: 'test-ext2.php', params: 'foo=bar&wtf=1'}
                        },{
                            title: 'Closable Tab',
                            html: "blah blah",
                            closable:true
                        }]
    
                    }),
    
                    buttons: [{
                        text:'Submit',
                        disabled:true
                    },{
                        text: 'Close',
                        handler: function(){
                            win.hide();
                        }
                    }]
                });
            }
            win.show(this);
        });
    });
        </script>
    </head>
    <body>
    <h1>Hello World Window</h1>
    <p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
    <input type="button" id="show-btn" value="Hello World" /><br /><br />
    <p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>
    
    <div id="hello-win" class="x-hidden">
    
        <div class="x-window-header">Hello Dialog</div>
        <div id="hello-tabs">
                    
        </div>
    </div>
    
    </body>
    </html>

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    @mrz1818 -- Since your dealing with Ext.Layouts, use the xtype:'iframepanel' (acts like a real Ext.Panel, but with an MIF.Element rendered inside for you) instead:

    HTML Code:
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="inc/JS/EXT/resources/css/ext-all.css">
      <script type="text/javascript" src="inc/JS/EXT/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="inc/JS/EXT/ext-all.js"></script>
      <script type="text/javascript" src="inc/JS/EXT/miframe-debug.js"></script> 
      <title id="page-title">Testing EXT</title>
      <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        p {
            margin:5px;
        }
        .settings {
            background-image:url(../shared/icons/fam/folder_wrench.png);
        }
        .nav {
            background-image:url(../shared/icons/fam/folder_go.png);
        }
        </style>
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = '../../images/blank.gif';
         Ext.onReady(function(){
        var win;
        var button = Ext.get('show-btn');
    
        button.on('click', function(){
            // create the window on the first click and reuse on subsequent clicks
            if(!win){
                win = new Ext.Window({
                    applyTo:'hello-win',
                    layout:'fit',
                    width:500,
                    height:300,
                    closeAction:'hide',
                    plain: true,
                    
    
                    items: new Ext.TabPanel({
                        applyTo: 'hello-tabs',
                        //autoTabs:true,
                        activeTab:0,
                        deferredRender:false,
                        border:false,
                        items:[{
                            xtype : 'iframepanel',
                            title: 'Yahoo',
                            id: 'Bogus',
                            defaultSrc : 'http://www.yahoo.com'
                        },{
                            title: 'Another Tab',
                            autoLoad: {url: 'test-ext2.php', params: 'foo=bar&wtf=1'}
                        },{
                            title: 'Closable Tab',
                            html: "blah blah",
                            closable:true
                        }]
    
                    }),
    
                    buttons: [{
                        text:'Submit',
                        disabled:true
                    },{
                        text: 'Close',
                        handler: function(){
                            win.hide();
                        }
                    }]
                });
            }
            win.show(this);
        });
    });
        </script>
    </head>
    <body>
    <h1>Hello World Window</h1>
    <p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
    <input type="button" id="show-btn" value="Hello World" /><br /><br />
    <p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>
    
    <div id="hello-win" class="x-hidden">
    
        <div class="x-window-header">Hello Dialog</div>
        <div id="hello-tabs">
                    
        </div>
    </div>
    
    </body>
    </html>
    Also, Review the "Westside Story" demo source tabs. It'll give some further examples of using MIF's in tabPanels and tree menus.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •