Поместите HTML <iframe> в Ext.panel.Panel

Я пытаюсь положить в панель ExtJS с помощью конфигурации HTML. Я динамически создал, что мне нужно вставить в этот кадр.

После выполнения HTML-код создается в iFrame, но тело выглядит пустым. Нет ошибок. Ниже приведен мой код ExtJS Panel

    me.outputDataPanel = Ext.create('Ext.panel.Panel', {
     bodyStyle  : me.htmlBodyStyle,
     cls            : 'htmlView_font',
     border: 0,
     style: 'margin: 20px 20px 20px 20px;'              
    });

При нажатии кнопки происходит следующее

me.outputDataPanel.removeAll(true);
var innerHtml = '';
var Id = "SampleID";
var Name = "SampleName";
var DOB = "SampleDOB";
var Gender = "SampleGender";
var patientHeader = '<!DOCTYPE html><html><head><title>My Report</title></head><body>'+
                    '<table><tr><td style="font-size: 31pt; vertical-align: middle; width: 100%; padding-left:5px;">Report</td></tr></table><br/><br/>'+
                    '<table class="table_base" style="padding-left:9px;"><tr><td class="report_m1">ID</td><td class="report_m2">'+Id+'</td></tr>'+
                    '<tr><td class="report_m1">Name</td><td class="report_m2">'+Name+'</td></tr>'+
                    '<tr><td class="report_m1">Date of Birth</td><td class="report_m2">'+DOB+'</td></tr>'+
                    '<tr><td class="report_m1">Sex</td><td class="report_m2">'+Gender+'</td></tr></table><br/><br/>'+
                    '<div id="noteText" style="padding-left:9px;">(Note) This PSD include some errors resulting from differences in the paient\'s actual size and position compared with the model.</div>'; 
innerHtml+=patientHeader;   
innerHtml+='</body></html>';
me.outputDataPanel.add({
        bodyStyle: 'overflow-x:hidden; overflow-y:auto',
        style: 'border:1px solid #b7bcc4;',
        height: "100%",
        //html : '<p>test 123</p>'
        html: '<iframe id="frameReportPanel" name="frameReportPanelName" style="width:100%; height:100%;" align="middle" isShow="true" name="frame" scrolling="no" frameborder=0 srcdoc="'+innerHtml+'"></iframe>'
});

Не понял, что именно идет не так. Пожалуйста помоги!

Источник

3 ответа

ИМО, вам не обязательно использовать iFrame. Вы можете просто использовать контейнер и для обновления HTML-кода на контейнере вы просто должны использовать update функция. Вы можете посмотреть документацию здесь.

Однако, если вы хотите загрузить внешнюю веб-страницу / удаленный контент, вы можете использовать loader свойство компонента / контейнера. Вы можете найти документы здесь.

Источник

Вы не правильно экранируете содержимое вашего srcdoc приписывать. Поскольку вы заключаете его в двойные кавычки, любые двойные кавычки в HTML должны быть экранированы.

innerHtml.replace(/"/g, "&quot;")
Источник

Вы смотрели на Ext.ux.IFrame? Это настоящий компонент Ext JS, поэтому он может сделать вашу жизнь проще.

Источник
Другие вопросы по тегам