extjs combobox 仿百度查询功能,设置下拉列表宽度

时间:2022-08-31 15:59:15

当我们想开发一个类似于百度的输入框时,有没有想过用combobox控件,可是combobox固有的方法只支持已经load过来的静态数据查询,在数据量大的情况下,全部把数据加载到内存中会导致客户端内存暴增,这不符合程序设计对性能高标准的要求。
而使用combobox控件就完全可以实现该功能,不过操作起来比较麻烦,在考虑到是采用及时查询,如果数据结构不合理是不适合使用此种方式。


关键代码:
{
xtype : 'combobox',
width : 260,
fieldLabel : '<label style="color:red">*</label>特征类型',
labelAlign : 'right',
id:'productFeatureTypeId',//定义上下文查找ID
name : 'productFeatureTypeId',//表单提交ID
hiddenName:'productFeatureTypeId',
displayField : 'description',
store : 'feature.combobox.ParentTypeStore',
allowBlank: false,
matchFieldWidth: false,
forceSelection: true,
minChars: 1,
pageSize: 10,
queryMode: 'local',
ypeAhead: true,
valueField : 'productFeatureTypeId',
selectFlag:true,//很关键,由于文本数据改变事件执行的优先级别比较高,需要根据一个标记来判断是否需要输入数据
listeners:{
//很关键:“beforeselect”选择下拉列表数据之前触发,设置一个标记,选择下拉列表时禁用change事件(在选择下拉列表同时会触发change事件导致重复查询 2013-12-19)
'beforeselect':function(){
var myc = Ext.getCmp('productFeatureTypeId');
myc.selectFlag = false;
},
//很关键:“change”文本框数据改变触发
'change': function() {
var myc = Ext.getCmp('productFeatureTypeId');
var typeIdValue = myc.getValue();
//判断不在继续输入时,不调用查询服务
if(myc.selectFlag){
typeIdValue = (typeIdValue!='null' && typeIdValue != null) ? typeIdValue : '%';
typeIdValue = encodeURIComponent(typeIdValue+'%');
myc.store.load({
callback: function(records, operation, success) {
myc = Ext.getCmp('productFeatureTypeId');
if(myc.store.getCount()>=1){
//很关键,设置的matchFieldWidth=false会随着数据长度改变宽度,数据如果很短会导致列表显示不完整,很长则会超长;设置的matchFieldWidth=true则固定于文本框一样长,如果文本框不够长,则限制了下拉列表无法全部展现。
myc.getPicker().setWidth(260);
myc.show();//获得数据后显示列表
}
},
//传入后台参数设置
params : {
//设置传入后台条件
fieldsToSelect: 'productFeatureTypeId|description',
whereCondition: 'description:'+typeIdValue,



queryModel:'description:LIKE',
page : 1,//重新设置页数,不设置会使用之前的页数进行查询,导致查询结果有误
start: 0,//重新设置起始行
limit: 25//重新设置每页显示行
}
});
}
//在抵御一次数据的改变后(用户选择数据时文本框数据发生改变,又会触发一次change事件进行一次查询操作),将查询标记设为可用
myc.selectFlag = true;//标记
}
}
}


效果图:
输入“A”,后台查询出4条记录(模拟百度向右模糊查询)
extjs combobox 仿百度查询功能,设置下拉列表宽度
连续输入“Ac”,被过滤到只剩下一条
extjs combobox 仿百度查询功能,设置下拉列表宽度
输入“E”,查询出一条
extjs combobox 仿百度查询功能,设置下拉列表宽度