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 - 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


    hmm... both users above had the type:'date' config in place (which is why i asked for your configs).

    that type: 'date' config is essential.

    without that, the incoming value from the XML blob will be parsed as a mere string, not as a js Date object.

  9. #9
    Sencha User
    Join Date
    Dec 2009
    Location
    Dallas, TX
    Posts
    20
    Vote Rating
    0
    ramana_l_v is on a distinguished road

      0  

    Default


    I am facing the same problem , I used type: date but still I am facing the same issue. Below is my code which I am using
    Code:
    var reader = new Ext.data.JsonReader({
      totalProperty: 'recordCount',
      successProperty: 'success',
      idProperty: 'pid',
      root: 'records'
    }, [
      {name: 'dob', allowBlank: false}
    ]);
    
    
    var userColumns =  [
      {header: "Date Of Birth", width: 40, sortable: true, dataIndex: 'dob', type: 'date', editor: new Ext.form.DateField({name: 'dob_date', width:90, allowBlank:false, format:'m-d-Y', renderer:Ext.util.Format.dateRenderer('m-d-Y')     
      }) }
    ];
    I am configuring this in GridPanel, so when dislaying I want the date to be displayed in string with the format 'm-d-Y' and when date is selected I want the date to sent in the same format.

    Issues I am facing
    1) the format which is shown is coming correct but when I submit the form it is changing to 'Y-m-d' format

    2) When the store is displayed in the grid panel when I use the renderer in the grid header the values that are displayed are 'NaNNaNNaN', if I dont use the renderer the exact value present in the shown.
    Code:
    {header: "Date Of Birth", width: 40, sortable: true, dataIndex: 'dob', type: 'date', renderer:Ext.util.Format.dateRenderer('m-d-Y'), editor: new Ext.form.DateField({name: 'dob_date', width:90, allowBlank:false, format:'m-d-Y', renderer:Ext.util.Format.dateRenderer('m-d-Y')     
      }
    Thanks,
    Last edited by mystix; 27 Dec 2009 at 10:20 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  10. #10
    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


    type:'date' is a Ext.data.Record config, not a GridPanel config:
    Code:
    var reader = new Ext.data.JsonReader({
        totalProperty: 'recordCount',
        successProperty: 'success',
        idProperty: 'pid',
        root: 'records'
    }, [
        {name: 'dob', type: 'date', allowBlank: false}
    ]);
    
    var userColumns =  [{
        header: "Date Of Birth", 
        width: 40, 
        sortable: true, 
        dataIndex: 'dob', 
    //    type: 'date',
        editor: new Ext.form.DateField({
            name: 'dob_date', 
            width:90, 
            allowBlank:false, 
            format:'m-d-Y', 
            renderer:Ext.util.Format.dateRenderer('m-d-Y')     
        }) 
    }];

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi