javascript - Extjs - displaying date in grid column and click event for grid row -

i have tried different ways of displaying date in grid column , implementing click event grid row.

my requirements are:

1 display date in grid column when date in object of form: "dateval": "2014-09-05t16:19:39 +04:00"

my data:

data: [     {         "age": 13,         "name": "ben watson",         "gender": "male",         "phone": "+1 (548) 314-8928",         "registered": "2014-09-05t16:19:39 +04:00"     } 

code:

function render_date(val) {     val = ext.util.format.date(val, 'y-m-d');     return val; } columns: [         { text: 'name', dataindex: 'name' },         { text: 'age', dataindex: 'age' },         {             text: 'registered',             dataindex: 'registered',             type: 'date',             dateformat: 'timestamp',             renderer: render_date         } ] 

2 when user clicks grid row in panel, display data in row in adjacent panel.

i using ext.define , extend in application

i had play around code , discovered date not being parsed javascript correctly space in datetime string. removed spaces , worked fine me.

see fiddle (code below in case of broken link)

ext.application({     name: 'myapp',      launch: function() {         var store = ext.create('ext.data.store', {             storeid: 'simpsonsstore',             fields: ['name', 'email', 'phone', 'registered'],              proxy: {                 type: 'ajax',                 url: 'data1.json',                 reader: {                     type: 'json',                     rootproperty: 'items'                 }             },             autoload: true         });           function render_date(val) {             var date = new date(val.replace(" ", ""));             val = ext.util.format.date(date, 'y-m-d');             return val;         }          ext.create("ext.grid.panel", {             title: 'simpsons',             renderto: ext.getbody(),             store: ext.data.storemanager.lookup('simpsonsstore'),             selmodel: new ext.selection.rowmodel({                 mode: "single"             }),             columns: [{                 text: 'name',                 dataindex: 'name'             }, {                 text: 'email',                 dataindex: 'email',                 flex: 1             }, {                 text: 'phone',                 dataindex: 'phone'             }, {                 text: 'registered',                 dataindex: 'registered',                 type: 'date',                 dateformat: 'timestamp',                 renderer: render_date             }],             height: 200,             width: 800,         });     } });   // data1.json {     "items": [{         'name': 'lisa',         "email": "lisa@simpsons.com",         "phone": "555-111-1224",         "registered": "2014-09-05t16:19:39 +04:00"     }, {         'name': 'bart',         "email": "bart@simpsons.com",         "phone": "555-222-1234",         "registered": "2014-09-05t16:19:39 +04:00"     }, {         'name': 'homer',         "email": "homer@simpsons.com",         "phone": "555-222-1244",         "registered": "2014-09-05t16:19:39 +04:00"     }, {         'name': 'marge',         "email": "marge@simpsons.com",         "phone": "555-222-1254",         "registered": "2014-09-05t16:19:39 +04:00"     }] }