Question

我有一个由商店填充的列表，每个项目都带有一个时间戳。我想做的是检查每个列表项，看看时间是否已经过去，并根据结果将类应用于.x-list-item。

我认为它应该在视图的初始化函数中，但是在渲染时逐个引用所有项目并添加一个类我有点难过。这是我希望测试每个列表项的标准函数：

var vDate = Date.parse(item);

var today = new Date().getTime();
if(vDate < today)
{
  // in the past, add past class here
} else {
  // in the future, add future class here
}

感谢。

Answer 1

我认为最好使用itemTpl实例在XTemplate中执行此类计算。此外，出于性能原因，可能最好预先计算类名并将其放入模型中。然后，您只需在模板中使用此新属性{className}。

以下是我在itemTpl内使用类计算的示例应用程序：

// ST 2.2.1 application
Ext.application({
    name: 'Test',
    launch: function() {
        var view,
            i = 0, N = 100,
            data = [],
            style;

        // fill sample array with random data
        while (++i < N + 1) {
            data.push({
                title: 'Title #' + i,
                date: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 365)
            });
        }

        // append season classes and other styles to the head of html page
        Ext.getHead().createChild({
            tag: 'style',
            type: 'text/css',
            html: ['.x-list .x-list-item.x-list-item-tpl .x-innerhtml {padding: 0;} ',
                   '.container {padding: 12px 15px; margin-right: 15px;} ',
                   '.spring {background: url(http://icons.iconarchive.com/icons/flameia/xrabbit/128/Folder-Spring-icon.png) right -4px no-repeat; background-size: 60px;} ',
                   '.summer {background: url(http://icons.iconarchive.com/icons/flameia/xrabbit/128/Folder-Summer-icon.png) right -4px no-repeat; background-size: 60px;} ',
                   '.autumn {background: url(http://icons.iconarchive.com/icons/flameia/xrabbit/128/Folder-Autumn-icon.png) right -4px no-repeat; background-size: 60px;} ',
                   '.winter {background: url(http://icons.iconarchive.com/icons/flameia/xrabbit/128/Folder-Winter-icon.png) right -4px no-repeat; background-size: 60px;} ',
                   '.date {font-size: 0.6em; color: #777;}'].join('')
        });

        // construct list view
        view = Ext.create('Ext.List', {
            items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Test'
            }],
            fullscreen: true,
            infinite: false,// play with this and look at dom and console output
            itemHeight: 60,
            itemTpl: new Ext.XTemplate(
                '<div class="container {date:this.getSeason()}">',
                    '<div>{title}</div>',
                    '<div class="date">{date:date("jS F Y")}</div>',
                '</div>', {
                    getSeason: function(date) {
                        var m = date.getMonth(),
                            season;
                        if (m < 2 || m > 10) {
                            season = 'winter'; 
                        } else if (m > 1 && m < 5) {
                            season = 'spring';
                        } else if (m > 4 && m < 8) {
                            season = 'summer';
                        } else {
                            season = 'autumn';
                        }
                        console.log(season);
                        return season;
                    }
                }
            ),
            data: data
        });
        Ext.Viewport.add(view);
    }
});

Answer 2

对于可能尝试这样做的任何人，我最终使用Ext.query来定位视图初始化并从那里开始的每个列表项。

Ext.query('.x-list-disclosure', element)[0];

最后的[0]是针对查询中的第一个元素。

应用类在首次呈现项目时列出项目触摸2

2 个答案: