如何用Ext来创建了个简单的ComboBox

首先先让我们来了解一下道底什么是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()            得到显示值

 

这样，大功告成^^