Question

I just typed up another post and halfway through I figured out my problem. Let’s see if it happens again.

I need to be able to update another drop down if a given one is selected. My problem is the secondary drop down isn’t loaded the first time; nothing happens on the page. If the user selects the same element a second time, then everything works fine.

I’m programatically generating a bunch of ComboBoxes:

var item = new Ext.form.ComboBox({
                        store: store,
                        id: input.id,
                        name: input.id,
                        displayField: 'description',
                        valueField: 'id',

                        mode: 'local',
                        forceSelection: true,
                        triggerAction: 'all',
                        emptyText: 'Select one...',
                        typeAhead: false,
                        editable: true,
                        allowBlank: allowBlank,
                        selectOnFocus:true,
                        fieldLabel: input.label,
                        listeners: {
                            scope: this,
                            'select': checkDependencies
                        },
                        autoHeight: true
                    });

My problem occurs when I try to update the dependent drop down. Here’s the function that gets called when the user selects an option:

function checkDependencies(el, ev){
    debug(el);
    debug(el.value);
    var val = el.value;
    if (Ext.isArray(dependencies[val])) {
        var id = dependencies[val]['changeId'];
        var input = Ext.getCmp(id);
        var vals = dependencies[val]["vals"];
        input.store.removeAll();
        gridForm.doLayout();
        debug("num elements: " + vals.length);
        input.autoHeight = true;
        for (var i=0;i<vals.length;i++) {
            input.store.add(vals[i]);
        }
        gridForm.doLayout(false,true);
    }
}

It hits all the debug lines. There are elements in the list, but like I said, the first time the user selects an element it doesn’t work, but subsequent selections work fine.

I ended up putting doLayouts eveywhere, but it didn’t seem to help.

Answer 1

Try setting queryMode: 'local' on the secondary box, and in your checkDependencies, doing input.lastQuery = ''.