Dynamic DropDownMenu in extjs

Question

I have a 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.

How do i create a dynamic store in the second DropDownBoxes.

This is the code:

{
                            xtype: 'combobox',
                            displayField: 'vendor_name',
                            typeAhead: true,
                            mode: 'local',
                            triggerAction: 'all',
                            emptyText:'Choose vendor...',
                            selectOnFocus:true,
                            fieldLabel: 'Vendor Name',
                            margin: 10,
                            id: 'txtBidVendor',
                            labelWidth: 100,
                            store:  Ext.create('Ext.data.Store', {
                                fields:[
                                    {name: 'vendor_name'}
                                ],
                                proxy: {
                                    type: 'ajax',
                                    timeout: 120000,
                                    url: 'GetVendors.jsp',
                                    reader: {
                                        type: 'json',
                                        root: 'data',
                                        successProperty: 'success'
                                    }
                                },
                                autoLoad: true
                            })
                        },
                        {
                            xtype: 'combobox',
                            displayField: 'rate_desc',
                            typeAhead: true,
                            mode: 'local',
                            triggerAction: 'all',
                            emptyText:'Choose Quality...',
                            selectOnFocus:true,
                            fieldLabel: 'Vendor Quality',
                            margin: 10,
                            id: 'txtBidVendorQuality',
                            labelWidth: 100,
                            store:  Ext.create('Ext.data.Store', {
                                fields:[
                                    {name: 'rate_desc'}
                                ],
                                proxy: {
                                    type: 'ajax',
                                    timeout: 120000,
                                    url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}), 
                                    reader: {
                                        type: 'json',
                                        root: 'data',
                                        successProperty: 'success'
                                    }
                                },
                                autoLoad: true
                            })
                        },

I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"

Answer 1

About what you are trying to accomplish here I have two considerations:

1. The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.

2. What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:

{
    xtype: 'combobox',
    displayField: 'vendor_name',>         
    emptyText: 'Choose vendor...',
    selectOnFocus: true,
    fieldLabel: 'Vendor Name',
    id: 'txtBidVendor',
    store: vendorStore,
    listeners: {
        select: function (combo, records, eOpts) {
            var record = records[0]; // just want the first selected item

            rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
            alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
            rateStore.load();
        }
    }
}

For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.

Hope it helps.