extjs 4.1如何重置項目選擇器

Question

我正在使用extjs 4.1.1a來開發某些應用程序。

我有一個由兩個組合框和一個項目選擇器組成的表單。

根據第一個組合框中選擇的值，itemselector將從數據庫加載其數據。這工作正常。

我的問題是，如果我重新選擇第一個組合框，新的數據將顯示在itemselector中，以及之前顯示在itemseletor中的數據。即之前顯示在itemselector中的數據將保留在那裏。

例如：名稱「test1」由ID 801,2088,5000組成。在firstcombobox itemselector中選擇test1時必須顯示如下輸出。

，如果 「測試2」 由IDS 6090,5040的。在firstcombobox itemselector中選擇test2時必須顯示如下輸出。

問題是。第一次，如果我從firstcombobox中選擇「test1」，輸出將如預期那樣。如果我從firstcombobox重新選擇「test2」，輸出將如下所示。

，你可以看到，顯示以前的數據（紅色標示rectagle）仍然存在本身顯示的新數據（標有綠色矩形）。 我希望每次重新選擇第一個組合框時，在項目選擇器上打印新數據之前，要刪除項目選擇器中先前顯示的數據。 如何爲每個第一個組合框的重新選擇重置itemselector？

Answer 1

你需要插入...

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 2

是你長了嗎？ 當u選擇項目選擇的是組合框弗里斯特STOE後店負載UR通過對米

例如

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

一樣，所以當烏爾選擇值爲null在我的組合框中，時間烏爾在這個列表中使用了一個監聽器，在上面的代碼中使用了這個列表中的組合框，選擇你的組合框中的某個值，當你將一些值傳遞給json.php後，首先存儲空值爲空，然後存儲帶有響應的負載，舊數據將被刪除並在其中加載新數據店內

如果u發佈我們的代碼，我會給正確的代碼

Answer 3

您應該由removeAll命令刪除從itemselector的store所有項目。之後，您應該loadstore的itemselector。

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

Answer 4

我遇到了與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(); 

Answer 5

我有同樣的問題，最後我決定修改ExtJS的源代碼，不考慮它的一個重要問題，因爲ExtJS的本身它在文件

注意的開始說這種控制很可能仍然是一個例子，而不是作爲一個核心的內控形式控制。但是，API將在未來版本中發生變化，因此目前還不應將其視爲最終的穩定API。基於

上，作爲jstricker猜測（和可悲的是我沒看過，帶我一段時間才能到達相同的結論），加入fromStore.add前fromStore.removeAll（）（）解決了這個問題。

以外的問題（但我認爲它也可能很有趣），此外，我還在MultiSelect配置（在createList中）中添加了listConfig：me.listConfig，這樣就可以格式化每個項目的其他選項如圖像等），在'itemselector'中設置選項listConfig，如（（現實）文檔中所述）。

Answer 6

上述任何解決方案解決我的問題。 我找到了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); 
},