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'}]

因此，首先在创建我的组件时，我将使用我的列表生成模板。（所以我需要一些'渲染之前'事件）。现在我需要我的组件使用此模板进行渲染，但组件本身也有一些html，如您所见。（所以我可能需要使用一些事件'渲染'等）。最后，当我将一些元素添加到商店时，我将解雇它称为“重载”方法的组件和组件应该重新呈现自己。欢迎所有帮助：）

编辑：

首先，我尝试使用手动触发的方法手动执行所有操作，但我的组件未呈现。第一个问题是我的列表没有正确呈现。其次，在创建Container时不会触发'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;
    }
});

容器从模板呈现动态数据列表并具有更改行为

0 个答案: