CODEWITHSUNDEEP
htmliframeextjsiframe-appframeset-iframe
Stu
Stu

Reputation: 157

Put an HTML <iframe> into Ext.panel.Panel

I am trying to put an into an ExtJS panel using html config. I have dynamically created which I need to put in this iFrame.

Upon execution, an HTML is getting created under the iFrame but the body appears as empty. no Errors. Following is my ExtJS Panel code

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

On click of a button following happens

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

Didn't understand what exactly is going wrong. Please help!

Upvotes: 1

Views: 2575

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92324

You are not correctly escaping the contents of your srcdoc attribute. Since you are quoting it with double quotes, any double quotes in the HTML must be escaped.

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

Upvotes: 0

Dumbledore
Dumbledore

Reputation: 460

IMO, you don't really have to use an iFrame. You could just use a container and to update the html on a container you just have to use the update function. You can look at the documentation here.

However, if you want to load an external web page/remote content, you might want to use loader property of the component/container. You can find the docs here.

Upvotes: 0

arthurakay
arthurakay

Reputation: 5651

Have you looked at Ext.ux.IFrame? It's a true Ext JS component, so it may just make your life easier.

Upvotes: 0

Related Questions