多选器的选择存储在哪个商店(extjs)?

In which store is the selection of a multiselector stored (extjs)?

该文档提供的有关多选器的信息非常有限,目前甚至没有显示示例代码。在我无法展示的工作项目中,多选器被赋予一个商店,从中向用户展示项目,然后在控制器中,他们使用相同的商店来获取所选项目。我不明白这是怎么回事。任何见解将不胜感激。

我在发布之前对这个问题的研究包括 sencha 文档、sencha 论坛和 Whosebug 论坛。同样,我发现有关如何从多选器检索项目的信息非常有限。

您可以通过两种方式从 MultiSelector

中获取所选数据
  • 使用 multiSelector.getStore().getData().items- 此商店仅包含从搜索弹出窗口中选择的数据。这家商店将填写搜索网格的选择更改。
  • 使用multiselector.searchPopup.down('grid').getSelection()

这两种方法都将 return 您从 multiselector 中选择的记录。

在此FIDDLE中,我使用multiselector创建了一个演示。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'panel',
            bodyPadding: 10,
            title: 'MultiSelector',
            renderTo: Ext.getBody(),
            tbar: [{
                text: 'Get Selected recrod',
                handler: function () {
                    var multiselector = this.up('panel').down('multiselector'),
                        data = multiselector.getStore().getData().items;

                    alert(`Total record selected number is ` + data.length);
                    //Get selected record by searchPopup
                    if (multiselector.searchPopup) {
                        console.log('Get selected record by searchPopup', multiselector.searchPopup.down('grid').getSelection().length);
                    }
                }
            }],
            items: [{
                xtype: 'multiselector',
                valueField: 'id',
                displayField: 'name',
                showDefaultSearch: true,
                plusButtonType: 'add',
                hideHeaders: true,
                colspan: 2,
                search: {
                    xtype: 'multiselector-search',
                    store: {
                        type: 'store',
                        fields: ['id', 'name'],
                        autoload: true,
                        data: [{
                            id: 1,
                            name: 'Option 1 -- I want to get this'
                        }, {
                            id: 2,
                            name: 'Option 2 -- I want to get this'
                        }, {
                            id: 3,
                            name: 'Option 3 -- I want to get this'
                        }, {
                            id: 4,
                            name: 'Option 4 -- I want to get this'
                        }, {
                            id: 5,
                            name: 'Option 5 -- I want to get this'
                        }, {
                            id: 6,
                            name: 'Option 6 -- I want to get this'
                        }, {
                            id: 7,
                            name: 'Option 7 -- I want to get this'
                        }]
                    }
                }
            }]
        });
    }
});