Question

I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn’t the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.

When using Chrome’s developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.

Here is my code:

EventForm = Ext.extend(Ext.form.FormPanel, {
    constructor: function(config) {
        config = Ext.apply({
            items: [
                {
                    layout: 'column',
                    xtype: 'container',
                    items: [
                        {
                            layout: 'form',
                            xtype: 'container',
                            columnWidth: 0.5,
                            items: [
                                {
                                    fieldLabel: 'My Combo Box'
                                    name: 'mycombobox',
                                    xtype: 'combo',
                                    store: new Ext.data.ArrayStore({
                                        fields: ['size'],
                                        data: [
                                            ['50'],
                                            ['100'],
                                            ['150'],
                                            ['200']
                                        ]
                                    }),
                                    displayField: 'size',
                                    valueField: 'size',
                                    forceSelection: true,
                                    editable: false,
                                    triggerAction: 'all',
                                    mode: 'local',
                                    listWidth: 60,
                                    width: 60
                                }
                            ]
                        }, {
                            // another column here similar to above
                        }
                    ]
                }
            ]
        }, config);

        EventForm.superclass.constructor(config);
    }
});

Answer 1

You are not calling the constructor of EventForm’s superclass correctly. Change the last line of your constructor function to read:

EventForm.superclass.constructor.call(this, config);