extjs6的combo数据筛选

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
                                    }
                                }

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值