Ext JS Grid : Dates not displaying properly in Safari

61 Posts

anablepo Reply #1, 14 years, 4 months ago

Howdy.

I'm developing an Add-on for MODx with relative success, but one problem I seem to be stuck on is an anomaly where bringing in a date returns 'NaN/Nan/NaN' in Safari - but works perfectly in Firefox (and, I believe, Chrome) by returning '05/28/2012'

Funny thing is, when I go to edit the field in the grid - using the datefield editor, the proper date snaps into place; so I know it's there, it's just not displaying properly.

[ Running Revo 2.2 btw.]

The column is defined in the schema as:

        <field key="presodate" dbtype="date" phptype="date" null="true"/>

And my grid.js looks like:

Kerusso.grid.Kerusso = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'kerusso-grid-kerusso'
        ,url: Kerusso.config.connectorUrl
        ,baseParams: { action: 'mgr/kerusso/getList' }
        ,save_action: 'mgr/kerusso/updateFromGrid'
        ,fields: [{
        		name: 'id'
        		,xtype: 'hidden'
        	},{ 
        		name: 'presodate'
        	},{ 
        		name: 'title'
        	},{ 
        		name: 'preacher'
        	},{ 
        		name: 'scriptureref'
        	},{ 
        		name: 'description'
        	}]
        ,paging: true
        ,autosave: true
        ,remoteSort: true
        ,anchor: '97%'
        ,autoExpandColumn: 'title'
        ,columns: [{
          /*  header: _('id')
            ,dataIndex: 'id'
            ,sortable: true
            ,width: 60
        },{ */
            header: _('kerusso.presodate')
            
            ,dataIndex: 'presodate'
            ,sortable: true
            ,width: 80
            ,editor: { xtype: 'datefield' }
            ,xtype: 'datecolumn'
            /*,renderer : Ext.util.Format.dateRenderer('Y/m/d')*/
        },{
        	header: _('kerusso.title')
            ,dataIndex: 'title'
            ,sortable: true
            ,width: 100
            ,editor: { xtype: 'textfield' }
        },{
        	 header: _('kerusso.preacher')
            ,dataIndex: 'preacher'
            ,sortable: true
            ,width: 100
            ,editor: { xtype: 'textfield' }
        },{
            header: _('kerusso.scriptureref')
            ,dataIndex: 'scriptureref'
            ,sortable: false
            ,width: 100
            ,editor: { xtype: 'textfield' }
        },{
            header: _('kerusso.description')
            ,dataIndex: 'description'
            ,sortable: false
            ,width: 250
            ,editor: { xtype: 'textfield' }
        }]
        ,tbar: [{
            xtype: 'textfield'
            ,id: 'kerusso-search-filter'
            ,emptyText: _('kerusso.search...')
            ,listeners: {
                'change': {fn:this.search,scope:this}
                ,'render': {fn: function(cmp) {
                    new Ext.KeyMap(cmp.getEl(), {
                        key: Ext.EventObject.ENTER
                        ,fn: function() {
                            this.fireEvent('change',this);
                            this.blur();
                            return true;
                        }
                        ,scope: cmp
                    });
                },scope:this}
            }
        },{
            text: _('kerusso.keru_create')
            ,handler: { xtype: 'kerusso-window-keru-create' ,blankValues: true }
        }]
    });
    Kerusso.grid.Kerusso.superclass.constructor.call(this,config)
};
...

Any thoughts? It seems that this same principal is used elsewhere in the Revo 2.2 manager successfully, but I can't reproduce it.

Thanks!!

863 Posts

Lucas Reply #2, 14 years, 4 months ago

How is the raw date data returned from getList formatted? eg. yyyy-mm-dd

61 Posts

anablepo Reply #3, 14 years, 4 months ago

That's the strange part -

Because even though it's displaying improperly, the grid is grabbing the data - and the snippet I've got is returning '2012-05-26' (which is correct) without any manipulation. my getList is pretty vanilla -

<?php
class KerussoGetListProcessor extends modObjectGetListProcessor {
    public $classKey = 'abKerusso';
    public $languageTopics = array('kerusso:default');
    public $defaultSortField = 'presodate';
    public $defaultSortDirection = 'ASC';
    public $objectType = 'kerusso.keru';

//search
    public function prepareQueryBeforeCount(xPDOQuery $c) {
	    $query = $this->getProperty('query');
	    if (!empty($query)) {
	        $c->where(array(
	            'name:LIKE' => '%'.$query.'%',
	            'OR:description:LIKE' => '%'.$query.'%',
	        ));
	    }
	    return $c;
	}
// update window

	

}
return 'KerussoGetListProcessor';

Do I need to manipulate the string that gets pulled in from the grid js? ('cause I'm not sure how to do that.)

863 Posts

Lucas Reply #4, 14 years, 4 months ago

You've commented out 'renderer' in your grid config (line 40), does it work without that line? What if you remove the "'xtype: 'datecolumn'" line?

I usually run into date issues with Firefox as it prefers slashes over hyphens when formatting dates in JS.