当前位置:编程学习 > JS >>

extjs combox 模糊查询

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<link rel="stylesheet" href="ext3/resources/css/ext-all.css" />  
<script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="ext3/ext-all.js"></script>   
<script type="text/javascript" >  
Ext.onReady(function(){  
      
       
              
   var combostore = new Ext.data.ArrayStore({  
                fields: ['id', 'name'],  
                data: [[1, '团员'], [2, '党员'], [3, '其他1'], [4, '其他11'], [5, '其他111'], [6, '其他1111'], [7, '其他1133'], [8, '其他333'], [9, '其他3'], [10, '其他333'], [11, '其他555'], [12, '其他666663']]  
            });  
            //创建Combobox  
            var combobox = new Ext.form.ComboBox({  
                fieldLabel: '政治面貌',  
                store: combostore,  
                displayField: 'name',  
                valueField: 'id',  
                triggerAction: 'all',  
                emptyText: '请选择...',  
                allowBlank: false,  
                blankText: '请选择政治面貌',  
               
                mode: 'local'  
            });  
            //Combobox获取值  
            combobox.on('select', function () {  
                alert(combobox.getValue());  
            })  
  
  
  
var checkIfInStore = function(str, store, field, ignoreCase) {  
    var count = store.getCount();  
    for( var i = 0; i < count; i++) {  
        var val = store.getAt(i).get(field);  
        if (ignoreCase) {  
            str = str.toUpperCase();  
            val = val.toUpperCase();  
        }  
        if (str == val) {  
            return true;  
        }  
    }  
    return false;  
};  
   
var ComboSearchPlugin = {  
    init: function(combo) {  
        combo.addListener('blur', function(combo) {  
            // 如果没有写完整则设置为空  
            var isValid = checkIfInStore(combo.getRawValue(), combo.store, combo.displayField, false);  
            if (!isValid) {  
                combo.setValue('');  
            }  
        });  
   
        combobox.addListener('beforequery', function(qe) {  
            var combo = qe.combo;  
            var q = qe.query;  
            var forceAll = qe.forceAll;  
            if (forceAll === true || (q.length >= this.minChars)) {  
                if (this.lastQuery !== q) {  
                    this.lastQuery = q;  
                    if (this.mode == 'local') {  
                        this.selectedIndex = -1;  
                        if (forceAll) {  
                            this.store.clearFilter();  
                        } else {  
                            // 检索的正则  
                            var regExp = new RegExp(".*" + q + ".*", "i");  
                            // 执行检索  
                            this.store.filterBy(function(record, id) {  
                                // 得到每个record的项目名称值  
                                var text = record.get(combo.displayField);  
                                return regExp.test(text);  
                            });  
                        }  
                        this.onLoad();  
                    } else {  
                        this.store.baseParams[this.queryParam] = q;  
                        this.store.load({  
                            params: this.getParams(q)  
                        });  
                        this.expand();  
                    }  
                } else {  
                    this.selectedIndex = -1;  
                    this.onLoad();  
                }  
            }  
            return false;  
        });  
    }  
};  
  
  
var win = new Ext.Window ({  
    title:'213',  
    width:300,  
    height:300,  
    items:[combobox]  
})  
win.show();  
})  
  
</script>  
<title>查找</title>  
</head>  
  
<body>  
</body>  
</html>  

 


补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,