從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>'
        }
    }]
})