ExtJS ComboBox 按拼字首字母过滤

最新推荐文章于 2020-07-08 23:23:25 发布

上海_童鞋

最新推荐文章于 2020-07-08 23:23:25 发布

阅读量1.6k

点赞数 1

分类专栏： ExtJS 文章标签： extjs combobox 拼音过滤

本文链接：https://blog.csdn.net/gj_diy/article/details/47414639

版权

ExtJS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

网上查询了一下关于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后面引用