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.
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>