extjs实例 ---生成下拉框

本文介绍如何使用ExtJS创建一个本地数据源的下拉框,并演示了如何配置ComboBox组件来显示湖北省部分城市的列表。此外,还展示了如何通过按钮触发来显示所选项目的实际值和显示值。

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

Ext.onReady(function(){ 

  var cities=[[1,"襄樊市"],[2,"武汉市"],[3,"枣阳市"],[4,"宜昌市"]];
  //Ext.data.DataProxy是获取数据代理 一般使用他的子类 MemoryProxy ,HttpProxy , ScriptTagProxy
  /* MemoryProxy 获取来自内存的数据,可以是数组,json或者xml
  HttpProxy 使用http协议通过ajax从远程服务器获取数据的代理
  ScriptTagProxy 功能和HttpProxy一样,支持跨域获取数据
  */
 var proxy=new Ext.data.MemoryProxy(cities);
 //var proxy=new Ext.form.ComboBox(cities);
 var City=Ext.data.Record.create([
 //City结构 name和type表示每一列的名称和数据类型 mapping是列值与数组元素的映射关系
     {name:"cid",type:"int",mapping:0},
     {name:"cname",type:"string",mapping:1}
 ]);
 //Ext.data.DataReader有三个子类 数组用ArrayReader  json用JsonReader  xml用XmlReader
  var reader=new Ext.data.ArrayReader({},City);
  //var reader=new Ext.data.ArrayReader({},[
  //{name:"cid",type:"int",mapping:0},
  //{name:"cname",type:"string",mapping:1}
 // ]);
 
 // Ext。data成了数据来源 
 /*  DataProxy获取想要的数据,通过他恩那个得到来自不同地方的数据,如数组,远程服务器等
 DataReader定义数据项的逻辑结构
 store存储器 用于整合DataProxy和DataReader
 */
  var store=new Ext.data.Store({
   proxy:proxy,
   reader:reader
  // autoLoad:true
  });
 
  store.load();
 
 
 //定义一个下拉框
 var combobox=new Ext.form.ComboBox({
 renderTo:Ext.getBody(),
 triggerAction:"all",//是否开启自动查询功能
 store:store,//定义数据源
 displayField:"cname",//关联某一个逻辑列名作为显示值
 valueField:"cid",//关联某一个逻辑列名作为实际值
 mode:"local",//如果数据来自本地用local 如果来自远程用remote默认为remote
 emptyText:"请选择湖南城市"//没有选择时候的默认值
 });
 

 

//弹出对话框显示值
 var btn=new Ext.Button({
   text:"列表框的值",
   renderTo:Ext.getBody(),
   handler:function(){
     Ext.Msg.alert("值","实际值:"+combobox.getValue()+";显示值:"+combobox.getRawValue());
   }
 })
 
})

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值