Unable to sort dates in Sencha list

[Rajat Sharma]

Hello everyone

I have a Sencha list (Bufferredlist to be precise) the store for which has following model.

var topTenSecModel = Ext.regModel('TopTenSecModel',{
    fields:[ 
        'securityName',
        {name :'securityAmount', type : 'float'},
        {name : 'maturityDate', 
         type : date
         dateFormat : 'M d, Y'
        },
        'fundId'
]});

The store receives the date from server as a String (e.g May 12, 2012). It renders as it is which hampers the sorting. Hence a (N)ovember comes after (D)ecember.
To avoid the alphabetic sorting behavior, i change the type to Date. This now works fine as far as the sorting is concerned. Dates are getting sorted as expected. But now the problem is that I see complete date in the column display.
I certainly do not want this and any other solution inevitably makes me format the date, which converts it back to String and again spoils the sorting. Can anyone suggest the solution I am so obviously missing. I am just caught in the Date-->format-->String-->Parse-->Date cycle. I have tried options such as convert function where I return as my format but basically every approach forces me to chose between a String (incorrect sort) or a Date (complete long date with h m s). Please help.

[jennifer123]

If I understand correctly, you are trying to display the data in a column. Try a renderer on the column

{
                header: 'Date',
                dataIndex: 'maturityDate',      //keep the type as date
                hidden: false,
                renderer: daterenderer
}

function daterenderer (data, cell, record, rowIndex, columnIndex, store){
            return data.format("M d, Y");   //returns Jul 17, 2012 for date like Tue Jul 17, 2012 12:00:00 GMT-0400(Eastern Daylight Time)
}

[Rajat Sharma]

Hi

Thanks for your replies. But either renderer in the column header does not work in sencha 1.1 (that's what I am using) or more plausibly, some mistake in my syntax/ logic. I searched workarounds all day yesterday and renderer came up as solutions many times. But seems to me this works in Ext JS. Relevant code snippet again:

However, I have applied the same to itemtpl of my bufferredlist as opposed to column in listheader.

xtype : 'bufferedlist',
itemTpl: '        <div >'+         
          '        {[daterenderer(values.maturityDate)]}'+
          '         </div>'

This works for me. The type indeed remains date because that is how it is defined in model. So the sorting works properly. Also, I get the desired format in the view. Thanks for the help.