javascript - Extjs 4.2.1 XTemplate 子元素的日期格式仅在 IE 上显示 NaN

Question

这是测试数据:

[{
        id: 1,
        isActive: true,
        documentIdentifier: '00012345',
        sourceSiteName: 'Aviation Industry Ltd.',
        targetSiteName: 'VendorName',
        createDate: '2013-03-06T14:12:03.2341054+02:00',
        archiveEvent: 'Rejected',
        archive: 'PurchaseOrder',
        previousWhatsNewEvents: [{
            id: 2,
            isActive: true,
            documentIdentifier: '00012345',
            sourceSiteName: 'Aviation Industry Ltd.',
            targetSiteName: 'Vendor Name',
            createDate: '2013-03-06T14:12:03.2341054+02:00',
            archiveEvent: 'Approved',
            archive: 'PurchaseOrder',
            isPin: true,
            IsDocumentReadByMe: false,
            IsDocumentReadByOthers: true,
            documentYear: 2013,
            businessDirection: 1 
        }],
        isPin:true,
        IsDocumentReadByMe:false,
        IsDocumentReadByOthers:true,
        documentYear:2013,
        businessDirection:1
    }

这是模板:

tpl: [
                    '<div class="n-row-title">',
                        '<div class="n-doc-status n-doc-status-{archiveEvent:this.toLower} n-float-left">&nbsp;</div>',
                        '<span class="n-hmargin-10">{archiveEvent}</span>',
                    '</div>',
                    '<div class="n-clear"></div>',
                    '<div class="n-row-sub-title">{createDate:date("m/d/Y H:i")}</div>',
                    '<div class="n-whatsnew-previous-events">',
                        '<tpl for="previousWhatsNewEvents">',
                            '<div class="n-row-title">',
                                '<div class="n-doc-status n-doc-status-{archiveEvent:this.toLower} n-float-left">&nbsp;</div>',
                                '<span class="n-hmargin-10">{archiveEvent}</span>',
                            '</div>',
                            '<div class="n-clear"></div>',
                            '<div class="n-row-sub-title">{createDate:date("m/d/Y H:i")}</div>',
                        '</tpl>',
                    '</div>',
                    {
                        toLower: function (value) {
                            return value.toLowerCase();
                        }
                    }
                ]

以下是 Chrome 渲染模板的方式:

以下是 IE8 的渲染方式:

有人知道解决方法吗？

更新

这是我的模块:

Ext.define('XX.model.WhatsNew', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'isActive', type: 'boolean' },
        { name: 'documentIdentifier', type: 'string' },
        { name: 'sourceSiteName', type: 'string' },
        { name: 'targetSiteName', type: 'string' },
        { name: 'createDate', type: 'date', dateFormat: 'c' },
        { name: 'archiveEvent', type: 'string' },
        { name: 'archive', type: 'string' },
        { name: 'previousWhatsNewEvents' },
        { name: 'isPin', type: 'boolean' },
        { name: 'IsDocumentReadByMe', type: 'boolean' },
        { name: 'IsDocumentReadByOthers', type: 'boolean' },
        { name: 'documentYear', type: 'int' },
        { name: 'businessDirection', type:'int'}
    ],

    hasMany: {
        model: 'auxClasses.notifications.WhatsNew',
        name: 'previousWhatsNewEvents'
    },

    proxy: {
        type: 'rest',
        url: 'api/WhatsNew/'
    }
});

模板无法从内部 previousWhatsNewEvents 子级中读取日期格式...这导致日期出错!!

Answer 1

您的关联已被同名字段覆盖。即使情况并非如此，您关联也不会从数据中加载子节点，因为它的 associationKey 未配置(有关其功能的示例，请参阅类描述)。

话又说回来，如果您到达那里，数据 View 组件可能不支持关联...更新:这是错误的，请参见下文。

因此，解决这个问题的快速方法是更换库存 date使用您自己的 format 函数，使用 Ext.Date.format 转换日期字符串而不是new Date正如 Evan 所指出的，您无法控制它，并且不同浏览器之间可能会有所不同。

诀窍是您需要一个日期输入格式才能使用 Ext.Date.format 。在您的模板中，您将知道预期的格式:

tpl: [
    '{createDate:this.date}',
    {
        date: function(value) {
            var readFormat = 'c',
                displayFormat = 'm/d/Y H:i',
                date = Ext.Date.parse(value, readFormat);
            return Ext.Date.format(date, displayFormat);
        }
    }
]

您甚至可以考虑替换 Ext.util.Format.date通过向其添加参数来实现函数:

Ext.util.Format.date = function(value, outFormat, inFormat) {
    var date;
    if (value) {
        if (value instanceof Date) {
            date = value;
        } else if (inFormat) {
            date = Ext.Date.parse(value, inFormat);
        } else {
            // backward compatibility
            date = new Date(value);
        }
        return Ext.Date.format(date, outFormat);
    } else {
        return '';
    }
};

更新

经过进一步调查，数据 View 似乎确实支持模型关联: View 的 prepareData 方法调用 getAssociatedData 在模型上。因此，正如 Even 再次指出的，最干净的解决方案可能是正确配置您的关联。

这意味着删除此字段:

fields: [
    ...
    { name: 'previousWhatsNewEvents' },
    ...
]

添加 associationKey 选项:

hasMany: {
    model: 'auxClasses.notifications.WhatsNew',
    name: 'previousWhatsNewEvents',
    associationKey: 'previousWhatsNewEvents'
}

最后，您必须确保您的数据是通过 Reader 加载的。要读取嵌套记录——简单地说，这意味着通过 Proxy 。所以用load存储的方法，它可以工作，而使用任何其他方式可能不会(例如存储的 loadData 方法不使用代理)。