1

所以我似乎在这方面找不到任何东西，但我遇到了一个奇怪的跨浏览器问题，我似乎无法找出它发生的原因。我有一个应该拉回某个日期的日期字段。在 Chrome 中显示日期，而在 FF 和 IE 中则不显示。

奇怪的是，我查看了从后端返回的数据并且日期在那里，它只是设置输入的值（也不是我们要求提取数据的任何位置。甚至在网格中）

有什么我遗漏的东西可以让它在 Chrome 中正确显示，但在 FF 和 IE 中没有？也许商店或模型中有什么东西？

我在 ExtJS 4.1.2 上，以防万一有助于回答问题

视图（网格）

Ext.define('MyApp.view.ContractGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ContractGrid',

height: 443,
id: 'contractgrid',
itemId: '',
width: 667,
title: 'Contract Search',
store: 'ContractStore',

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'ContractNumber',
                text: 'Contract #'
            },
            {
                xtype: 'datecolumn',
                hidden: false,
                dataIndex: 'LicenseDate',
                text: 'License Date'
            },
        ],
        viewConfig: {

        },
        selModel: Ext.create('Ext.selection.RowModel', {

        }),
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: '+ New Contract',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
},
});

查看（面板）

Ext.define('MyApp.view.ContractPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.ContractPanel',

requires: [
    'MyApp.view.ModuleTabs'
],

draggable: false,
height: 804,
id: 'contractpanel',
autoScroll: true,
layout: {
    type: 'absolute'
},
manageHeight: false,

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'form',
                border: 0,
                height: 350,
                itemId: 'ContractForm',
                maxHeight: 400,
                width: 1060,
                layout: {
                    type: 'absolute'
                },
                bodyPadding: 10,
                manageHeight: false,
                items: [
                    {
                        xtype: 'panel',
                        border: 0,
                        height: 310,
                        margin: '',
                        minWidth: 450,
                        padding: '',
                        width: 480,
                        layout: {
                            type: 'absolute'
                        },
                        manageHeight: false,
                        items: [
                            {
                                xtype: 'textfield',
                                x: 0,
                                y: 0,
                                disabled: true,
                                margin: '',
                                padding: 5,
                                width: 236,
                                name: 'id',
                                fieldLabel: 'Contract ID',
                                labelWidth: 110
                            },
                            {
                                xtype: 'textfield',
                                x: 0,
                                y: 30,
                                margin: '',
                                padding: 5,
                                width: 236,
                                inputId: '',
                                name: 'ContractNumber',
                                fieldLabel: 'Contract Number',
                                labelWidth: 110
                            },
                            {
                                xtype: 'datefield',
                                x: 0,
                                y: 190,
                                padding: 5,
                                width: 210,
                                name: 'LicenseDate',
                                fieldLabel: 'License Date',
                                labelWidth: 110,
                                submitFormat: 'Y-d-m'
                            },
                        ]
                    }
                ]
            },
            {
                xtype: 'ModuleTabs',
                id: 'ModuleTabs',
                x: 0,
                y: 360
            }
        ]
    });

    me.callParent(arguments);
});

店铺

Ext.define('MyApp.store.ContractStore', {
extend: 'Ext.data.Store',
alias: 'store.ContractStore',

requires: [
    'MyApp.model.ContractModel'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: true,
        autoSync: true,
        remoteFilter: true,
        remoteSort: true,
        storeId: 'contract',
        model: 'MyApp.model.ContractModel',
        buffered: true,
        pageSize: 200,
        listeners: {
            write: {
                fn: me.onStoreWrite,
                scope: me
            }
        }
    }, cfg)]);
}

});

模型

Ext.define('MyApp.model.ContractModel', {
extend: 'Ext.data.Model',
alias: 'model.ContractModel',

uses: [
    'MyApp.model.ModuleModel'
],

idProperty: 'id',

fields: [
    {
        name: 'id',
        type: 'int'
    },
    {
        name: 'ContractNumber',
        type: 'string'
    },
    {
        name: 'LicenseDate',
        type: 'date'
    }
],

hasMany: {
    model: 'MyApp.model.ModuleModel',
    foreignKey: 'contract_id',
    name: 'modules'
},

proxy: {
    type: 'direct',
    api: {
        create: contract.createRecord,
        read: contract.getResults,
        update: contract.updateRecords,
        destroy: contract.destroyRecord
},
    reader: {
        type: 'json',
        root: 'data'
    }
}
});
4

2 回答 2

1

您的问题是您没有在模型上指定 dateFormat 。由于您不这样做，它会转到本机 JS Date.parse 方法来创建日期。一些浏览器比其他浏览器对它们接受的格式更宽松。

例如，在 FF 中比较这些：

console.log(Date.parse('2012-01-01'));
console.log(Ext.Date.parse('2012-01-01', 'Y-m-d'));

长话短说，在模型上指定一个 dateFormat，这样您就不会让浏览器随心所欲地决定如何解析日期。

从文档：

当类型指定为“日期”时，将接收到的数据转换为日期时使用。

序列化日期字段以供 Writers 使用时，也会使用格式字符串。

Ext.Date.parse 函数的格式字符串，如果 Reader 提供的值为 UNIX 时间戳，则为“timestamp”，如果 Reader 提供的值为 javascript 毫秒时间戳，则为“time”。请参阅 Ext.Date。

值得注意的是，虽然此配置是可选的，但如果未指定，它将默认使用基本 JavaScript Date 对象的解析函数，而不是 Ext.Date.parse。这可能会导致意外问题，尤其是在时区之间转换时，或者在转换没有指定时区的日期时。本机 Date.parse 的行为是特定于实现的，并且根据日期字符串的值，它可能会返回 UTC 日期或本地日期。因此，强烈建议您在解析日期时始终指定明确的日期格式。

于 2012-10-22T22:55:14.407 回答
0

尝试使用日期格式来塑造模型中的日期字段，如下所示：

{name:'expectedCompleteBy', type:'date', mapping:'expectedCompleteBy', dateFormat:'Y-m-d'},

同样在您的网格中，您可以使用格式来显示日期字段，如下所示：

xtype:'datecolumn', format:'Y-m-d', dataIndex:'expectedCompleteBy'

XTemplate 也有特殊的日期功能：

{expectedCompleteBy:date("Y-m-d")}

并以以下形式：

{  xtype:'datefield',
   fieldLabel:'Need By Date',
   name:'needByDate',
   //submitFormat:'Y-m-d', defaults to format
   format:'Y-m-d'
 }

日期格式 API：http ://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date

于 2012-10-22T22:42:17.427 回答