【问题标题】:Cascading ComboBoxes in ExtJS EditorGridPanelExtJS EditorGridPanel 中的级联组合框
【发布时间】:2010-10-22 18:08:29
【问题描述】:

我有一个可用的 EditorGrid 面板,其中两列有 ComboBox 编辑器。两个 ComboBox 都是从数据库远程加载的(countryStorecityStore)。

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

countryComboBox总是有一个值,因为我在创建新记录的时候添加了一个default = 1,所以这不是问题。

我不知道哪个听众适合这里。我需要在countryComboBox 出现之前捕捉到双击国家/地区单元格的那一刻,并在组合框显示之前过滤组合框(或在检索数据时显示等待消息)。

如果这不可能,我可以通过双击一个单元格打开一个弹出窗口,从过滤城市的组合框中选择,“确认”并将值输入到单元格中吗?

【问题讨论】:

    标签: combobox extjs grid


    【解决方案1】:

    我终于成功了。我创建了两个解决方案 - 用于网格内的本地和远程下拉搜索。最后,我决定使用本地搜索(我可以将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 具有这些字段:idcountry_idcity

    仍然存在一个问题:当用户更改countryCombo 时,城市字段应该更改/警告用户它对于当前国家/地区不正确。解决方案很复杂...您可能知道,您无法获得对组合框的 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)。

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

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

    【讨论】:

      【解决方案2】:

      我可以在这里看到几个选项。您可以捕获 store 的 update 事件(当基础记录更新或标记为脏时)或捕获 countryComboBox 的 select 事件。这两个都会为您提供所选国家/地区的 id 值,然后您可以将其添加到 cityComboBox 的baseParams 以进行远程过滤。

      【讨论】:

      • 我已经尝试了第一个建议(商店的update 事件),但它不起作用 - 假设我想编辑现有记录的城市 - 我双击城市下拉菜单,还没有商店更改. cityComboBox 上的select 仅在您在下拉列表中选择一个值时触发 - 我需要在选择任何内容之前对其进行过滤。仅在编辑现有记录的城市时,不会触发 countryComboBox 上的 select(与 update store 问题相同)。
      • 但是您已经知道城市组合应该默认为什么,因为您默认为country = 1 对吧?您的问题中显示您的网格配置和事件处理程序的代码示例会很有帮助:)
      • 好吧,我的代码不会有什么好处,因为就可编辑网格中的动态下拉菜单而言,一切正常。我需要新代码。关于您的评论:是的,我总是有 country = 1(或 country = 记录中的现有值),但我的问题是如何过滤当前行的 countryComboBox 字段(我有)上的 cityCombobBox
      • 好吧,我想我当时不知所措。也许您可以捕获组合的 beforeQuery 事件并读取记录,然后过滤参数。
      • 我会试试beforeQuery - 我知道这是一个复杂的情况,谢谢你的建议。如果我设法让它工作,我会在这里分享解决方案。
      猜你喜欢
      • 2011-09-15
      • 2012-10-23
      • 2011-02-20
      • 1970-01-01
      • 1970-01-01
      • 2021-12-05
      相关资源
      最近更新 更多