Контейнер, отображающий динамический список данных из шаблона и имеющий поведение при изменениях

Question

У меня довольно сложная задача.Мне нужно создать компонент, который будет отображать список элементов с использованием некоторого шаблона данных, который может быть динамически изменен.И когда данные будут изменены, компонент должен заново отобразить список.У меня уже написано поведение, но я только начинаю с ExtJS 4 и у меня возникают проблемы с созданием правильного компонента.Вот что у меня есть, контейнер:

Ext.create('Ext.container.Container', {
    mixins: {
        observable: 'Ext.util.Observable'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
    renderTpl: new Ext.XTemplate('<ul id="avatars-list></ul>')   
}); 

Шаблон:

var html = '<li><img src="{src}" /></li>'; 
var tpl = new Ext.XTemplate(html);
tpl.compile();

Данные:

data = [{src: '/path1'}, {src: '/path2'}, {src: '/path3'}, {src: '/path4'}, {src: '/path5'}]

Итак, сначалапри создании моего компонента я буду генерировать шаблон, используя мой список.(так что мне нужно событие 'before render').Теперь мне нужен мой компонент, чтобы использовать этот шаблон для рендеринга, но сам компонент также имеет некоторый html, как вы можете видеть.(так что, вероятно, мне нужно использовать какое-то событие 'render' и т. д.).Наконец, когда я добавлю какой-то элемент в хранилище, я запустим его, назовем его «перезагрузить» метод компонента, и компонент должен отрендериться сам.Вся помощь приветствуется:)

РЕДАКТИРОВАТЬ:

Сначала я пытаюсь сделать все вручную, с помощью вручную запускаемых методов, но мой компонент не выполняет рендеринг.Первая проблема заключается в том, что мой список не отображается должным образом.Во-вторых, событие 'beforerender' не вызывается при создании контейнера:

var data = [{src: '/path1'}, {src: '/path2'}, {src: '/path3'}, {src: '/path4'}, {src: '/path5'}];
var html = '<li><img src="{src}" /></li>';
var tpl = new Ext.XTemplate(html);    

var comp = Ext.create('Ext.container.Container', {
    width: 400,
    border: 1,
    initComponent: function(){
        this.on('beforerender', this.beforeRender, this);
    },
    beforeRender: function(){
        var items = this.getAvatars();

        this.list = Ext.create('Ext.container.Container',{
            tpl : tpl,
            renderTo : 'avatars',
            items: items
        });
    },
    getAvatars: function(){
        return data;
    }
});