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

Question

我有一个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那里（而不是只是一些HTML近似于Ext.Button的行为）？我不在乎它是否必须在事实之后被应用，但我似乎无法找到正确的事件处理程序来使用它来插入按钮。 Sencha文件很糟糕，所以任何帮助都会更好。

Answer 1

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

其次，你不能这样做，因为基本上你试图在你的itemTpl里面的HTML和JavaScript之间合并时，sencha模板只允许html结构。

为了解决这种情况下，你可以看看Component Dataview

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