checkbox header with row click event is not working properly in extjs 6.5.1

I am using a grid with multiple rows each row having checkbox . If you selectAll by clicking header checkbox , and deselect by clicking any row ,header checkbox is also getting deselected . This works as expected in version 6.0.1 Classical tool kit . Fiddle example is given bellow

https://fiddle.sencha.com/#view/editor&fiddle/24tc

but same code does not work in ext 6.5.1 , if you select all by header checkbox , and deselect any row header checkbox is not getting deselected for first time . Fiddle is given bellow

https://fiddle.sencha.com/#view/editor&fiddle/24tf

i need to use row click in checkbox model with header checkbox . please suggest me what to do

i need to use row click in checkbox model with header checkbox . please suggest me what to do

No need to use row click.

I have changed in selModel and no need to row click for selection of checkbox. ExtJs direct property to check checkbox on row click or checkbox click.

You can check here with working fiddle demo.

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    selModel: {
        checkOnly: false,
        injectCheckbox: 'last',
        mode: 'SIMPLE'
    },
    selType: 'checkboxmodel'
});