Extjs - Dynamically generate fields in a FormPanel

Benjamin picture Benjamin · May 21, 2010 · Viewed 8.7k times · Source

I've got a script that generates a form panel:

var form = new Ext.FormPanel({
    id: 'form-exploit-zombie-' + zombie_ip,
    formId: 'form-exploit-zombie-' + zombie_ip,
    border: false,
    labelWidth: 75,
    formBind: true,
    defaultType: 'textfield',
    url: '/ui/modules/exploit/new',
    autoHeight: true,
    buttons: [{
        text: 'Execute exploit',
        handler: function () {
            var form = Ext.getCmp('form-exploit-zombie-' + zombie_ip);

            form.getForm().submit({
                waitMsg: 'Running exploit ...',
                success: function () {
                    Ext.beef.msg('Yeh!', 'Exploit sent to the zombie.')
                },
                failure: function () {
                    Ext.beef.msg('Ehhh!', 'An error occured while trying to send the exploit.')
                }
            });
        }
    }]
});

that same scripts then retrieves a json file from my server which defines how many input fields that form should contain. The script then adds those fields to the form:

Ext.each(inputs, function(input) {
    var input_name;
    var input_type = 'TextField';
    var input_definition = new Array();

    if(typeof input == 'string') {
        input_name = input;
        var field = new Ext.form.TextField({
                id: 'form-zombie-'+zombie_ip+'-field-'+input_name,
                fieldLabel: input_name,
                name: 'txt_'+input_name,
                width: 175,
                allowBlank:false
            });
        form.add(field);
    }
    else if(typeof input == 'object') {
        //input_name = array_key(input);

        for(definition in input) {
            if(typeof definition == 'string') {

            }
        }
    } else {
        return;
    }
});

Finally, the form is added to the appropriate panel in my interface:

panel.add(form);
panel.doLayout();

The problem I have is: when I submit the form by clicking on the button, the http request sent to my server does not contain the fields added to the form. In other words, I'm not posting those fields to the server.

Anyone knows why and how I could fix that?

Answer

Igor Pavelek picture Igor Pavelek · May 21, 2010

Your problem is here:

id: 'form-exploit-zombie-'+zombie_ip,
formId: 'form-exploit-zombie-'+zombie_ip,

what you are doing is that you are setting the id attribute of the form panel and the id attribute of the form (form tag) to the same value. Which means that you have two elements with the same id and that is wrong.

Just remove this line

formId: 'form-exploit-zombie-'+zombie_ip,

and you should be fine.