ExtJS：面板中带有矩形的容器不可见

Question

我想用一个包含矩形的 Ext.Container 替换下面面板中的 html div。 注释括号中的 HTML 解决方案工作正常，但容器替代方案不可见。 firebug 没有显示错误。 {{var}} 已解析，没有问题。 var 任务稍后被添加到另一个具有 hbox 布局的面板中。不要介意两种解决方案的高度等不同。首先，我只想让任何矩形可见。

var bar = Ext.create('Ext.Container', {
    width: 20,
    height: 20,
    items: {
        xtype: 'draw',
        sprites: [{
            type: 'rect',
            x: 0,
            y: 0,
            width: 20,
            height: 20,
            fillStyle: 'blue'
        }]
    }
});

var task = Ext.create('Ext.Panel', {
    border: true,
    height: '100%',
    title: '{{name}}',
    titleCollapse: true,
    width: 70,
    listeners: {
        render: function () {
            this.getEl().dom.title = '{{name}}. Start: {{start}}. End: {{end}}';
        }
    },
   items: [bar]
   /* html: '<div class="bar" style="margin-top: {{top}}px; height: {{height}}px"></div>'*/
});

谢谢！

Answer 1

我没有绘制到容器中，而是使用了它的样式属性：

   style: {backgroundColor: '#1d5b94'}