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 を指定して、日付の解析方法をブラウザーの気まぐれに任せないようにします。

ドキュメントから:

型が「date」の場合、受信データをDateに変換する際に使用します。

フォーマット文字列は、ライターが使用するために日付フィールドをシリアル化するときにも使用されます。

Ext.Date.parse 関数のフォーマット文字列。リーダーが提供する値が UNIX タイムスタンプの場合は「timestamp」、リーダーが提供する値が JavaScript のミリ秒タイムスタンプの場合は「time」。延長日を参照してください。

この構成はオプションですが、指定されていない場合は、Ext.Date.parse ではなく、基本 JavaScript Date オブジェクトの解析関数がデフォルトで使用されることに注意してください。これにより、特にタイムゾーン間で変換する場合、またはタイムゾーンが指定されていない日付を変換する場合に、予期しない問題が発生する可能性があります。ネイティブ Date.parse の動作は実装固有であり、日付文字列の値に応じて、UTC 日付またはローカル日付を返す場合があります。このため、日付を解析するときは常に明示的な日付形式を指定することを強くお勧めします。

于 2012-10-22T22:55:14.407 に答える
0

次のように、日付形式を使用してモデルの日付フィールドを形成してみてください。

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

また、グリッドで format を使用して、次のように日付フィールドを表示できます。

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 に答える