Ext中如何展现复杂的xml文件
需求就是如何将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;}
局部效果图:
http://dl.iteye.com/upload/attachment/156325/cdb0142a-4122-346a-a46c-ca244d600eb9.gif
页:
[1]