Question

我有一个XTemplate，我想在模板中添加一些实际的EXT小部件，以便在小部件的上方和下方呈现模板代码。假设我有一个“dataview”，其中定义了以下itemTpl：

    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>'+

然后在按钮配置中使用“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不支持此功能。

其次，你不能这样做，因为当sencha模板只允许html结构时，基本上你在itemTpl内尝试合并HTML和javascript。

为了解决这种情况，您可以查看Component Dataview

是否可以将EXT组件插入XTemplate？

2 个答案: