【问题标题】:Sencha Touch: XTemplate not visible in DataViewSencha Touch:XTemplate 在 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... 
                }        
        ]
}
});

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

【问题讨论】:

    标签: templates touch extjs dataview


    【解决方案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));    
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多