Sencha ExtJS - How to dynamically create a form textfield (Ext.form.field.Text)

The following code shows how to dynamically create a Sencha ExtJS form textfield, i.e., a Ext.form.field.Text field. Maybe one of the best things about this example is that it shows how to get input focus on a textfield:

createTextField: function() {
    return Ext.create('Ext.form.field.Text', {
        fieldLabel: 'Task:',
        name: 'task',
        itemId: 'taskTextfield',
        autofocus: true,
        enableKeyEvents: true,
        labelAlign: 'left',
        labelWidth: 50,
        labelStyle: 'font-size: 16px;',
        width: 500,
        listeners: {
            // this works, putting focus in the textfield
            afterrender: function(field) {
                field.focus(false, 250);
            },
            specialkey: function(field, event, options) {
                if (event.getKey() == event.ENTER) {
                    // handle the ENTER key
                }                    
            }
        }
    });
}

You don’t need all of those config options, but I thought I’d leave them in there for now. See the Sencha docs for more information of what config options are available.