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

Question

我想用包含矩形的Ext.Container替换后面板中的html div。 HTML解决方案位于注释括号内，工作正常，但容器替代方法不可见。萤火虫没有显示错误。 {{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'}