ExtJS: Combo datastores not loading inside a fieldset

Question

I have a fieldset issue. The form has a dropdown combo with date ranges the user can select. The dates are in an ArrayStore. If I put it outside the fieldset, it works perfectly. But once inside the fieldset, it will not load the data. I've tried this with JSON stores as well, with the same result.

Here's the code:

{
    name:           'DateFieldSet',
    fieldLabel:     '',
    labelSeparator: ':',
    title:          'Choose a date range',
    collapsible:    false,
    autoHeight:     true,
    allowBlank:     true,
    items:          [
                        {
                            fieldLabel:         'Days in past',
                            hiddenName:         'DateRangeCombo',
                            store:              new Ext.data.ArrayStore({
                                                    id:         0,
                                                    fields:     [
                                                                    'rangeValue',
                                                                    'rangeDescription'
                                                    ],
                                                    data:       [
                                                                    [30, '30 days (04/04/2011 - 05/04/2011)'],
                                                                    [60, '60 days (03/05/2011 - 05/04/2011)'],
                                                                    [90, '90 days (02/03/2011 - 05/04/2011)'],
                                                                    [120, '120 days (01/04/2011 - 05/04/2011)'],
                                                                    [180, '180 days (11/05/2010 - 05/04/2011)'],
                                                                    [270, '270 days (08/07/2010 - 05/04/2011)'],
                                                                    [365, '1 year (05/04/2010 - 05/04/2011)']
                                                    ]
                            }),
                            displayField:       'rangeDescription',
                            valueField:         'rangeValue',
                            editable:           true,
                            triggerAction:      'all',
                            width:              150,
                            listeners:          {select:function() {var numberOfDays = ReportForm.form.findField('DateRangeCombo').getValue();var newDate = DateAdd('05/04/2011', 'D', (numberOfDays * -1)); ReportForm.form.findField('StartDate').setValue(newDate);}},
                            xtype:              'combo'
                        },
                        {
                            fieldLabel:         'Or specify your own:',
                            labelStyle:         'width: 100%; font-weight: bold; text-align: left; color: #15428b; font-size: 11px;',
                            labelSeparator:     '',
                            xtype:              'label'
                        },
                        {
                            fieldLabel:         'Start Date',
                            name:               'StartDate',
                            allowBlank:         true,
                            vtype:              '',
                            checked:            false,
                            value:              '04/04/2011',
                            xtype:              'datefield'
                        }, 
                        {
                            fieldLabel:         'End Date',
                            name:               'EndDate',
                            allowBlank:         true,
                            vtype:              '',
                            checked:            false,
                            value:              '05/04/2011',
                            xtype:              'datefield'
                        }
                    ],
    xtype:          'fieldset'
}

It looks perfectly normal to me.

EDIT ~ Here's the error:

this.proxy is undefined

Not that it helps much.

Answer 1

you miss mode config..

{
    xtype: 'combo',
    store: new Ext.data.ArrayStore({
        fields: ['rangeValue', 'rangeDescription'],
        data: [
            [30, '30 days (04/04/2011 - 05/04/2011)'],
            [60, '60 days (03/05/2011 - 05/04/2011)'],
            [90, '90 days (02/03/2011 - 05/04/2011)'],
            [120, '120 days (01/04/2011 - 05/04/2011)'],
            [180, '180 days (11/05/2010 - 05/04/2011)'],
            [270, '270 days (08/07/2010 - 05/04/2011)'],
            [365, '1 year (05/04/2010 - 05/04/2011)']
        ]

    }),
    fieldLabel: 'Days in past',
    displayField: 'rangeDescription',
    valueField: 'rangeValue',

    typeAhead: true,
    mode: 'local',    // add this

    triggerAction: 'all',
    emptyText: 'Select date...',
    listeners: {
        select: function () {
            var numberOfDays = ReportForm.form.findField('DateRangeCombo').getValue();
            var newDate = DateAdd('05/04/2011', 'D', (numberOfDays * -1));
            ReportForm.form.findField('StartDate').setValue(newDate);
        }
    }
}