2011-09-08 153 views
5

我有用於自動完成具有以下配置一個ExtJS組合框:ExtJS的4組合框自動完成

xtype:'combo', 
displayField: 'name', 
valueField:'id', 
store: storeVar, 
queryMode: 'remote', 
minChars:2, 
hideTrigger:true, 
forceSelection:true, 
typeAhead:true 

有面臨被我兩個問題:

一個。 如果用戶從服務器返回的列表中選擇一個值,但後來想要刪除該值並保持組合框爲空,那麼舊值也會重新出現在模糊處,而不允許組合框保持空白。在這種情況下,我怎樣才能在這個組合框中允許空值?我明白這可能是由於forceSelection:true,但我需要保持它的真實性,否則用戶可以鍵入任何隨機值。

b。 當服務器返回空列表時,我想顯示一條消息 - 找不到值。我試着這樣做,把這個值放在displayField實體中,即{id:'',name:'找不到值'}。但在這種情況下,用戶可以選擇此值並將其發送到服務器,而不是預期的值。因此,如何顯示空列表的消息?

難道有人請拋出這個光?

回答

3

對於上面的問題涉及到forceSelection這個問題,以下是建立可以服務於該預期目的的黑客:

Ext.override(Ext.form.field.ComboBox,{   
    assertValue: function() { 
     var me = this, 
      value = me.getRawValue(), 
      rec; 
     if (me.multiSelect) { 
      // For multiselect, check that the current displayed value matches the current 
      // selection, if it does not then revert to the most recent selection. 
      if (value !== me.getDisplayValue()) { 
       me.setValue(me.lastSelection); 
      } 
     } else { 
      // For single-select, match the displayed value to a record and select it, 
      // if it does not match a record then revert to the most recent selection. 
      rec = me.findRecordByDisplay(value); 
      if (rec) { 
       me.select(rec); 
      } else { 
       if(!value){ 
        me.setValue(''); 
       }else{ 
        me.setValue(me.lastSelection); 
       } 
      } 
     } 
     me.collapse(); 
    } 
}); 

這需要以後的ExtJS的庫文件已被列入被包括在內。

對於沒有找到的值顯示消息的其他問題 - emptyText - 按照Varun的建議正常工作。

希望這有助於somone尋找類似的東西。

2

我已經爲Ext JS 3.3.1做了這個。我不知道他們是否適用於Ext JS 4,但我猜他們應該這樣做。

對於第一個問題,請設置autoSelect : falseautoSelect默認設置爲true。這隻有在設置了allowBlank : true時纔有效。從文檔

真正選擇由數據存儲(默認 爲true)收集到的第一個結果。假值需要從 下拉列表中手動選擇以設置組件值,除非 (typeAheadDelay)的值爲真。

對於第二個問題,請使用listEmptyText。來自文檔

如果未找到任何項目,則顯示在數據視圖中的空文本。 (默認爲'')

乾杯。

+0

嗨瓦倫,感謝您的回答。 autoSelect實際上是突出顯示列表中的第一個條目,而不是用於刪除舊值並允許爲空的目的。而對於listEmptyText--我無法在ExtJS4文檔中找到此配置,可能是它已被取消。 所以我嘗試了他們兩個,但不能讓他們在ExtJs 4中工作,但仍然在尋找一些解決方案。 – netemp

+2

我剛剛檢查過文檔,現在可以通過listConfig的'emptyText'選項設置'listEmptyText'。試試看。我沒有自己嘗試過。再次檢查'allowBlank'屬性。這是唯一會導致問題1的配置。 –

+0

嗨,Varun,謝謝你的發帖。我確認listConfig下的emptyText工作成功。再次感謝。 至於空值,我覺得forceSelection:true重寫其他選項,因此,即使我允許allowBlank:true,但值列表中沒有Null值,則組合框會將舊值填充回來。解決這個問題的一種方法是從服務器端發送一個空的記錄,但不幸的是它沒有那麼優雅。 感謝您的所有幫助。 – netemp