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

最新推荐文章于 2021-08-06 11:37:01 发布

原创最新推荐文章于 2021-08-06 11:37:01 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #浏览器 #CSS #XML #JavaScript #ViewUI

Extjs 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用ExtJS从XML文件加载数据到下拉框组件中，包括服务器端XML文件配置及前端页面实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是服务器数据

<?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>