Ext.form.ComboBox 基本定义

Ext.form.ComboBox 是 ExtJS 中的一个表单控件，用于创建一个下拉列表框，用户可以在列表中选择一个或多个选项。该控件可以通过 AJAX 或本地数据源进行数据加载，并支持自动完成和过滤功能。基本定义如下：

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，包括一个标签、数据源、查询模式、显示字段和值字段等属性。在渲染到页面时，用户可以点击下拉箭头选择一个选项。

相关问题

Ext.form.ComboBox load使用filterBy

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`方法来过滤数据：

// 创建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`方法来实现过滤。