Ext.form.ComboBox load使用filterBy
时间: 2023-12-12 10:02:04 浏览: 30
Ext.form.ComboBox的load方法可以用于从远程数据源加载数据到下拉列表中。而filterBy方法是用于过滤下拉列表中的数据的。
如果你想在加载数据时对数据进行过滤,可以在load方法中使用params参数来指定过滤条件。例如:
```
combo.load({
url: 'mydata.php',
params: {
filter: 'somevalue'
}
});
```
在这个例子中,load方法会从'mydata.php'加载数据,并且只会返回符合filter参数值为'somevalue'的数据。
如果你想在加载数据后对数据进行过滤,可以使用filterBy方法。例如:
```
combo.load({
url: 'mydata.php',
callback: function() {
combo.store.filterBy(function(record) {
return record.get('field') == 'somevalue';
});
}
});
```
在这个例子中,load方法会从'mydata.php'加载数据,并在加载完成后调用callback函数。callback函数中使用filterBy方法对下拉列表中的数据进行过滤,只留下符合条件的数据。
相关问题
有完整的Ext.form.ComboBox调用store.filterBy例子吗
当然有,以下是一个简单的例子,展示了如何使用Ext.form.ComboBox的`store.filterBy`方法来过滤数据:
```javascript
// 创建store
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'age'],
data: [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 40 }
]
});
// 创建ComboBox
var comboBox = Ext.create('Ext.form.ComboBox', {
fieldLabel: '姓名',
displayField: 'name',
valueField: 'name',
store: store,
queryMode: 'local'
});
// 过滤数据
store.filterBy(function(record) {
return record.get('age') >= 30;
});
// 渲染ComboBox
comboBox.render(Ext.getBody());
```
以上代码中,我们首先创建了一个store,其中包含了三条记录,每条记录包含了一个`name`字段和一个`age`字段。然后,我们创建了一个ComboBox,将store作为ComboBox的数据源,并且将`name`字段作为ComboBox的显示字段。
接着,我们使用`store.filterBy`方法来过滤数据,只保留`age`字段大于等于30的记录。最后,我们将ComboBox渲染到页面上。
需要注意的是,`store.filterBy`方法会改变store中记录的顺序,因此在使用该方法之前,我们需要考虑好记录的顺序是否对我们的需求产生影响。如果需要保留记录的原始顺序,可以使用`store.filter`方法来实现过滤。
Ext.form.ComboBox 基本定义
Ext.form.ComboBox 是 ExtJS 中的一个表单控件,用于创建一个下拉列表框,用户可以在列表中选择一个或多个选项。该控件可以通过 AJAX 或本地数据源进行数据加载,并支持自动完成和过滤功能。基本定义如下:
```javascript
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Select State',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"},
//...
]
}),
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
renderTo: Ext.getBody()
});
```
上述代码创建了一个基本的 Ext.form.ComboBox,包括一个标签、数据源、查询模式、显示字段和值字段等属性。在渲染到页面时,用户可以点击下拉箭头选择一个选项。