Results 1 to 10 of 10

Thread: Formatting .NET dates in ext?

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34

    Default Formatting .NET dates in ext?

    I have a server returning some XML from a .NET server with datetimes. The dates appear in the grid with what looks like a normal format:

    Code:
    2008-09-11T08:29:54.9638002-05:00
    But whenever I try to format them like

    Code:
    var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                        url: '...',
                        method: 'GET'
                    }),
                reader: new Ext.data.XmlReader({
                       record: 'RFQTrade',
                       id: 'ServerID_Trade',
                       totalRecords: 'TotalNumResults'
                   }, [
                        'Contract', 'Price', 'Quantity', 'TradeTime'
                   ])
            });
    
    var grid = new Ext.grid.GridPanel({
        ...
        columns: [
           { header: 'TradeTime', width: 90, sortable: true, dataIndex: 'TradeTime', 
                 renderer: Ext.util.Format.dateRenderer('Y') }
        ]
    I get NaN displayed. I've also tried all the other obvious date format strings ("m/d/Y", "m/d/y", "m", "mm", "MM", etc) but none work.
    I've searched the forums and found several people mention that ext uses a different datetime format than .NET but I can't find any examples of how. Anybody know the right way to format this date?

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583

    Default

    It's bad as hell, but I'm using this in the meantime.
    HTML Code:
    function dateRenderer(val){
                var toRet = Ext.util.Format.substr(val, 0, 10);//01/01/2007 00:00:00 is the complete format
                if(toRet == '01/01/1900')
                    return 'no date';
                return toRet;
            };
            
    I used this as renderer for the column;
    It's rubbish though.

    EDIT: you probably just need to specify in the XmlReader config object the type:'date' for your field that represent a date.

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Yep, you also need to specify the dateFormat too.

    The easiest way is to send the date back as JSON, what I usually do is:

    Code:
    myDate: new Date(myDate)
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    try this record definition instead:
    Code:
            reader: new Ext.data.XmlReader({
                       record: 'RFQTrade',
                       id: 'ServerID_Trade',
                       totalRecords: 'TotalNumResults'
                   }, [
                        'Contract', 'Price', 'Quantity',
                        {name: 'TradeTime', type: 'date', dateFormat: 'c'}
                   ])
            }
    i specifically made the Ext Date object's c format specifier flexible enough to handle a variety of iso 8601 date formats in the previous minor release.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34

    Default

    Quote Originally Posted by mystix View Post
    try this record definition instead:
    Code:
            reader: new Ext.data.XmlReader({
                       ...
                   }, [
                        'Contract', 'Price', 'Quantity',
                        {name: 'TradeTime', type: 'date', dateFormat: 'c'}
                   ])
            }
    i specifically made the Ext Date object's c format specifier flexible enough to handle a variety of iso 8601 date formats in the previous minor release.
    Thanks. Unfortuantly no good though -- adding that line causes no data to show up in the grid (not just for this one column, there's no data for any column). Firebug reports no errors though. I'm still reading the tutorials of how to use firebug to debug further.
    On the other hand, specifying capital 'C' as the date format does make the grid show data, although this particular column is still empty

  6. #6
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34

    Default

    Maybe I'm missing something. I wrote my own custom string parser and that returns the right value. I've verified via alert statements that the function is getting called and is returning the right value. But the new value isn't showing up in the grid. All the other columns show up fine but this field is blank. Any idea why?

    Code:
    var ds = new Ext.data.Store({ 
       //Exactly as above -- I'm *not* specifying the "date" type on my field here.
    });
    
    function createDelegate(object, method)
    {
           return function() { method.apply(object, arguments); }
    }
        
    function formatMyDate(dateVal)
    {
           var formattedDate = Ext.util.Format.substr(dateVal, 11, 8);
           alert(formattedDate);
           return formattedDate;
    }
    
    var grid = new Ext.grid.GridPanel({
            store: ds,
            columns: [
                  {header: 'TradeTime', width: 90, sortable: true, dataIndex: 'TradeTime',
                    renderer: createDelegate(this, formatMyDate)
                 }
             ]
    The formatMyDate function is getting called and shows alerts with the correct values. Yet the column in the grid is empty. Any ideas?

  7. #7
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34

    Default

    Quote Originally Posted by evant View Post
    Yep, you also need to specify the dateFormat too.

    The easiest way is to send the date back as JSON, what I usually do is:

    Code:
    myDate: new Date(myDate)
    Unfortuantly, sending JSON from the server isn't an option (that's legacy code I can't change). Is there a way to do this in xml?

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34

    Default Just went with Mabello's solution

    I finally just went with mabello's solution (I didn't even bother with a delegate, just stuck the function in as the renderer). Ugly and hacky, but it works.

  9. #9
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    odd. post an xml snippet and your grid + store code.
    i'll have a look at it in the morning.

  10. #10
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    i modified the array-grid example using the suggestions i made in post #4 and it works as expected:

    (modified array-grid.js from the official 2.2. download. modifications in red)
    Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * [email protected]
     * 
     * http://extjs.com/license
     */
    
    Ext.onReady(function(){
    
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        var myData = [
            ['3m Co',71.72,0.02,0.03,'2008-09-11T08:29:54.9638002-05:00'],
            ['Alcoa Inc',29.01,0.42,1.47,'2008-09-11T08:29:54.9638002-05:00'],
            ['Altria Group Inc',83.81,0.28,0.34,'2008-09-11T08:29:54.9638002-05:00'],
            ['American Express Company',52.55,0.01,0.02,'2008-09-11T08:29:54.9638002-05:00'],
            ['American International Group, Inc.',64.13,0.31,0.49,'2008-09-11T08:29:54.9638002-05:00'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'2008-09-11T08:29:54.9638002-05:00'],
            ['Boeing Co.',75.43,0.53,0.71,'2008-09-11T08:29:54.9638002-05:00'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'2008-09-11T08:29:54.9638002-05:00'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'2008-09-11T08:29:54.9638002-05:00'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'2008-09-11T08:29:54.9638002-05:00'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'2008-09-11T08:29:54.9638002-05:00'],
            ['General Electric Company',34.14,-0.08,-0.23,'2008-09-11T08:29:54.9638002-05:00'],
            ['General Motors Corporation',30.27,1.09,3.74,'2008-09-11T08:29:54.9638002-05:00'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'2008-09-11T08:29:54.9638002-05:00'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'2008-09-11T08:29:54.9638002-05:00'],
            ['Intel Corporation',19.88,0.31,1.58,'2008-09-11T08:29:54.9638002-05:00'],
            ['International Business Machines',81.41,0.44,0.54,'2008-09-11T08:29:54.9638002-05:00'],
            ['Johnson & Johnson',64.72,0.06,0.09,'2008-09-11T08:29:54.9638002-05:00'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'2008-09-11T08:29:54.9638002-05:00'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'2008-09-11T08:29:54.9638002-05:00'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'2008-09-11T08:29:54.9638002-05:00'],
            ['Microsoft Corporation',25.84,0.14,0.54,'2008-09-11T08:29:54.9638002-05:00'],
            ['Pfizer Inc',27.96,0.4,1.45,'2008-09-11T08:29:54.9638002-05:00'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'2008-09-11T08:29:54.9638002-05:00'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'2008-09-11T08:29:54.9638002-05:00'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'2008-09-11T08:29:54.9638002-05:00'],
            ['United Technologies Corporation',63.26,0.55,0.88,'2008-09-11T08:29:54.9638002-05:00'],
            ['Verizon Communications',35.57,0.39,1.11,'2008-09-11T08:29:54.9638002-05:00'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'2008-09-11T08:29:54.9638002-05:00']
        ];
    
        // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        // example of custom renderer function
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'c'}
            ]
        });
        store.loadData(myData);
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:350,
            width:600,
            title:'Array Grid'
        });
    
        grid.render('grid-example');
    
        grid.getSelectionModel().selectFirstRow();
    });
    post your grid code + xml if you still need help with this.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •