1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
    BastianKrones is on a distinguished road

      0  

    Default Retrieving and Sending Date from Database

    Retrieving and Sending Date from Database


    Hello,
    i am currently trying to build a simple app using Sencha Architect 2.2/ Sencha Touch 2.1.1, Visual Studio 2012/MVC WEB API and MSSQL.

    I want to add a datetime picker field:
    View:
    Code:
    {
      xtype: 'datepickerfield',
      label: 'Date',
      name: 'DateCreated',
      readOnly: false,
      dateFormat: 'd.m.Y',
      picker: {
        yearFrom: 1930
      }
    }
    Model:
    Code:
    {
      dateFormat: '',
      name: 'DateCreated',
      type: 'date'
    }


    With those adjustments i get the correct display value. But i am not able to save it, because it sends "-1262307600" ( i guess its a timestamp ) back to my MVC WEB API. and this WEB API can't handle it, so it's a "NULL".



    If i change type from "date" to "auto", display-value can't be loaded from the database.
    But the date-picker is still able to set a value of this input-field.
    If i press save: JSON-value will be "1929-12-31T23:00:00.000Z" and MVC WEB API got it's "31.12.1929 23:00:00" => Save was successful.

    So it's a dilemma. Either i am able to load database values, but not being able to save them or i not able to load database values, but able to save an client-set values by date-picker.

    What could i do to solve this issue?

  2. #2
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    586
    Vote Rating
    52
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Check the submitFormat config of DateField in the docs, this will take care of the posting.
    For the model, there is a dateFormat config as well.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
    BastianKrones is on a distinguished road

      0  

    Default


    Thanks tangix for your reply.
    I read those articles before and i still couldn't solve this problem.

    1) There is no "submitFormat" at Date-Field xtype: "datepickerfield"
    2) In model i changed "DateFormat" to any kind of format and keep "Y-m-d".

    If i set ANY format JSON date can't be read and datepicker-field is emtpy.

    Just to mention my view:
    Code:
    config: {
            id: 'UserForm',
            items: [
                {
                    xtype: 'datepickerfield',
                    label: 'Date',
                    name: 'DateCreated',
                    readOnly: false,
                    dateFormat: 'd.m.Y',
                    picker: {
                        yearFrom: 1930
                    }
                },
                {
                    xtype: 'panel',
                    margin: '6px',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            action: 'save',
                            flex: 1,
                            ui: 'confirm',
                            text: 'Save'
                        },
                        {
                            xtype: 'button',
                            action: 'delete',
                            flex: 1,
                            ui: 'decline',
                            text: 'Delete'
                        }
                    ]
                }
            ]
        }
    My Model which changed a little bit:
    Code:
    config: {        fields: [
                ...,{
                    dateFormat: 'Y-m-d',
                    name: 'DateCreated',
                    type: 'date'
                }
            ],
            proxy: {
                type: 'rest',
                url: 'http://localhost/useradmin/api/user'
            }
        }
    }
    Hopefully you could post some code as a simple explanation?

  4. #4
    Sencha User
    Join Date
    Jan 2010
    Location
    Northern Ireland
    Posts
    59
    Vote Rating
    2
    Frith is on a distinguished road

      0  

    Default


    MSSQL: SELECT CONVERT(varchar, [MYDATE],120) as dt -> 120 = Y-m-d H:i

    Model: dateFormat: 'Y-m-d H:i'

    Ext: {
    xtype:'datefield', // datefield not picker ... is this a problem? anchor:'100%', fieldLabel:'My Date', name:'from_date', submitFormat: 'Y-m-d H:i', format: 'D, d M y' // = display format }

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
    BastianKrones is on a distinguished road

      0  

    Default


    Hi Frith,
    thank you for your reply, but i really need to have a datepickerfield and so there is no submitFormat.
    Even if i want to, Sencha Architect doesn't have an xtype "datefield".
    Just "Date Picker Field" and "Date Picker".

    I don't have a clue why i can get the database values if i just say "type:date" and dateFormat:"".

    Could anyone tell me the logic behind it? Why it is not displaying if i set a dateFormat in my model?

    Thanks alot

    Maybe it is easier if i post the complete code.

    1) via ASP.NET WEB API i get JSON:
    Code:
    0: {id:2, name:Billy Tinnes, emailAddress:billie@test.com, age:29,
        DateCreated:1930-01-01T00:00:00,…}
    1: {id:5, name:Hayley Williams, emailAddress:hayley@test.com, age:37,
        DateCreated:1931-01-01T00:00:00,…}
    2: {id:7, name:Eva Bowditch, emailAddress:eva@test.com, age:43,
        DateCreated:null, gender:M,…}
    3: {id:9, name:Jackie Catino, emailAddress:jackie@test.com, age:34,
        DateCreated:2013-01-28T09:40:39.043,…}
    4: {id:12, name:Susan Behen, emailAddress:susan@test.com, age:35,
        DateCreated:2013-01-28T09:40:39.043,…}
    5: {id:13, name:Mandy Davies, emailAddress:mandy@test.com, age:32,
        DateCreated:null, gender:M,…}
    • 2) Sencha Architect's model:
      Code:
      config: {        fields: [
                  {
                      name: 'id',
                      type: 'int'
                  },
                  {
                      name: 'name',
                      type: 'string'
                  },
                  {
                      name: 'emailAddress',
                      type: 'string'
                  },
                  {
                      name: 'age',
                      type: 'int'
                  },
                  {
                      dateFormat: '',
                      name: 'DateCreated',
                      type: 'date'
                  },
                  {
                      name: 'gender'
                  },
                  {
                      name: 'getNewsletter'
                  },
                  {
                      name: 'ContactFK'
                  }
              ],
              proxy: {
                  type: 'rest',
                  url: 'http://localhost/useradmin/api/user'
              }

    Sencha Architect's View:
    Code:
    config: {
            id: 'UserForm',
            items: [
                {
                    xtype: 'textfield',
                    label: 'Name',
                    name: 'name'
                },
                {
                    xtype: 'emailfield',
                    label: 'Email',
                    name: 'emailAddress',
                    placeHolder: 'email@example.com'
                },
                {
                    xtype: 'numberfield',
                    label: 'Age',
                    name: 'age'
                },
                {
                    xtype: 'radiofield',
                    label: 'Female',
                    name: 'gender',
                    value: 'F'
                },
                {
                    xtype: 'radiofield',
                    label: 'Male',
                    name: 'gender',
                    value: 'M'
                },
                {
                    xtype: 'checkboxfield',
                    label: 'Newsletter',
                    name: 'getNewsletter',
                    value: 'true'
                },
                {
                    xtype: 'datepickerfield',
                    label: 'Date',
                    name: 'DateCreated',
                    readOnly: false,
                    dateFormat: 'd/m/Y',
                    picker: {
                        yearFrom: 1930
                    }
                },
                {
                    xtype: 'selectfield',
                    label: 'Contact',
                    name: 'CustomerFK',
                    displayField: 'Name',
                    store: 'MyJsonStore1',
                    valueField: 'CustomerFK'
                },
                {
                    xtype: 'panel',
                    margin: '6px',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            action: 'save',
                            flex: 1,
                            ui: 'confirm',
                            text: 'Save'
                        },
                        {
                            xtype: 'button',
                            action: 'delete',
                            flex: 1,
                            ui: 'decline',
                            text: 'Delete'
                        }
                    ]
                }
            ]
        }
    In this case the api sends json back:
    Code:
    • ContactFK: null
    • DateCreated: -1262304000
    • age: 29
    • emailAddress: "billie@test.com"
    • gender: "M"
    • getNewsletter: "true"
    • id: 2
    • name: "Billy Tinnes"
    Even a "timestamp" is sent back: My ASP.NET WEB API has an empty "DateCreated"-value:
    WEBAPI_PutEmpty.png

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Location
    Concord, NC
    Posts
    44
    Vote Rating
    1
    matthewpayne is on a distinguished road

      0  

    Default


    I have all the same set up as you and I define my Model dates with dateFormat 'c'.

    Code:
    {                dateFormat: 'c',
                    name: 'Birthday',
                    type: 'date'
    },