Ext JS 4.2.1-renderTo导致错误

Question

I created a custom component with an XTemplate like this:

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

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

in my template i got some placeholders where i want to render some textfields... so i tried to accomplish this in an eventhandler like that:

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

my Ext.query function does find the correct DOM Element, though the Ext.create with the renderTo config does throw the following Error:

Uncaught TypeError: Cannot call method 'createRange' of undefined 

if you need any further information like a callstack or something.. dont hesitate to ask..

Answer 1

Ext.query returns an array, which is probably not what renderTo is expecting.

Use Ext.dom.Query.selectNode instead, or Ext.query('li.LoginUsername')[0] , or anything that will give you a single element.