天天看点

关于 Ext.form.ComboBox的模糊过滤

Ext.form.ComboBox的过滤方式有点儿和传统的不一样,不一样的地方就是,如果你输入“test”,而下拉框里有一个值也为“test”,传统的做法就是下拉框里的test值就不会出现了,而Ext.form.ComboBox的下拉框里还是显示“test值”

如图:

关于 Ext.form.ComboBox的模糊过滤

我们可以通过Ext.form.ComboBox的“beforequery”事件来过滤掉这个“test”值

js代码如下:

注:只需看beforequery事件的处理函数即可

<script type="text/javascript">

  Ext.onReady(function(){

   var arr=[["aaa",1],["bbb",2],["ccc",3],["test",3]];

   var store = new  Ext.data.SimpleStore({

    autoLoad:true,

    data:arr,

    fields:["name","value"]

   });

    var combox=new Ext.form.ComboBox({

      applyTo:"test",

      store: store,

     displayField :'name',

     mode: 'local',

     hideTrigger :true,

     lastQuery:'',

     triggerAction:'query',

     width :120

     });

    combox.getEl().on("mousedown",function(){

      combox.onTriggerClick();

     });

   combox.on('beforequery',function(qe){  

   var combo = qe.combo;

   //输入框的值 

    var q = qe.query;  

    forceAll = qe.forceAll;  

    if(forceAll === true || (q.length >= combo.minChars)){  

        if(combo.lastQuery !== q){  

            combo.lastQuery = q;  

            if(combo.mode == 'local'){  

                combo.selectedIndex = -1;  

                if(forceAll){  

                    combo.store.clearFilter();  

                }else{

                 //写自己的模糊过滤条件 

                    combo.store.filterBy(function(record,id){  

                        var text = record.get(combo.displayField);  

                        var val=combo.getValue();

                        //过滤掉与输入框的值相等的记录

                        if(text==val){

                         return false;

                        }

                        return (text.indexOf(q)!=-1);  

                    });  

                }  

                combo.onLoad();  

            }else{  

                combo.store.baseParams[combo.queryParam] = q;  

                combo.store.load({  

                    params: combo.getParams(q)  

                });  

                combo.expand();  

            }  

        }else{  

            combo.selectedIndex = -1;  

            combo.onLoad();  

        }  

    }  

    return false;

  });

  });

</script>

继续阅读