代码之家 › 专栏 › 技术社区 › mandy1339

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

multi-select extjs

-1

mandy1339 · 技术社区 · 8 年前

文档提供的关于multiselector的信息非常有限,目前甚至没有显示示例代码。在我无法显示的工作项目中,多选择器被赋予一个存储,从中向用户显示项,然后在控制器中,它们使用同一个存储获取所选项。我不明白这是怎么回事。任何洞察都将不胜感激。

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

1 回复 | 直到 8 年前

halfer Jatin Pandey 8 年前

有两种方法可以从 MultiSelector

使用 multiSelector.getStore().getData().items -此存储区仅包含搜索弹出窗口中选定的数据。此存储将在搜索网格的选择更改时填充。
使用 multiselector.searchPopup.down('grid').getSelection()

两种方法都将返回您选择的记录 multiselector .

在这 FIDDLE ,我创建了一个演示 多选机 .

代码片段

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