Ext:ComboBox实战

最新推荐文章于 2018-06-01 10:14:26 发布

weixin_34072159

最新推荐文章于 2018-06-01 10:14:26 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/zhutouying/p/3262535.html

版权

 1 var gsCombo = new Ext.form.ComboBox({
 2         id:'combo',
 3         hiddenName:'value',
 4         fieldLabel:'下拉框',
 5         triggerAction:'all', 
 6         pageSize: 10,//分页
 7         store:new Ext.data.Store({
 8             pageSize: 10,
 9             proxy: new Ext.data.HttpProxy({
10                 url: '/servlet'
11             }),
12             reader: new Ext.data.JsonReader({
13                   root:"data",
14                 fields: ['value','id'] 
15             })
16         }),
17         displayField:'value',        
18         valueField:'id',    
19         mode:'remote',                     
20         forceSelection:true,            
21         resizable:true,                  
22         value:'默认值',                   
23         handelHeight:10,               
24           width:200
25       });

ComboBox

ComboBox获取displayField和valueField的值

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

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

设置第一个选项为默认值

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

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

智能联想

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

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

View Code

转载于:https://www.cnblogs.com/zhutouying/p/3262535.html