当前位置: 代码迷 >> HTML/CSS >> 使Extjs中的comboBox兑现像html中select的options被选中
  详细解决方案

使Extjs中的comboBox兑现像html中select的options被选中

热度:145   发布时间:2012-11-23 00:03:43.0
使Extjs中的comboBox实现像html中select的options被选中
大致思路如下:


先创建一个ComboBox对象,我是随便创建的,具体情况根据自己需要而定

var combo=new Ext.form.ComboBox({           
                            id:'POWER_ITEM_ID',
                            xtype: 'combo',
                           name: 'POWERSHOW',
                            hiddenName: 'POWER',  
                            allowBlank: false,
                            blankText: '请选择用户身份.',
                            store: [["0", "管理员"], ["1", "普通用户"]], //数据源为一数组[[value,text],[value,text],...]
                            fieldLabel: "用户身份",
                            editable: false, //false则不可编辑,默认为true
                            triggerAction: "all" //请设置为"all",否则默认为"query"的情况下,你选择某个值后,
再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项

});

实现options被selected关键代码(以让“普通用户”被选中为例,其实就两句代码!!!)

document.getElementsByName("POWER")[0].value="1";

document.getElementsByName("POWER")[0].nextSibling.value="普通用户";


这样就大功告成了,就为什么要这样做我大概解释一下,因为在Combox中不是用Select标签来实现下拉框的,而
是用了两个<input type="text">,两个input框并排生成,前一个的name是保存的comboBox中的hiddenName,
最后提交也是提交的这个input框的value值,而后一个input的name为空值,里面的value值就是显示在外面的Text

(注:后来发现实现options被slected的代码其实很简单,直接 Ext.getCmp("POWER_ITEM_ID").setValue(1)即可,
而且效果比之前那种方法好得多,注意setValue里面的值就是store里面对应的数字值)


?
  相关解决方案