EXT4JS _下拉框(combobox)学习

EXT4JS _下拉框(combobox)学习

 var required = '<span style="color:red;font-weight:bold" data-qtip="必填项">*</span>';
 var store = Ext.create('Ext.data.Store', {
        fields: ['EMAIL', 'USER_EMAIL'],
        autoLoad: true,
        proxy: {
            type: 'ajax',//ajax请求
            url: 'controller路径',
            reader: {
                type: 'json',//返回参数格式
                root: "datas"//根节点
            }
        }
    });
//带筛选功能的下拉框_写法一
{
    xtype: 'combobox',//下拉框
    name: 'XXX',//设置名称
    blankText: '不能为空',//为空验证失败提示信息
    allowBlank: false,//主要用来验证输入值是否是必填项,语法如下：isEmpty( Mixed value, [Boolean allowBlank] )
    fieldLabel: '申请人邮箱',
    afterLabelTextTpl: required,//添加红色[*]
    store: store,//获取Store
    displayField: 'USER_EMAIL',//下拉框value [与store中的fields对应]
    valueField: 'EMAIL',//下拉框key [与store中的fields对应]
    minChars:2,//触发下拉查询最少需要2字符
    anyMatch:true,//将输入值与所有下拉列表value进行 头尾like,相当于 正则表达式: ".*"+下拉框输入值+".*" ;
    autoSelect:true,//开启查询
    queryMode: 'local',//查询本地store中的内容
    width: 600
}

//带筛选功能的下拉框_写法二
{
    xtype: 'combobox',//下拉框
    name: 'XXX',//设置名称
    blankText: '不能为空',
    allowBlank: false,
    fieldLabel: '申请人邮箱',
    afterLabelTextTpl: required,//添加红色[*]
    store: store,//获取Store
    displayField: 'USER_EMAIL',//下拉框value [与store中的fields对应]
    valueField: 'EMAIL',//下拉框key [与store中的fields对应]
    minChars:2,//触发下拉查询最少需要2字符
    listeners: {
       beforequery: function (submitterEmail) {
         var combo = submitterEmail.combo;
         var regExp = new RegExp(".*" +submitterEmail.query + ".*");
         this.store.filterBy(function (record) {
             // 得到每个record的项目名称值
             var text = record.get(combo.displayField);
             return regExp.test(text);
          });
       }
    },
    width: 600
}