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
    4
    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
    5
    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
    4
    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
    4
    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
    4
    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
    4
    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')     
        }) 
    }];

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar