ExtJS: контейнер с прямоугольником на панели не виден

Question

Я хотел бы заменить html div на следующей панели на Ext.Container, содержащий прямоугольник. Решение 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:

   style: {backgroundColor: '#1d5b94'}