Ext中如何展现复杂的xml文件

herry

需求就是如何将xml文件能够界面美观的展现出来？
其实有几种的解决方式:
1.通过xml+xslt的方式
  1.1 服务器端生成html文件
      这个可能产生的数据量较大
  1.2 将xslt的处理指令嵌入到xml文件中，然后通过浏览器去解析
     <?xml-stylesheet type="text/xsl" href="../xslt/sourceInfo.xslt"?>
     可以通过第三方的扩展组件 Ext.ux.ManagedIFramehttp://extjs.net/forum/showthread.php?t=71961来显示xml文件
     但是这种方式存在两个问题:
   A:如果xml文件是动态的，想对xml文件进行相关的操作，且用到Ext相关的方法，那么每次都得加载Ext相关的几个js文件，这显然是难以容忍的。
   B:在IE6下，还偶尔出现IE cannot open internet site的错误(可能的原因是在document还没加载完就往dom中写innerHTML，我碰到的即使是加载css文件也会出现这样的问题)

2.通过Ext的XTemplate
  示例如下:
  xml文件SourceInfo.xml:
<TaskSourceInfo RunTimeInSecond="4294967295" Reserve="0" ReserveString=""><VideoFileInfo><SourceElement Index="0" IfClosed="1" FinishFileSeriesNo="1" TrimIn="0" TrimOut="0" Duration="0" IsSingleFrame="0" IsNull="0" LoopTimes="1" StartTimeCode="4294967295" StreamMediaType="1" StreamMediaSubType="0" IsIncludeVideo="true" IsIncludeAudio="false"><FileInfo SystemID="GlobalEMBCache" StorageID="EMBDisk1Storage1" IsFTPFileType="0" FilePath="Local\E:\Diary" FileName="Src-V_BD97029B-6B80-4AFF-9B9A-63C75E43BEA4.avi" FileSize="0" PathID="" PhysicalStatus="1" FileLength="0"><FTPServerInfo Type="0" IP="100.0.0.2" Port="21" Username="guest" Password="dayang"/><DualPathInfo SystemID="" StorageID="" IsFTPFileType="0" FilePath="" FileName="" PathID="" PhysicalStatus="0"/></FileInfo><VideoMediaInfo Width="720" Height="576" StandardRate="25" StandardScale="1" ScanMode="0" ChromaFormat="512" VideoType="4" VideoSubType="0" DataRateInBitsPerSec="50000000" IsConstantRate="1" GOPSize="1" ReferencePeriod="1" IsY16_235="1"/><AudioMediaInfo AudioType="1" AudioSubType="0" Channels="1" BitsPerSample="16" SamplesPerSec="48000" AvgBitsPerSec="768000" BlockAlign="2"/><MD5 InputValue="" RightValue="" VerifyResult="0"/></SourceElement></VideoFileInfo><AudioFileInfo><Channel Index="0"><SourceElement Index="0" IfClosed="1" FinishFileSeriesNo="1" TrimIn="0" TrimOut="481728" Duration="481728" IsSingleFrame="0" IsNull="0" LoopTimes="1" StartTimeCode="4294967295" StreamMediaType="4" StreamMediaSubType="0" IsIncludeVideo="false" IsIncludeAudio="true"><FileInfo SystemID="GlobalEMBCache" StorageID="EMBDisk1Storage1" IsFTPFileType="0" FilePath="Local\E:\Diary" FileName="Src-A1_72B4EB45-CB91-491B-8FD8-E90C122973FE.wav" FileSize="0" PathID="" PhysicalStatus="1" FileLength="0"><DualPathInfo SystemID="" StorageID="" IsFTPFileType="0" FilePath="" FileName="" PathID="" PhysicalStatus="0"/></FileInfo><VideoMediaInfo Width="720" Height="576" StandardRate="25" StandardScale="1" ScanMode="0" ChromaFormat="1024" VideoType="0" VideoSubType="0" DataRateInBitsPerSec="25000000" IsConstantRate="1" GOPSize="14" ReferencePeriod="2" IsY16_235="1"/><AudioMediaInfo AudioType="1" AudioSubType="0" Channels="1" BitsPerSample="24" SamplesPerSec="48000" AvgBitsPerSec="1152000" BlockAlign="3"/><MD5 InputValue="" RightValue="" VerifyResult="0"/></SourceElement></Channel><Channel Index="1"><SourceElement Index="0" IfClosed="1" FinishFileSeriesNo="1" TrimIn="0" TrimOut="481728" Duration="481728" IsSingleFrame="0" IsNull="0" LoopTimes="1" StartTimeCode="4294967295" StreamMediaType="4" StreamMediaSubType="0" IsIncludeVideo="false" IsIncludeAudio="true"><FileInfo SystemID="GlobalEMBCache" StorageID="EMBDisk1Storage1" IsFTPFileType="0" FilePath="Local\E:\Diary" FileName="Src-A2_2F97422E-B9FE-458A-9CAF-3C6D4A5B5921.wav" FileSize="0" PathID="" PhysicalStatus="1" FileLength="0"><DualPathInfo SystemID="" StorageID="" IsFTPFileType="0" FilePath="" FileName="" PathID="" PhysicalStatus="0"/></FileInfo><VideoMediaInfo Width="720" Height="576" StandardRate="25" StandardScale="1" ScanMode="0" ChromaFormat="1024" VideoType="0" VideoSubType="0" DataRateInBitsPerSec="25000000" IsConstantRate="1" GOPSize="14" ReferencePeriod="2" IsY16_235="1"/><AudioMediaInfo AudioType="1" AudioSubType="0" Channels="1" BitsPerSample="24" SamplesPerSec="48000" AvgBitsPerSec="1152000" BlockAlign="3"/><MD5 InputValue="" RightValue="" VerifyResult="0"/></SourceElement></Channel></AudioFileInfo><DYCFileInfo/></TaskSourceInfo>

Ext相关代码:
<script type="text/javascript">Ext.onReady(function() {var fileInfoTpl = '<div>'+            '<div>'+'<li class="forcollapsed">FileInfo</li>'+'</div>'+'<ul class="xmlul">'+'<table border="0" cellspacing="1" cellpadding="4" align="center" bordercolordark="#6B78A9" bordercolorlight="#6B78A9" bgcolor="#6B78A9" width="98%">'+'<tr>'+'<td align="left" class="td1" colspan="5">'+'<span class="xmlSpan">FileName:</span>{values.data.FileName}'+'</td>'+'</tr>'+'<tr>'+'<td align="left" class="td1">'+'<span class="xmlSpan">SystemID:</span>{values.data.SystemID}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">StorageID:</span>{values.data.StorageID}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">TrimIn:</span>{values.data.TrimIn}'+'</td>'+'<td align="left" class="td1" colspan="2">'+'<span class="xmlSpan">TrimOut:</span>{values.data.TrimOut}'+'</td>'+'</tr>'+'<tr>'+'<td align="left" class="td1" colspan="3">'+'<span class="xmlSpan">PathID:</span>{values.data.PathID}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">PhysicalStatus:</span>{values.data.PhysicalStatus}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">FileLength:</span>{values.data.FileLength}'+'</td>'+'</tr>'+'</table>'+'</ul>'+        '</div>'+'<ul class="xmlul">'+'<div>'+'<div>'+'<li class="forcollapsed">FTPServerInfo</li>'+'</div>'+'</div>'+'<div>'+'<div>'+'<li class="forcollapsed">DualPathInfo</li>'+'</div>'+'</div>'+'</ul>';       var sourceElementTpl = '<div>'+            '<div>'+'<li class="forcollapsed">SourceElement</li>'+'</div>'+'<ul class="xmlul">'+'<table border="0" cellspacing="1" cellpadding="4" align="center" bordercolordark="#6B78A9" bordercolorlight="#6B78A9" bgcolor="#6B78A9" width="98%">'+'<tr>'+'<td align="left" class="td1">'+'<span class="xmlSpan">Index:</span>{values.data.Index}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">IfClosed:</span>{values.data.IfClosed}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">FinishFileSeriesNo:</span>{values.data.FinishFileSeriesNo}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">TrimIn:</span>{values.data.TrimIn}'+'</td>'+'<td align="left" class="td1">'+'<span class="xmlSpan">TrimOut:</span>{values.data.TrimOut}'+'</td>'+'</tr>'+'</table>'+'<ul class="xmlul">'+                '<tpl for="values.data.FileInfo">'+                   fileInfoTpl+                '</tpl>'+                '</ul>'+'</ul>'+        '</div>';  var taskSourceInfoTpl = new Ext.XTemplate(        '<div id="container">',          '<tpl for=".">',                    '<ul class="xmlul">','<div>','<div>','<li class="forcollapsed">VideoFileInfo</li>','</div>','<ul class="xmlul">',                              '<tpl for="values.data.VideoFileInfo">',                                '<tpl for="values.data.SourceElement">'+                                 sourceElementTpl,                                '</tpl>',                              '</tpl>',                            '</ul>','</div>','<div>','<div>','<li class="forcollapsed">AudioFileInfo</li>','</div>','<ul class="xmlul">','<tpl for="values.data.AudioFileInfo">',                                  '<tpl for="values.data.Channel">',                                    '<div>',                                        '<div>','<li class="forcollapsed">Channel_{values.data.Index}','</li>','</div>','<ul class="xmlul">',                                             '<tpl for="values.data.SourceElement">'+                                               sourceElementTpl,                                             '</tpl>','</ul>',                                    '</div>',                                  '</tpl>',                                '</tpl>','</ul>','</div>','</ul>',          '</tpl>',       '</div>');    var ftpServerInfoReader = new Ext.data.XmlReader({        record:'FTPServerInfo',        fields: [        {name:'Type',mapping:'@Type'},        {name:'IP',mapping:'@IP'},        {name:'Port',mapping:'@Port'},        {name:'Username',mapping:'@Username'},        {name:'Password',mapping:'@Password'}]});    var dualPathInfoReader = new Ext.data.XmlReader({        record:'DualPathInfo',        fields: [        {name:'SystemID',mapping:'@SystemID'},        {name:'StorageID',mapping:'@StorageID'},        {name:'IsFTPFileType',mapping:'@IsFTPFileType'},        {name:'FilePath',mapping:'@FilePath'},        {name:'FileName',mapping:'@FileName'},        {name:'PathID',mapping:'@PathID'},        {name:'PhysicalStatus',mapping:'@PhysicalStatus'}                ]});    var fileInfoReader = new Ext.data.XmlReader({        record:'FileInfo',        fields: [        {name:'SystemID',mapping:'@SystemID'},        {name:'StorageID',mapping:'@StorageID'},        {name:'IsFTPFileType',mapping:'@IsFTPFileType'},        {name:'FilePath',mapping:'@FilePath'},        {name:'FileName',mapping:'@FileName'},        {name:'FileSize',mapping:'@FileSize'},        {name:'PathID',mapping:'@PathID'},        {name:'PhysicalStatus',mapping:'@PhysicalStatus'},        {name:'FileLength',mapping:'@FileLength'},        {name:'FTPServerInfo',convert:function(v, n) {            return ftpServerInfoReader.readRecords(n).records;        }},        {name:'DualPathInfo',convert:function(v, n) {            return dualPathInfoReader.readRecords(n).records;        }}                ]    });    var sourceElementReader = new Ext.data.XmlReader({        record:'SourceElement',        fields: [        {name:'Index',mapping:'@Index'},        {name:'IfClosed',mapping:'@IfClosed'},        {name:'TrimIn',mapping:'@TrimIn'},        {name:'TrimOut',mapping:'@TrimOut'},        {name:'FinishFileSeriesNo', mapping:'@FinishFileSeriesNo'},        {name:'FileInfo',convert:function(v, doc) {            return fileInfoReader.readRecords(doc).records;        }},        {name:'VideoMediaInfo',mapping:'@VideoMediaInfo'},        {name:'AudioMediaInfo',mapping:'@AudioMediaInfo'},        {name:'MD5',mapping:'MD5'}                ]    });    var channelReader = new Ext.data.XmlReader({        record:'Channel',        fields: [        {name:'Index',mapping:'@Index'},        {name:'SourceElement',convert:function(v, n) {            return sourceElementReader.readRecords(n).records;        }}]    });    var videoFileInfoReader = new Ext.data.XmlReader({        record:'VideoFileInfo',        fields: [        {name:'SourceElement',convert:function(v, n) {            return sourceElementReader.readRecords(n).records;        }}                ]    });    var audioFileInfoReader = new Ext.data.XmlReader({        record:'AudioFileInfo',        fields: [        {name:'Channel',convert:function(v, n) {            return channelReader.readRecords(n).records;        }}                ]    });    taskSourceInfoReader = new Ext.data.XmlReader({        record:'/',//document element        id:'@RunTimeInSecond',        fields: [        {name:'RunTimeInSecond',mapping:'@RunTimeInSecond'},        {name:'Reserve',mapping:'@Reserve'},        {name:'AudioFileInfo',convert:function(v, doc) {            return audioFileInfoReader.readRecords(doc).records;        }},        {name:'VideoFileInfo',convert:function(v, doc) {            return videoFileInfoReader.readRecords(doc).records;        }}                ]    });store = new Ext.data.Store({    url:'SourceInfo.xml',    reader: taskSourceInfoReader    });store.load({    callback: function() {        taskSourceInfoTpl.overwrite(Ext.getBody(), store.getRange());        var collapsedLi = Ext.query(".forcollapsed");          Ext.each(collapsedLi, function(item, index) {              new Ext.Element(item).on(                      "click",                      handleClick   // reference to the action handler                      );          })    }});});function handleClick(eo, t) {    //eo.preventDefault();    var targetEl = new Ext.Element(eo.getTarget());    targetEl.toggleClass('collapsedImg');    targetEl.up('div').up('div').toggleClass('collapsed');}</script>
css相关:
td.td1 {    padding: 0 0 0 5px;    background-color: #FFFFFE /*edefee*/}.xmlul {    margin: 5px;    padding: 0;    list-style-image: url( 'group-collapse.gif' );    margin-left: 15px;}.xmlbody{  font-size:15px;  font-family:Times New Roman,arial,helvetica,sans-serif;}.xmlSpan {    font-style: inherit;    font-weight: bold;}#container .collapsedImg {    list-style-image: url( 'group-expand.gif' );}#container .collapsed ul {    display: none !important;}.forcollapsed {    cursor: pointer;}
局部效果图: