ExtJS 4:从分组存储中呈现自定义视图，并为分组命名

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

本文关键字：视图 自定义 存储 ExtJS      更新时间：2023-09-26

我正在将一个带有自定义字段的存储分组到模型中的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'}
    ]
});

所以很明显，期望的分组是今天， 昨天和上周。

这似乎工作得很好，但我需要以手风琴的方式呈现分组，并使用标题表示分组。

当前模板每次输出日期分组，我需要分组标题一次，然后那些属于该分组的记录。

当前模板:

    '<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>'

我知道模板目前不会输出我需要的东西，但不确定如何在视图中分组标题的记录。

我知道问题是5岁，但我有同样的要求。所以我已经解决了同样的问题，并从我的结束得到了解决方案，所以我在这里分享。

对于XTemplate内部，您需要检查if条件以显示日期组的共同标头，并处理一个variable以检查date-group的类型。

如何检查条件是否检查tpl ?参见下面的例子:-

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

在这个FIDDLE中，我使用Ext.view创建了一个演示。查看，存储，建模和面板。我希望这能帮助或指导你/其他人达到你的要求。

<<p> 代码片段/strong> 
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);
                }
            }
        });
    }
});
相关文章：