CODEWITHSUNDEEP
javascriptsortingextjs
Puru verma
Puru verma

Reputation: 117

Sort the date column in grid on clicking of the header in ExtJS

In my page I have a column inside a grid. When clicking on the header the date is not sorting as I had expected. My setup is as follows:

{ 
    id: 'dateOfBirth',
    header: 'DOB', 
    flex: 1,
    sortable: true, 
    dataIndex: 'dateOfBirth',
    filterable: true,
    filter: {
        type: 'date', 
        dateFormat : 'd-M-Y'
    }
}

My data in "ascending" order results in the rows showing:

01-jan-1990
01-feb-1990
12-jan-1990  <-- wrong
02-mar-1990

... whereas I expected to see:

01-jan-1990
12-jan-1990 
01-feb-1990
02-mar-1990

Can anyone point me in the right direction?

Upvotes: 0

Views: 2970

Answers (1)

Emissary
Emissary

Reputation: 10148

It's a little hard to tell from your question but it looks like you're mixing up properties from different components - I'm assuming your config object is for a grid column but the dateFormat attribute belongs on a model and filters may exist on a store though I think you've misunderstood their purpose.

First ensure your date is modelled correctly, for example: 

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'dateOfBirth', type: 'date', dateFormat: 'd-M-Y' }
    ]
});

Secondly make sure you are using a datecolumn type in your grid configuration:

Ext.create('Ext.grid.Panel', {
    // ...
    store: Ext.create('Ext.data.Store', {
        model: 'MyModel',
        data: [
            // ...
        ],
    }),
    columns: [{
        header: 'DOB', 
        flex: 1,
        sortable: true, 
        dataIndex: 'dateOfBirth',
        xtype: 'datecolumn',
        format: 'd-M-Y'
    }]
});

» fiddle

Upvotes: 1

Related Questions