CODEWITHSUNDEEP
formsextjsdynamic
David
David

Reputation: 8670

ExtJs dynamically building a formpanel from a datastore record

I am trying to dynamically populate a ExtJs FormPanel from a datastore record. When the user clicks on a row in the GridPanel, the buildForm method is called and the clicked record is sent passed in as the first arg.

The below code (when debugging) appears to be working, but the doLayout method has no effect.

Can anyone point me in the right direction?

mymodule = Ext.extend(Ext.FormPanel, {
    forceLayout: true,
    initComponent: function () {
        Ext.applyIf(this, {
            id: Ext.id(),
            labelWidth: 75,
            defaultType: 'textfield',
            items: [{
                layout: 'form',
                items: [{
                    fieldLabel: 'test',
                    xtype: 'textfield'
                }, {
                    fieldLabel: 'test',
                    xtype: 'textfield'
                }]
            }]
        });
        mymodule.superclass.initComponent.call(this);
    },
    buildForm: function (record, c) {
        var form = this.getForm();

        var formItems = new Ext.util.MixedCollection();

        Ext.each(record.fields.items, function (item) {
            formItems.add(new Ext.form.TextField({
                labelStyle: 'width:100px',
                fieldLabel: item.name,
                name: item.dataIndex,
                id: 'field-' + item.name
            }));
        }, this);

        form.items = formItems;

        this.doLayout(false, true);

        form.loadRecord(record);
    }
});

Upvotes: 6

Views: 6084

Answers (1)

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

The right way to add components to the form would be to use the add() method. If your form is already rendered, use the add() method and then call doLayout().

So you might want to try this:

form.add(formItems);
form.doLayout(false,true);
form.loadRecord(record);

Upvotes: 5

Related Questions