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元素，尽管带有renderTo配置的Ext.create会抛出以下错误：

Uncaught TypeError: Cannot call method 'createRange' of undefined 

如果您需要任何进一步的信息，如callstack或其他东西......请不要犹豫......

Answer 1

Ext.query返回一个数组，这可能不是renderTo所期望的数据。

使用Ext.dom.Query.selectNode或Ext.query('li.LoginUsername')[0]，或任何能够为您提供单一元素的内容。