Ext.define('JsApp.com.ComboBoxQuery', {
alias: 'plugin.comboboxquery',
extend: 'Ext.plugin.Abstract',
mixins: [
'JsApp.com.ChinesePinyinConversion'
],
init: function (combo) {
var me = this;
this.combo = combo;
this.combo.on('beforequery', function (qe) {
var cmb = qe.combo;
var q = qe.query;
var forceAll = qe.forceAll;
if (forceAll === true || (forceAll == undefined && cmb.mode == 'remote') || (q.length >= 1)) {
//if (cmb.lastQuery !== q) {
cmb.lastQuery = q.replace(/\s*/g, "");
if (cmb.mode == 'local') {
//界面上数据筛选(静态)
cmb.selectedIndex = -1;
if (forceAll || q.replace(/\s*/g, "") === "") {
cmb.store.clearFilter();
} else {
cmb.store.clearFilter();
//检索的正则
var regExp = new RegExp(".*" + q.replace(/\s*/g, "") + ".*", "i");
//执行检索,手动筛选
cmb.store.filterBy(function (record, id) {
// 得到每个record的项目名称值
var text = record.get(combo.displayField);
return regExp.test(text) || regExp.test(me.ChinesePinyin(text));
});
}
}
else {
//与后台交互查询数据(动态)
cmb.store.load({
params: {
comboValue: q
},
callback: function (record) {
//当数据查询完之后,将之前由于控件刷新而消失的编辑框中数据重新绑定
cmb.setRawValue(q);
}
});
cmb.expand();
}
//} else {
// cmb.selectedIndex = -1;
// cmb.expand();
//}
}
cmb.expand();
});
//解决当鼠标定位到combo的时候下拉框不显示的问题
this.combo.on('focus', function (cmb) {
if (!cmb.isExpanded) {
cmb.expand();
}
});
}
});
界面调用
{
xtype: 'combo',
plugins: ['comboboxquery'],
forceSelection: true,
mode: 'local',
store: {
type: 'contractauthoritystore',
autoLoad: true
}
}