[转]Ext ComboBox 默认选中某一项

原文地址:http://blog.csdn.net/liuguxing/article/details/8623190

项目中经常用到选择框，需要从后台异步加载数据，可单独写一个组件进行加载

App.ComboBox = function(combo){
    var comboBox = new Ext.form.ComboBox({
        store:new Ext.data.JsonStore({
            autoLoad : false,                                   //设置为false，自己控制什么时候加载数据
            url:__ctxPath+"/code/get.do?name="+combo.codeName,
            root: 'data',
            fields :  ['name','id'],
            listeners:{
                load:function(){
                    comboBox.setValue(comboBox.getValue());
                }
            }
        }),
        name:combo.name,
        fieldLabel:combo.fieldLabel,
        id:combo.id,
        hiddenName:combo.hiddenName,    //动态生成一个以指定名称命名的隐藏域用来存放值数据
        displayField:'name',
        valueField :'id',
        typeAhead:false,            //值为true时在经过指定延迟（typeAheadDelay）后弹出并自动选择输入的文本，如果该文本与已知的值相匹配
        mode:'local',               //如果ComboBox读取本地数据则将值设为'local'（默认为 'remote' 表示从服务器读取数据）。如果设置为remote，并且autoLoad=true，就会加载两次
        triggerAction:'all',
        emptyText:'请选择...'
    });
    return comboBox;
};

编辑数据的时候需要默认选中某一项，可编写函数

App.selectComboBox = function(hiddenName,comboBoxId,value){

<span style="white-space:pre">  </span>//需要根据value获取到显示值
    var combo = Ext.getCmp(comboBoxId);
    var range = combo.getStore().getRange();
    if(range != null && range.length>0){
        var displayName = value;
        for(var i=0;i<range.length;i++){
            if(value == range[i].data.id){
                displayName = range[i].data.name;
            }
        }
    }
    combo.setValue(displayName);<span style="white-space:pre">      </span>//设置显示值<span style="white-space:pre">                </span>
    Ext.query("*[name="+hiddenName+"]")[0].value = value;<span style="white-space:pre"> </span>//设置提交到后台的值
}

需要注意的是，在调用App.selectComboBox之前，必须先调用comboBox.getStore().load(); 加载数据，不然上面getRange()获取不到数据。