CODEWITHSUNDEEP
javascriptiframeextjsextjs4
JustBeingHelpful
JustBeingHelpful

Reputation: 18980

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

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

Upvotes: 2

Views: 11642

Answers (2)

Stephen Tremaine
Stephen Tremaine

Reputation: 954

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>');
    }
}

Upvotes: 4

AndreKR
AndreKR

Reputation: 33678

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();

Upvotes: 1

Related Questions