ExtJS 6.5.3 中的取消选择列表方法

Question

我对 Ext.dataview.List 取消选择方法有一个大问题，它在这个版本中不存在，我正在从 6.0.1 迁移到 6.5.3 以及所有调用取消选择方法目前不起作用。

此致。

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

正确的方法是与可选择的进行交互。 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);
    }
});

ExtJS 6.5.3 中的取消选择列表方法

deselect list method in ExtJS 6.5.3

extjs

sencha-touch

extjs6-modern

extjs6.5