从sencha modern中的网格中获取所选项目

时间:2017-12-20 11:57:28

标签: javascript extjs

在一个应用程序中,我创建控制器需要对网格中所选项目进行处理"。

现在的问题是:我尝试的任何方式似乎无法进行选择

要获得网格,我只需致电:

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

这似乎有效。现在我可以根据documentation进行选择:

let selection = orderGridComponent.selection;

然而,选择总是" null"。网格定义为:

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.selectedgetSelected以及许多其他变体,这些变体似乎是在互联网上针对其他分机版本提出的。

那么如何为现代 6.5.2框架做到这一点?

1 个答案:

答案 0 :(得分: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>'
        }
    }]
})