Error adding MixedCollection component to extjs form

Question

I am trying to dynamically build a extjs form and when I try to add the dynamically built MixedCollection object to the form I get a TypeError: e.mixins.elementCt is undefined error.

<div id="form-@pageSpecificVar" class="grid-container even"></div>
<script>

    Ext.define('HeaderForm', {
        extend: 'Ext.form.Panel',
        initComponent: function () {
            var me = this;
            Ext.applyIf(me, {
                id: Ext.id(),
                defaultType: 'textfield',
                items: [{
                    xtype: 'container',
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Test'
                    }]
                }]
            });
            me.callParent(arguments);
        }
    });

    // Define our data model
    Ext.define('HeaderModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'FieldA', type: 'int' }
        ]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'HeaderModel',
        proxy: {
            type: 'ajax',
            actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
            url: '@Url.Content("~/Test/Header")',
            timeout: 1200000,
        listeners: {
            load: function () {
            }
        }
        }
    });

    store.load({
        scope: this,
        callback: function (records, operation, success) {
                var form = new HeaderForm();
                var formItems = new Ext.util.MixedCollection();
                Ext.each(records[0].fields.items, function (item) {
                    console.log(item);
                    formItems.add(new Ext.form.DisplayField({
                        fieldLabel: 'Test'
                    }));
                }, this);
                console.log(formItems);
                form.add(formItems);
                form.loadRecord(records[0].data);
                form.render('form-@pageSpecificVar');
        }
    });
</script>

Another thing I don't understand is, when I put the function inside the load listener, nothing happens. So I had to resort to using the callback event.

Update: form.add method takes a component or component array, so instead of adding MixedCollection type I refer to formItems.items to add the array of displayfields components.

But for some reason the store listeners load is not getting triggered when store.load is executed, does anyone see a problem with that? Nevermind this... I figured out... I placed the listener instead of the proxy instead of the store.

Q2

Also something weird is that during the callback method of store.load, the records is not return with the loaded values. Nevermind this... I figured out... It was the json object I'm passing. Forgot to take it out of the error/data structure for form.

Thanks

Answer 1

MixedCollection isn't an accepted parameter for add, you need to use an array. This info is in the docs.