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

Я пытаюсь поместить в панель ExtJS, используя html config. Я динамически создал, который мне нужно поместить в этот iFrame.Поместите HTML <iframe> в Ext.panel.Panel

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

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

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

источник

2015-10-21 Stu

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

источник

2015-10-21 20:59:23 arthurakay

Это предложение, а не ответ на вопрос. Должен быть комментарий. –

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

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

источник

2015-10-22 13:52:31 Dumbledore

Это тоже не ответ на вопрос. Предложения должны быть комментариями, а не ответами. –

Пожалуйста, исправьте меня, если я ошибаюсь. В своем коде он не использует 'Ext.ux.IFrame'. Это просто панель, вы всегда можете использовать функцию «update» для обновления html. – Dumbledore

Правильно, я почти добавил комментарий, говорящий об этом, но так как это не проблема, я не упоминал об этом –

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

innerHtml.replace(/"/g, "&quot;")

источник

2015-10-22 14:19:42

Привет, Хуан, Извините за поздний ответ, я был в отпуске. Я попробовал то, что вы упомянули. Он выполняется без ошибок, но тело таблицы выглядит пустым. Кажется, оно работает до тех пор, пока данные не будут добавлены динамически. Мне нужно создать динамически созданный HTML в этом, чтобы я мог сделать window.print на этом iFrame. Есть идеи? – Stu

Попробуйте дождаться обработчика onload –

Не работает :(Мне кажется, что если вы пытаетесь поместить HTML в iframe, он должен быть полным как полезный и быть доступным. Необходимо выяснить другой способ сделать это , – Stu

ответ

Смежные вопросы