ExtJS - Hiding ComboBox based on other Combo value

Question

I'm having a weird issue where I'm defining a combo has hidden:true, which works fine, but when I show the combobox and select a value from it, it hides. Here's some example code:

(I'm using some custom extended ComboBox's, but that's not the issue)

First 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
    }
};

Second ComboBox (shown only when the first Combo == Template)

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

The hiding/showing works fine, but it seems that when I select a value from the "Template" dropdown box, it re-fires the config and hides the combobox. Selecting a value from other combo's in the form seems to do the same thing, but ONLY the ones that are remote calls (from a URL that returns JSON for the combo).

Any fixes for remote combo's "resetting" form configs?

EDIT: All code for ComboBox's. All of these are just rendered inside a 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
};

Which version of ExtJS are you using? ExtJS 4 was released not long ago, it contains quite some changes and new functionality. — Mark
3.3, currently. We have a very large infrastructure built around 3, so we cannot upgrade right now. — dmackerman
@dmackerman Can you share the code which build up this section? So we could know what's wrong with the events that is not triggering well. The configuration you provided doesn't seems to cover all the listeners you have written I think — Lionel Chan
Could not reproduce. Would you mind share your ibwComboJson component too? Here is a fiddle example. I can't do ajax calls there, you might want to play around with your real ajax data. — Lionel Chan

Akash Jobanputra Akash Jobanputra · Accepted Answer · 2017-07-19T07:39:03

In the 'select' listener's if loop, after the show() function call, add the following statement:

this.bulkImportTemplateCombo.setVisible(true)

ExtJS - Hiding ComboBox based on other Combo value

1 Answers