Ext.define('uas.view.grid.pagingBlurred.Panel', {
    extend: 'Ext.grid.Panel',
    xtype: 'blurred-paging-grid',

    store: {
        type: 'big-data',
        pageSize: 50,
        remoteSort: true,
        autoLoad: true
    },

    columns:[{
        xtype: 'rownumberer',
        width: 120,
        sortable: false,
        locked: true,
    }, {
        text: 'Id',
        sortable: true,
        dataIndex: 'employeeNo',
        groupable: false,
        width: 80,
        locked: true,
    }, {
        text: 'Date of birth',
        dataIndex: 'dob',
        xtype: 'datecolumn',
        groupable: false,
        width: 115,
    }, {
        text: 'Join date',
        dataIndex: 'joinDate',
        xtype: 'datecolumn',
        groupable: false,
        width: 120,
        filter: {

        },
        editor: {
            xtype: 'datefield'
        },
    }, {
        text: 'Notice<br>period',
        dataIndex: 'noticePeriod',
        groupable: false,
        width: 115,
        filter: {
            type: 'list'
        },
    }, {
        text: 'Email address',
        dataIndex: 'email',

        width: 200,
        groupable: false,
    }, {
        text: 'Department',
        dataIndex: 'department',
        hidden: true,
        hideable: false,
        filter: {
            type: 'list'
        }
    }, {
        text: 'Absences',
        shrinkWrap: true,
        columns: [{
            text: 'Illness',
            dataIndex: 'sickDays',
            width: 100,
            groupable: false,
        }, {
            text: 'Holidays',
            dataIndex: 'holidayDays',
            width: null, // Size column to title text
            groupable: false,
        }, {
            text: 'Holiday Allowance',
            dataIndex: 'holidayAllowance',
            width: null, // Size column to title text
            groupable: false,
        }]
    }, {
        text: 'Salary',
        width: 155,
        sortable: true,
        dataIndex: 'salary',
        align: 'right',
        formatter: 'usMoney',
        groupable: false,
    }],

    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true
    }
});