首先先让我们来了解一下道底什么是ComboBox吧^^
上面的是不是要比select要漂亮的多啊?
废话不多说,上代码:
Ext.onReady(function(){
var data = [ //定义一组数组------步骤1
["value1","text1"],
["value2","text2"],
["value11","text11"],
["value12","text12"]
];
var store = new Ext.data.SimpleStore({ //把二维数组交给store-----步骤2
fields:["value","text"],
data:data
});
var com = new Ext.form.ComboBox({ ------步骤3
renderTo:Ext.getBody(),
store:store,
mode:"local",
displayField:"text",
valueField:"value",
triggerAction:"all",
emptyText:"请选择",
value:"text1"
});
});
话说要把大象放冰箱要分几步,嘿嘿,总共分三步:
步骤1:
首先当然是先定义数据啦,这里我们是定义的一个二维数组做为我们的数据源,也就是将的在下拉框中显示的数据是
从data这里面来定义的。
步骤2:
接下来我们要把数据交给中央枢纽带store来处理,这里我们偷了个懒,并没有定义Proxy和Reader,定义的
Ext.data.SimpleStore和Ext.data.Store相近,只是前者更方便些,在Ext.data.SimpleStore中参数说明:
fields:["value","text"], 提供两列数据,第一列为value,第二列为text,分别对应实际值与显示值
data:data 把二维数组放在SimpleStore中
步骤3:
最后是我们的重点啦!注意啦^^
创建ComboBox 各个参数说明
renderTo:Ext.getBody(), 把ComboBox渲染到文档body元素中
store:store, 把数据添加到ComboBox
mode:"local", 模式,如果为Local即为读取本地数据,若为remote,即为读取服务器数据
displayField:"text", 显示的内容
valueField:"value", 实际值
triggerAction:"all",
emptyText:"请选择", 什么也不选择时出现的提示信息
value:"text1" 最开始加载时的显示信息
这里有必要说明一下triggerAction是什么意思?
triggerAction可选的值为 “all” 和“query”,如果为 all ,则显示的效果和select相同
如果为query,它会使用autoComplete功能!!
即实现这样的效果:
看到有什么不同了吗?
对,他就像是baidu中的ajax请求一样,会把开始为text1的信息全部列出来,把text2等信息全部删除,看到了吗?
和第一张图片进行一下比较吧^^
什么?这样选中的数据可以修改?!!
好说,想不让修改,添加属性 readOnly : true,
什么?还不行,这下虽然是不能修改了,可连那个下拉条都没有啦?呀呀的,怎么办?
问google呗
查到:如果现在用的是Ext 3.0x的版本就会出现这个问题,把readOnly:true修改成editable:false
搞定^^
什么?你还要监听用户选中的是哪条数据?你这个要求……挺符合实际,提的好^^
把ComboBox来添加上事件监听就OK了:
com.on("select",function(comboBox){
alert(comboBox.getValue() + "_" + comboBox.getRawValue());
});
这个on告诉ComboBox你要进行监听,并设置自己的事件监听器,
第一个参数是触发事是 select
第二个参数是自定义事件监听器,传入的参数是ComboBox本身,
getValue() 得到实际值
getRawValue() 得到显示值
这样,大功告成^^