ExtJS 4: почему поля не отображаются в моей пользовательской Ext.форме.Панель?

#extjs4

#extjs4

Вопрос:

Я определяю класс, который расширяет Ext.form.Панель, но ни одно из полей не отображается при его отображении (их даже нет в DOM). Что-то не так с определением класса таким образом?

 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;
    }
});
  

Спасибо за любую помощь / совет.

Комментарии:

1. Как вы создаете экземпляр класса в приложении?

2. TabPanel.add( Ext.create(‘myapp.view.admin.EditUserFormPanel’) );

Ответ №1:

Для представлений (видимых компонентов) (более подробно: все, что наследуется от Ext.Component), вы должны использовать initComponent вместо constructor настройки своего компонента.

Просто замените слово constructor на initComponent в вашем примере, и оно должно работать.

Подробнее о методе initComponent см. в API.

Комментарии:

1. Для всех, кто сталкивается с этим, мне также нужно было воспользоваться советом @dougajmcdonald’s и переключиться с type: ‘textfield’ на xtype:’textfield’

Ответ №2:

Я думаю, вам нужно будет использовать xtype: 'textfield' , а не type: textfield

Комментарии:

1. Спасибо, Даг! Вы и сукник оба были правы — жаль, что я не могу отметить оба как ответы.