直接看代码,所有需要注意的地方都标在代码后面了
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>