Question

我有一个商店，我正在填充列表。商店如下：

Ext.define('EventReminder.store.Upcoming', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.SQL'],
config: {
    autoLoad: true,
    storeId: 'Upcoming',
    model: 'EventReminder.model.Event',
    proxy: {
        type: 'sql',
        database: 'EventReminder',
        table: 'NewEvents'
    },
    sorters: [{property: 'date', direction: 'ASC'}]}
});

列表如下：

{
xtype: 'list',
flex: 1,
autoDestroy: false,
itemId: 'upcomingEventList',
onItemDisclosure: true,
store: 'Upcoming',
cls: 'event-list',
scrollable: true,
}

我为此列表创建了一个XTemplate，如下所示：

var xtpl = new Ext.XTemplate(
        '<tpl for=".">',
        '   <tpl if="priority == \'high\'">',
        '       <div class = "color-event-high">',
        '          <div class="event-category">{category}</div>',
        '          <div class="event-date">On: {date} at: {eventTime}</div>',
        '          <div>Alert at : {alertTime}</div>',
        '          <div class="event-people">People: {people}</div>',
        '           <div class="event-message">{message}</div>',
        '          <div class="event-priority">{priority}</div>',
        '          <div class="event-activities">{activities}</div>',
        '      </div>',
        '   </tpl>',
        '</tpl>'
);

这里我想根据列表项的优先级值给出样式。我在视图的初始化函数中设置了列表的tpl，如下所示：

this.down("#upcomingEventList").setItemTpl(xtpl);

我通常直接在其配置中为列表指定ItemTpl，并且对使用XTemplates不太了解。因此，当我使用上面的Xtemplate时，列表不会显示这些项目。我已经检查了文档，但无法理解这些XTemplates的工作原理。我已经看到了类似问题的其他答案，但确实帮助不大。

如果我们想要一些基于列表项的条件样式，这是为List编写XTemplate的正确方法吗？

Sencha touch：使用XTemplate

0 个答案: