ext下拉框模糊查询

/**
 * Created by Administrator on 2016-12-02.
 */
//数据字典下拉控件

Ext.ns('uc');
//新建类
Ext.define('CardModel', {
    extend: 'Ext.data.Model',
    idProperty: 'cardid',
    fields: [
        {name: 'cardid', type: 'string'},
        {name: 'm1cardid', type: 'string'},
        {name: 'ucardid', type: 'string'}
    ]
});

uc.cboCard = function (config) {

//store查询数据
    var storeCard = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'CardModel',
        folderSort: false,
        proxy: {
            type: 'ajax',
            url: 'Base/loadCardcbo',
            reader: {
                type: 'json',
                rootProperty: 'data',
                totalProperty: 'total'
            }
        }/*,
         listeners: {
         beforeload: function (store, options) {
         var params = {
         };
         Ext.apply(store.proxy.extraParams, params);
         }
         }*/
    });
//新建下拉框
    var cbo = new Ext.form.field.ComboBox(Ext.apply({
        fieldLabel: '卡号',
        labelAlign: 'right',
        multiSelect: false,
        displayField: 'cardid',
        valueField: 'cardid',
        store: storeCard,
        typeAhead: true,//不自动带入匹配项
        queryMode: 'remote',
        pickerAlign: 'bl',
        queryDelay: 300,
        hideTrigger: true,//隐藏下拉按钮
        forceSelection:true,
        readOnly: false,
        minChars: 1,
        pageSize: 10,
        queryParam: 'search',
        matchFieldWidth: false,//使grid宽度可以不同步为下拉框宽度
        emptyText: '请输入卡号',
        setCardId:function(value){
            config.cardid=value;
        },
        listConfig: {//配置下拉显示的数据
            loadingText: '查找中...',
            emptyText: '没有找到匹配的信息...',
            width: 420,
            height:200,
            tpl: '<table style="width:100%;"><tr bgcolor="#e1e1e1" height="24" style="font-size: 14px"><td style="width:100px" align="center">卡号</td><td style="width:120px" align="center">M1卡号</td><td style="width:120px" align="center">UHF卡号</td></tr>'+
            '<tpl for="."><tr class="x-boundlist-item"><td align="center">{cardid}</td><td align="center">{m1cardid}</td><td align="center">{ucardid}</td></tr></tpl></table>'
        }
    }, config));

    storeCard.load();
    return cbo;
}

页面使用

<script type="text/javascript" src="<%=path%>/extjs/UserControl/cboCard.js"></script>

var txtCardID = uc.cboCard({
    name: 'cardid',
    fieldLabel: '卡号',
    maxLength: 50,
    allowBlank: false,
    listeners:{
        select:function(){
            var _cardid = txtCardID.getValue();
            var _UCardID = txtCardID.findRecord('cardid', _cardid).get('ucardid');
            var _M1CardID = txtCardID.findRecord('cardid', _cardid).get('m1cardid');
            txtUCard.setValue(_UCardID);
            txtM1Card.setValue(_M1CardID);
            if(_UCardID != ""){
                formRight.items.get(2).setHidden(false);
            }else{
                formRight.items.get(2).setHidden(true);
                txtUCardEndDate.setValue("NULL");
            }
        }
    }
});