Dynamic textfield name in ExtJS form

Question

I have a panel with dynamicaly created child panels by using Ext.Create and add() method. Now I have to set unique name of fields inside each panel. I'm trying to use some unique ID (myId) parameter for it but I'm getting some_field[undefined] on form submit.

How can I access myId property and use it in field names in my view? https://fiddle.sencha.com/#fiddle/1u74

Thank you!

You can't use it like that in a declarative form. You would need to capture that variable in closure scope. — Evan Trimboli

Jaimee Jaimee · Accepted Answer · 2017-04-19T17:11:27

If you'd like to have a dynamic custom config in your panel, I'd recommend building the panel within an initComponent function.

     Ext.define('MyPanel', {
        extend: 'Ext.panel.Panel',
        initComponent: function() {
            var myid = this.config.myId; // <--- This is a custom config
            this.items = [
                {
                    xtype: 'textarea',
                    fieldLabel: 'Description',
                    name: 'descr['+ myid +']' // <--- Here it is used
                }
            ];
            this.callParent(arguments);
        }
    });

And when the panel is created, the myId is treated like any other config

    Ext.create('MyPanel', {
        myId: 10
    });

I've demonstrated this in a fiddle using your panel. Note that in both of the cases in the fiddle, the name is a string. "descr[10]" for example is a string, and not referencing an array.

Dynamic textfield name in ExtJS form

1 Answers