ExtJS 4: How do I Re-render Ext.Component iframe?

Question

How can I re-render this Ext.Component when a combo box option is selected?

var searchForm = Ext.create('Ext.form.Panel', {
    width: 320,
    style: 'margin: 20px',
    renderTo: 'SearchPanel',
    style: {
        position: 'fixed',
        top: '0px',
        left: '865px'
    },
    items: [{
        xtype: 'combo',
        width: 300,
        labelAlign: 'right',
        fieldLabel: 'Subject Area',
        store: subjectAreaStore,
        valueField: 'id',
        displayField: 'value',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus: true,
        value: 'Account',

        listeners: {
            select: function (combo) {
                cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                alert(cmp.autoEl.src);

                cmp.render();  // this does not work!
            }
        }  // listeners
    }]

});               


// create the cmp
var cmp = Ext.create('Ext.Component', {

    title: 'Data Models',
    style: {
        width: '100%',
        height: '750px'
    },

    autoEl : {
        tag : 'iframe',
        src : '/Account/2nd Iteration.htm'
    },

    renderTo: 'models'
});

Update: 10/23/2012:

This isn't working yet:

            listeners: {
                select: function (combo) {
                    cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                    var the_iframe = cmp.getEl().dom;
                    the_iframe.contentWindow.location.reload();
                }
            }  // listeners

You should try using the Ext.ux.IFrame extension instead of a component. Check the latest docs under "ux" and add the file to your project. — Eric, Oct 23 '12 at 16:43

score 4 · Accepted Answer · answered Oct 23 '12 at 18:39

4

I would suggest a different approach to creating the iframe. Just use the html property of a component and write the html yourself instead of using the autoel feature (never done this with a component, only a container but it should work the same)...

var cmp = Ext.create('Ext.Component', {
    title: 'Data Models',
    style: {
        width: '100%',
        height: '750px'
    },
    renderTo: 'models',
    html: '<iframe src="/Account/2nd Iteration.htm"></iframe>'
});

Then do this in the listener to update it...

listeners: {
    select: function (combo) {
        cmp.update('<iframe src="/' + combo.getValue() + '/2nd Iteration.htm"></iframe>');
    }
}

answered Oct 23 '12 at 18:39

Stephen Tremaine

934
6
15

if there are spaces in the combo.getValue() value, this fails ... wonder why that would be? – JustBeingHelpful Oct 24 '12 at 21:11
Sorry for the incredibly slow reply MacGyver, but maybe you should percent encode the spaces for the value using the javascript escape(combo.getValue()) function. – Stephen Tremaine Nov 29 '12 at 14:09
The space wasn't causing the issue actually. Some of the data models had an index HTML page with a different name (not "2nd Iteration.htm"). So I just made a root page for each data model and redirected to the correct index page depending on the version of the model. – JustBeingHelpful Nov 29 '12 at 18:45

score 1 · Answer 2 · answered Oct 23 '12 at 02:54

The render() method only deals with HTML that was created (rendered) by ExtJS. You created that iframe yourself, so you have to control it yourself. You should be able to get the DOM element from the Component like this:

var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();

ExtJS 4: How do I Re-render Ext.Component iframe?

2 Answers2