Question

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

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

根据第一个组合框中选择的值，itemselector将从数据库加载其数据。这很好。

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

例如：name“test1”由ids 801,2088,5000组成。在firstcombobox itemselector中选择test1时必须显示如下输出。

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

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

如您所见，显示的先前数据（以红色直尺标记）本身仍然显示新数据（标有绿色矩形）。我希望每次重新选择第一个组合框，先在itemselector中显示的数据在itemselector上打印新数据之前被删除。如何在每次重新选择第一个组合框时重置项目选择器？

Answer 1

您应该通过store命令从itemselector的{{1}}中删除所有项目。之后，您应该removeAll load的{{1}}。

store

Answer 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);
},

Answer 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);
            }
        }
    }
});

Answer 4

你知道了吗？当你选择那个项目选择器的组合框frist stoe在商店加载之后为空时传递参数

例如

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

就像那样当你在你的组合框中选择一个值时，你在上面的代码中使用了你的组合框中的你的组合框，你选择了你在组合框中的一些值，当你传递一些值后，时间frist商店获得null然后，json.php将响应存储加载，以便删除旧数据的时间并在该存储中加载新数据

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

Answer 5

我遇到了与ExtJS 4.2.1相同的问题。我通过在数据存储上调用reload()然后在数据存储的setValue()回调中的项选择器上使用空字符串reload()来实现它。

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.removeAll()之前应该拨打fromStore.add()。这是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);
},

编辑12/18/2013

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

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

Answer 6

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

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

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

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

Answer 7

需要重置... Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home, }, ...中使用的存储，这可以通过设置如下所示的Empty对象来完成。还需要调用ItemSelector组件的clearValue()方法。

ItemSelector

extjs 4.1如何重置itemselector

7 个答案: