Question

I’m defining a class that extends Ext.form.Panel but none of the fields appear when it’s shown (they’re not even in the DOM). Is there something wrong with defining the class this way?

Ext.define('myapp.view.admin.EditUserFormPanel', {    
    extend: 'Ext.form.Panel',

    requires: [
        'myapp.util.Logger'
    ],

    /**
     * Constructor, typically used to create any instance variables and declare
     * the events that this object may fire (if it is Observable). For more info
     * see http://goo.gl/rXpzO
     *
     * @param {Object} config (optional)
     */
    constructor: function(config) {
        var me = this; // http://goo.gl/QYYZm
        config = config || {};

        Log.info('Created '+me.self.getName());

        // Call the method we are overriding (i.e., the parent's constructor),
        // passing in all arguments that we have received via JavaScript's
        // standard "arguments" object.
        me.callParent(arguments);

        // Apply default config settings
        me.initConfig(config);

        me.items = [
            {
                type: 'textfield',
                fieldLabel: 'OpenID',
                name: 'openid'
            },
            {
                type: 'textfield',
                fieldLabel: 'First',
                name: 'firstName'
            },
            {
                type: 'textfield',
                fieldLabel: 'Last',
                name: 'lastName'
            },
            {
                type: 'textfield',
                fieldLabel: 'Email',
                name: 'email'
            }
        ];

        return me;
    }
});

Thanks for any help/advice.

Answer 1

For views (visible components) (More detailed: everything that inherits from Ext.Component) you should use initComponent instead of constructor to set up your component.

Just replace the word constructor with initComponent in your example and it should work.

See the API for details on the initComponent method.