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

Question

I have tried different ways of displaying date in grid column and implementing click event for grid row.

My requirements are:

1 Display date in grid column when date in my object is of form: "dateval": "2014-09-05T16:19:39 +04:00"

My data:

data: [
    {
        "age": 13,
        "name": "Ben Watson",
        "gender": "male",
        "phone": "[phone]",
        "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 the user clicks a grid row in a panel, display the data in the row in the adjacent panel.

I am using ext.define and extend in this application

Answer 1

I had a play around with your code and discovered that the date is not being parsed by javascript correctly with the space in the datetime string. I removed all spaces and it worked fine for me.

See this 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": "[email protected]",
        "phone": "555-111-1224",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Bart',
        "email": "[email protected]",
        "phone": "555-222-1234",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Homer',
        "email": "[email protected]",
        "phone": "555-222-1244",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Marge',
        "email": "[email protected]",
        "phone": "555-222-1254",
        "registered": "2014-09-05T16:19:39 +04:00"
    }]
}