1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    178
    Vote Rating
    2
    TampaBay55 is on a distinguished road

      0  

    Default Datefields in IE vs Others

    Datefields in IE vs Others


    Greetings all:

    I know this has been asked before but due to my limited access, I am unable to review solutions.
    I have the following form window defined:
    Code:
    payForStore = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        fields: ['paymentfor'],
        data: [{"paymentfor": "PRODUCTS"},
               {"paymentfor": "SERVICES"},
               {"paymentfor": "SELF-PAY"},
               {"paymentfor": "OTHER"}
        ]
    });
    paySrcStore = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        fields: ['paymentsrc'],
        data: [{"paymentsrc": "PATIENT"},
               {"paymentsrc": "INSURANCE"}
        ]
    });
    payMethStore = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        fields: ['paymentmeth'],
        data: [{"paymentmeth": "CASH"},
               {"paymentmeth": "CHECK"},
               {"paymentmeth": "CREDIT CARD"},
               {"paymentmeth": "MONEY ORDER"},
               {"paymentmeth": "EFT"},
               {"paymentmeth": "OTHER"}
        ]
    });
    Ext.define('CPSClientApp.view.client.payform', {
        extend: 'Ext.window.Window',
        alias: 'widget.paydataform',
        layout: 'fit',
        stateful: true,
        stateId: 'paydataform_state',
        isNew: false,
        title: 'Payment Ledger Record Editor',
        width: 475,
        height: 470,
        modal: true,
        closable: false,
        shadow: 'drop',
        shadowOffset: 10,
        closeAction: 'hide',
        items: [{
            xtype: 'form',
            url: './data/paydata.php',
            border: false,
            waitMsgTarget: true,
            defaultType: 'textfield',
            defaults: {
                labelWidth: 110,
                labelAlign: 'right',
                enforceMaxLength: true,
                anchor: '100%'
            },
            items: [{
                xtype: 'hidden',
                name: 'recordid'
            }, {
                xtype: 'fieldset',
                title: 'Payment Information',
                margin: 10,
                padding: 10,
                defaultType: 'textfield',
                defaults: {
                    labelWidth: 110,
                    labelAlign: 'right',
                    enforceMaxLength: true,
                    anchor: '100%'
                },
                items: [{
                    xtype: 'datefield',
                    name: 'paydate',
                    fieldLabel: 'Payment Date',
                    disabled: true
                }, {
                    xtype: 'fieldcontainer',
                    defaultType: 'combobox',
                    defaults: {
                        queryMode: 'local',
                        labelAlign: 'right',
                        labelWidth: 110,
                        listConfig: {
                            style: {
                                background: '#D8D8D8'
                            }
                        }
                    },
                    layout: 'hbox',
                    items: [{
                        xtype: 'combobox',
                        store: payForStore,
                        name: 'payfor',
                        fieldLabel: 'Payment For',
                        displayField: 'paymentfor',
                        valueField: 'paymentfor',
                        flex: 1
                    }, {
                        xtype: 'combobox',
                        store: paySrcStore,
                        name: 'paysource',
                        fieldLabel: 'Source',
                        labelWidth: 60,
                        displayField: 'paymentsrc',
                        valueField: 'paymentsrc',
                        width: 190
                    }]
                }, {
                    name: 'sourcename',
                    fieldLabel: 'Source Name',
                    maxLength: 50,
                    listeners: {
                        blur: function (field, options) {
                            field.setValue(field.getValue().toUpperCase());
                        }
                    }
                }, {
                    name: 'accountid',
                    fieldLabel: 'Account ID',
                    maxLength: 20,
                    listeners: {
                        blur: function (field, options) {
                            field.setValue(field.getValue().toUpperCase());
                        }
                    }
                }, {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    defaults: {
                        queryMode: 'local',
                        labelAlign: 'right',
                        labelWidth: 110,
                        listConfig: {
                            style: {
                                background: '#D8D8D8'
                            }
                        }
                    },
                    layout: 'hbox',
                    items: [{
                        xtype: 'combobox',
                        store: payMethStore,
                        name: 'paymethod',
                        fieldLabel: 'Method',
                        displayField: 'paymentmeth',
                        valueField: 'paymentmeth',
                        flex: 1,
                    }, {
                        xtype: 'textfield',
                        name: 'payamount',
                        fieldLabel: 'Amount',
                        labelWidth: 60,
                        width: 165,
                        listeners: {
                            blur: function (field, options) {
                                newval = field.getValue().replace(/[^0-9\.]/g, '')
                                field.setValue(Ext.util.Format.usMoney(newval));
                            }
                        }
                    }]
                }, {
                    name: 'docid',
                    fieldLabel: 'Document ID',
                    maxLength: 15,
                    listeners: {
                        blur: function (field, options) {
                            field.setValue(field.getValue().toUpperCase());
                        }
                    }
                }, {
                    xtype: 'textareafield',
                    name: 'comments',
                    fieldLabel: 'Comments',
                    grow: true,
                    height: 150,
                    maxLength: 255,
                    listeners: {
                        blur: function (field, options) {
                            field.setValue(field.getValue().toUpperCase());
                        }
                    }
                }]
            }]
        }],
        buttons: [{
            text: 'Save',
            action: 'btn_save'
        }, {
            text: 'Cancel',
            action: 'btn_cancel'
        }]
    });

    When I create a new record for this form, I use the following method in my controller:
    Code:
    ...
    payNewRecord: function(btn){
       record = Ext.create('CPSClientApp.model.paymodel');
       newRecord(record,'paydataform');                
    },
    ...
    newRecord is a method I use to display and load the form window.
    a RESTful call to my php script properly returns the necessary record information inclusing some field defaults:
    Code:
    {
       "success":true,
       "record":[
          {
             "recordid":"3374501d-c1b1-11e3-abcc-81b818504a7f",
             "recdate":"2014-04-11 15:41:03",
             "delflag":2,
             "pradataid":"dffa1601-7188-11e3-859b-cc822639abad",
             "paydate":"2014-04-11 19:41:03",
             "payfor":"SERVICES",
             "paysource":"PATIENT",
             "paymethod":"CREDIT CARD"
          }
       ]
    }
    The problem I am having is that the Date will properly display in the Datefield on the form in Chrome but will NOT populate in IE 11. The other fields populate fine in both browsers. Is there something "special" I need to do to populate date fields in IE? Thanks for all your help.

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,588
    Vote Rating
    68
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    So the field is rendering correctly but the date not getting populated?
    Get on the Fast Track with Sencha Training http://sencha.com/training

    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    May 2009
    Posts
    178
    Vote Rating
    2
    TampaBay55 is on a distinguished road

      0  

    Default


    Hello Gary:

    Yes, that is correct. The field renders properly and is correctly populated in Chrome but not in IE.

    Shawn

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    IE doesn't know how to parse it.

    Run:

    Code:
    new Date("2014-04-11 19:41:03")
    In the console for both browsers. Give the field in your model a date format so Ext can parse it. See: http://docs.sencha.com/ext/5.0.0/api...cfg-dateFormat
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    May 2009
    Posts
    178
    Vote Rating
    2
    TampaBay55 is on a distinguished road

      0  

    Default


    Thanks Evant:

    I added the
    Code:
    dateFormat: 'Y-m-d H:m:s'
    to the paydate field in the model and now the date does not show in either browser.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The format is incorrect, you can't use the same identifier twice. Lowercase "m" is month with leading zeroes.

    Code:
    dateFormat: 'Y-m-d H:i:s'
    http://docs.sencha.com/ext/5.0.0/api...!/api/Ext.Date
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User
    Join Date
    May 2009
    Posts
    178
    Vote Rating
    2
    TampaBay55 is on a distinguished road

      1  

    Default


    Wow! Such a rookie mistake. Thanks for all your help Evant! Works like a charm now.

    Cheers!

Thread Participants: 2