我们正在将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
});