javascript - span/div 中的 Extjs 进度条不正确

Question

我想在我的 span 中呈现组件进度条并将其插入 text/tooltip/cell 等
然后我在正文中渲染进度条:

            Ext.create("Ext.ProgressBar", {
            renderTo: Ext.getBody(),
            value: chartCase.key / 100,
            width: 100
        });

"x-progress-text" 的样式采用组件的宽度(在本例中为 100px)，因此居中对齐。

然后我在元素中渲染它:

        var span = $("<span>").attr("id", this.getId()).css("float", position);
        Ext.create("Ext.ProgressBar", {
            renderTo: span[0],
            value: chartCase.key / 100,
            width: 100
        });

x-progress-text的样式"width"消失，文本"value%"向左压。
如何在不强制为类 ".x-progress-text" 设置样式的情况下解决这个问题？
谢谢!

Answer 1

如果我们想在 costum DOM 元素中呈现 extjs 小部件，必须使用选项“renderTo”以在 DOM 树中存在 DOM 元素。

例如:

var span = $("<span>").attr("id", this.getId());
$(span[0]).appendTo("exist-element");
Ext.create("Ext.ProgressBar", {
    renderTo: $("#" + id)[0],
    value: chartCase.key / 100,
    width: 100
});