2

我有一个 XTemplate，我想在模板中添加一些实际的 EXT 小部件，以便在小部件的上方和下方呈现模板代码。假设我有一个定义了以下 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 文档很烂，因此我们将不胜感激。

4

2 回答 2

2

实际上你可以做到这一点，你只需要有点创意。

在这里查看我的博客文章：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
                });
            }
        }
    },
于 2013-07-19T23:14:07.227 回答
0

由于 Sencha Touch 框架的管理和性能，我认为 XTemplate 不支持此功能。

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

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

于 2013-03-05T18:29:13.453 回答