网上查询了一下关于ComboBox 按拼字首字母过滤的文章,有的写的很烂,要不就是不是很清晰明了。以下是我整理的代码,在此感谢提供ChinesePY.js(不知如何将文件一并传上来,各位可以在我的博客下载中列表中找到此文件) 脚本的提供者。
第一步:将ExtJS ComboBox控件重写。
/// Ext.form.field.ComboBox
Ext.override(Ext.form.field.ComboBox, {
PyFilter: true,
initComponent: function () {
var me = this;
this.callParent(arguments);
},
listeners: {
focus: {
fn: function (e) {
e.expand();
this.doQuery(this.allQuery, true);
},
buffer: 200
},
beforequery: function (e) {
// 在文本框内输入拼音时,根据store内code进行过滤,在下拉列表中只显示拼音匹配的选项
var combo = e.combo;
var me = this;
if (me.PyFilter == true) {
if (!e.forceAll) {
var input = e.query;
var regExp = new RegExp("^" + input + ".*", "i");
combo.store.filterBy(function (record, id) {
var text = Pinyin.GetJP(record.data[me.displayField]);
return regExp.test(text) | regExp.test(record.data[me.displayField]);
});
combo.expand();
}
}
}
}
});
第二步:在首页面将 ChinesePY.js 引用
第三步:将上面的重写JS脚本放在 ext-all.js 后加载,也可以创建一个新的JS 放在 ext-all.js后面引用