ExtJS——动态改变下拉/选择器答案

【问题标题】：ExtJS -- dynamically change dropdown/pickerExtJS——动态改变下拉/选择器
【发布时间】：2016-06-10 02:03:43
【问题描述】：

我有一个 ExtJS 6 应用程序。我正在使用带有自定义选择器的 TagField 组件，该选择器是一个带有工具栏和一些按钮的网格。在某些情况下，我想使用不同的选择器。要使用的拣货器将由商店记录数决定。

所以如果记录数 > 50 我想显示选择器 A，否则显示选择器 B。

我面临的问题是选择器是在其存储之前创建的（这是有道理的），并且一旦创建了选择器，它就无法更改 AFAIK。当商店加载并检查记录数时，更改选择器已经太晚了。

那么有什么办法可以销毁选择器并设置一个新的？我需要类似“setPicker()”方法的东西。

谢谢

【问题讨论】：

标签： extjs

【解决方案1】：

更实用的解决方案是创建两个TagField 组件。一个使用选择器 A，另一个使用选择器 B。然后您只需为 stores load 事件添加一个侦听器，并根据您的条件显示/隐藏适当的组件。

不是那么整洁，但易于实施。

【讨论】：

我也有同样的想法，但这对我们不起作用，因为这些字段都是动态的并且来自数据库，所以性能方面我们不能有额外的隐藏字段以防万一

【解决方案2】：

我只使用一个选择器并更改它的存储以保持简单。选择器（组合框）呈现后，您可以根据选择器 A 的商店的记录数来确定使用哪个商店

        {
        xtype: 'combobox',
        fieldLabel: 'Label',
        listeners: {
            afterrender: {
                fn: 'onComboboxAfterRender',
                scope: 'controller'
            }
        }
    }

在控制器中：

    onComboboxAfterRender: function(component, eOpts) {
    var store1 = this.getViewModel().getStore('store1'),
        store2 = this.getViewModel().getStore('store2');

    if(store1.count > 50){
        component.bindStore(store1);
    }else{
        component.bindStore(store2);
    }
}

【讨论】：

我不确定这如何解决我的问题，但由于更改下拉列表不再是我们的要求，我不会担心它:) 无论如何谢谢