Sencha Touch：XTemplate 在 DataView 中不可见

Posted 2023-02-26

【中文标题】Sencha Touch：XTemplate 在 DataView 中不可见

【英文标题】：Sencha Touch: XTemplate not visible in DataView

【发布时间】：2012-07-24 13:06:45

【问题描述】：

我是所有 Sencha Touch 的新手，但直到现在我都非常热衷于它的功能。有一个问题，不知怎么解决不了。

我想将 Tpl (XTemplate) 用于日历视图。这个想法是为每个约会创建一个 div 元素，我可以将其放置在容器中以对其进行布局。不知何故，我无法让数据视图工作。

我已将我的代码精简到最低限度：一个包含 DataView 的面板。当我使用 itemTpl 时，一切正常。但是当我使用 tpl（有或没有 XTemplate）时，我什么也看不到。我检查了它是否只是显示故障（从模板中搜索 XXX），但事实并非如此。

这是我的代码：

Ext.define('InfoApp.view.CalendarDay', 
extend: 'Ext.Panel',
xtype: 'calendarday',
requires: [ 'InfoApp.store.sAppointments'],
config: 
    title: 'Dag',
    layout: 'fit',
        items: [
                
                    xtype: 'dataview',
                    store: 'appointmentStore',

                    //itemTpl: [ 'XXX day course' ] --> Works
                    tpl: new Ext.XTemplate('<tpl for=".">XXX day course</tpl>')--> Doesn't Work... 
                        
        ]

);

提前感谢您的任何建议或改进！

【参考方案1】：

假设 ST2 而不是 ST1

来自http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl 和文档中 tpl: config 上的 cmets，使用远程存储时似乎存在错误。即使您的商店有数据。 tpl：显然只有当您的数据在 data:[]

中硬编码时才有效

您可以使用 itemTpl: new XTemplate() 或 itemTpl: XTemplate.from('someid') 或者您可以推迟指定直到之后，获取您的数据视图并转到 dv.setItemTpl(new XTemplate()) 等。

【参考方案2】：

请@brink 为您解答。

我花了几天时间，但这对我有用：

  // Load the store
  var store = Ext.getStore('appointmentStore');

  // Get the current range of the store
  var data = store.getRange();

  // Create a custom template
  var tpl = new Ext.XTemplate(<tpl for=".">day course</tpl>);

  // Loop through the data array 
  var showData = array(); 
  for(var i=0;i<data.length;i++)
      showData.push(data[i].data); 
  

  // Get the panel by ID and push the html template
  var panel = Ext.getCmp('appointmentspanel');
  panel.updateHtml(tpl.applyTemplate(showData));