extjs实例 ---生成下拉框

来源:互联网 发布:天刀蓝忘机捏脸数据 编辑:程序博客网 时间:2024/05/16 23:28

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());
   }
 })
 
})

原创粉丝点击