[2.0 only] ux.ManagedIframe/Panel (1.2.7)

[jasmina]

Any updates on this? i am struggling with this issue for a long time

[jasmina]

Hi Doug,
sorry for the confusion i am using BorderLayout but the issue is the document or the content in the center region needs a horizontal scrolling and does not need a vertical scrolling. Hence i need to control the height and width

[hendricd]

@jasmina--
Ultimately, the body styling of the embedded document wins the scroller battle (over anything you set on the IFRAME itself). Set up appropriate overflow-x,y on the body tag instead.

[luisloboborobia]

Hi All,

I'm new to Ext JS, just a couple of months using it, and very very new to MIFrame.
I'm using Ext 2.2 and MIFrame 1.2.7a.

I was successful in showing a page in a contained MIFrame.

But I have two issues in two different cases:
1) The contained page has a "close" link and also a "close" button. Both of them, closes the window. Here´s the Javascript code and following, an HTML sample (I attached the project):

var winAddDocument;
var panelAddDocument;
var panelClassSelector;
var cboP8Classes;

var dataP8Classes =
[
['Customer', 'Customer documents'],
['Application', 'Application documents'],
['Warranty', 'Warranty Documents'],
['Withdrawal', 'Withdrawal Documents']
];

function selP8Class(elem)
{

    var P8Class, url;

    P8Class = elem.getValue();

    switch (P8Class) {
        case 'Customer':
            url = 'http://www.google.com';
            break;
        case 'Application':
            url = 'http://www.yahoo.com';
            break;
        case 'Warranty':
            url = 'http://www.oracle.com';
            break;
        case 'Withdrawal':
            url = 'http://www.microsoft.com';
            break;
    }

    panelAddDocument.setSrc(url, '', null, null);

}

function initPanelClassSelector() {

    cboP8Classes = new Ext.form.ComboBox({
        id: 'cboP8Classes',
        fieldLabel: 'Select the document class',
        hiddenName: 'P8Class',
        store: new Ext.data.SimpleStore({
            fields: ['P8Class', 'DescP8Class'],
            data : dataP8Classes
        }),
        valueField: 'P8Class',
        displayField: 'DescP8Class',
        typeAhead: false,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus: false,
        width: 250,
        listeners : {
            select : function () {
                selP8Class(this);
            }
        }
    });
}

function loadFrmAddDocument(url) {

    panelClassSelector = new Ext.Panel({
        region: 'north',
        height: 50,
        bodyStyle: 'padding: 10px',
        border: false,
        items: [cboP8Classes]
    });

    panelAddDocument = new Ext.ux.ManagedIframePanel({
        region: 'center',
        border: false,
        split: false,
        closable: false,
        collapsible: false,
        frameStyle: 'frameBorder:0;width:100%;height:100%;',
        defaultSrc: url,
        eventsFollowFrameLinks: false,
        width: 800,
        height: 500
        }
    });

    winAddDocument = new Ext.Window({
        title: 'Add Document',
        id: 'AddDocumentWin',
        resizable: true,
        modal: true,
        closeAction: 'hide',
        items: [panelClassSelector,
        panelAddDocument]
    });

}

function showEntryTemplates() {
    
    initPanelClassSelector();

    loadFrmAddDocument('http://www.bing.com');

    cboP8Classes.setValue('Customer documents');

    winAddDocument.show();
    
} 

I have put sample web pages. But in my case, all those pages are a single Window that is "popup" in the legacy application. So, it has close links and close buttons, that closes the popup.

My problem is that when the user click on those, I want my window to close also. I tried with adding a listener and it worked partially:

        listeners: {
            unload : function (frame) {
                winAddDocument.hide();
            } 

The problem is that again, this popup is like a wizard, and also has other popups, and when a new popup appears or when you change to the next wizard page, the unload event is fired.

So: how can I figure out if the close link or the close button was clicked? I guess I could check the frame parameter "content"... but I'm not sure how to do it... Or can I add some kind of "observer" to the close link or buttons? or can I catch an other kind of thing?

Just in case: I cannot modify or change the contained web page... it's an out of the box page from the product I'm integrating with.

Can anyone give me a clue on how to "attach" to those events or how to "catch" the state using the frame object?

Thank you!

[hendricd]

@luis--

If your wizard pages are same-origin, something like this could be tweaked to meet your needs:

panelAddDocument = new Ext.ux.ManagedIframePanel({
        region: 'center',
        border: false,
        split: false,
        closable: false,
        collapsible: false,
        frameStyle: 'frameBorder:0;width:100%;height:100%;',
        defaultSrc: url,
        eventsFollowFrameLinks: false,
        width: 800,
        height: 500,
        listeners : {
            domready : function(frame){
             frame.getDoc().on('click', function(e, target){

                var fly = Ext.fly(target);
                if(fly.hasClass('quitClass') || /close/i.test(fly.dom.innerHtml)){
                     e.stopEvent();
                     var C = this.ownerCt;
                     C.close();
                } 

             }, frame, {delegate:'a.someclassNameIfAvailable'});
                

           }

        }

See if you can run with those clues...

[easycodes]

Dear Doug,
Thanks for sharing this nice component with us. Actually i am exploring your example of ManagedIframe. My Question is how do i save state of Tabs and Tree Menu like number of Open tabs and expanded nodes of tree are saved.

I am still learning ExtJS so kindly guide me in this regard.

Thanks

[MichaelOstrovsky]

Is it possible to render components into iframe ( without loading any scripts there ) just like it was some Ext.Container or so ?
i'm sure there is an answer but i cannot find it for a long time.

Tnx

[hp]

Doug, what is the version of managed iframe we should be using with the latest EXT 3.2.x trunk? We are having a few problems with r89 and see that there have been two versions checked in since r89 with no comments indicating what was fixed. Thx.

[keckeroo]

Anyone having problems using Ext.Ajax.request from within a managed Iframe ? I have found that the request performs fine but throws a script error located within the ext-all.js file of "d is undefined" in the below highlighted line in the Ext.CompositeElementLite

    replaceElement : function(el, replacement, domReplace){
        var index = typeof el == 'number' ? el : this.indexOf(el);
        if(index !== -1){
            replacement = Ext.getDom(replacement);
            if(domReplace){
                var d = this.elements[index];
                d.parentNode.insertBefore(replacement, d);
                Ext.removeNode(d);
            }
            this.elements.splice(index, 1, replacement);
        }
        return this;
    }

Also found the same result if i caused a Ext.ajax.request to be triggered in the main window from an action within the iframe as well (eg updating a store record defined in the parent window, from the iframe when the store has a listener for the update event).

Any info would be greatly appreciated.

Kevin

[ashaihullin]

is there any problems with old opera versions? Opera 9 is not showing the content that i try to load in a frame, it's just show white background and seems that something trying to be loaded, but nothing happens, only white background in a frame. Any suggestions?