关于Ext.form.ComboBox从服务器获取数据

最近看了不少关于Ext的东西，挺不错的；界面很漂亮；不过在搞Ext.form.ComboBox从服务器获取数据时着实费了一番周折，最终还是搞定了，呵呵，贴出来了

 

首先是服务器数据

<? xml version="1.0" encoding="gbk"  ?>
< check >
  < result > 3 </ result >
  < record >
   < CUNIT > 个人 </ CUNIT >
  </ record >
  < record >
   < CUNIT > 河北移动 </ CUNIT >
  </ record >
  < record >
   < CUNIT > 测试 </ CUNIT >
  </ record >
</ check >

 

把它存成一个xml文件，放到服务器.

使得在浏览器地址栏输入“http://localhost/test/data.xml”时可以打开它。

 

然后就是我们的页面了，当然这个页面只有一个下拉框。html代码如下：

 

< HTML >
< HEAD >
< TITLE >  测试  </ TITLE >
< link  rel ="stylesheet"  type ="text/css"  href ="../ext/resources/css/ext-all.css" >
< script  type ="text/javascript"  src ="../ext/ext-base.js" ></ script >
< script  type ="text/javascript"  src ="../ext/ext-all.js" ></ script >
</ HEAD >
< BODY >
< script >
var  proxy  =   new  Ext.data.HttpProxy({url: ' http://localhost/test/data.xml ' });
var  reader  =   new  Ext.data.XmlReader({
        totalRecords:  " results " ,    //  对应xml中的result节点
        record:  " record " ,           //  对应xml中的record节点
        id:  " CUNIT "                  //  对应xml中的CUNIT节点
     }, [
         {name:  ' CUNIT ' , mapping:  ' CUNIT ' }   //  把CUNIT节点的数据存入CUNIT列
     ]);
var  store = new  Ext.data.Store({
       proxy:proxy,
       reader:reader
    });
store.load();    //  加载数据
var  fields  =   new  Ext.form.ComboBox({
    fieldLabel:  ' 证件类型 ' ,
    name:  ' c_idtype ' ,
    store: store,
    displayField:  ' CUNIT ' ,     //  把CUNIT列数据显示在列表中
    mode:  ' remote ' ,            //  必须
    triggerAction:  ' all ' ,
    width: 190
   })
Ext.onReady( function ()
 {
  fields.render(document.body);
 }
)
</ script >
</ BODY >
</ HTML >

转载于:https://www.cnblogs.com/dotjava/articles/1264957.html