这里实现的效果的从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
<!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
<?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
Ext.onReady(function(){
var panel = new Ext.form.FormPanel({
width:350,
height:320,
animCollapse :true,
title:'Form中载入XML数据',
renderTo : 'form-xml',
frame:true,
collapsible :true,
waitMsgTarget: true,
reader :new Ext.data.XmlReader({
record : 'contact',
fields:[
'name',
'work',
'email',
{name: 'mobil',mapping:'phone/mobil'},
{name: 'home',mapping:'phone/home'},
'content'
]
}),
items:[{
xtype:'fieldset',
title:'载入XML数据',
defaultType: 'textfield',
autoHeight:true,
items:[{
fieldLabel:'UserName',
name:'name',
anchor : '97%'
},{
fieldLabel:'Work',
name:'work',
anchor : '97%'
},{
fieldLabel:'E-mail',
name:'email',
anchor : '97%'
},{
fieldLabel:'Mobil',
name:'mobil',
anchor : '97%'
},{
fieldLabel:'Home_phone',
name:'home',
anchor : '97%'
},{
xtype : 'textarea',
fieldLabel:'Content',
name:'content',
anchor : '97%'
}]
}],
buttons:[{
text:'加载',
handler:function(){
panel.getForm().load({
url:'form_xml.xml',
waitMsg:'数据加载中.....'
})
}
},{
text:'重置',
handler:function(){
panel.form.reset();
}
}]
})
})
- 大小: 30.8 KB
分享到：
相关推荐
Spring+Hibernate+Ext+dwr做的一个简单的grid的增删改查，面板布局， 通过autoload方式载入grid ，以及XML树的建立 ，连接MySql数据库 。JS文件代码在Demo文件夹下，JAVA代码在src下。适合新手
动态加载本地数据到`Ext.Panel`通常涉及到异步请求，使用`Ajax`或`Store`的`load`方法，通过URL获取JSON或XML格式的数据，并将其渲染到面板内。 例如： ```javascript var panel = Ext.create('Ext.Panel', { ...
5. **Ext.Store**: 数据存储对象，与后台进行数据交换，支持JSON、XML等多种数据格式。 6. **Ext.data.Model**: 定义数据模型，描述数据字段及验证规则。 7. **Ext.data.Proxy**: 数据代理，处理与服务器的数据交互...
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
在jQuery 1.2版本中，如果你指明了一个JSONP回调函数，你就可以从其它的域中载入JSON类型的数据，写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串，执行你指定的回调函数。...
' 用于从资源文件中载入自定义功能区的XML代码 End Function ``` `IRibbonExtensibility_GetCustomUI`函数返回了自定义功能区的XML描述。`LoadResString`方法用于从资源文件中读取XML字符串。 3. **连接事件...
数据库 [setup] 表增加字段 ext9 用于显示网站标题 FlashPicViewer v4 beta2 ---------------------------------------------- 修正密码设置后无法取消的bug 分类详细设置增加分类简介信息输入 更新XML后增加了...
为了使自定义主题中的JSP文件能够在服务器重启时不丢失修改，需要在`ibm-web-ext.xmi`配置文件中启用jsp自动载入功能。具体操作是将`reloadingEnabled`属性的值设为`true`，然后重启服务器。 ### 操作步骤详解 1. ...