`

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

    博客分类：
  • Ext
EXTXMLCSSIEXSL 
阅读更多
需求就是如何将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;
}

局部效果图:

  • 大小: 27.3 KB
分享到：
| Ext中Grid加载数据完成后自动选择第一行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext 读取xml 可编辑grid

    在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...

    Ext2.2-用XML做数据源,可编辑Grid的例子.rar

    在本例子中，我们看到Grid被用来展示XML文件中的数据。XML是一种结构化数据存储格式，常用于交换和存储数据，因为它具有良好的可读性和易于解析的特性。 首先，我们需要理解如何将XML数据绑定到Grid中。这通常涉及...

    Ext解析XML实例

    该函数递归地遍历XML文档中的每个节点，并将其转换为`TreeNode`对象。如果当前节点没有子节点，则设置`leaf`属性为`true`，表示这是一个叶子节点。此外，还会检查是否为空文本节点，如果是，则直接返回`null`以忽略...

    xml-apis-ext.jar

    xml-apis-ext.jar,hightcharts导出图片是解决乱码需要用到的一个包

    解析Xml构建Ext树形菜单

    1. **解析XML**：EXT提供了一个名为`Ext.data.XmlReader`的类，用于从XML文档中读取数据。你需要定义reader的配置，包括XML的根节点和数据节点的标识符。例如，如果XML的根节点是`menu`，节点是`item`，配置可能如下...

    ext中文帮助文档最终版

    3. **数据绑定**：EXT支持数据绑定，这意味着你可以将组件与数据源（如JSON对象或XML文件）关联，当数据改变时，界面会自动更新，反之亦然。 4. **表格和网格**：EXT 2.0中的GridPanel组件提供了高度可定制的表格...

    EXT3.0中文API文档

    EXT3.0中文API文档是针对EXT JavaScript库的版本3.0所编写的详细参考资料，主要面向前端开发者，...在实际开发中，结合这个文档和解压后的index.html文件，开发者可以轻松地查阅和学习EXT3.0的相关知识，提升开发效率。

    ext动态获取Xml数据并解析信息

    以上代码构建了一个包含多个字段的XML文档，每个字段对应XML文档中的一个元素。 3. **输出XML数据**： ```java PrintWriter out; try { out = ServletActionContext.getResponse().getWriter(); out.print...

    ext2.2中文帮助文档

    "Ext2.2API中文版（最终完成版）.CHM"是一个Windows帮助文件，采用Microsoft的CHM（Compiled Help Manual）格式，这种格式将所有帮助文档压缩在一个文件中，便于快速检索和查看。开发者可以通过这个CHM文件迅速查找...

    ext js解析xml文档

    Extjs解析xml问题 Ext.onReady(function(){ 　 　var store=new Ext.data.Store({　 　url:'GridData.xml', 　reader:new Ext.data.XmlReader( 　{record:'Item'},　 　["ASIN","Author","Manufacturer","Product...

    Ext 2.3中文文档-API

    8. **国际化支持**：EXT支持多语言环境，文档中会有相应的API介绍，帮助开发者实现应用的国际化。 9. **拖放功能**：EXT的Drag & Drop API允许用户将元素拖放到其他位置，增强了用户体验。 10. **工具提示和提示框...

    Ext.data.Store 读取XML属性值

    url: 'data.xml' // XML文件路径或URL } }); ``` 在上述代码中，`reader`配置指定了使用`xml`类型，这意味着数据将被解析为XML。`record`属性告诉阅读器哪个XML节点代表一个数据记录。如果XML文档的结构是： ```...

    EXT JS 3.0 中文版文档

    在“docs”目录下的文件，很可能是EXT JS 3.0 的HTML版文档，包含了详细的API参考、示例代码和教程。通过阅读这些文档，开发者可以学习如何初始化组件、配置属性、监听事件、处理数据、以及如何与其他EXT JS 功能...

    Ext.3.0.中文文档

    在Ext.3.0中文参考文档中，你可以找到关于以下核心知识点的详细说明： 1. **组件系统**：了解Ext JS的组件是如何组织和相互作用的，包括容器（Container）和组件（Component）的概念，以及如何通过布局（Layout）...

    在ext中使用fusionChart时文件

    FusionCharts通过解析XML或JSON数据来生成图表，这里的XML文件提供了柱状图所需的数据。 - **uxchart.js, uxflash.js, uxfusion.js, uxmedia.js**：这些都是EXT的扩展（UX）组件，它们为EXT提供了对FusionCharts的...

    Ext 3.0 - 中文API文档

    在中文API CHM帮助文档中，开发者可以找到以下内容： - **类库参考**：详细介绍了每个类的构造函数、属性、方法、事件和配置选项，是开发过程中不可或缺的工具。 - **API索引**：按字母顺序排列的所有类和接口，...

    ext 中文源代码

    在提供的“ext2中文文档新春版”中，很可能是EXT2版本的相关文档，EXT2是EXT的一个早期版本，可能包含了详细的API文档、教程和示例代码，帮助开发者理解EXT的基本用法和内部机制。通过阅读这些文档，开发者可以了解...

    Ext-2.1 Ext 2全文档

    下面我们将详细探讨Ext 2.1中的关键知识点。 首先，Ext JS的核心是组件化。在Ext 2.1中，一切皆为组件。组件可以是简单的按钮、表格，也可以是复杂的树视图或者图表。每个组件都有自己的属性、方法和事件，这使得...

    Ext 3.0 中文文档.zip

    六、Tree：Tree组件用于展现层次结构的数据，例如文件系统或组织结构。Ext 3.0的Tree支持拖放操作、节点展开/折叠以及异步加载。通过配置，开发者可以定制节点的图标、文本和行为，也可以添加右键菜单和搜索功能。 ...

    ext 3.3 中文 chm

    EXT 3.3 中包含了许多关键组件和功能，如表格、树形视图、图表、菜单、按钮、表单元素等，这些组件可以用来创建复杂的用户界面。EXT 3.3 提供了高度可定制化和丰富的API，使得开发者可以根据需求调整组件的样式和...

Magicbox
Global site tag (gtag.js) - Google Analytics