Ext.data和ComboBox: Ext.data命名空间下的类来组织和管理数据: Ext.data下的三个类:DataProxy,DataReader,Store; 以数据库表为例来讲解三个类的作用: DataProxy:相当于表中的数据; DataReader:相当于表中的列; Store:相当于一张表(存储列和数据); 1、Ext.data.DataProxy:获取数据的代理,数据可以来自与内存、同一个区域的远程服务器, 或者不同域的远程服务器; 在实际应用中我们不会直接使用Ext.data.DataProxy,而是使用他的子类: MemoryProxy,HttpProxy和ScriptTagProxy,他们的作用分别是: MemoryProxy:获取来自内存的数据,可以是数组、json或者xml; HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据的代理,需要制定url; ScriptTagProxy:功能和HttpProxy一样,但是支持跨域获取数据; var cities=[[1,"济南市"], [2,"南京市"], [3,"北京市"]]; var proxy=new Ext.data.MemoryProxy(cities); 2、Ext.data.DataReader:用来定义数据(行)的逻辑结构,主要信息有:列名称(name), 列的数据类型(type),列于数据源的索引映射(mapping)等 每一个数据项都是一个Ext.data.Record(记录)对象,数据项的列信息是通过 Ext.data.Record来定义的,Ext.data.Record并没有固定的结构,它保存的 是一个json对象数组; var City=Ext.data.Record.create([{name:"cid",type:"int",mapping:0}, {name:"cname",type:"string",mapping:1}]); Record创建好后,必须和DataReader关联,DataReader也同样有三个子类: Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader;使用 哪一个子类决定与DataProxy中封装的数据类型。 //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} ]); 3、Ext.data.Store:存储数据,用来把DataProxy和DataReader整合在一起。 var store=new Ext.data.Store({ proxy:proxy, reader:reader, autoLoad:true//即时加载数据----作用是:store.load() }); 4、ComboBox: var combobox=new Ext.form.ComboBox({ renderTo:Ext.getBody(), triggerAction:"all",//是否开启自动查询功能,all表示不开启,query表示开启 store:store, displayField:"cname",//关联Record的某一个逻辑列名作为显示值 valueField:"cid",//关联Record的某一个逻辑列名作为实际值 mode:"local",//local表示本地,远程服务器必须用remote emptyText:"请选择济南市" }); 5、得到下拉列表框的值: var btn=new Ext.Button({ text:"列表框的值", renderTo:Ext.getBody(), handler:function(){ Ext.Msg.alert("值","实际值:"+combobox.getValue()+";显示值:"+combobox.getRawValue()); } }); 6、全部代码: Ext.onReady(function (){ var cities=[[1,"济南市"], [2,"南京市"], [3,"北京市"]]; var proxy=new Ext.data.MemoryProxy(cities); var City=new Ext.data.Record.create([{name:"cid",type:"int",mapping:0}, {name:"cname",type:"string",mapping:1}]); var reader=new Ext.data.ArrayReader({},City); //数据源 var store=new Ext.data.Store({ proxy:proxy, reader:reader, autoLoad:true }); 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:"列表框的值", handler:function(){ Ext.MessageBox.alert("值","实际值:"+comboBox.getValue()+";显示值:"+comboBox.getRawValue()); } }); });