从Sencha Modern中的网格中获取选定的项目

Question

在我创建的应用程序中，控制器需要执行“将选定项目放在网格中的操作”。

现在的问题是：无论如何我尝试我似乎都无法获得选择

要获取网格，我只需调用：

let orderGridComponent = Ext.ComponentQuery.query('ordergrid[itemId=ordergrid]')[0];

这似乎可行。 现在，根据文档即可进行选择：

let selection = orderGridComponent.selection;

但是，选择始终为“空”。 网格定义为：

Ext.define('myApp.view.main.OrderGrid', {
    extend: 'Ext.grid.Grid',
    xtype: 'ordergrid',


    columnLines: true,

    selectable: {
        rows: true,
        cells: false
    },

    requires: [
        'myApp.store.OrderStore'
    ],

    title: 'Order data',

    store: {
        type: 'orders'
    },

    columns: [
    {
        xtype: 'checkcolumn',
        headerCheckbox: true,
        dataIndex: 'selected'
    }, {
        text: 'Order Nr',
        dataIndex: 'orderNr',
        width: 100,
        flex: 1
    }]
});

并用作

    {
        xtype: 'ordergrid',
        itemId: 'ordergrid',
    }

我还尝试了let selection = orderGridComponent.selected或getSelected以及许多其他版本的互联网建议的变体。

那么对于现代的 6.5.2框架该如何做呢？

Answer 1

您需要使用grid.getSelection()方法来获取选定的记录。

在这个FIDDLE中 ，我使用grid创建了一个演示。 希望它能帮助您达到要求。

代码段

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'selected'],
    data: [{
        name: 'a',
        email: 'a@abc.com',
        selected: false
    }, {
        name: 'b',
        email: 'b@abc.com',
        selected: false
    }]
});

Ext.create('Ext.Panel', {
    title: 'Get Selection',
    renderTo: Ext.getBody(),
    fullscreen: true,
    viewModel: {
        selection: null,
        count: 0
    },
    items: [{
        xtype: 'grid',
        selectable: {
            mode: 'multi',
            checkbox: true
        },
        store: store,
        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        }, {
            text: 'Email',
            flex: 1,
            dataIndex: 'email'
        }],
        height: 200,
        listeners: {
            selectionchange: function (grid, re) {
                var selection = grid.getSelections(),
                    data = null,
                    vm = grid.up('panel').getViewModel();

                if (!Ext.isEmpty(selection)) {
                    data = selection.map(rec => {
                        return rec.get('name')
                    }).join(',');
                }
                vm.set('selection', data);
            }
        }
    }],
    bbar: ['->', {
        xtype: 'label',
        bind: {
            html: 'seleted user name is <b>{selection}</b>'
        }
    }]
})