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

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

2.[color=red]通过Ext的XTemplate[/color]
示例如下:
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;
}

局部效果图:
[img]http://dl.iteye.com/upload/attachment/156325/cdb0142a-4122-346a-a46c-ca244d600eb9.gif[/img]
龚Sir_Me
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值