可以将EXT组件插入到XTemplate中吗?

Question

我有一个XTemplate，我想在模板中添加一些实际的EXT小部件，这样我就可以在小部件的上面和下面呈现模板代码。假设我有一个定义如下itemTpl的"dataview":

    itemTpl: [
        '<tpl for=".">',
        '<div class="song-page-header">',
        '   <div class="artwork"><img src="{artwork}"/></div>',
        '   <h1>{title}</h1>',
        '   <h2>{artist}</h2>',
        '   <h3>Genre: {genre}</h3>',
        '   <p>{copyright}</p>',
        '</div>',
        /* Ext.Button should go here */
        '<tpl for="offers">',
        '   <p>{offer_id}: {offer_type}, {price}</p>',
        '</tpl>',
        '</tpl>'
    ]

是否有可能在那里定义一个真正的Ext.Button(而不仅仅是一些接近Ext.Button行为的HTML)?我不在乎它是否必须在事实之后应用，但我似乎找不到正确的事件处理程序来使用，以便能够在那里插入按钮。Sencha文档烂透了，所以任何帮助都是非常感谢的。

Answer 1

其实你可以做到的，你只需要有点创意。

查看我的博客文章:http://jakes-hackerblog.herokuapp.com/blog/2013/05/23/a-fresh-rails-blog/

就是在模板中加入动态div元素

                '<div id="box-holder">' +
                    '<div id="box-{schoolpersonid}"></div>'+
                '</div>'+

然后在你的按钮配置中使用use "renderTo"，在刷新函数中调用它:

    listeners: {
        'refresh': function(records) {
            var storeRecords = records._store._data.items;
            for(var i = 0; i < storeRecords.length; i++){
                var data = storeRecords[i].data;
                var renderTo = this.element.select('#box-' + data.schoolpersonid).elements[0];
                var button1 = new Ext.Button({
                    action:             'doPresent',
                    xtype:              'button',
                    align:              'right',
                    text:               'Present',
                    ui:                 'present',
                    renderTo:            renderTo,
                    schoolpersonid:      data.schoolpersonid
                });
            }
        }
    },

Answer 2

我认为由于Sencha Touch框架的管理和性能问题，XTemplate不支持这个特性。

其次，你不能这样做，因为基本上你试图在itemTpl中合并HTML和javascript，而sencha模板只允许HTML结构。

为了解决这个问题，您可以查看Component Dataview