Hybrid View

  1. #1
    Ext User
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    zpyoung is on a distinguished road

      0  

    Question Formatting date column in GridPanel

    Formatting date column in GridPanel


    I'm having issues with formatting a date column in a GridPanel. I have tried and googled for example on how do to this but have not had any luck. I have play with both versions of Ext JS 2 and 3 and still not able to format the date.

    My JSON result looks like the follow example. Which I understand to be the ISO format.
    Code:
    {"Title":"test","Url":"http://zach.com","Date":"2009-02-02T00:00:00.0000000","Duration":"1:20","Id": }
    I can also have my results return the follow format if it is better.
    Code:
    {"Title":"test","Url":"http://zach.com","Date":new Date(1233554400000),"Duration":"1:20","Id":1}
    The JsonStore that I have working is the follow. Which I would think is letting the grid know the current format since it could be JavaScript or ISO.
    Code:
    SharpJs.RecordingsStore = new Ext.data.JsonStore({
            data: SharpJs.RecordingsData,
            fields: [
                {name:'Id'}
                ,{name:'Title'}
                ,{name:'Url'}
                ,{name: 'Date', mapping: 'Date', type: 'date', dateFormat:'c'},
                ,{name:'Duration'}
            ],
            sortInfo: { field: 'Id', direction: 'ASC' }
        });
    Then my ColumnModel is the following which is not having any impact on the format. I would like the format to be the ShortDate. What this grid is display is the following.
    Code:
     Mon Feb 02 2009 00:00:00  GMT-6:00 (Central Time Zone).
    Code:
     SharpJs.RecordingsColumnModel = new Ext.grid.ColumnModel([
                { header: 'Title', dataIndex: 'Title' }
                ,{ header: 'Url', dataIndex: 'Url' }
                ,{ header: 'Date', dataIndex: 'Date', render:function(value) { return new Date(value).format(Date.patterns.ShortDate); }  }
                ,{ header: 'Duration', dataIndex: 'Duration' }
            ]);
    1. Which the correct or prefered format ISO or JavaScript?
    2. What is the correct syntax for the ColumnModel and JsonStore to format a date column in a grid panel?

    If I have missed any details let me know.
    Last edited by mystix; 16 May 2009 at 8:25 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    re:
    1. stick with ISO-8601 date format.

    2. there's no "render" config.
      see http://extjs.com/docs/?class=Ext.gri...ember=renderer

      your ColumnModel definition should read
      Code:
      { 
          header: 'Date', 
          dataIndex: 'Date', 
          renderer: Ext.util.Format.dateRenderer(Date.patterns.ShortDate)
      }

    p.s. are you sure Date.patterns.ShortDate is defined?
    be sure to check that.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Was this ever solved? I am having the exact same problem, but I am using "renderer" correctly in the column config.

    Basically I have a store that retrieves data from the server, with a Date column that is loaded with the value "2009-06-01T07:00:00.0000000" into a field of type "date".

    I am then manually looping thru this store and adding the records to another store, which feeds a grid panel. The receiving store is configured as follows:

    Code:
           // Setup the database Store call to retrieve record collection
           var store = new Ext.data.Store({
               reader: new Ext.data.JsonReader(
                { root: 'data', id: 'CaseTicketId' },
                  Ext.data.Record.create([
                    { name: 'CaseTicketId', type: 'string' },
                    { name: 'SurgeryStart', type: 'date', dateFormat: 'Y-m-dTH:i:s.u'},
                    { name: 'HospitalName', type: 'string' },
                    { name: 'SurgeonLastName', type: 'string' },
                    { name: 'ProcedureName', type: 'string' }
                ])
               ),
               autoLoad: false
           });
    And the column config that this store feeds is as follows:
    Code:
    columns: [
    ...
      { id: "SurgeryDate", header: "Date", width: 70, sortable: true, dataIndex: 'SurgeryStart', renderer: Ext.util.Format.dateRenderer('m/d/Y') },
      { id: "SurgeryTime", header: "Time", width: 60, sortable: true, dataIndex: 'SurgeryStart', renderer: Ext.util.Format.dateRenderer('g:i A') },
    ....
    Neither one of these fields are working...both receiving NaN in the numeric date pieces. What gives here? When I pass a the same JSON collection that is loading into store 1 direclty back to the grid store (store 2), rather than add manually by looping thru store 1 like I am doing now, the above code shows the date correctly in the grid. What am I doing wrong? Why can I not pass a record with a date field type containing the ISO date value "2009-06-01T07:00:00.0000000" to a store that has a JsonReader with a field configured to read the format dateFormat: 'Y-m-dTH:i.u', and have the column definition correctly render a date value with the proper renderer setup? Not sure what's up here or where to go for the solution...

    Appreciate any help with this. Thanks!

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    you didn't mention how you're passing data from one Store to the other, nor what either Store's Record definition looks like.

  5. #5
    Sencha User berend's Avatar
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    46
    Vote Rating
    0
    berend is on a distinguished road

      0  

    Default


    Exactly the same thing here. Get NaN/NaN/NaN. Input is Y-m-d (in the XML passed in), record definition has dateFormat: "Y-m-d"; renderer should display it in d-m-Y just as above.

    But doesn't work.

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    post your store and columnmodel definitions.

  7. #7
    Sencha User berend's Avatar
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    46
    Vote Rating
    0
    berend is on a distinguished road

      0  

    Default


    Quote Originally Posted by berend View Post
    Exactly the same thing here. Get NaN/NaN/NaN. Input is Y-m-d (in the XML passed in), record definition has dateFormat: "Y-m-d"; renderer should display it in d-m-Y just as above.

    But doesn't work.
    And the resolution is that I didn't have a

    Code:
    type: "date"
    property in my Ext.data.Record definition.

  8. #8
    Sencha User
    Join Date
    Dec 2012
    Posts
    5
    Vote Rating
    0
    ssenlighta is on a distinguished road

      0  

    Default What if i have got two dates : end date and start date into one cell ????

    What if i have got two dates : end date and start date into one cell ????


    Quote Originally Posted by mystix View Post
    re:
    1. stick with ISO-8601 date format.

    2. there's no "render" config.
      see http://extjs.com/docs/?class=Ext.gri...ember=renderer

      your ColumnModel definition should read
      Code:
      { 
          header: 'Date', 
          dataIndex: 'Date', 
          renderer: Ext.util.Format.dateRenderer(Date.patterns.ShortDate)
      }
    p.s. are you sure Date.patterns.ShortDate is defined?
    be sure to check that.
    What if i have got two dates : end date and start date into one cell ????