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没有配置（请参阅类描述以获取其作用的示例）。

再说一次，如果你到了那里，数据视图组件可能不支持关联......更新：那是错误的，见下文。

因此，您的快速解决方法是date用您自己的替换库存格式函数，该函数使用您无法控制的日期字符串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 '';
    }
};

更新

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

这意味着删除此字段：

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

添加associationKey选项：

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

最后，您必须确保您的数据是通过 加载的Reader，以便读取嵌套记录——简单地说，这意味着通过Proxy. 因此，load使用 store 的方法，它可以工作，而使用任何其他方式可能不会（例如loadDatastore 的方法不使用代理）。