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

我想用一个包含矩形的Ext.容器替换下面面板中的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>'*/
});

var bar=Ext.create（'Ext.Container'{
宽度：20，
身高：20，
项目：{
xtype:'绘制'，
精灵：[{
键入：“rect”，
x:0,，
y:0，
宽度：20，
身高：20，
填充样式：“蓝色”
}]
}
});
var task=Ext.create（'Ext.Panel'{
边界：是的，
高度：“100%”，
标题：{{name}}，
标题：没错，
宽度：70，
听众：{
渲染：函数（）{
this.getEl（）；
}
},
项目：[酒吧]
/*html:'*/
});

---

谢谢

我没有在容器中绘图，而是使用了它的style属性：

   style: {backgroundColor: '#1d5b94'}