combobox - ExtJS EditorGridPanel中的级联组合框

我有一个工作的EditorGrid面板，其中两列具有ComboBox编辑器。这两个ComboBox都从数据库（countryStore和cityStore）远程加载。

我想将cityComboBox限制为仅显示所选国家/地区的城市。我需要使用数据库中的过滤器重新加载cityStore（有太多城市无法过滤本地）。过滤器值为countryComboBox值。

countryComboBox中始终有一个值，因为在创建新记录时我添加了默认值= 1，所以这不是问题。

我不知道哪个监听器适合这里。我需要赶紧双击国家/地区单元格，直到显示countryComboBox并在组合框显示之前对其进行过滤（或在检索数据时显示等待消息）。

如果无法做到这一点，我是否可以通过双击一个单元格来打开一个弹出窗口，从经过过滤的城市的组合框中选择，“确认”，然后将该值输入到该单元格中？

最佳答案

我终于做到了。我创建了两个解决方案-用于网格内的本地和远程下拉搜索。最后，我决定使用本地搜索（可以在ExtJS的country_id查询中添加cities并在ExtJS中进行过滤），但是可以将其用于远程搜索-如果有人需要，我可以准备解决方案了。

LOCAL SOLUTION

我必须使用beforeQuery事件过滤cityCombo，并使用同一行中countryCombo的ID。这是cityCombo的代码：

var cityCombo = new Ext.form.ComboBox({
    triggerAction: 'all',
    mode: 'local',
    lastQuery: '', // to make sure the filter in the store is not cleared the first time the ComboBox trigger is used
    store: cityDropdownStore,
    displayField: 'city',
    valueField: 'city_id',
    listeners: {
        beforeQuery: function(query) {
            currentRowId = myGrid.getSelectionModel().getSelected().data.country_id;
            this.store.clearFilter();
            this.store.filter( { property: 'country_id', value: currentRowId, exactMatch: true } );
        }
    }
});

如您所见，当双击网格内的cityCombo时，我在当前行中得到country_id并使用该值过滤cityStore。这要求cityStore具有以下字段：id，country_id，city

仍然存在一个问题：当用户更改countryCombo时，城市字段应更改/警告用户当前国家/地区不正确。解决此问题的方法很复杂...正如您可能知道的那样，您无法获得对comboBox的parentGrid的引用（否则可以只调用countryCombo --> parentGrid --> currentRecord --> cityCombo --> change it）。

我尝试监听网格本身的rowchange事件，但是如果用户在更改countryCombo之后直接单击了另一行，则会更改错误的行的城市。

解决方案有些先进：我不得不将当前行的引用从网格的beforeedit事件复制到cityCombo。这是网格的侦听器：

listeners: {
    beforeedit: function(e) {
        // reference to the currently clicked cell
        var ed = e.grid.getColumnModel().getCellEditor(e.column, e.row);
        if (ed && ed.field) {
            // copy these references to the current editor (countryCombo in our case)
            Ext.copyTo(ed.field, e, 'grid,record,field,row,column');
        }
    }
},

现在，我们的countryCombo具有在更改城市时重置城市所需的所有信息。这是完整的countryCombo代码：

var countryCombo = new Ext.form.ComboBox({
    id: 'skupina_combo',
    typeAhead: true,
    triggerAction: 'all',
    lazyRender: true,
    mode: 'local',
    store: countryDropdownStore,
    displayField: 'country',
    valueField: 'country_id',
    listeners: {
        change: function(t, n, o) {    // t is the reference to the combo
            // I have t.record available only because I copied it in the beforeEdit event from grid
            t.record.set('city_id', '0');
        }

    }
});

单元格渲染器对我的存储过滤没有问题，因此我只需要一个存储即可进行渲染和comboBox编辑（cityStore）。

远程解决方案要求我为城市创建两个商店-cityRendererStore和cityDropdownStore，它们每次都查询数据库而不是使用过滤器。如果您有太多城市无法在本地进行过滤，则必须采用这种方法。我应该提到的是我并没有在应用程序中真正使用城市和国家，我只是创建了这个示例来简化事情。

我对最终结果感到非常满意-它提供了网格的所有优点以及通常仅以表格形式提供的条件下拉菜单。