Ext常用的知识点（三）--combobox和xml的绑定

最新推荐文章于 2021-05-27 07:58:28 发布

最新推荐文章于 2021-05-27 07:58:28 发布 · 136 阅读

文章标签：

#EXT #XML #Gmail #Tomcat

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

27 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架结合XML数据源的例子，展示了如何通过ExtJS的Store组件加载并解析XML文件，然后将数据绑定到ComboBox组件中实现用户交互。此示例还包含了如何设置ComboBox的各项属性及监听事件。

直接看代码，所有需要注意的地方都标在代码后面了

Ext.onReady(function() {
	var mystore = new Ext.data.Store({
		url:"data/myInfo.xml", //要加载的文件，这要有服务器（如果tomcat）才能加载到数据
		reader:new Ext.data.XmlReader({
			record:"person", //每一条记录的根
			id:"id" //这个id很重要，不可以省略，而且要是唯一的，要不然同id的项之间会相互覆盖
		},["name","email", //如果name和mapping一样的话可以这么简写，否则用下面的写法
		//{name: 'title', mapping: 'record.innerHTML'} 用这个来加载标签里面的内容，如<person>me</person>
		{name: 'title', mapping: 'name @first'} //name @first表示 <name first="……“>……</name>
		])
	});
	
	var loginForm = new Ext.FormPanel({
		title:"登陆",
		width:270,
		renderTo:"test1",
		frame:true,
		labelWidth:70,
		collapsible:true,
		autoHeight:true,
		items:[{
				xtype:"combo",
				id:"myCombo",
				fieldLabel:"个人信息",
				emptyText:"请选择",
				displayField:"title",
				valueField:"email",
				mode:"remote",//设成local，测试了一下，也可以
				triggerAction:"all",
				store:mystore,
				listeners:{
					"select":function(){
						Ext.MessageBox.alert("消息",Ext.get("myCombo").getValue())
					},
					"collapse":function(){//没选 任何选项的时候就出现一个进度条，让用户等5秒
						Ext.MessageBox.show({
							title:"你好",
							msg:"请稍等……",
							width:200,
							progress:true,
							wait:true,
							waitConfig:{
								duration:5000,
								interval:600,
								fn:function(){
									Ext.MessageBox.hide();
								}
							}
						})
					}
				}
			}
		]
	});
	
	mystore.load(); //最后，别忘了这句话来加载数据
	
});

xml文档：

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<person>
		<id>1</id>
		<name first="ling">person1</name>
		<phone>12345******</phone>
		<email>person1@gmail.com</email>
	</person>
	<person>
		<id>2</id>
		<name first="wang">person2</name>
		<phone>54321******</phone>
		<email>person2@gmail.com</email>
	</person>
</root>