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'} 用这个来加载标签里面的内容，如me
         {name: 'title', mapping: 'name @first'} //name @first表示 ……
         ])
     });

     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>1id>
         <name first="ling">person1name>
         <phone>12345******phone>
         <email>[email protected]email>
     person>
     <person>
         <id>2id>
         <name first="wang">person2name>
         <phone>54321******phone>
         <email>[email protected]email>
     person>
 root>