Question

我试图根据下拉选项更改Ext.view.MultiSelector组件中的搜索选项，但是我尝试更新搜索选项时没有反映在UI中。以下是我尝试做的基本示例。

我不确定是否有一个函数我没有调用，或者一旦元素被绘制到画布上，搜索选项是否永远不会从商店重新加载？

Could not deduce (Fractional a) arising from the literal ‘4.2’ 
from the context (Num a)
bound by the type signature for g :: Num a => a -> a
at file.hs:9:6-20
Possible fix:
add (Fractional a) to the context of
the type signature for g :: Num a => a -> a

}）;

Answer 1

为此，您需要在select上使用ComboBox。在select活动内，您需要获取multiselector-search网格商店，然后您可以使用store的{{3}}。

在此 loadData 中，我使用FIDDLE，formpanel和multiselector创建了一个演示。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            title: 'Dynamically change the search options in Ext JS 5.1.3 MultiSelector',
            renderTo: Ext.getBody(),
            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 change this'
                        }]
                    }
                },
                showRemoveButton: true,
                columns: [{
                    text: "Name",
                    dataIndex: "name",
                    flex: 1
                }]
            }],
            tbar: ['->', {
                xtype: 'combobox',
                fieldLabel: 'Choose Data',
                store: {
                    fields: ['id', 'name', 'data'],
                    data: [{
                        id: 1,
                        name: 'Set 1',
                        data: [{
                            id: 1,
                            name: 'Option1 Data Set 1'
                        }, {
                            id: 2,
                            name: 'Option2 Data Set 1'
                        }]
                    }, {
                        id: 2,
                        name: 'Set 2',
                        data: [{
                            id: 1,
                            name: 'Option1 Data Set 2'
                        }, {
                            id: 2,
                            name: 'Option2 Data Set 2'
                        }]
                    }]
                },
                queryMode: 'local',
                displayField: 'name',
                valueField: 'id',
                listeners: {
                    select: function (combo, rec) {
                        var form = combo.up('form'),
                            store = form.down('multiselector grid').getStore(),
                            mltiSGrid = form.down('multiselector-search grid');

                        store.removeAll(); //Remove data from seleted data in grid
                        mltiSGrid.getSelectionModel().deselectAll(); //Deselect seleted record from search grid
                        mltiSGrid.getStore().loadData(rec.get('data'))

                    }
                }
            }],
            listeners: {
                afterrender: function (form) {
                    var plus = form.down('multiselector').tools[0];
                    //Fire click event of plus button for creating search view
                    plus.el.dom.click();
                    //Hide the multiselector-search
                    form.down('multiselector-search').hide();
                }
            }
        });
    }
});

动态更改Ext JS 5.1.3 MultiSelector中的搜索选项

1 个答案: