Extjs datefield looks weird in my grid

Question

I wrote simple grid with one datecolumn using ExtJs 6.2.0, but it doesnt' looks well. I mean datepicker is so narrow and weird-looking.

    xtype: 'gridpanel',
    reference: 'payordFlowGrid',
    width: 1000,
    minHeight: 120,
    margin: '0 0 10 0',
    requires: [
        'Ext.selection.CellModel',
        'Ext.grid.column.Action'
    ],
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1,
        listeners: {
            beforeedit: function(editor, context, eOpts){
                // workaround for error at clicking a widgetcolumn
                if (context.column.widget)
                    return false;
            }
        }
    },
    bind: {
        store: '{payordflowstore}'
    },
    actions: {
        del: {
            glyph: 'xf147@FontAwesome',
            tooltip: 'Del',
            handler: 'onGridPayordFlowDel'
        }
    },
    columns: [
        ...
        { text: '№ п.п.',  dataIndex: 'npp', width: 100,
            editor: {
                allowBlank: true
            }
        },
        { xtype: 'datecolumn',
            header: 'Дата',
            dataIndex: 'dt',

            width: 95,
            format: 'd m Y',
            editor: {
                xtype: 'datefield',
                format: 'd.m.y'
            }
        },
        { text: 'Расчет.сумма',  dataIndex: 'summa6', width: 100
        },
        { xtype: 'checkcolumn', text: 'Подпись', dataIndex: 'signed' }
        ,
         {
            menuDisabled: true,
            sortable: false,
            xtype: 'actioncolumn',
            width: 50,
            items: ['@del']
        }
    ]
}

Now my question: Why is my date picker looks so weird:

But I saw sencha sample from there, that looks great:

Answer 1

Nothing wrong with you code. Make sure to use the same css that is being used in the demo. Your current css is not good.