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 ,