我们正在将ExtJS添加到遗留代码中,这意味着我们没有足够的能力使其成为纯ExtJS应用程序。

我很难理解ExtJS组件和元素的概念。

在这里的EXT-JS注释之间,我想实现许多GUI优点!

Ext.onReady (function () {


    var div = document.createElement('div');



    //////////EXT-JS//////////////////////

    var myDiv = Ext.create('Ext.Panel',{

    })


    //add lots and lots of cool widgets here to myDiv!!!!!!!


    ///////////EXT-JS/////////////////////////////


    div.appendChild(myDiv); //:(

    document.body.appendChild(div);


});


唯一的先决条件是它在JavaScript代码之前和之后都遵循。

div.appendChild(myDiv)行似乎不起作用,因为它需要一个javascript节点,而myDiv是精美的ExtJS对象(是组件而不是元素?)。

我得到的这一行的错误是:


  未被发现的NotFoundError:无法在“节点”上执行“ appendChild”:
  新的子元素为null。


我尝试了myDiv.render(div),它也行不通(并且也破坏了旧模式)。

小提琴:

https://fiddle.sencha.com/#fiddle/69d

最佳答案

Ext.create('Ext.Panel', ...)不返回DOM节点,而是返回Ext.Panel的实例。

本地DOM API显然不知道如何处理ExtJS对象。

但是,在实例化组件时可以使用renderTo配置选项,以指定其容器的顺序。

注意:不应使用renderTo嵌套ExtJS组件。


  指定元素,DOM元素或现有元素的ID
  该组件将被渲染到。 --
  http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.AbstractComponent-cfg-renderTo


var yourPanel = Ext.create('Ext.Panel', {
    title: 'My Panel',
    width: 400,
    height: 400,
    renderTo: div
});

09-11 07:07
查看更多