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



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


关键代码：
{
xtype : 'combobox',
width : 260,
fieldLabel : '*特征类型',
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条记录（模拟百度向右模糊查询）

连续输入“Ac”，被过滤到只剩下一条

输入“E”，查询出一条