Ext 下拉列表模糊搜索

/**
 * Created by huangbaidong on 2016/9/18.
 * 楼盘通用Combo组件,支持模糊查询
 * 使用案例:
 *             {
                fieldLabel : '楼盘名称',
                xtype: 'residentialAreaCombo',
                name : 'buildingId',
                queryParams:{
                    orgId:top.loginUser.orgId
                }
            }
 */
Ext.define('app.component.biz.house.ResidentialAreaCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.residentialAreaCombo',
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
    listConfig: {
        maxHeight:200,
        itemTpl: new Ext.XTemplate('{name} ')
    },
    constructor : function(config) {
        Ext.apply(config, {
            store: Ext.create('app.component.biz.house.ResidentialAreaStore', {
                queryParams : config.queryParams
            })
        });
        app.component.biz.house.ResidentialAreaCombo.superclass.constructor.call(this, config);
    },
    listeners:{
        change : function(combo, record, eOpts) {
            if(this.callback) {
                if(combo.lastSelection && combo.lastSelection.length>0) {
                    this.callback(combo.lastSelection[0]);
                }
            }
        },
        beforequery : function(e) {
            var combo = e.combo;
            combo.collapse();//收起
            var value = combo.getValue();
            if (!e.forceAll) {//如果不是通过选择,而是文本框录入
                combo.store.clearFilter();
                combo.store.filterBy(function(record, id) {
                    var text = record.get(combo.displayField);
                    // 用自己的过滤规则,如写正则式
                    return (text.indexOf(value) != -1);
                });
                combo.onLoad();//不加第一次会显示不出来
                combo.expand();
                return false;
            }
            if(!value) {
                //如果文本框没值,清除过滤器
                combo.store.clearFilter();
            }
        }
    }

});
/**
 * Created by huangbaidong on 2016/9/18.
 * 楼盘组件通用Store,
 */
Ext.define('app.component.biz.house.ResidentialAreaStore', {
    extend: 'Ext.data.Store',
    autoLoad : true,
    constructor : function(config) {
        Ext.apply(config, {
            /*data:(function(){
                var array = [];
                Ext.each(top.productStore.getData().items, function(item) {
                    if(item.data.orgId == config.filterParams.orgId) {
                        array.push(item);
                    }
                })
                return array;
            })()*/
            proxy: {
                type: 'ajax',
                url: '../CstResidentialArea/queryAll',
                reader: {
                    type: 'json',
                    rootProperty: 'datas',
                    totalProperty: 'total'
                },
                extraParams: config.filterParams
            }
        });
        app.component.biz.house.ResidentialAreaStore.superclass.constructor.call(this, config);
    }
});

 

posted @ 2016-10-11 16:36  旋转的梦  阅读(3871)  评论(0编辑  收藏  举报