Ext:ComboBox实战

var gsCombo = new Ext.form.ComboBox({
        id:'combo',
        hiddenName:'value',
        fieldLabel:'下拉框',
        triggerAction:'all', 
        pageSize: 10,//分页
        store:new Ext.data.Store({
            pageSize: 10,
            proxy: new Ext.data.HttpProxy({
                url: '/servlet'
            }),
            reader: new Ext.data.JsonReader({
                  root:"data",
                fields: ['value','id'] 
            })
        }),
        displayField:'value',        
        valueField:'id',    
        mode:'remote',                     
        forceSelection:true,            
        resizable:true,                  
        value:'默认值',                   
        handelHeight:10,               
          width:200
      });

ComboBox

  ComboBox获取displayField和valueField的值

var valueField = Ext.getCmp("id").value ;//获取valueField
var displayField =  Ext.get('id').getValue() ;//获取displayField 

 

store.on("load",function(){ //对 ComboBox 的数据源加上 load 事件就好  
combo.setValue(this.getAt(0).get('name'));});   
store.load();  

 comboBox设置可输入可以职能联想功能：

      gsCombo.on('beforequery',function(e){ 
        var combo = e.combo;  
        if(!e.forceAll){ 
        var value = e.query; 
        combo.store.filterBy(function(record,id){ 
        var text = record.get(combo.displayField); 
            //用自己的过滤规则,如写正则式 
            return (text.indexOf(value)!=-1);    //实现的核心
        }); 
        combo.expand(); 
        return false; 
        } 
     });

 combox默认的空白选项高度很小，这个时候可以通过添加css样式统一高度

    <style type="text/css">
        .x-combo-list-item { height: 21px;} 
    </style>