Extjs复习笔记（十四）-- XmlReader

最新推荐文章于 2016-12-29 16:38:06 发布

最新推荐文章于 2016-12-29 16:38:06 发布 · 190 阅读

文章标签：

#EXT #CSS #XML #JavaScript #Tomcat #ViewUI

Extjs等js的Ajax框架专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用ExtJS中的XmlReader从XML文件读取数据并填充到GridPanel中。通过详细示例展示了如何配置Store、定义字段映射及实现基本的用户交互。

读取XML文件来构造grid

先了解一个函数：Ext.data.XmlReader( Object meta, Object recordType )

API文档解释：

Data reader class to create an Array of Ext.data.Record objects from an XML document based on mappings in a provided Ext.data.Record constructor.

Note: that in order for the browser to parse a returned XML document, the Content-Type header in the HTTP response must be set to "text/xml" or "application/xml".

Create a new XmlReader.

Parameters:

meta : Object
Metadata configuration options
recordType : Object
Either an Array of field definition objects as passed to Ext.data.Record.create, or a Record constructor object created using Ext.data.Record.create.

Returns:

void

给一个例子：

var Employee = Ext.data.Record.create([
   {name: 'name', mapping: 'name'},     // 同名就可以不写"mapping" ，甚至可以简单到只有'name'
   {name: 'occupation'}                 // 同名
]);
var myReader = new Ext.data.XmlReader({
   totalProperty: "results", // The element which contains the total dataset size (optional)
   record: "row",           // The repeated element which contains row information
   idProperty: "id"         // The element within the row that provides an ID for the record (optional)
   messageProperty: "msg"   // The element within the response that provides a user-feedback message (optional)
}, Employee); //两个参数，第一个指定一些重要的参数，如record，totalProperty等

XML文件

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 <results>2</results>
 <row>
   <id>1</id>
   <name>Bill</name>
   <occupation>Gardener</occupation>
 </row>
 <row>
   <id>2</id>
   <name>Ben</name>
   <occupation>Horticulturalist</occupation>
 </row>
</dataset>

有一点需要说明的是 XmlReader似乎得在服务器上才能运行。

这里我们可以把整个文件夹拷到tomcat的webapps目录下，然后再用http://localhost:8080/MyExtjsTest/TestGrid/GridXml.html 这样的格式来访问。看一个示例：

做一个grid，我们先分四步走：

1、先定义一个Ext.data.Store对象，用来读取数据

2、创建一个 Ext.grid.GridPanel 对象

3、把上面创建的GridPanel 对象加到某个用来显示的组件中

4、最后，别忘了store.load(); 加载数据

<html>
    <head>
		<title>Data Binding Example</title>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /></script>
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-all.js"></script>
		<style type="text/css">
			body {
				padding: 15px;
			}
			.x-panel-mc {
				font-size: 12px;
				line-height: 18px;
			}
		</style>
        
        <script type="text/javascript">
		  Ext.onReady(function(){
	
			// create the Data Store
			var store = new Ext.data.Store({
				// load using HTTP
				url: 'sheldon2.xml',
		
				// the return will be XML, so lets set up a reader
				reader: new Ext.data.XmlReader({
					   // records will have an "Item" tag
					   record: 'Item',
					   id: 'ASIN',
					   totalRecords: '@total'
				   }, [
					   // set up the fields mapping into the xml doc
					   // The first needs mapping, the others are very basic
					   {name: 'Author', mapping: 'ItemAttributes > Author'}, //ItemAttributes里面的Author
					   'Title',
					   'Manufacturer',
					   'ProductGroup',
					   // Detail URL is not part of the column model of the grid
					   'DetailPageURL'
				   ]) //XmlReader
			}); //Store
		
			// create the grid
			var grid = new Ext.grid.GridPanel({
				store: store,
				columns: [
					{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
					{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
					{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
					{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
				],
				sm: new Ext.grid.RowSelectionModel({singleSelect: true}),//单选
				viewConfig: {
					forceFit: true
				},
				height:210,
				split: true,
				region: 'north'
			});
		
			// define a template to use for the detail view 定义一个模板，之后的章节会讲解模板的使用，这边看不懂也没关系
			var bookTplMarkup = [
				'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
				'Author: {Author}<br/>',
				'Manufacturer: {Manufacturer}<br/>',
				'Product Group: {ProductGroup}<br/>'
			];
			var bookTpl = new Ext.Template(bookTplMarkup);//模板类对象
		
			var ct = new Ext.Panel({
				renderTo: 'gridXmlTest',
				frame: true,
				title: 'Book List',
				width: 540,
				height: 400,
				layout: 'border',
				items: [
					grid,
					{
						id: 'detailPanel',
						region: 'center',
						bodyStyle: {
							background: '#ffffff',
							padding: '7px'
						},
						html: 'Please select a book to see additional details.'
					}
				]
			})//Ext.Panel
			grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) { //行被选中时的事件
				var detailPanel = Ext.getCmp('detailPanel'); //得到id为detailPanel组件,下方有解释
				bookTpl.overwrite(detailPanel.body, r.data); //overwrite方法，下文有解释
			});
			store.load();
		});
      </script>
	</head>
<body>
		<div id="gridXmlTest"></div>
	</body>
</html>

getCmp( String id ) : Ext.Component

This is shorthand reference to Ext.ComponentMgr.get. Looks up an existing Componentby id

Parameters:

id : String
The component id

Returns:

Ext.Component
The Component, <tt>undefined</tt> if not found, or <tt>null</tt> if a Class was found.

上面的overwrite方法其实调用的是 Ext.XTemplate.overwrite

API解释：

overwrite( Mixed el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element

Applies the supplied values to the template and overwrites the content of el with the new node(s).

Parameters:

el : Mixed
The context element
values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
returnElement : Boolean
(optional) true to return a Ext.Element (defaults to undefined)

Returns: