Kapil
Kapil

Reputation: 832

Displaying/Rendering XML in EXTJS

I want to display a XML which will be fetched from backend in a EXT JS panel and window. I tried creating a new window and opening a new window and assigning the document type but it's not getting properly formatted liek it does when we open in IE. Also is there a way I can open it in a EXT JS window instead of a browser window. My XML is dynamic which could be different XML (with different root node) everytime. Here is what I tried so far with no luck

myXmlWindow = window.open('', 'FullView', 'toolbar=no,location=no,scrollbars=yes');
myXmlWindow.document.write("<link rel=\"stylesheet\" href=\"resources/XMLDisplay.css\" type=\"text/css\"><center><table class=\"data\"><tr><th>" + xmlString + "</td></tr></table></center>");

Can anyone help me with this. All I need to do is display XML just like below screen shot in IE

Sample XML viewed in IE

Here is my XML

<?xml version="1.0" encoding="UTF-8" ?>
<Record>
  <SYS_ID>238</SYS_ID>
  <SYS_DSC>This is a test XML</SYS_DSC>
  <GTMU_ID>6</GTMU_ID>
  <LOC_ID>3760</LOC_ID>
  <SLS_UNIT_ID>0090008924</SLS_UNIT_ID>
  <RLTNSHP_TYP_CDV>15</RLTNSHP_TYP_CDV>
  <RLTNSHP_TYP_NM>This is a test XML</RLTNSHP_TYP_NM>
  <RLTNSHP_STRT_DT>1985-12-29T00:00:00-06:00</RLTNSHP_STRT_DT>
  <RLTNSHP_END_DT>9999-12-31T00:00:00-06:00</RLTNSHP_END_DT>
</Record>

If I do below as suggested by Yellen,

var w= window.open('data:text/xml,'+encodeURI(xmlString));

I am getting below error

Error

Upvotes: 0

Views: 2297

Answers (3)

Kapil
Kapil

Reputation: 832

The trick is to enclose your XML in tags something like this

https://fiddle.sencha.com/#fiddle/lo9

Not exactly how I wanted but sort of a workaround

Upvotes: 0

Yellen
Yellen

Reputation: 1780

Try this fiddle - https://fiddle.sencha.com/#fiddle/lld

You can simply call a window.open() with the parameter ('data:text/xml,' + xmlText), you can also pass other window options as you want. This will just open a new tab with the xml content.

xml in chrome -

xml in chrome

Upvotes: 1

Simon Hoss
Simon Hoss

Reputation: 562

Try to use an iframe. ExtJS provides an extension for this with Ext.ux.IFrame you should be able to nest your xml into an Ext.Window.

var xmlText = '<?xml version="1.0" encoding="UTF-8" ?><Employee><Id>22</Id></Employee>';

xmlText = encodeURI(xmlText);

var myWindow = Ext.create("Ext.window.Window", {
    width: 800,
    height: 600,
    layout: "fit",
    items: [Ext.create("Ext.ux.IFrame", {
        src: 'data:text/xml,' + xmlText
    })]
});

myWindow.show();

Upvotes: 1

Related Questions