javascript - 单击 ExtJS 中的标题对网格中的日期列进行排序

Question

在我的页面中，网格内有一列。单击标题时，日期未按我的预期排序。我的设置如下:

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

我的数据按“升序”排列导致行显示:

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

...而我期望看到:

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

有人能指出我正确的方向吗？

Answer 1

从你的问题中很难看出，但看起来你正在混合来自不同组件的属性 - 我假设你的配置对象用于网格列，但 dateFormat 属性属于模型，过滤器 可能存在于商店，尽管我认为您误解了它们的用途。

首先确保您的日期建模正确，例如:

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

其次，确保您在网格配置中使用 datecolumn 类型:

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