ExtJS 4: Wie kann ich Neu Rendern Ext.Komponente iframe?

Wie kann ich wieder machen das Ext.Komponente, wenn ein combo-box-option ausgewählt ist?

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:

Dieser noch nicht läuft:

            listeners: {
                select: function (combo) {
                    cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                    var the_iframe = cmp.getEl().dom;
                    the_iframe.contentWindow.location.reload();
                }
            }  //listeners
Irgendwelche Javascript-Fehler?
Sie sollten versuchen, mit den Ext.ux.IFrame-Erweiterung anstelle einer Komponente. Überprüfen Sie die neuesten docs unter "ux" und fügen Sie die Datei zu Ihrem Projekt.
Ich werde versuchen, es morgen, wenn ich zur Arbeit

InformationsquelleAutor MacGyver | 2012-10-23

  1. 4

    Ich würde vorschlagen, einen anderen Ansatz zum erstellen der iframe. Verwenden Sie einfach die html-Eigenschaft einer Komponente und schreiben Sie den html-yourself, anstatt die autoel-Funktion (noch nie getan, diese mit einer Komponente, die nur ein container, es sollte aber das gleiche)...

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

    Dann tun Sie dies in den Hörer, um ihn zu aktualisieren...

    listeners: {
    select: function (combo) {
        cmp.update('<iframe src="/' + combo.getValue() + '/2nd Iteration.htm"></iframe>');
    }
}
    wenn es Räume in der combo.getValue () - Wert, dieser scheitert ... Frage mich, warum das wäre?
    Sorry für die unglaublich langsam Antworten, MacGyver, aber vielleicht sollten Sie die Prozent-Kodierung der Leerzeichen für den Wert über die javascript escape(combo.getValue ()) - Funktion.
    Der Raum war nicht das Problem verursacht eigentlich. Einige der Daten-Modelle hatten eine index-HTML-Seite mit einem anderen Namen (nicht "2. Iteration.htm"). Also ich habe gerade einen root-Seite für die einzelnen Daten-Modell und Weiterleitung an die richtige index-Seite abhängig von der version des Modells.

    InformationsquelleAutor Stephen Tremaine

  2. 1

    Den render() Methode befasst sich nur mit HTML erstellt wurde (gerendert) von ExtJS. Sie erstellt, dass der iframe selbst, so dass Sie haben, um es zu kontrollieren sich selbst. Sie sollten in der Lage sein, um das DOM-element aus der Komponente wie folgt:

    var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();
    siehe mein letztes update...

    InformationsquelleAutor AndreKR

Schreibe einen Kommentar