ExtJS EditorGridPanel中的级联组合框

Question

我有一个工作的EditorGrid面板,其中两列有ComboBox编辑器.两个ComboBox都是从数据库(countryStore和cityStore)远程加载的.

我想限制cityComboBox只显示所选国家/地区的城市.我需要cityStore从数据库重新加载过滤器(有太多的城市来过滤localy).过滤器值是countryComboBox值.

countryComboBox中始终存在一个值,因为我在创建新记录时添加了默认值= 1,因此这不是问题.

我不知道哪个听众适合这里.我需要抓住当我双击国家单元格时,在countryComboBox显示之前并在显示之前过滤组合框(或在检索数据时显示等待消息)的时刻.

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

Answer 1

我终于成功了.我创建了两个解决方案 - 用于网格内的本地和远程下拉搜索.最后,我决定使用本地搜索(我可以添加country_id到我的cities查询并在ExtJS中过滤),但是可以使这项工作用于远程搜索 - 如果有人需要,我也可以准备该解决方案.

LOCAL SOLUTION

我不得不cityCombo使用beforeQuery事件进行过滤,使用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');
        }

    }
});

单元格渲染器在过滤商店时没有问题,所以我只需要一个商店来进行渲染和组合框编辑(cityStore).

远程解决方案要求我为城市创建两个商店 - cityRendererStore并且cityDropdownStore每次查询数据库而不是使用过滤器.如果您有太多城市需要在本地过滤,那么这种方法是必要的.我应该提到我在我的应用程序中并没有真正使用城市和国家,我只是创建了这个例子来简化事情.

我对最终结果感到非常高兴 - 它提供了网格的所有好处以及通常仅在表单中提供的条件下拉列表.