Container rendering a dynamic data list from template and having behaviors on changes

I have a quite complicated task to perform. I need to create a component, that will render a list of elements using some data template, that can be dynamically changed. And when data will be changed , the component should re render the list. I have the behavior already written, but I'm just starting with ExtJS 4 and have some problems building proper component. This is what I have, the container :

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>')   
}); 

The template :

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

Data:

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

So at first when creating my component I will generate template using my list. (so I need some 'before render' event). Now I need my component to use this template for rendering, but component itself has some html also as you can see. (so probably I need to use some event 'render' etc). Finally when I'll add some element to the store I will fire let's call it 'reload' method of component and component should re render itself. All help welcome :)

EDIT:

First I'm trying to do everything manually, with manually fired methods but my component is not rendering. First problem is that my list is not rendered properly. Secondly the 'beforerender' event is not fired when creating the Container :

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;
    }
});