extjs的conbobox

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

你可能感兴趣的:(Ajax,json,xml,ext)