ExtJS - 基于其他 Combo 值隐藏 ComboBox答案

【问题标题】：ExtJS - Hiding ComboBox based on other Combo valueExtJS - 基于其他 Combo 值隐藏 ComboBox
【发布时间】：2011-10-09 11:45:31
【问题描述】：

我遇到了一个奇怪的问题，我定义的组合具有 hidden:true，它工作正常，但是当我显示组合框并从中选择一个值时，它会隐藏。下面是一些示例代码：

（我正在使用一些自定义扩展 ComboBox，但这不是问题）

第一个组合框：

var bulkImportType = {
    xtype: 'ibwComboLocal',
    fields: ['id', 'name'],
    data: [[1, '3rd Party Tag'], [2, 'Image'], [3, 'Template']],
    fieldLabel: 'Type',
    listeners: {
        'select': function(combo, record, index) {
            if (record.get('name') == 'Template') {
                this.bulkImportTemplateCombo.show();
            } else {
                this.bulkImportTemplateCombo.hide();
            }
        }, scope: this
    }
};

第二个 ComboBox（仅在第一个 Combo == 模板时显示）

var bulkImportTemplate = {
    xtype: 'ibwComboJson',
    hidden: 'true',
    url: 'http://itads-dl06.tweb.aol.com:3080/IBW/templates?returnJson=1',
    ref: '../bulkImportTemplateCombo',
    root: 'templateList',
    fieldLabel: 'Template'         
};

隐藏/显示工作正常，但似乎当我从“模板”下拉框中选择一个值时，它会重新触发配置并隐藏组合框。从表单中的其他组合中选择一个值似乎做同样的事情，但仅限远程调用的那些（来自为组合返回 JSON 的 URL）。

远程组合的“重置”表单配置有什么修复吗？

编辑：ComboBox 的所有代码。所有这些都只是在 FormPanel 中呈现。

var inventorySelectDropdown = {
    xtype: 'ibwComboLocal',
    fields: ['id', 'name'],
    data: [[1, 'O&O'], [2, 'Network']],
    value: 1, // set to O&O by default
    fieldLabel: 'Inventory'
};

var bulkImportType = {
    xtype: 'ibwComboLocal',
    fields: ['id', 'name'],
    data: [[1, '3rd Party Tag'], [2, 'Image'], [3, 'Template']],
    fieldLabel: 'Type',
    listeners: {
        'select': function(combo, record, index) {
            if (record.get('name') == 'Template') {
                this.bulkImportTemplateCombo.show();
            } else {
                this.bulkImportTemplateCombo.hide();
            }
        }, scope: this
    }
};

var bulkImportTemplate = {
    xtype: 'ibwComboJson',
    hidden: 'true',
    url: 'xxx',
    ref: '../bulkImportTemplateCombo',
    root: 'templateList',
    fieldLabel: 'Template'         
};

var vendorDropdownBulk = {
    xtype: 'ibwComboJson',
    url: 'xxx',
    root: 'vendorList',
    fieldLabel: 'Vendor'
};

var bulkImportUploadField = {
    xtype: 'fileuploadfield',
    fieldLabel: 'Select Import File',
    width: 400
};

【问题讨论】：

您使用的是哪个版本的 ExtJS？ ExtJS 4 发布不久，它包含了相当多的变化和新功能。
3.3，目前。我们有一个非常大的基础设施，围绕 3 构建，所以我们现在无法升级。
@dmackerman 你能分享构建这个部分的代码吗？所以我们可以知道触发不好的事件出了什么问题。您提供的配置似乎并没有涵盖您编写的所有侦听器我认为
@Lionel：为你编辑了我的答案。
无法重现。你介意分享你的ibwComboJson 组件吗？这是fiddle example。我不能在那里进行 ajax 调用，你可能想玩弄你真正的 ajax 数据。

标签： forms extjs combobox hidden-field

【解决方案1】：

在'select'监听器的if循环中，在show()函数调用之后，添加如下语句：

this.bulkImportTemplateCombo.setVisible(true)

【讨论】：