extjs的conbobox-CSDN博客

Ext.onReady(function(){
//定义一个二维数组，用来存放下拉列表的值
//实际的项目中这里是用AJAX方法得到的，或者是一个文件中定义好的
var cities = [
               [1,"湘潭"],
               [2,"株洲"],
               [3,"长沙"],
               [4,"岳阳"]
              ];
//DateProxy:获得数据，数据可以是数组，服务器...
//有三个子类：
  //1:MemoryProxy:获取来自内存中的数据，可以使数组，json和xml
  //2:HttpProxy:使用HTTP协议通过AJAX从远程服务器获得数据的代理，需要指定url
  //3:ScriptTagProxy:跟HTTPProxy差不多，但是支持跨域取得数据
var proxy = new Ext.data.MemoryProxy(cities);

//var city = Ext.data.Record.create([
//      {name:"cid",type:"int",mapping:0},
//      {name:"cname",type:"String",mapping:1}
//]);
//var reader = new Ext.data.ArrayReader({},city);

//reader也分为三种子类，取决于代理用的是什么
//1：ArrayReader:数组
//2: JsonReader：json
//3: XmlReader:xml
//reader的第一个参数为元数据，第二个参数为Record记录
var reader = new Ext.data.ArrayReader({},[
     {name:"cid",type:"int",mapping:0},//列的逻辑名称，列的类型，列与数据源的索引映射
     {name:"cname",type:"String",mapping:1}
]);

//Stroe整合Proxy与Reader
var store = new Ext.data.Store({
  proxy:proxy,
  reader:reader,
  autoLoad:true//即时加载数据.如果没有这句话的话，那么则需要显示调用load方法
});
//store.load();

//创建ComboBox对象
var combobox = new Ext.form.ComboBox({
  renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
});

//定义一个按钮，获得下拉列表的值
var btn = new Ext.Button({
  renderTo:Ext.getBody(),
  text:'获得下拉列表的值',
  //type:'submit',
  //disabled:false,
  //pressed:false,
  handler:function(){
   Ext.MessageBox.alert("测试按钮","实际值"+combobox.getValue()+"显示的值为"+combobox.getRawValue());
  }
});

//使用json的下拉列表框
var jsons = [
              {cid:1,cname:"长沙"},
              {cid:2,cname:"株洲"},
              {cid:3,cname:"湘潭"},
              {cid:4,cname:"衡阳"}
              ];

//创建代理
var proxy1 = new Ext.data.MemoryProxy(jsons);

var city = Ext.data.Record.create([
       {name:"cid",type:"int",mapping:"cid"},
       {name:"cname",type:"String",mapping:"cname"}
]);

//创建reader
var reader1 = new Ext.data.JsonReader({},city);

//创建Store
var store1 = new Ext.data.Store({
  proxy:proxy1,
  reader:reader1,
  autoLoad:true
});

var combobox1 = new Ext.form.ComboBox({
  renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store1,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
});

//定义一个按钮，获得下拉列表的值
var btn1 = new Ext.Button({
  renderTo:Ext.getBody(),
  text:'获得下拉列表的值',
  //type:'submit',
  //disabled:false,
  //pressed:false,
  handler:function(){
   Ext.MessageBox.alert("测试按钮","实际值"+combobox1.getValue()+"显示的值为"+combobox1.getRawValue());
  }
});

});