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

admin管理员组

文章数量:1323687

How can I re-render this Ext.Component when a bo 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: 'bo',
        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 (bo) {
                cmp.autoEl.src = '/' + bo.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 (bo) {
                    cmp.autoEl.src = '/' + bo.getValue() + '/2nd Iteration.htm';
                    var the_iframe = cmp.getEl().dom;
                    the_iframe.contentWindow.location.reload();
                }
            }  // listeners

How can I re-render this Ext.Component when a bo 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: 'bo',
        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 (bo) {
                cmp.autoEl.src = '/' + bo.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 (bo) {
                    cmp.autoEl.src = '/' + bo.getValue() + '/2nd Iteration.htm';
                    var the_iframe = cmp.getEl().dom;
                    the_iframe.contentWindow.location.reload();
                }
            }  // listeners

• javascript
• iframe
• extjs
• extjs4

Share Follow edited Oct 23, 2012 at 13:13 JustBeingHelpful asked Oct 23, 2012 at 2:33 JustBeingHelpfulJustBeingHelpful 19k3939 gold badges168168 silver badges251251 bronze badges 2

• You should try using the Ext.ux.IFrame extension instead of a ponent. Check the latest docs under "ux" and add the file to your project. – Eric Commented Oct 23, 2012 at 16:43
• @AndreKR - I'll try it tomorrow when I get to work – JustBeingHelpful Commented Oct 24, 2012 at 1:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I would suggest a different approach to creating the iframe. Just use the html property of a ponent and write the html yourself instead of using the autoel feature (never done this with a ponent, 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 (bo) {
        cmp.update('<iframe src="/' + bo.getValue() + '/2nd Iteration.htm"></iframe>');
    }
}

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

本文标签： javascriptExtJS 4 How do I Rerender ExtComponent iframeStack Overflow