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

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

 

Js代码  

1. Ext.onReady(function() {  
2.     var mystore = new Ext.data.Store({  
3.         url:"data/myInfo.xml", //要加载的文件，这要有服务器（如果tomcat）才能加载到数据  
4.         reader:new Ext.data.XmlReader({  
5.             record:"person", //每一条记录的根  
6.             id:"id" //这个id很重要，不可以省略，而且要是唯一的，要不然同id的项之间会相互覆盖  
7.         },["name","email", //如果name和mapping一样的话可以这么简写，否则用下面的写法  
8.         //{name: 'title', mapping: 'record.innerHTML'} 用这个来加载标签里面的内容，如<person>me</person>  
9.         {name: 'title', mapping: 'name @first'} //name @first表示 <name first="……“>……</name>  
10.         ])  
11.     });  
12.       
13.     var loginForm = new Ext.FormPanel({  
14.         title:"登陆",  
15.         width:270,  
16.         renderTo:"test1",  
17.         frame:true,  
18.         labelWidth:70,  
19.         collapsible:true,  
20.         autoHeight:true,  
21.         items:[{  
22.                 xtype:"combo",  
23.                 id:"myCombo",  
24.                 fieldLabel:"个人信息",  
25.                 emptyText:"请选择",  
26.                 displayField:"title",  
27.                 valueField:"email",  
28.                 mode:"remote",//设成local，测试了一下，也可以  
29.                 triggerAction:"all",  
30.                 store:mystore,  
31.                 listeners:{  
32.                     "select":function(){  
33.                         Ext.MessageBox.alert("消息",Ext.get("myCombo").getValue())  
34.                     },  
35.                     "collapse":function(){//没选 任何选项的时候就出现一个进度条，让用户等5秒  
36.                         Ext.MessageBox.show({  
37.                             title:"你好",  
38.                             msg:"请稍等……",  
39.                             width:200,  
40.                             progress:true,  
41.                             wait:true,  
42.                             waitConfig:{  
43.                                 duration:5000,  
44.                                 interval:600,  
45.                                 fn:function(){  
46.                                     Ext.MessageBox.hide();  
47.                                 }  
48.                             }  
49.                         })  
50.                     }  
51.                 }  
52.             }  
53.         ]  
54.     });  
55.       
56.     mystore.load(); //最后，别忘了这句话来加载数据  
57.       
58. });  

 

xml文档：

 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <root>  
3.     <person>  
4.         <id>1</id>  
5.         <name first="ling">person1</name>  
6.         <phone>12345******</phone>  
7.         <email>[e-mail]</email>  
8.     </person>  
9.     <person>  
10.         <id>2</id>  
11.         <name first="wang">person2</name>  
12.         <phone>54321******</phone>  
13.         <email>[e-mail]</email>  
14.     </person>  
15. </root>