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>