extjssencha-touchextjs6-modernextjs6.5

deselect list method in ExtJS 6.5.3


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.


Solution

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