extjs 4.1 如何重置项目选择器答案

【问题标题】：extjs 4.1 how to reset the itemselectorextjs 4.1 如何重置项目选择器
【发布时间】：2012-12-20 06:10:24
【问题描述】：

我正在使用 extjs 4.1.1a 开发一些应用程序。

我有一个由两个组合框和一个项目选择器组成的表单。

根据在第一个组合框中选择的值，itemselector 将从数据库中加载其数据。这工作正常。

我的问题是，如果我重新选择第一个组合框，新数据将与 itemselector 中显示的先前数据一起显示在 itemselector 中。即 itemselector 中显示的先前数据将保留在那里。

例如：名称“test1”由 ID 801,2088,5000 组成。在第一个组合框 itemselector 中选择 test1 时必须显示如下输出。

如果“test2”由 ids 6090,5040 组成。在第一个组合框 itemselector 中选择 test2 时必须显示如下输出。

问题是。如果我第一次从 firstcombobox 中选择“test1”，输出将按预期进行。如果我从 firstcombobox 重新选择“test2”，输出将如下所示。

如您所见，之前显示的数据（标记为红色矩形）仍保留在此处，同时显示新数据（标记为绿色矩形）。我希望每次重新选择第一个组合框，在 itemselector 上打印新数据之前删除 itemselector 中先前显示的数据。如何在每次重新选择第一个组合框时重置 itemselector？

【问题讨论】：

标签： extjs4.1

【解决方案1】：

您应该通过removeAll 命令从itemselector 的store 中删除所有项目。之后你应该loadstoreitemselector。

itemselector.store.removeAll();
itemselector.store.load();

【讨论】：

【解决方案2】：

以上任何解决方案都可以解决我的问题。我从 Sencha 论坛找到了解决方案。 https://www.sencha.com/forum/showthread.php?142276-closed-Ext-JS-4.0.2a-itemselector-not-reloading-the-store

在 itemselector.js 文件中，更改下面标记的行。

populateFromStore: function(store) {
    var fromStore = this.fromField.store;

    // Flag set when the fromStore has been loaded
    this.fromStorePopulated = true;

    // THIS LINE BELOW MUST BE CHANGED!!!!!!!!!!!!
    fromStore.loadData(store.getRange()); //fromStore.add(store.getRange()); 

    // setValue waits for the from Store to be loaded
    fromStore.fireEvent('load', fromStore);
},

【讨论】：

【解决方案3】：

你需要插入...

this.reset();

在插入数据的函数的头部。

举个例子……

Ext.override( Ext.ux.ItemSelector, {
    setValue: function(val) {
        this.reset();
        if (!val) return;
        val = val instanceof Array ? val : val.split(this.delimiter);
        var rec, i, id;
        for (i = 0; i < val.length; i++) {
            var vf = this.fromMultiselect.valueField;
            id = val[i];
            idx = this.toMultiselect.view.store.findBy(function(record){
                return record.data[vf] == id;
            });
            if (idx != -1) continue;            
            idx = this.fromMultiselect.view.store.findBy(function(record){
                return record.data[vf] == id;
            });
            rec = this.fromMultiselect.view.store.getAt(idx);
            if (rec) {
                this.toMultiselect.view.store.add(rec);
                this.fromMultiselect.view.store.remove(rec);
            }
        }
    }
});

【讨论】：

嗨伊恩阿特金。感谢您的回复.. 我正在从数据库中获取数据。我没有使用任何单独的函数来加载数据。我正在使用第一个组合框的“选择”事件处理程序来重新加载数据。以下是我用来将数据重新加载到 iteselector 的代码。听众：{选择：函数（组合，值）{itemserial = Ext.getCmp（'itemselector-field'）； itemerial.reset(); itemserial.store.load({ params: { 'groupname': combo.getValue() } }); }，但它不起作用。

【解决方案4】：

你明白了吗？当您通过参数存储加载后选择项目选择器的组合框第一个 stoe 为空时

例如

store.load(null), store.proxey.url='jso.php?id='+combobox.getrawvalue(), store.load();

就像那样，所以当你在你的组合框中选择一个值时，你在上面的代码中使用了一个侦听器到你的组合框，在你使用上面的代码时，在组合框中选择你的一些值，在你将一些值传递给之后，时间前存储为空json.php 然后存储加载响应，以便删除旧数据并在该存储中加载新数据

如果你发布你的代码，我会给出正确的代码

【讨论】：

【解决方案5】：

我在 ExtJS 4.2.1 中遇到了同样的问题。我通过在数据存储上调用 reload() 然后在数据存储的 reload() 回调中的项目选择器上使用空字符串调用 setValue() 来使其工作。

Ext.create("Ext.form.field.ComboBox", {
    // Other properties removed for brevity
    listeners: {
        change: function(field, newValue, oldValue, eOpts) {
            Ext.getStore("ExampleStore").reload({
                callback: function() {
                    Ext.getCmp("ExampleItemSelector").setValue("");
                }
            });
        }
    }
});

Ext.create("Ext.data.Store", {
    storeId: "ExampleStore",
    // Other properties removed for brevity
});

Ext.create("Ext.form.FormPanel", {
    // Other properties removed for brevity
    items:[{
        xtype: "itemselector",
        id: "ExampleItemSelector",
        // Other properties removed for brevity
    }]
});

对于任何好奇的人，我相当确信项目选择器的 populateFromStore() 函数中存在错误。调用该函数时，它会盲目地将绑定存储 (store) 中的所有值添加到内部存储 (fromStore)。我怀疑应该在致电fromStore.add() 之前致电fromStore.removeAll()。这是 ItemSelector.js 中的相关代码。

populateFromStore: function(store) {
    var fromStore = this.fromField.store;

    // Flag set when the fromStore has been loaded
    this.fromStorePopulated = true;

    fromStore.add(store.getRange());

    // setValue waits for the from Store to be loaded
    fromStore.fireEvent('load', fromStore);
},

2013 年 12 月 18 日编辑

如果您在项目选择器上配置了任何回调事件（例如 change），您可能希望在调用 setValue("") 时暂时禁用这些事件。例如：

var selector = Ext.getCmp("ExampleItemSelector");
selector.suspendEvents();
selector.setValue("");
selector.resumeEvents();

【讨论】：

【解决方案6】：

我遇到了同样的问题，最后我决定修改 extjs 源代码，不认为这是一个大问题，因为 extjs 本身在文件开头就说

请注意，此控件很可能仍作为示例，而不是核心 Ext 形式控制。但是，该 API 将在未来的版本中发生变化，因此不应该如此目前被视为最终的稳定 API。

基于此，正如 jstricker 所猜测的（遗憾的是，我没有阅读并花了一段时间才得出相同的结论），在 fromStore.add() 之前添加 fromStore.removeAll() 可以解决问题。

在问题之外（但我认为它也可能很有趣），此外，我还在 MultiSelect 配置中添加了 listConfig: me.listConfig（在 createList 中），这样就可以格式化每个项目的附加选项（例如如图像等）在“itemselector”选项 listConfig 中设置，如（不现实的）文档中所述。

【讨论】：

【解决方案7】：

需要重置ItemSelector 中使用的存储，可以通过设置如下所示的空对象来完成。还需要调用ItemSelector组件的clearValue()方法。

store.setData({});
ItemSelectorComponent.clearValue();

【讨论】：