extjs下拉框可查询
时间: 2023-11-22 07:04:30 浏览: 67
ExtJS中的下拉框(ComboBox)可以使用store的过滤器来实现可查询功能。具体步骤如下:
1. 创建ComboBox,并指定store
```
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":"1", "name":"Apple"},
{"id":"2", "name":"Banana"},
{"id":"3", "name":"Cherry"},
{"id":"4", "name":"Durian"},
{"id":"5", "name":"Elderberry"}
]
});
var combo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Fruit',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
```
2. 添加过滤器
```
combo.on('change', function(combo, newValue, oldValue, eOpts) {
store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
store.filter('name', matcher);
}
});
```
这里的过滤器使用正则表达式,将输入的值转化为大小写不敏感的字符串匹配模式,并将其应用到store的name字段上。当ComboBox的值改变时,先清除之前的过滤器,然后根据新值重新过滤数据。
这样,用户就可以在下拉框中输入任意字符,然后根据匹配的结果进行筛选。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)