deselect list method in ExtJS 6.5.3 - extjs

Question

I have a big problem with the Ext.dataview.List deselect method, it doesn't exist in this version, I'm working in a migration from 6.0.1 to 6.5.3 and all lists that calls the deselect method doesn't work currently.
Regards.

Answer 1

You need to use dataView.getSelectable().deselect(record); method.
In this FIDDLE, I have created a demo using dataview. I hope this will help you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
tittle: 'DeSELECT RECORD',
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'button',
text: 'De-select selected record',
handler: function (btn) {
var dataView = btn.up('panel').down('dataview');
//If you have single selction then you just need to get {dataView.getSelection()}
//it will return single record.
dataView.getSelectable().deselect(dataView.getSelection());
//If you have multiple selection then you need to get {dataView.getSelections()}
// it will return all selected record
// need to loop to deselect every record
// dataView.getSelections().forEach(r => {
// dataView.getSelectable().deselect(r);
// });
}
}, {
xtype: 'dataview',
flex: 1,
// layout:'fit',
// width:'100%',
store: {
fields: ['name', 'age'],
data: [{
name: 'Peter',
age: 26
}, {
name: 'Ray',
age: 21
}, {
name: 'Egon',
age: 24
}, {
name: 'Winston',
age: 24
}]
},
itemTpl: '<div>{name} is {age} years old</div>'
}]
});
}
});
CSS
<style>
.x-dataview-item {
background-color: #ccc;
color: #FFF;
padding: 10px;
font-weight: bolder;
border-bottom: 1px solid #fff;
}
.x-dataview-item.x-selected{
background-color: #5c5c;
}
</style>

Answer 2

The correct method is to interact with the selectable. Fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
var dv = Ext.Viewport.add([{
xtype: 'dataview',
store: {
data: [{
name: 'Peter'
}, {
name: 'Ray'
}, {
name: 'Egon'
}, {
name: 'Winston'
}]
},
itemTpl: '{name}'
}, {
docked: 'top',
xtype: 'button',
text: 'Deselect first',
handler: function (btn) {
dv.getSelectable().deselect(dv.getStore().first());
}
}])[0];
dv.getSelectable().select(0);
}
});