javascript - ExtJS 4 : rendering a custom view from a grouped store with a title for the grouping

Question

我正在对商店进行分组，并将自定义字段添加到模型中的 JSON 数据记录中:

Ext.define('SCB.RMWB.InfoBar.Model.Message', {
    extend: 'Ext.data.Model',
    idProperty: 'Message',
    fields: [
        {name: 'id',                type: 'int'},
        {name: 'source',            type: 'string'},
        {name: 'target',            type: 'string'},
        {name: 'sourceType',        type: 'string'},
        {name: 'redirectUrl',       type: 'string'},
        {name: 'message',           type: 'string'},
        {name: 'targetType',        type: 'string'},
        {name: 'messageType',       type: 'string'},
        {name: 'sentDate',          type: 'int'},
        {name: 'notificationType',  type: 'string'},
        {name: 'parameters',        type: 'string'},
        {name: 'read',              type: 'boolean'},
        {name: 'readDate',          type: 'int'},
        {
            name: 'dateGroup',
            type: 'string',
            convert: function(value, record) {   

                var formattedSentDate =  dateHelpers.format(record.get('sentDate')),
                    str = '';

                if (formattedSentDate === dateHelpers.today()) {
                    str = 'Today';
                } else if (formattedSentDate === dateHelpers.yesterday()) {
                    str = 'Yesterday';
                } else {
                    str = 'Last week';
                }

                return str;

            }
        }

    ],
    validations: [
        {type: 'presence',          field: 'id'},
        {type: 'presence',          field: 'source'},
        {type: 'presence',          field: 'target'},
        {type: 'presence',          field: 'sourceType'},
        {type: 'presence',          field: 'redirectUrl'},
        {type: 'presence',          field: 'message'},
        {type: 'presence',          field: 'targetType'},
        {type: 'presence',          field: 'messageType'},
        {type: 'presence',          field: 'sentDate'},
        {type: 'presence',          field: 'notificationType'},
        {type: 'presence',          field: 'parameters'},
        {type: 'presence',          field: 'read'},
        {type: 'presence',          field: 'readDate'},
        {type: 'presence',          field: 'dateGroup'}
    ]
});

因此，显然所需的分组是今天、昨天和上周。

这似乎工作正常，但我需要以 Accordion 方式呈现分组，并用标题表示分组。

目前，模板每次都会输出日期分组，我需要一次分组标题，然后是属于该分组的记录。

这是当前模板:

    '<tpl for=".">',
        '<li class="view-all-details">',
            '<h3>{dateGroup}</h3>',
            '<div>',
                '<p>{[ Ext.util.Format.ellipsis(values.message, 100, true) ]}</p>', 
                '<span class="time-frame">{[ SCB.RMWB.Infobar.utils.dateRangeMsg(values.sentDate) ]}</span>',
            '</div>',
        '</li>',                        
    '</tpl>'    

我知道模板当前不会输出我需要的内容，但不确定如何使用标题对 View 中的记录进行分组。

Answer 1

我知道问题已有5年历史，但我也有同样的要求。所以我也做了同样的工作，并从我的最终得到了解决方案，所以我在这里分享。

对于 XTemplate 的内部您需要检查 if 条件来显示日期组的通用 header ，并处理一个变量来检查日期组的类型。

如何检查是否条件检查tpl？请参阅下面的示例:-

'<tpl for="kids">',
        '<tpl if="age &gt; 1">',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'

在此FIDDLE ，我使用 Ext.view.View 创建了一个演示, store , model和 panel 。我希望这将帮助或指导您/其他人实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var message = [],
            date,
            date1;
        /*
         * function will calculate diffrence b/w 2 dates
         * @param{Date} min
         * @param{Date} max
         * @return number
         */
        function dayDiff(min, max) {
            return Math.round((max - min) / (1000 * 60 * 60 * 24))
        }

        //createing demo message for testing
        for (var i = 0; i < 12; i++) {
            if (i < 4) {
                date = Date.now();
            } else if (i >= 4 && i < 8) {
                date1 = new Date();
                date = date1.setDate(date1.getDate() - 1);
            } else {
                date1 = new Date();
                date = date1.setDate(date1.getDate() - 2);
            }
            message.push({
                text: `Hello I am message ${i+1}`,
                sentdate: Ext.Date.clearTime(new Date(date)),
                id: i + 1
            })
        }

        //Create Message model
        Ext.define('Message', {
            extend: 'Ext.data.Model',
            fields: ['id', 'text', {
                    name: 'sentdate',
                    type: 'date'
                }, {
                    name: 'dateGroup',
                    type: 'string',
                    convert: function (value, record) {
                        var sentDate = record.get('sentdate'),
                            str,
                            diff = dayDiff(new Date(sentDate), Ext.Date.clearTime(new Date()));
                        if (diff == 0) {
                            str = 'Today';
                        } else if (diff == 1) {
                            str = 'Yesterday';
                        } else {
                            str = 'Last week';
                        }
                        return str;
                    }
                }
                /*, {
                                    name: 'group',
                                    type: 'int',
                                    mapping: 'dateGroup',
                                    convert: function (value, rec) {
                                        switch (rec.get('dateGroup')) {
                                        case 'Today':
                                            value = 0;
                                            break;
                                        case 'Yesterday':
                                            value = 1;
                                            break;
                                        default:
                                            value = 2
                                        }
                                        return value;
                                    }
                                }*/

            ],
            // sort: 'group'
        });
        //create message store
        Ext.create('Ext.data.Store', {
            storeId: 'message',
            model: 'Message'
        });

        //Create data view
        //we can also use using xtype:'dataview' inside of items
        var view = Ext.create('Ext.view.View', {
            height: window.innerHeight,
            //overflowY: 'auto',
            store: 'message',
            tpl: new Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                '<tpl if="this.isSameGroup(values.dateGroup)"><div class="x-group-header"><b>{[this.doShowGroup(values.dateGroup)]}</div></b></tpl>',
                '<div class="x-message-item ">{text} <span>{[Ext.Date.format(values.sentdate,"d M y")]}<span></div>',
                '</tpl>', {
                    isSameGroup: function (group) {
                        return this.currentGroup != group;
                    },
                    doShowGroup: function (group) {
                        this.currentGroup = group;
                        return group;
                    }
                }),
            itemSelector: '.x-message-item',
            emptyText: 'No data available',
            renderTo: Ext.getBody()
        });
        //create panel
        Ext.create('Ext.panel.Panel', {
            title: 'Rendering a custom view from a grouped store with a title for the grouping',
            items: [view],
            renderTo: Ext.getBody(),
            listeners: {
                afterrender: function () {
                    this.down('dataview').getStore().loadData(message);
                }
            }
        });

    }
});