Javascript ExtJS容器将现有内容设置为项目

我对ExtJS非常陌生，尝试重用jQuery生成的一些现有内容。有没有一种简单的方法可以将现有组件作为项目添加到容器中

我的代码看起来像这样

var rect = $('<div>', {
    'id' : 'rectangle'
}).text("this is a rectangle.");

var cont = new Ext.Container({
    layout : 'absolute',
    width : 400,
    height : 300,
    renderTo : Ext.getBody(),
    border : 1,
    style : {
        borderColor : '#000000',
        borderStyle : 'solid',
        borderWidth : '1px'
    },
    items : [{
        html : rect
    }]
});

var rect=$（“”{
“id”：“矩形”
}).text（“这是一个矩形”）；
var cont=新的外部容器({
布局：“绝对”，
宽度：400，
身高：300，
renderTo:Ext.getBody（），
边界：1，
风格：{
边框颜色：'#000000'，
边框样式：“实心”，
边框宽度：“1px”
},
项目：[{
html:rect
}]
});

只需使用

.html（）

---

最好的方法是使用

contentEl

。请注意，这会将元素移动到组件内部，因此当组件被销毁时，元素也会被销毁

items: {
    contentEl: rect.get(0) // Grab a reference to the DOM element
}

如果要在移动元素之前复制该元素，可以调用：

---

rect.clone.get（0）

您是指

rect

中的html吗？

html:rect.html（）。还有一种方法可以应用已定义的CSS样式吗？嗯，这可能与您的CSS规则有关&extJS。检查元素，看看extJS是否甚至推翻了你的风格。是的，没错。Ext覆盖内容并使
这是一个矩形。
。有没有办法应用旧的CSS规则？您可能需要执行类似于
.html（“这是一个矩形”）
的操作来实现这一点，我不是100%确定！
items: {
    contentEl: rect.get(0) // Grab a reference to the DOM element
}