extjs datefield browser not showing up

1
votes

So I can't seem to find anything on this, but I'm having a weird cross browser issue that I can't seem to find out why it's happening. I have a datefield that is supposed to pull back a certain date. In Chrome the date shows up, while in FF and in IE it doesn't show up.

The weird part is, I looked at the data that comes back from the backend and the date is there, it's just setting the values of the input (nor of any location in which we ask to pull the data. not even in a grid)

Is there anything that I'm missing that would make it show up properly in Chrome but not in FF and IE? Maybe something in the stores or models?

I'm on ExtJS 4.1.2 in case that helps answer things

View(grid)

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);
},
});

View (panel)

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);
});

Store

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)]);
}

});

Model

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'
    }
}
});
2
extjscross-browserextjs4.1datefield
Also, let me know if there is any certain code you guys want. I don't know what would be beneficial to show in this case as it's just a standard datefield that I pulled in from resources... – Aram Papazian
How is it pulling the date in? What format is it in? Is it coming via a model? How are you setting the value? – Evan Trimboli
The issue is that this is happening in more than 1 loc. We are setting the value in datefield input box which uses 'submitFormat' of 'Y-d-m' for our backend of PHP. When we pull out the data we just use the default format/altFormat. We are pulling the data through a model. We are definitely getting the correct data back from our backend when we get the results, but for some reason only chrome is rendering the details while the rest aren't. For the grids we just associate the proper store and (if I understand correctly) the store populates the grid accordingly. We also use records elsewhere. – Aram Papazian
FYI, the above meant "post some code"... ;) – Evan Trimboli
lol I guess I just don't know what portions you want since it's happening in more than one location. It's my first ExtJS app =/ I'll post a few things though. Lemme know if it's not enough and/or if you want more. – Aram Papazian

2 Answers

1
votes

Your problem is that you don't specify a dateFormat on the model. Since you don't do this, it goes to the native JS Date.parse method to create the date. Some browsers are more lenient than others about what formats they accept.

For example, compare these in FF:

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

Long story short, specify a dateFormat on the model so you're not leaving it up to the whims of the browser on how to parse the date.

From the docs:

Used when converting received data into a Date when the type is specified as "date".

The format string is also used when serializing Date fields for use by Writers.

A format string for the Ext.Date.parse function, or "timestamp" if the value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a javascript millisecond timestamp. See Ext.Date.

It is quite important to note that while this config is optional, it will default to using the base JavaScript Date object's parse function if not specified, rather than Ext.Date.parse. This can cause unexpected issues, especially when converting between timezones, or when converting dates that do not have a timezone specified. The behavior of the native Date.parse is implementation-specific, and depending on the value of the date string, it might return the UTC date or the local date. For this reason it is strongly recommended that you always specify an explicit date format when parsing dates.

0
votes

try using a date format to shape a date field in your model like this: 

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

Also in your grid you can use format to display date field like this:

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

XTemplate has special date function as well: 

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

And in the form:

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

Date format API: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date