Ext+XML实现数据载入

最新推荐文章于 2013-11-14 16:17:03 发布
最新推荐文章于 2013-11-14 16:17:03 发布
阅读量944 收藏
点赞数
文章标签： xml ext stylesheet encoding function xhtml

 

 

这里实现的效果的从XML文件中把数据动态的载入到表单中！其实这部分在和data部分一起将比较好，但因为这里也比较容易，涉及到的配置也不多！
Form 表单的Action.load方法的应用，由于前面有详细的讲解Action方法是应用，所以这里不用多讲，为了简单明了，这里只设置俩个配置选项，URL 和 waitMsg,
读取数据部分主要涉及到 Ext.data.XmlReader，即xml数据读取器，record表示数据记录所在的标签名，记住这是指特定的一条记录，不过我这里这里只有一条记录！
fields指记录的字段，其中name表示表单中的字段，mapping表示对应的xml文件中对于的标签名，如果又多层标签嵌套就用‘/’分割各标签间的值，比如表单字段mobil对应xml中的phone标签下的mobil，所以就可以写成mapping:'phone/mobil'

具体的看下面代码
form_xml.html

Java代码 复制代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2. <html>   
  3.     <head>   
  4.         <title>form_xml.html</title>   
  5.         <style type="text/css">     
  6.             body{background-color:#777777}    
  7.             #form-xml{width: 350px;margin-left: auto;margin-right:auto;}    
  8.         </style>     
  9.         <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />   
  10.         <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>   
  11.         <script type="text/javascript" src="../Ext/ext-all.js"></script>   
  12.         <script type="text/javascript" src="form_xml.js"></script>   
  13.     </head>   
  14.     <body>   
  15.             <div id="form-xml"></div>   
  16.     </body>   
  17. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>form_xml.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-xml{width: 350px;margin-left: auto;margin-right:auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="form_xml.js"></script>
	</head>
	<body>
			<div id="form-xml"></div>
	</body>
</html>


form_xml.xml

Java代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <message>   
  3. <contact>   
  4.     <name>LoveBeyond1993</name>   
  5.     <work>WEB Designer</work>   
  6.     <email>you_5214@sina.com</email>   
  7.     <phone>   
  8.         <mobil>15959******</mobil>   
  9.         <home>0792-7604***</home>   
  10.     </phone>   
  11.     <content>EXT实现对XML数据的加载，这里是加载的信息内容</content>   
  12. </contact>   
  13. </message>  
<?xml version="1.0" encoding="UTF-8"?>
<message>
<contact>
    <name>LoveBeyond1993</name>
    <work>WEB Designer</work>
    <email>you_5214@sina.com</email>
    <phone>
    	<mobil>15959******</mobil>
    	<home>0792-7604***</home>
    </phone>
    <content>EXT实现对XML数据的加载，这里是加载的信息内容</content>
</contact>
</message>



form_xml.js

Java代码 复制代码  收藏代码
  1. Ext.onReady(function(){   
  2.     var panel = new Ext.form.FormPanel({   
  3.         width:350,   
  4.         height:320,   
  5.         animCollapse :true,   
  6.         title:'Form中载入XML数据',   
  7.         renderTo : 'form-xml',   
  8.         frame:true,   
  9.         collapsible :true,   
  10.         waitMsgTarget: true,   
  11.         reader :new Ext.data.XmlReader({   
  12.         record : 'contact',   
  13.         fields:[   
  14.           'name',   
  15.           'work',   
  16.           'email',   
  17.           {name: 'mobil',mapping:'phone/mobil'},   
  18.           {name: 'home',mapping:'phone/home'},   
  19.           'content'  
  20.             ]   
  21.     }),   
  22.         items:[{   
  23.             xtype:'fieldset',   
  24.             title:'载入XML数据',   
  25.             defaultType: 'textfield',   
  26.             autoHeight:true,   
  27.             items:[{   
  28.                 fieldLabel:'UserName',   
  29.                 name:'name',   
  30.                 anchor : '97%'  
  31.             },{   
  32.                 fieldLabel:'Work',   
  33.                 name:'work',   
  34.                 anchor : '97%'  
  35.             },{   
  36.                 fieldLabel:'E-mail',   
  37.                 name:'email',   
  38.                 anchor : '97%'  
  39.             },{   
  40.                 fieldLabel:'Mobil',   
  41.                 name:'mobil',   
  42.                 anchor : '97%'  
  43.             },{   
  44.                 fieldLabel:'Home_phone',   
  45.                 name:'home',   
  46.                 anchor : '97%'  
  47.             },{   
  48.                 xtype : 'textarea',   
  49.                 fieldLabel:'Content',   
  50.                 name:'content',   
  51.                 anchor : '97%'  
  52.             }]   
  53.         }],   
  54.         buttons:[{   
  55.             text:'加载',   
  56.             handler:function(){   
  57.                 panel.getForm().load({   
  58.                     url:'form_xml.xml',    
  59.                     waitMsg:'数据加载中.....'  
  60.                 })   
  61.             }   
  62.         },{   
  63.             text:'重置',   
  64.             handler:function(){   
  65.                 panel.form.reset();   
  66.             }   
  67.         }]   
  68.     })   
  69. })  
  72. http://www.iteye.com/topic/443113

 

freellf
关注
Ubuntu使用darknet实现YOLOv4-tiny预训练模型测试+训练自己的数据集+评估自己的模型
Xavier的博客
12-27 6412
文章目录1.编译darknet2.训练3.测试 YOLOv4-tiny的原理本文暂时不讲，只有应用 1.编译darknet 1.在GitHub网址https://github.com/AlexeyAB/darknet下载最新版的darknetAB源码 参考博客：Yolo v4系列学习（五）Yolov4-tiny ./darknet detector test ./cfg/coco.data cfg/yolov4-tiny.cfg yolov4-tiny.weights data/dog.jpg # 图片测试
ext动态获取Xml数据并解析信息
06-27
ext动态获取Xml数据并解析信息
ext读取xml内容
tancaiyi的专栏
01-08 3022
这里是一个老例子哈建立一个xml文件：plants.xml      Bloodroot    Sanguinaria canadensis    4    Mostly Shady    2.44    03/15/2006    true        Columbine    Aquilegia canadensis    3    Mostly Shady    9.37    0
ext解析XML
hwq1987的专栏
02-10 1567
<br />Ext.onReady(function(){                  //alert();                  var store = new Ext.data.Store({                      url: 'hello.xml',                      reader: new Ext.data.XmlReader({                          record: 'country'             
ext 成功解析xml
hwq1987的专栏
02-10 961
<br /><br /><script type="text/javascript"><br /><br />　　Ext.onReady(function(){<br /> <br />　　　　var store=new Ext.data.Store({　　　　　<br />　　　　　　url:'GridData.xml',<br />　　　　　　reader:new Ext.data.XmlReader(<br />　　　　　　　　{record:'Item'},　　　　　　　　<br />　　　　　　　
EXT读取XML数据
weixin_30610755的博客
09-09 110
先来个数据 1<?xmlversion="1.0"encoding="utf-8"?>2<items>3<item>4<id>1</id>5<name>DaiXiaosheng</name>6<sex>men</sex&g...
Spring+Hibernate+Ext+dwr增删改查
01-06
Spring+Hibernate+Ext+dwr做的一个简单的grid的增删改查，面板布局， 通过autoload方式载入grid ，以及XML树的建立 ，连接MySql数据库 。JS文件代码在Demo文件夹下，JAVA代码在src下。适合新手
extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据
04-16
动态加载本地数据到`Ext.Panel`通常涉及到异步请求，使用`Ajax`或`Store`的`load`方法，通过URL获取JSON或XML格式的数据，并将其渲染到面板内。 例如： ```javascript var panel = Ext.create('Ext.Panel', { ...
R语言XML包数据导入导出最佳实践：提升工作效率的秘诀
![R语言XML包数据导入导出最佳实践：提升工作效率的秘诀]...而在处理结构化数据时，XML格式因其层次性、自我描述性和可扩展性，成为了一种非常普遍的数据交换格式。结合R语言和XML包，用户可以轻松地对XML
Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample
12-30
5. **Ext.Store**: 数据存储对象，与后台进行数据交换，支持JSON、XML等多种数据格式。 6. **Ext.data.Model**: 定义数据模型，描述数据字段及验证规则。 7. **Ext.data.Proxy**: 数据代理，处理与服务器的数据交互...
ext js解析xml文档
02-10
Extjs解析xml问题 Ext.onReady(function(){ 　　　　 　　　　var store=new Ext.data.Store({　　　　　 　　　　　　url:'GridData.xml', 　　　　　　reader:new Ext.data.XmlReader( 　　　　　　　　{record:'Item'},　　　　　　　　 　　　　　　　　["ASIN","Author","Manufacturer","ProductGroup","Title"]) 　　　　});
Ext解析XML实例
12-19
Ext解析XML实例
ext xml格式的小例子
fbliklz的专栏
03-26 125
1.XML格式 a）hello.xml &lt;dataset&gt; ??&lt;row&gt; ????&lt;id&gt;1&lt;/id&gt; ????&lt;name&gt;EasyJWeb&lt;/name&gt; ????&lt;organization&gt;EasyJF&lt;/organization&gt; ????&lt;hom
ext 解释XML
dwj520的专栏
12-21 611
function formetSex(value,meta,record,rowIndex,colIndex,store){// alert("[" + rowIndex + "," + colIndex + "]");// alert(record.data.name); return value=="0"?"男":"女";}Ext.onReady(function(){  var fields
EXT--书写动态生成的xml(兼容Firefox)
开发者博客
11-14 118
function getXml() { //获取输入值 var name = textName.getValue(); var pwd = textPwd.getValue(); //初始化对象 var xmlDoc = document.implementation.createDocument("", "", null); xmlDoc....
extjs之-读取xml
一室阳光，温暖你我他！
06-23 2858
请求我们可以暂分为两种：一种是表单Form的请求提交，一种是AJAX的请求。 我们现在对这两种请求的返回结果进行读取。 在后台用我们自定义的XML格式。 然后写个JS对XML进行读取。 1：对AJAX请求返回的xml读取 var AjaxRead = {};   AjaxRead = function (doc){ this.xmlData = doc; var root = doc.docume
页面ext与xml
fancyyesnot的专栏
09-27 77
// 根据xml创建dom对象 function loadXMLString(xmlString) { var xmlDoc = null; try { var parser = new DOMParser(); xmlDoc = parser.parseFromString(xmlString, "text/xml"); } catch (e) { ...
用Ext读取两种结构的xml方法
人生能有多少个十年！
06-24 110
第一种结构： 软件1 1.gif 控件2 2.gif 这一种比较常见 网上很多例子都是这种格式，我也写一下主要代码 [co...
ExtJs加载本地xml格式的数据
wjt276的专栏
12-12 169
&lt;script type="text/javascript" src="ext/XmlTreeLoader.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="xml-tree-loader.js"&gt;&lt;/script&gt;   /** * 动态加载本地xml格
SSH+EXT整合实现CRUD操作指南
在SSH+EXT整合中，Hibernate负责数据的持久化，包括实体类的定义、映射文件的配置以及DAO（数据访问对象）的实现。 2. Spring：Spring框架是Java企业级应用的核心，提供了依赖注入（DI）、AOP（面向切面编程）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值