Отменить выбор метода списка в ExtJS 6.5.3

Question

У меня большая проблема с Ext.dataview.List метод deselect, его нет в этой версии, я работаю при переходе с 6.0.1 на 6.5.3, и все списки, которые вызывают метод deselect, в настоящее время не работают.

С уважением.

Answer 1

Вам нужно использовать dataView.getSelectable().deselect(record); метод.

В этой FIDDLE я создал демо, используя dataview, Я надеюсь, что это поможет вам достичь ваших требований.

КОД СНИПЕТТ

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

Правильный метод - взаимодействовать с выбираемым. Скрипка:

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);
    }
});