Ext JS 4.2.1 - renderTo вызывает ошибку

Question

Я создал пользовательский компонент с XTemplate следующим образом:

initComponent: function () {        
    this.initLayout();
    this.callParent();
},

initLayout: function() {
    var me = this;
    var mainTpl = this.getTemplate();
    Ext.apply(me, { html: mainTpl.apply() });
},

в моем шаблоне у меня есть некоторые заполнители, где я хочу визуализировать некоторые текстовые поля... поэтому я попытался сделать это в обработчике событий следующим образом:

listeners: {       
    render: function () {
        var usrPlaceHolder = Ext.query('li.LoginUsername');
        if (usrPlaceHolder) {
            Ext.create('Ext.form.field.Text', {
                renderTo: usrPlaceHolder
            });
        }
    }
}

моя функция Ext.query находит правильный элемент DOM, хотя Ext.create с конфигурацией renderTo выдает следующую ошибку:

Uncaught TypeError: Cannot call method 'createRange' of undefined 

если вам нужна дополнительная информация, например, стека вызовов или что-то.. не стесняйтесь спрашивать..

Answer 1

Ext.query возвращает массив, который, вероятно, не то, что renderTo ожидает.

использование Ext.dom.Query.selectNode вместо или Ext.query('li.LoginUsername')[0]или что-нибудь, что даст вам один элемент.