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