正文
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>
