`
lingyibin
  • 浏览: 197876 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Extjs复习笔记(十四)-- XmlReader

阅读更多

读取XML文件来构造grid

先了解一个函数:Ext.data.XmlReaderObject metaObject 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>

 

 

 getCmpString 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解释:
overwriteMixed elObject/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:
  • HTMLElement/Ext.Element
    The new node or Element

 

  • 大小: 26.2 KB
0
0
分享到:
评论

相关推荐

    Extjs复习笔记(十九)-- XML作为tree的数据源

    在ExtJS中,我们可以利用XMLReader来解析XML文档,将XML节点转化为可以用于TreePanel的模型对象。XMLReader是Ext.data.reader.Reader的子类,它提供了处理XML数据的专门方法和配置选项。 创建XML数据源的第一步是...

    手撕源码C++哈希表实现:从底层原理到性能优化,看完面试官都怕你!(文末附源码)

    哈希表源码

    sun_3ck_03_0119.pdf

    sun_3ck_03_0119

    MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测(含模型描述及示例代码)

    内容概要:本文档详细介绍了基于 MATLAB 实现的 LSTM-AdaBoost 时间序列预测模型,涵盖项目背景、目标、挑战、特点、应用领域以及模型架构和代码示例。随着大数据和AI的发展,时间序列预测变得至关重要。传统方法如 ARIMA 在复杂非线性序列中表现欠佳,因此引入了 LSTM 来捕捉长期依赖性。但 LSTM 存在易陷局部最优、对噪声鲁棒性差的问题,故加入 AdaBoost 提高模型准确性和鲁棒性。两者结合能更好应对非线性和长期依赖的数据,提供更稳定的预测。项目还展示了如何在 MATLAB 中具体实现模型的各个环节。 适用人群:对时间序列预测感兴趣的开发者、研究人员及学生,特别是有一定 MATLAB 编程经验和熟悉深度学习或机器学习基础知识的人群。 使用场景及目标:①适用于金融市场价格预测、气象预报、工业生产故障检测等多种需要时间序列分析的场合;②帮助使用者理解并掌握将LSTM与AdaBoost结合的实现细节及其在提高预测精度和抗噪方面的优势。 其他说明:尽管该模型有诸多优点,但仍存在训练时间长、计算成本高等挑战。文中提及通过优化数据预处理、调整超参数等方式改进性能。同时给出了完整的MATLAB代码实现,便于学习与复现。

    免费1996-2019年各地级市平均工资数据

    1996-2019年各地级市平均工资数据 1、时间:1996-2019年 2、来源:城市nj、各地级市统计j 3、指标:平均工资(在岗职工) 4、范围:295个地级市

    [AB PLC例程源码][MMS_040384]Winder Application.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    C2Former: 解决RGB-红外物体检测中模态校准与融合不精确问题的标定互补变压器

    内容概要:本文介绍了一种新颖的变压器模型C2Former(Calibrated and Complementary Transformer),专门用于解决RGB图像和红外图像之间的物体检测难题。传统方法在进行多模态融合时面临两个主要问题——模态错位(Modality miscalibration)和融合不准确(fusion imprecision)。作者针对这两个问题提出采用互模交叉注意力模块(Inter-modality Cross-Attention, ICA)以及自适应特征采样模块(Adaptive Feature Sampling, AFS)来改善。具体来说,ICA可以获取对齐并且互补的特性,在特征层面进行更好的整合;而AFS则减少了计算成本。通过实验验证了基于C2Former的一阶段和二阶段检测器均能在现有公开数据集上达到最先进的表现。 适合人群:计算机视觉领域的研究人员和技术人员,特别是从事跨模态目标检测的研究人员,对Transformer架构有一定了解的开发者。 使用场景及目标:适用于需要将可见光和热成像传感器相结合的应用场合,例如全天候的视频监控系统、无人驾驶汽车、无人

    上海人工智能实验室:金融大模型应用评测报告-摘要版2024.pdf

    上海人工智能实验室:金融大模型应用评测报告-摘要版2024.pdf

    malpass_02_0907.pdf

    malpass_02_0907

    C++-自制学习辅助工具

    C++-自制学习辅助工具

    微信生态系统开发指南:涵盖机器人、小程序及公众号的技术资源整合

    内容概要:本文提供了有关微信生态系统的综合开发指导,具体涵盖了微信机器人的Java与Python开发、全套及特定应用的小程序源码(PHP后台、DeepSeek集成),以及微信公众号的基础开发与智能集成方法。文中不仅给出了各种应用的具体案例和技术要点如图灵API对接、DeepSeek大模型接入等的简述,还指出了相关资源链接以便深度探究或直接获取源码进行开发。 适合人群:有意开发微信应用程序或提升相应技能的技术爱好者和专业人士。不论是初涉者寻求基本理解和操作流程,还是进阶者期望利用提供的资源进行项目构建或是研究。 使用场景及目标:开发者能够根据自身兴趣选择不同方向深入学习微信平台的应用创建,如社交自动化(机器人)、移动互联网服务交付(小程序),或者公众信息服务(公众号)。特别是想要尝试引入AI能力到应用中的人士,文中介绍的内容非常有价值。 其他说明:文中提及的多个项目都涉及到了最新技术栈(如DeepSeek大模型),并且为不同层次的学习者提供从零开始的详细资料。对于那些想要迅速获得成果同时深入了解背后原理的人来说是个很好的起点。

    pimpinella_3cd_01_0916.pdf

    pimpinella_3cd_01_0916

    mellitz_3cd_01_0516.pdf

    mellitz_3cd_01_0516

    schube_3cd_01_0118.pdf

    schube_3cd_01_0118

    [AB PLC例程源码][MMS_046683]ME Faceplates for 1738 Digital and Analog I-O with Descriptions.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_040371]Communication between CompactLogix Controllers on DeviceNet.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_046507]SE Faceplates for 1797 Digital and Analog I-O.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    智慧用电平台建设解决方案【28页】.pptx

    智慧用电平台建设解决方案【28页】

    lusted_3ck_01_0519.pdf

    lusted_3ck_01_0519

    HCIP作业1 这里面是完成的ensp的拓扑图

    HCIP作业1 这里面是完成的ensp的拓扑图

Global site tag (gtag.js) - Google Analytics