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

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

 

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>[e-mail]</email>
	</person>
	<person>
		<id>2</id>
		<name first="wang">person2</name>
		<phone>54321******</phone>
		<email>[e-mail]</email>
	</person>
</root>